@sc-360-v2/storefront-cms-library 0.5.71 → 0.5.73

package/dist/map.scss

@@ -1,1359 +1,1212 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-// Tooltip tip + placement, ported from the image hotspot (hotspot.scss) so both
-// elements anchor their tooltip the same way.
-//
-// $ics is the tip's border-width: a 5px border with no content box makes a 10px
-// triangle whose apex sits at the centre of the 10px box.
-$ics: 5px;
-$tip: $ics * 2;
-$bm: 30px;
-
-// Gap between the pin's edge and the tooltip. Held in a custom property so it can
-// track the pin's real size at runtime (see --_sf-tp-gp below) instead of the flat
-// 20px this file used to assume — that offset ignored Pin Size, so the tip drifted
-// off the pin as soon as the pin was resized.
-$g: var(--_sf-tp-gp);
-
-$overflowSelector: ".flex__overflow";
-
-// Each entry places the tooltip relative to the pin's centre, then pins the tip to
-// the tooltip edge that faces the pin. Because $g already absorbs the pin's
-// half-size, every tip offset below is a constant: the triangle always spans exactly
-// the gap, base on the tooltip edge and apex on the pin edge. The previous table did
-// this with hand-tuned multipliers (1.25 / 1.75 / 2.05 / 2.7 …) and, in five entries,
-// a stray top-level border-color that painted over the tooltip's own border colour.
-$data: (
-  // tooltip to the LEFT — tip on its right edge, pointing right
-  leftTop: (
-      transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
-      icon: (
-        right: -#{$tip},
-        bottom: calc(#{$bm} - #{$ics}),
-        border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
-      ),
-    ),
-  leftCenter: (
-    transform: translate(calc(-100% - #{$g}), -50%),
-    icon: (
-      right: -#{$tip},
-      top: calc(50% - #{$ics}),
-      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
-    ),
-  ),
-  leftBottom: (
-    transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
-    icon: (
-      right: -#{$tip},
-      top: calc(#{$bm} - #{$ics}),
-      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
-    ),
-  ),
-  // tooltip ABOVE — tip on its bottom edge, pointing down
-  topLeft: (
-      transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
-      icon: (
-        bottom: -#{$tip},
-        right: calc(#{$bm} - #{$ics}),
-        border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-      ),
-    ),
-  topCenter: (
-    transform: translate(-50%, calc(-100% - #{$g})),
-    icon: (
-      bottom: -#{$tip},
-      left: calc(50% - #{$ics}),
-      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-    ),
-  ),
-  topRight: (
-    transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
-    icon: (
-      bottom: -#{$tip},
-      left: calc(#{$bm} - #{$ics}),
-      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-    ),
-  ),
-  // tooltip to the RIGHT — tip on its left edge, pointing left
-  rightTop: (
-      transform: translate(#{$g}, calc(-100% + #{$bm})),
-      icon: (
-        left: -#{$tip},
-        bottom: calc(#{$bm} - #{$ics}),
-        border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
-      ),
-    ),
-  rightCenter: (
-    transform: translate(#{$g}, -50%),
-    icon: (
-      left: -#{$tip},
-      top: calc(50% - #{$ics}),
-      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
-    ),
-  ),
-  rightBottom: (
-    transform: translate(#{$g}, calc(0% - #{$bm})),
-    icon: (
-      left: -#{$tip},
-      top: calc(#{$bm} - #{$ics}),
-      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
-    ),
-  ),
-  // tooltip BELOW — tip on its top edge, pointing up
-  bottomLeft: (
-      transform: translate(calc(-100% + #{$bm}), #{$g}),
-      icon: (
-        top: -#{$tip},
-        right: calc(#{$bm} - #{$ics}),
-        border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-      ),
-    ),
-  bottomCenter: (
-    transform: translate(-50%, #{$g}),
-    icon: (
-      top: -#{$tip},
-      left: calc(50% - #{$ics}),
-      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    ),
-  ),
-  bottomRight: (
-    transform: translate(calc(0% - #{$bm}), #{$g}),
-    icon: (
-      top: -#{$tip},
-      left: calc(#{$bm} - #{$ics}),
-      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    ),
-  )
-);
-
-// Tooltip Design > Horizontal Alignment, translated for `text-align`. The control is
-// picked from the shared alignment list (flex-start | center | flex-end), and those
-// keywords mean nothing to text-align, so the two ends have to be mapped. The last two
-// entries are the pre-list values, still stored on pages saved before that fix.
-$tooltipTextAlign: (
-  "flex-start": left,
-  "center": center,
-  "flex-end": right,
-  "left": left,
-  "right": right,
-);
-
-[data-div-type="element"] {
-  &[data-element-type="map"] {
-    // Half the pin as it actually renders, and the gap the tooltip keeps from the
-    // pin's centre — both driven by the Pin Size control rather than a literal, so
-    // the tip lands on the pin at any size. Unlike the image hotspot there is no
-    // icon-only variant to handle: .hotspot is always sized by the pin size here,
-    // with the icon drawn inside it.
-    --_sf-ht-hf: calc(#{prepareMediaVariable(--_ctm-dn-pn-se-ht-se, 24px)} / 2);
-    --_sf-tp-gp: calc(var(--_sf-ht-hf) + #{$ics});
-
-    &[data-hotspot-position] {
-      @each $key, $value in $data {
-        &[data-hotspot-position="#{$key}"] {
-          .hotspot__tooltip {
-            @each $prop, $val in $value {
-              @if ($prop != icon) {
-                #{$prop}: #{$val};
-              } @else {
-                @each $key2, $value2 in $val {
-                  &:after {
-                    #{$key2}: #{$value2};
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-[data-div-type="element"] {
-  &[data-element-type="map"] {
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    --_aspect-ratio: calc(
-      1 *
-        (
-          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
-            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
-        )
-    );
-
-    & > .wrapper {
-      width: 100%;
-      // height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    // design > Map Widget Layout — where the title/description block sits relative to
-    // the map. Top/Bottom stack it (column), Left/Right put it beside the map (row).
-    &[data-text-container-position="Bottom"] .map-element {
-      flex-direction: column-reverse;
-    }
-    &[data-text-container-position="Left"],
-    &[data-text-container-position="Right"] {
-      .map-element {
-        flex-direction: row;
-
-        // Beside the map the header sizes to its content and the map takes the rest;
-        // stacked above/below it keeps spanning the full width.
-        > .gallery-header {
-          // Text Container Width. `auto` (the default) is the previous behaviour.
-          width: prepareMediaVariable(--_ctm-dn-mp-wt-lt-tt-cr-wh, auto);
-          // Shrinkable: the width defaults to 100%, which beside the map is a ceiling —
-          // without this the header would take the whole row and collapse the map.
-          flex: 0 1 auto;
-        }
-        > .map {
-          flex: 1 1 auto;
-        }
-      }
-    }
-    &[data-text-container-position="Right"] .map-element {
-      flex-direction: row-reverse;
-    }
-
-    // The alignment control switches between the horizontal list (left/center/right)
-    // for stacked layouts and the vertical one (top/center/bottom) for side-by-side.
-    // Stacked: the header spans the full width, so align the text inside it. Side by
-    // side: align the header on the flex cross axis.
-    &[data-text-container-alignment="left"] .map-element > .gallery-header {
-      text-align: left;
-    }
-    &[data-text-container-alignment="right"] .map-element > .gallery-header {
-      text-align: right;
-    }
-    &[data-text-container-alignment="top"] .map-element {
-      align-items: flex-start;
-    }
-    &[data-text-container-alignment="bottom"] .map-element {
-      align-items: flex-end;
-    }
-    &[data-text-container-alignment="center"] {
-      .map-element {
-        align-items: center;
-
-        > .gallery-header {
-          text-align: center;
-        }
-      }
-    }
-
-    &[data-hotspot-image-style-show-border="true"] {
-      .imageHotspot-element {
-        border-style: var(--_ctm-dn-ie-se-br-se);
-        border-color: var(--_ctm-dn-ie-se-br-cr);
-        border-width: var(--_ctm-dn-ie-se-br-wh);
-        border-radius: var(--_ctm-dn-ie-se-br-rs);
-      }
-    }
-    &[data-hotspot-tooltip-style-show-border="true"] {
-      .hotspot__tooltip {
-        border-style: var(--_ctm-dn-tp-dn-br-se);
-        border-color: var(--_ctm-dn-tp-dn-br-cr);
-        border-width: var(--_ctm-dn-tp-dn-br-wh);
-        border-radius: var(--_ctm-dn-tp-dn-br-rs);
-      }
-    }
-    &[data-hotspot-tooltip-style-show-shadow="true"] {
-      .hotspot__tooltip {
-        box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
-          var(--_ctm-dn-tp-dn-sw-cr);
-      }
-    }
-
-    // Tooltip Design > Horizontal Alignment, applied to the tooltip text itself.
-    //
-    // .text_box re-applies the control as align-items further down, which moves the
-    // title and the description only while they are narrower than the tooltip. A title
-    // long enough to wrap fills that wrapper, and a flex container cannot move a child
-    // that is already full width — which is why the control looked dead on the title
-    // while the shorter description still followed it.
-    //
-    // The value reaches the DOM as a data attribute because align-items keywords are
-    // not text-align keywords; Map Widget Layout's alignment takes the same route to
-    // .gallery-header above. The tooltip-level control wins over the per-text Alignment
-    // in Tooltip Text Design — it is the one that positions the text block.
-    @each $key, $align in $tooltipTextAlign {
-      &[data-tooltip-text-alignment="#{$key}"] {
-        .map-element .hotspot__tooltip .text_box > * {
-          text-align: $align;
-        }
-      }
-    }
-    &[data-hotspot-tooltip-image-style-show-border="true"] {
-      .tooltip__image {
-        border-style: var(--_ctm-dn-tp-ie-dn-br-se);
-        border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
-        border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
-        border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
-      }
-    }
-    &[data-hotspot-tooltip-image-style-show-shadow="true"] {
-      .tooltip__image {
-        box-shadow: var(
-          --_show-shadow,
-          var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
-            var(--_ctm-dn-tp-ie-dn-sw-cr)
-        );
-      }
-    }
-    &[data-hotspot-style-show-shadow="true"] {
-      .hotspot {
-        box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
-          var(--_ctm-dn-ht-se-sw-cr);
-      }
-    }
-    &[data-hotspot-style-show-border="true"] {
-      .hotspot {
-        border-style: var(--_ctm-dn-ht-se-br-se);
-        border-color: var(--_ctm-dn-ht-se-br-cr);
-        border-width: var(--_ctm-dn-ht-se-br-wh);
-        border-radius: var(--_ctm-dn-ht-se-br-rs);
-      }
-    }
-    .map-element {
-      --text-high-contrast-rgb-value: 49, 49, 49;
-      --detail-medium-contrast: rgb(234, 234, 234);
-      --text-body: rgb(54, 49, 61);
-
-      position: relative;
-      background-color: var(
-        --_ctm-mob-dn-mp-wt-bd-cr,
-        var(--_ctm-tab-dn-mp-wt-bd-cr, var(--_ctm-dn-mp-wt-bd-cr))
-      );
-
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-
-      display: flex;
-      flex-direction: column;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-
-      gap: var(
-        --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
-        var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg))
-      );
-      // Alignment comes from the [data-text-container-alignment] rules above. It used to
-      // read the *spacing* variable here, which is a length and never valid for
-      // align-content, so the control did nothing.
-
-      width: 100%;
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-      // Height is a fixed value from layout, so keep the border inside it rather than
-      // letting it push the widget past the size the user set.
-      box-sizing: border-box;
-
-      border-color: var(
-        --_ctm-mob-dn-mp-wt-br-cr,
-        var(--_ctm-tab-dn-mp-wt-br-cr, var(--_ctm-dn-mp-wt-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-mp-wt-br-se,
-        var(--_ctm-tab-dn-mp-wt-br-se, var(--_ctm-dn-mp-wt-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-mp-wt-br-wh,
-        var(--_ctm-tab-dn-mp-wt-br-wh, var(--_ctm-dn-mp-wt-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-mp-wt-br-rs,
-        var(--_ctm-tab-dn-mp-wt-br-rs, var(--_ctm-dn-mp-wt-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-mp-wt-sw-ae, var(--_ctm-tab-dn-mp-wt-sw-ae, var(--_ctm-dn-mp-wt-sw-ae)))
-          var(--_ctm-mob-dn-mp-wt-sw-br, var(--_ctm-tab-dn-mp-wt-sw-br, var(--_ctm-dn-mp-wt-sw-br)))
-          var(--_ctm-mob-dn-mp-wt-sw-sd, var(--_ctm-tab-dn-mp-wt-sw-sd, var(--_ctm-dn-mp-wt-sw-sd)))
-          var(--_ctm-mob-dn-mp-wt-sw-cr, var(--_ctm-tab-dn-mp-wt-sw-cr, var(--_ctm-dn-mp-wt-sw-cr)))
-      );
-
-      .gallery-header {
-        // Text alignment is driven by [data-text-container-alignment] above. The
-        // gallery variable that used to sit here is never emitted for a map element.
-        box-sizing: border-box;
-
-        // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
-        display: flex;
-        flex-direction: column;
-
-        gap: var(
-          --_ctm-mob-dn-mp-wt-tt-cr-lt-te-ad-dn-sg,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-mp-wt-tt-cr-lt-te-ad-dn-sg))
-        );
-        padding-block: var(
-          --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-vl-pg,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-vl-pg))
-        );
-        padding-inline: var(
-          --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-hl-pg,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-hl-pg))
-        );
-        // design > Map Widget Text Container Design. This used to read a
-        // `...-tt-cr-lt-tt-cr-bd-cr` variable — the Text Container *Layout* prefix with a
-        // property that section has never had — so the Fill control did nothing.
-        background-color: var(
-          --_ctm-mob-dn-mp-wt-tt-cr-dn-bd-cr,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-bd-cr))
-        );
-
-        // Text Container Width. 100% is the previous behaviour, so an unset width
-        // still spans the container.
-        width: prepareMediaVariable(--_ctm-dn-mp-wt-lt-tt-cr-wh, 100%);
-        // ...but never wider than the widget. The control accepts a percentage of the
-        // widget and a raw length, and either can be dialled past the widget's own
-        // width — a percentage over 100, or a length longer than the widget. Both used
-        // to push the header (and the text painted on it) out over whatever sits to the
-        // right of the map. Clamping here rather than only capping the control also
-        // covers pages already saved with an oversized width.
-        max-width: 100%;
-        // Lets it shrink to that width beside the map — a flex item defaults to
-        // min-width:auto and refuses to go below its longest word.
-        min-width: 0;
-        // Never shrink below the wrapped text — the map absorbs the remaining height
-        // instead, so a taller heading does not overflow the widget.
-        flex: 0 0 auto;
-        border-color: var(
-          --_ctm-mob-dn-mp-wt-tt-cr-dn-br-cr,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-dn-mp-wt-tt-cr-dn-br-se,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-se, var(--_ctm-dn-mp-wt-tt-cr-dn-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-dn-mp-wt-tt-cr-dn-br-wh,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-wh, var(--_ctm-dn-mp-wt-tt-cr-dn-br-wh))
-        );
-        border-radius: var(
-          --_ctm-mob-dn-mp-wt-tt-cr-dn-br-rs,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-rs, var(--_ctm-dn-mp-wt-tt-cr-dn-br-rs))
-        );
-        box-shadow: var(
-          --_show-shadow,
-          var(
-              --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-ae,
-              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-ae))
-            )
-            var(
-              --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-br,
-              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-br, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-sd,
-              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-cr,
-              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-cr))
-            )
-        );
-
-        & h3 {
-          color: var(
-            --_ctm-mob-dn-mp-wt-cr,
-            var(--_ctm-tab-dn-mp-wt-cr, var(--_ctm-dn-mp-wt-cr, var(--_tst-dn-mp-wt-cr)))
-          );
-          font-family: var(
-            --_ctm-mob-dn-mp-wt-ft-fy,
-            var(--_ctm-tab-dn-mp-wt-ft-fy, var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy)))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-mp-wt-tt-tm,
-            var(--_ctm-tab-dn-mp-wt-tt-tm, var(--_ctm-dn-mp-wt-tt-tm, var(--_tst-dn-mp-wt-tt-tm)))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-mp-wt-wd-wp,
-            var(--_ctm-tab-dn-mp-wt-wd-wp, var(--_ctm-dn-mp-wt-wd-wp, break-word))
-          );
-          word-break: var(
-            --_ctm-mob-dn-mp-wt-wd-bk,
-            var(--_ctm-tab-dn-mp-wt-wd-bk, var(--_ctm-dn-mp-wt-wd-bk, var(--_tst-dn-mp-wt-wd-bk)))
-          );
-          font-size: var(
-            --_ctm-mob-dn-mp-wt-ft-se,
-            var(--_ctm-tab-dn-mp-wt-ft-se, var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se)))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-mp-wt-ft-wt,
-            var(--_ctm-tab-dn-mp-wt-ft-wt, var(--_ctm-dn-mp-wt-ft-wt, var(--_tst-dn-mp-wt-ft-wt)))
-          );
-          font-style: var(
-            --_ctm-mob-dn-mp-wt-ft-se-ic,
-            var(
-              --_ctm-tab-dn-mp-wt-ft-se-ic,
-              var(--_ctm-dn-mp-wt-ft-se-ic, var(--_tst-dn-mp-wt-ft-se-ic))
-            )
-          );
-          text-align: var(
-            --_ctm-mob-dn-mp-wt-tt-an,
-            var(--_ctm-tab-dn-mp-wt-tt-an, var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an)))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-mp-wt-lr-sg,
-            var(--_ctm-tab-dn-mp-wt-lr-sg, var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg)))
-          );
-          line-height: var(
-            --_ctm-mob-dn-mp-wt-le-ht,
-            var(--_ctm-tab-dn-mp-wt-le-ht, var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht)))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-mp-wt-ue,
-            var(--_ctm-tab-dn-mp-wt-ue, var(--_ctm-dn-mp-wt-ue, var(--_tst-dn-mp-wt-ue)))
-          );
-        }
-
-        & p {
-          color: var(
-            --_ctm-mob-dn-mp-wt-cr-dc,
-            var(--_ctm-tab-dn-mp-wt-cr-dc, var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc)))
-          );
-          font-family: var(
-            --_ctm-mob-dn-mp-wt-ft-fy-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-ft-fy-dc,
-              var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc))
-            )
-          );
-          text-transform: var(
-            --_ctm-mob-dn-mp-wt-tt-tm-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-tt-tm-dc,
-              var(--_ctm-dn-mp-wt-tt-tm-dc, var(--_tst-dn-mp-wt-tt-tm-dc))
-            )
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-mp-wt-wd-wp-dc,
-            var(--_ctm-tab-dn-mp-wt-wd-wp-dc, var(--_ctm-dn-mp-wt-wd-wp-dc, break-word))
-          );
-          word-break: var(
-            --_ctm-mob-dn-mp-wt-wd-bk-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-wd-bk-dc,
-              var(--_ctm-dn-mp-wt-wd-bk-dc, var(--_tst-dn-mp-wt-wd-bk-dc))
-            )
-          );
-          font-size: var(
-            --_ctm-mob-dn-mp-wt-ft-se-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-ft-se-dc,
-              var(--_ctm-dn-mp-wt-ft-se-dc, var(--_tst-dn-mp-wt-ft-se-dc))
-            )
-          );
-          font-weight: var(
-            --_ctm-mob-dn-mp-wt-ft-wt-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-ft-wt-dc,
-              var(--_ctm-dn-mp-wt-ft-wt-dc, var(--_tst-dn-mp-wt-ft-wt-dc))
-            )
-          );
-          font-style: var(
-            --_ctm-mob-dn-mp-wt-ft-se-ic-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-ft-se-ic-dc,
-              var(--_ctm-dn-mp-wt-ft-se-ic-dc, var(--_tst-dn-mp-wt-ft-se-ic-dc))
-            )
-          );
-          text-align: var(
-            --_ctm-mob-dn-mp-wt-tt-an-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-tt-an-dc,
-              var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc))
-            )
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-mp-wt-lr-sg-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-lr-sg-dc,
-              var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc))
-            )
-          );
-          line-height: var(
-            --_ctm-mob-dn-mp-wt-le-ht-dc,
-            var(
-              --_ctm-tab-dn-mp-wt-le-ht-dc,
-              var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc))
-            )
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-mp-wt-ue-dc,
-            var(--_ctm-tab-dn-mp-wt-ue-dc, var(--_ctm-dn-mp-wt-ue-dc, var(--_tst-dn-mp-wt-ue-dc)))
-          );
-        }
-
-        // h3 {
-        //   margin-bottom: var(--_mb-4);
-        // }
-      }
-
-      .img__overlay {
-        background: var(
-          --_ctm-mob-dn-ie-se-oy-cr,
-          var(--_ctm-tab-dn-ie-se-oy-cr, var(--_ctm-dn-ie-se-oy-cr, var(--_tst-dn-ie-se-oy-cr)))
-        );
-
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        top: 0;
-      }
-      @keyframes scaleInOut {
-        0% {
-          transform: scale(1);
-        }
-        50% {
-          transform: scale(1.5);
-        }
-        100% {
-          transform: scale(1);
-        }
-      }
-      // Sonar ripple: each ring fades in at the pin size, expands and fades out.
-      @keyframes sonar {
-        0% {
-          transform: scale(1);
-          opacity: 0.6;
-        }
-        100% {
-          // Expands to ~1.8x the pin — clearly visible motion but still tight to the
-          // pin (not spreading far, per the earlier "going very long" feedback).
-          transform: scale(1.8);
-          opacity: 0;
-        }
-      }
-      .hotspot__container {
-        position: absolute;
-        // The marker element is already anchored at the location's lat/lng, so the pin
-        // and the tooltip both sit at its origin and are placed from there. The 43%/12%
-        // that used to be here came from the image hotspot's static-image layout and
-        // means nothing for a marker.
-        top: 0;
-        left: 0;
-        .hotspot__main {
-          position: relative;
-
-          // Divi Pixel-style sonar: a single bordered ring centred on the pin that
-          // expands and fades out on a loop. Only the ring animates — the pin/icon is
-          // static and kept on top via z-index. Rendered in JS only when the animation
-          // toggle is on. Duration comes from the frequency control (2s if none set), so
-          // the user's ms value drives the speed.
-          .svg-sonar-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
-            height: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
-            translate: -50% -50%;
-            pointer-events: none;
-            z-index: 1;
-
-            .sonar-circle {
-              position: absolute;
-              inset: 0;
-              border-radius: 50%;
-              // Ring colour follows the pin's background colour; visible fallback so the
-              // ripple never renders invisibly if the background var isn't emitted.
-              border: 1px solid prepareMediaVariable(--_ctm-dn-pn-se-bd-cr, #243dc6);
-              opacity: 0;
-              animation: sonar prepareMediaVariable(--_ctm-dn-pn-se-an-fy, 2s) linear infinite;
-            }
-
-            // Square pins get matching square rings; circle (default) stays 50%.
-            &[data-hotspot-shape="square"] .sonar-circle {
-              border-radius: 0;
-            }
-          }
-
-          .hotspot {
-            // background: var(--_ctm-dn-ht-se-bd-cr);
-            // height: var(--_ctm-dn-tp-tt-dn-ft-se);
-            // width: var(--_ctm-dn-tp-tt-dn-ft-se);
-            position: absolute;
-            // Above the sonar rings (container is z-index 1), so the pin/icon stays on top.
-            z-index: 2;
-            cursor: pointer;
-            // width: var(--_ctm-dn-ht-se-ht-se);
-            // height: var(--_ctm-dn-ht-se-ht-se);
-            // background-color: var(--_ctm-dn-ht-se-bd-cr);
-            width: var(
-              --_ctm-mob-dn-pn-se-ht-se,
-              var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
-            );
-            height: var(
-              --_ctm-mob-dn-pn-se-ht-se,
-              var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
-            );
-
-            height: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
-            width: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
-
-            position: absolute;
-            cursor: pointer;
-
-            display: flex;
-            align-items: center;
-            top: 50%;
-            left: 50%;
-
-            translate: -50% -50%;
-            box-sizing: border-box;
-            justify-content: center;
-            box-shadow: var(
-                --_ctm-mob-dn-pn-se-sw-ae,
-                var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
-              )
-              var(
-                --_ctm-mob-dn-pn-se-sw-br,
-                var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
-              )
-              var(
-                --_ctm-mob-dn-pn-se-sw-sd,
-                var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
-              )
-              var(
-                --_ctm-mob-dn-pn-se-sw-cr,
-                var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
-              );
-
-            // Pin corners follow the Shape control only — Circle or Square. There is no
-            // separate radius control for pins, and this used to be applied as an inline
-            // style from MarkersComponent, which outranked every rule in this file.
-            &[data-hotspot-shape="circle"] {
-              border-radius: 50%;
-            }
-            &[data-hotspot-shape="square"] {
-              border-radius: 0;
-            }
-
-            svg {
-              width: prepareMediaVariable(--_ctm-dn-pn-se-in-se);
-              height: prepareMediaVariable(--_ctm-dn-pn-se-in-se);
-
-              path[fill] {
-                fill: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
-              }
-              path[stroke] {
-                stroke: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
-                // Overrides the stroke-width presentation attribute baked into the icon markup.
-                stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
-              }
-            }
-
-            // One gate for "this pin has a styled box": always true for a shape pin,
-            // and for an icon pin only while its Background toggle is on. It used to
-            // also match [data-show-animation="true"], which meant turning the
-            // background off did nothing as soon as the animation was enabled.
-            &[data-show-shape-styles="true"] {
-              background-color: var(
-                --_ctm-mob-dn-pn-se-bd-cr,
-                var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
-              );
-
-              border-style: var(
-                --_ctm-mob-dn-pn-se-br-se,
-                var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
-              );
-              border-color: var(
-                --_ctm-mob-dn-pn-se-br-cr,
-                var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
-              );
-              border-width: var(
-                --_ctm-mob-dn-pn-se-br-wh,
-                var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
-              );
-              // No border-radius here — it would land after the shape rules above and
-              // undo Circle. The Shape control is the only thing that rounds a pin.
-              // box-shadow is applied unconditionally above so it works for all pins,
-              // independent of this shape/animation gate.
-            }
-          }
-        }
-      }
-      .hotspot__tooltip {
-        --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
-        position: absolute;
-        background: prepareMediaVariable(--_ctm-dn-tp-dn-bd-cr);
-        z-index: 1000;
-        // Sizing follows the image hotspot: the user's width/height with a floor under
-        // them. The caps are viewport-relative on purpose — this element's containing
-        // block is the Google marker, which is effectively zero-sized, so a percentage
-        // max-width would resolve to 0 and clamp the tooltip down to its min instead of
-        // holding the size the user set. The viewport cap still stops a desktop-sized
-        // tooltip spilling off a phone screen.
-        width: prepareMediaVariable(--_ctm-dn-tp-dn-tp-wh);
-        height: prepareMediaVariable(--_ctm-dn-tp-dn-tp-ht);
-        min-width: 100px;
-        min-height: 100px;
-        max-width: calc(100vw - 32px);
-        max-height: calc(100vh - 32px);
-        box-sizing: border-box;
-        // Placement comes from the [data-hotspot-position] transforms above, measured
-        // from the marker origin.
-        top: 0;
-        left: 0;
-        // No overflow here on purpose. The tip is an ::after sitting 10px outside the
-        // box, so any overflow value other than visible clips it away — that's what was
-        // eating the caret. The image hotspot scrolls its inner wrapper instead, and
-        // .text_box below does the same.
-        overflow: visible;
-
-        padding: 4px 8px;
-        display: flex;
-        justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
-        align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
-
-        &::after {
-          content: "";
-          position: absolute;
-
-          border-width: 5px;
-          border-style: solid;
-        }
-        // The scroll container, mirroring .tooltip__image_with_text on the image
-        // hotspot: long content scrolls in here rather than on the tooltip itself.
-        .text_box {
-          overflow-y: auto;
-          max-width: 100%;
-          width: 100%;
-          height: 100%;
-          // This wrapper fills the tooltip on both axes, so the justify-content /
-          // align-items set on .hotspot__tooltip above have nothing left to move —
-          // that is why both alignment controls looked dead. Same trap the image
-          // hotspot hit with .tooltip__image_with_text (hotspot.scss): the alignment
-          // has to be re-applied on the box that actually holds the title and the
-          // description. The stack is a column here, so the *vertical* control drives
-          // justify-content and the *horizontal* one drives align-items — the opposite
-          // mapping to the tooltip itself.
-          display: flex;
-          flex-direction: column;
-          justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
-          align-items: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
-
-          // align-items shrinks each child to its content width, so the text still
-          // needs a cap to wrap against instead of overflowing the tooltip.
-          > * {
-            max-width: 100%;
-          }
-
-          h6 {
-            font-size: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se);
-            font-family: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-fy);
-            color: prepareMediaVariable(--_ctm-dn-tp-tt-dn-cr);
-
-            font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-wt);
-            font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic);
-            text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg);
-            line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht);
-            // Underline and line-through are two independent toggles writing two
-            // variables, so they have to be composed, not chained. `var(--lh, <ue>)`
-            // never reaches its fallback: the schema declares linethrough with an
-            // empty value, and stylesToString emits it as `--…-lh: ;`, which is a
-            // *defined* empty value rather than a missing one — so var() substitutes
-            // nothing and the whole declaration is thrown away. Listing both keywords
-            // on text-decoration-line lets either, both or neither apply; when both
-            // resolve empty the declaration is invalid and the initial `none` stands,
-            // which is exactly the both-off case.
-            text-decoration-line: var(
-                --_ctm-mob-dn-tp-tt-dn-ue,
-                var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue,))
-              )
-              var(
-                --_ctm-mob-dn-tp-tt-dn-lh,
-                var(--_ctm-tab-dn-tp-tt-dn-lh, var(--_ctm-dn-tp-tt-dn-lh,))
-              );
-            // Same text properties the text element exposes (see text-temp-v2.scss).
-            text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-tm, none);
-            word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-wp, normal);
-            word-break: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-bk, normal);
-
-            // Text Overflow toggle in the typography panel; the line count rides in on
-            // --_sf-line-clamp from the element.
-            &#{$overflowSelector} {
-              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-            }
-          }
-          p {
-            font-size: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-dc);
-            color: prepareMediaVariable(--_ctm-dn-tp-tt-dn-cr-dc);
-            font-family: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-fy-dc);
-            font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-wt-dc);
-            font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
-            text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an-dc);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg-dc);
-            line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht-dc);
-            // Same composition as the title above.
-            text-decoration-line: var(
-                --_ctm-mob-dn-tp-tt-dn-ue-dc,
-                var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc,))
-              )
-              var(
-                --_ctm-mob-dn-tp-tt-dn-lh-dc,
-                var(--_ctm-tab-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-lh-dc,))
-              );
-            text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-tm-dc, none);
-            word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-wp-dc, normal);
-            word-break: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-bk-dc, normal);
-
-            &#{$overflowSelector} {
-              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
-            }
-          }
-        }
-        .tooltip__image {
-          width: 100%;
-          background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
-          transition: transform 0.3s ease-in-out;
-          display: flex;
-          justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
-          align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
-          img {
-            object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
-            height: -webkit-fill-available;
-            max-width: 100%;
-            rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
-            scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
-
-            &:hover {
-              &[data-on-img-hover="Zoom In"] {
-                transform: scale(1.08);
-              }
-              &[data-on-img-hover="Zoom Out"] {
-                transform: scale(0.92);
-              }
-            }
-          }
-        }
-      }
-      // .hotspot__main {
-      //   position: relative;
-      //   .hotspot {
-      //     background: var(
-      //       --_ctm-mob-dn-pn-se-bd-cr,
-      //       var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
-      //     );
-      //     border-style: var(
-      //       --_ctm-mob-dn-pn-se-br-se,
-      //       var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
-      //     );
-      //     border-color: var(
-      //       --_ctm-mob-dn-pn-se-br-cr,
-      //       var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
-      //     );
-      //     border-width: var(
-      //       --_ctm-mob-dn-pn-se-br-wh,
-      //       var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
-      //     );
-      //     border-radius: var(
-      //       --_ctm-mob-dn-pn-se-br-rs,
-      //       var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
-      //     );
-      //     box-shadow: var(
-      //       --_show-shadow,
-      //       var(
-      //           --_ctm-mob-dn-pn-se-sw-ae,
-      //           var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
-      //         )
-      //         var(
-      //           --_ctm-mob-dn-pn-se-sw-br,
-      //           var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
-      //         )
-      //         var(
-      //           --_ctm-mob-dn-pn-se-sw-sd,
-      //           var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
-      //         )
-      //         var(
-      //           --_ctm-mob-dn-pn-se-sw-cr,
-      //           var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
-      //         )
-      //     );
-
-      //     position: absolute;
-      //     cursor: pointer;
-      //     width: var(
-      //       --_ctm-mob-dn-pn-se-ht-se,
-      //       var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
-      //     );
-      //     height: var(
-      //       --_ctm-mob-dn-pn-se-ht-se,
-      //       var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
-      //     );
-      //     background-color: var(
-      //       --_ctm-mob-dn-pn-se-bd-cr,
-      //       var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
-      //     );
-
-      //     display: flex;
-      //     align-items: center;
-      //     top: 50%;
-      //     left: 50%;
-      //     transform: translate(-50%, -50%);
-      //     justify-content: center;
-      //     animation: scaleInOut
-      //       var(
-      //         --_ctm-mob-dn-pn-se-an-fy,
-      //         var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
-      //       )
-      //       infinite;
-
-      //     .icon {
-      //       display: var(--_sf-show-icon-ff, flex);
-
-      //       svg {
-      //         width: var(
-      //           --_ctm-mob-dn-pn-se-in-se,
-      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
-      //         );
-      //         height: var(
-      //           --_ctm-mob-dn-pn-se-in-se,
-      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
-      //         );
-
-      //         path {
-      //           stroke: var(
-      //             --_ctm-mob-dn-pn-se-in-c1,
-      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
-      //           );
-      // Overrides the stroke-width presentation attribute baked into the icon markup.
-      stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
-      //           fill: var(
-      //             --_ctm-mob-dn-pn-se-in-c1,
-      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
-      //           );
-      //         }
-      //       }
-      //     }
-      //   }
-      //   .hotspot__tooltip {
-      //     position: absolute;
-      //     background: var(
-      //       --_ctm-mob-dn-tp-dn-bd-cr,
-      //       var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
-      //     );
-      //     border-style: var(
-      //       --_ctm-mob-dn-tp-dn-br-se,
-      //       var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
-      //     );
-      //     border-color: var(
-      //       --_ctm-mob-dn-tp-dn-br-cr,
-      //       var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
-      //     );
-      //     border-width: var(
-      //       --_ctm-mob-dn-tp-dn-br-wh,
-      //       var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
-      //     );
-      //     border-radius: var(
-      //       --_ctm-mob-dn-tp-dn-br-rs,
-      //       var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
-      //     );
-
-      //     box-shadow: var(
-      //       --_show-shadow,
-      //       var(
-      //           --_ctm-mob-dn-tp-dn-sw-ae,
-      //           var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
-      //         )
-      //         var(
-      //           --_ctm-mob-dn-tp-dn-sw-br,
-      //           var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
-      //         )
-      //         var(
-      //           --_ctm-mob-dn-tp-dn-sw-sd,
-      //           var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
-      //         )
-      //         var(
-      //           --_ctm-mob-dn-tp-dn-sw-cr,
-      //           var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
-      //         )
-      //     );
-
-      //     z-index: 1000;
-      //     min-width: 100px;
-      //     width: var(
-      //       --_ctm-mob-dn-tp-dn-tp-wh,
-      //       var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
-      //     );
-      //     min-height: 100px;
-      //     height: var(
-      //       --_ctm-mob-dn-tp-dn-tp-ht,
-      //       var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
-      //     );
-
-      //     // border-radius: 4px;
-      //     // transform: translate(-10%, -130%);
-      //     left: -10px;
-      //     bottom: 7px;
-      //     padding: 4px 8px;
-      //     display: flex;
-      //     justify-content: var(
-      //       --_ctm-mob-dn-tp-dn-hl-at,
-      //       var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
-      //     );
-      //     align-items: var(
-      //       --_ctm-mob-dn-tp-dn-vl-at,
-      //       var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
-      //     );
-
-      //     &::after {
-      //       content: "";
-      //       position: absolute;
-      //       top: 100%;
-      //       left: 20px;
-      //       margin-left: -5px;
-      //       border-width: 5px;
-      //       border-style: solid;
-      //       border-color: var(
-      //           --_ctm-mob-dn-tp-dn-bd-cr,
-      //           var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
-      //         )
-      //         transparent transparent transparent;
-      //     }
-      //     span {
-      //       svg {
-      //         width: var(
-      //           --_ctm-mob-dn-pn-se-in-se,
-      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
-      //         );
-      //         height: var(
-      //           --_ctm-mob-dn-pn-se-in-se,
-      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
-      //         );
-      //         path {
-      //           stroke: var(
-      //             --_ctm-mob-dn-pn-se-in-c1,
-      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
-      //           );
-      // Overrides the stroke-width presentation attribute baked into the icon markup.
-      stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
-      //         }
-      //       }
-      //     }
-
-      //     .text_box {
-      //       h6 {
-      //         font-size: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ft-se,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
-      //         );
-      //         font-family: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ft-fy,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
-      //         );
-      //         color: var(
-      //           --_ctm-mob-dn-tp-tt-dn-cr,
-      //           var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
-      //         );
-
-      //         font-weight: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ft-wt,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
-      //         );
-      //         font-style: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
-      //         );
-      //         text-align: var(
-      //           --_ctm-mob-dn-tp-tt-dn-tt-an,
-      //           var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
-      //         );
-      //         letter-spacing: var(
-      //           --_ctm-mob-dn-tp-tt-dn-lr-sg,
-      //           var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
-      //         );
-      //         line-height: var(
-      //           --_ctm-mob-dn-tp-tt-dn-le-ht,
-      //           var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
-      //         );
-      //         text-decoration: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ue,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
-      //         );
-      //       }
-
-      //       p {
-      //         font-size: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
-      //         );
-      //         color: var(
-      //           --_ctm-mob-dn-tp-tt-dn-cr-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
-      //         );
-      //         font-family: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
-      //         );
-      //         font-weight: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
-      //         );
-      //         font-style: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
-      //         );
-      //         text-align: var(
-      //           --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
-      //         );
-      //         letter-spacing: var(
-      //           --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
-      //         );
-      //         line-height: var(
-      //           --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
-      //         );
-      //         text-decoration: var(
-      //           --_ctm-mob-dn-tp-tt-dn-ue-dc,
-      //           var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
-      //         );
-      //       }
-      //     }
-      //     .tooltip__image {
-      //       background-color: var(
-      //         --_ctm-mob-dn-tp-ie-dn-bd-cr,
-      //         var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
-      //       );
-      //       transition: transform 0.3s ease-in-out;
-      //       border-style: var(
-      //         --_ctm-mob-dn-tp-ie-dn-br-se,
-      //         var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
-      //       );
-      //       border-color: var(
-      //         --_ctm-mob-dn-tp-ie-dn-br-cr,
-      //         var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
-      //       );
-      //       border-width: var(
-      //         --_ctm-mob-dn-tp-ie-dn-br-wh,
-      //         var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
-      //       );
-      //       border-radius: var(
-      //         --_ctm-mob-dn-tp-ie-dn-br-rs,
-      //         var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
-      //       );
-      //       box-shadow: var(
-      //         --_show-shadow,
-      //         var(
-      //             --_ctm-mob-dn-tp-ie-dn-sw-ae,
-      //             var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
-      //           )
-      //           var(
-      //             --_ctm-mob-dn-tp-ie-dn-sw-br,
-      //             var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
-      //           )
-      //           var(
-      //             --_ctm-mob-dn-tp-ie-dn-sw-sd,
-      //             var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
-      //           )
-      //           var(
-      //             --_ctm-mob-dn-tp-ie-dn-sw-cr,
-      //             var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
-      //           )
-      //       );
-      //       display: flex;
-      //       justify-content: var(
-      //         --_ctm-mob-dn-tp-ie-dn-hl-at,
-      //         var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
-      //       );
-      //       align-items: var(
-      //         --_ctm-mob-dn-tp-ie-dn-vl-at,
-      //         var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
-      //       );
-
-      //       img {
-      //         object-fit: var(
-      //           --_ctm-mob-dn-tp-ie-dn-ft-os,
-      //           var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
-      //         );
-      //         max-width: 100%;
-      //         rotate: calc(
-      //           var(
-      //               --_ctm-mob-dn-tp-ie-dn-ud,
-      //               var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
-      //             ) *
-      //             1deg
-      //         );
-      //         scale: var(
-      //           --_ctm-mob-dn-tp-ie-dn-zm-ie,
-      //           var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
-      //         );
-      //       }
-      //     }
-      //   }
-      // }
-
-      .map {
-        width: 100%;
-        height: 100%;
-        min-width: 0;
-        // Yields height to the heading rather than demanding the full 100%.
-        flex: 1 1 auto;
-        min-height: 0;
-        // design > Map Style. The map box paints its own border from that section's
-        // scope (`--_ctm-dn-mp-se-*`), independent of the widget's border on
-        // `.map-element` and the header's on `.gallery-header`. `overflow: hidden` so a
-        // rounded corner actually clips the tiles inside it.
-        overflow: hidden;
-        border-color: prepareMediaVariable(--_ctm-dn-mp-ie-br-cr);
-        border-style: prepareMediaVariable(--_ctm-dn-mp-ie-br-se);
-        border-width: prepareMediaVariable(--_ctm-dn-mp-ie-br-wh);
-        border-radius: prepareMediaVariable(--_ctm-dn-mp-ie-br-rs);
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-
-    // "Show Border" / "Show Shadow" switches. Each design section paints its box from
-    // CSS variables, so the switches reach the stylesheet as data attributes and the
-    // matching border-width / box-shadow is zeroed here. Kept at the end of the block
-    // and matched to the same selector depth as the rules they override — anywhere
-    // earlier and the section rules above would win the tie on source order.
-    &[data-map-widget-border="false"] .map-element {
-      border-width: 0;
-      border-style: none;
-    }
-    &[data-map-widget-shadow="false"] .map-element {
-      box-shadow: none;
-    }
-    &[data-text-container-border="false"] .map-element > .gallery-header {
-      border-width: 0;
-      border-style: none;
-    }
-    &[data-text-container-shadow="false"] .map-element > .gallery-header {
-      box-shadow: none;
-    }
-    &[data-pin-border="false"] .map-element .hotspot__container .hotspot__main .hotspot {
-      border-width: 0;
-      border-style: none;
-    }
-    &[data-pin-shadow="false"] .map-element .hotspot__container .hotspot__main .hotspot {
-      box-shadow: none;
-    }
-    &[data-map-border="false"] .map-element .map {
-      border-width: 0;
-      border-style: none;
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+// Tooltip tip + placement, ported from the image hotspot (hotspot.scss) so both
+// elements anchor their tooltip the same way.
+//
+// $ics is the tip's border-width: a 5px border with no content box makes a 10px
+// triangle whose apex sits at the centre of the 10px box.
+$ics: 5px;
+$tip: $ics * 2;
+$bm: 30px;
+
+// Gap between the pin's edge and the tooltip. Held in a custom property so it can
+// track the pin's real size at runtime (see --_sf-tp-gp below) instead of the flat
+// 20px this file used to assume — that offset ignored Pin Size, so the tip drifted
+// off the pin as soon as the pin was resized.
+$g: var(--_sf-tp-gp);
+
+$overflowSelector: ".flex__overflow";
+
+// Each entry places the tooltip relative to the pin's centre, then pins the tip to
+// the tooltip edge that faces the pin. Because $g already absorbs the pin's
+// half-size, every tip offset below is a constant: the triangle always spans exactly
+// the gap, base on the tooltip edge and apex on the pin edge. The previous table did
+// this with hand-tuned multipliers (1.25 / 1.75 / 2.05 / 2.7 …) and, in five entries,
+// a stray top-level border-color that painted over the tooltip's own border colour.
+$data: (
+  // tooltip to the LEFT — tip on its right edge, pointing right
+  leftTop: (transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
+    icon: (right: -#{$tip},
+      bottom: calc(#{$bm} - #{$ics}),
+      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+    ),
+  ),
+  leftCenter: (transform: translate(calc(-100% - #{$g}), -50%),
+    icon: (right: -#{$tip},
+      top: calc(50% - #{$ics}),
+      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+    ),
+  ),
+  leftBottom: (transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
+    icon: (right: -#{$tip},
+      top: calc(#{$bm} - #{$ics}),
+      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+    ),
+  ),
+  // tooltip ABOVE — tip on its bottom edge, pointing down
+  topLeft: (transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
+    icon: (bottom: -#{$tip},
+      right: calc(#{$bm} - #{$ics}),
+      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    ),
+  ),
+  topCenter: (transform: translate(-50%, calc(-100% - #{$g})),
+    icon: (bottom: -#{$tip},
+      left: calc(50% - #{$ics}),
+      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    ),
+  ),
+  topRight: (transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
+    icon: (bottom: -#{$tip},
+      left: calc(#{$bm} - #{$ics}),
+      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    ),
+  ),
+  // tooltip to the RIGHT — tip on its left edge, pointing left
+  rightTop: (transform: translate(#{$g}, calc(-100% + #{$bm})),
+    icon: (left: -#{$tip},
+      bottom: calc(#{$bm} - #{$ics}),
+      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+    ),
+  ),
+  rightCenter: (transform: translate(#{$g}, -50%),
+    icon: (left: -#{$tip},
+      top: calc(50% - #{$ics}),
+      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+    ),
+  ),
+  rightBottom: (transform: translate(#{$g}, calc(0% - #{$bm})),
+    icon: (left: -#{$tip},
+      top: calc(#{$bm} - #{$ics}),
+      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+    ),
+  ),
+  // tooltip BELOW — tip on its top edge, pointing up
+  bottomLeft: (transform: translate(calc(-100% + #{$bm}), #{$g}),
+    icon: (top: -#{$tip},
+      right: calc(#{$bm} - #{$ics}),
+      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    ),
+  ),
+  bottomCenter: (transform: translate(-50%, #{$g}),
+    icon: (top: -#{$tip},
+      left: calc(50% - #{$ics}),
+      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    ),
+  ),
+  bottomRight: (transform: translate(calc(0% - #{$bm}), #{$g}),
+    icon: (top: -#{$tip},
+      left: calc(#{$bm} - #{$ics}),
+      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    ),
+  )
+);
+
+// Tooltip Design > Horizontal Alignment, translated for `text-align`. The control is
+// picked from the shared alignment list (flex-start | center | flex-end), and those
+// keywords mean nothing to text-align, so the two ends have to be mapped. The last two
+// entries are the pre-list values, still stored on pages saved before that fix.
+$tooltipTextAlign: (
+  "flex-start": left,
+  "center": center,
+  "flex-end": right,
+  "left": left,
+  "right": right,
+);
+
+[data-div-type="element"] {
+  &[data-element-type="map"] {
+    // Half the pin as it actually renders, and the gap the tooltip keeps from the
+    // pin's centre — both driven by the Pin Size control rather than a literal, so
+    // the tip lands on the pin at any size. Unlike the image hotspot there is no
+    // icon-only variant to handle: .hotspot is always sized by the pin size here,
+    // with the icon drawn inside it.
+    --_sf-ht-hf: calc(#{prepareMediaVariable(--_ctm-dn-pn-se-ht-se, 24px)} / 2);
+    --_sf-tp-gp: calc(var(--_sf-ht-hf) + #{$ics});
+
+    &[data-hotspot-position] {
+      @each $key, $value in $data {
+        &[data-hotspot-position="#{$key}"] {
+          .hotspot__tooltip {
+            @each $prop, $val in $value {
+              @if ($prop !=icon) {
+                #{$prop}: #{$val};
+              }
+
+              @else {
+                @each $key2, $value2 in $val {
+                  &:after {
+                    #{$key2}: #{$value2};
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+[data-div-type="element"] {
+  &[data-element-type="map"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    width: var(--_sf-el-wh-st-mx,
+        calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))));
+
+    &>.wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    // design > Map Widget Layout — where the title/description block sits relative to
+    // the map. Top/Bottom stack it (column), Left/Right put it beside the map (row).
+    &[data-text-container-position="Bottom"] .map-element {
+      flex-direction: column-reverse;
+    }
+
+    &[data-text-container-position="Left"],
+    &[data-text-container-position="Right"] {
+      .map-element {
+        flex-direction: row;
+
+        // Beside the map the header sizes to its content and the map takes the rest;
+        // stacked above/below it keeps spanning the full width.
+        >.gallery-header {
+          // Text Container Width. `auto` (the default) is the previous behaviour.
+          width: prepareMediaVariable(--_ctm-dn-mp-wt-lt-tt-cr-wh, auto);
+          // Shrinkable: the width defaults to 100%, which beside the map is a ceiling —
+          // without this the header would take the whole row and collapse the map.
+          flex: 0 1 auto;
+        }
+
+        >.map {
+          flex: 1 1 auto;
+        }
+      }
+    }
+
+    &[data-text-container-position="Right"] .map-element {
+      flex-direction: row-reverse;
+    }
+
+    // The alignment control switches between the horizontal list (left/center/right)
+    // for stacked layouts and the vertical one (top/center/bottom) for side-by-side.
+    // Stacked: the header spans the full width, so align the text inside it. Side by
+    // side: align the header on the flex cross axis.
+    &[data-text-container-alignment="left"] .map-element>.gallery-header {
+      text-align: left;
+    }
+
+    &[data-text-container-alignment="right"] .map-element>.gallery-header {
+      text-align: right;
+    }
+
+    &[data-text-container-alignment="top"] .map-element {
+      align-items: flex-start;
+    }
+
+    &[data-text-container-alignment="bottom"] .map-element {
+      align-items: flex-end;
+    }
+
+    &[data-text-container-alignment="center"] {
+      .map-element {
+        align-items: center;
+
+        >.gallery-header {
+          text-align: center;
+        }
+      }
+    }
+
+    &[data-hotspot-image-style-show-border="true"] {
+      .imageHotspot-element {
+        border-style: var(--_ctm-dn-ie-se-br-se);
+        border-color: var(--_ctm-dn-ie-se-br-cr);
+        border-width: var(--_ctm-dn-ie-se-br-wh);
+        border-radius: var(--_ctm-dn-ie-se-br-rs);
+      }
+    }
+
+    &[data-hotspot-tooltip-style-show-border="true"] {
+      .hotspot__tooltip {
+        border-style: var(--_ctm-dn-tp-dn-br-se);
+        border-color: var(--_ctm-dn-tp-dn-br-cr);
+        border-width: var(--_ctm-dn-tp-dn-br-wh);
+        border-radius: var(--_ctm-dn-tp-dn-br-rs);
+      }
+    }
+
+    &[data-hotspot-tooltip-style-show-shadow="true"] {
+      .hotspot__tooltip {
+        box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd) var(--_ctm-dn-tp-dn-sw-cr);
+      }
+    }
+
+    // Tooltip Design > Horizontal Alignment, applied to the tooltip text itself.
+    //
+    // .text_box re-applies the control as align-items further down, which moves the
+    // title and the description only while they are narrower than the tooltip. A title
+    // long enough to wrap fills that wrapper, and a flex container cannot move a child
+    // that is already full width — which is why the control looked dead on the title
+    // while the shorter description still followed it.
+    //
+    // The value reaches the DOM as a data attribute because align-items keywords are
+    // not text-align keywords; Map Widget Layout's alignment takes the same route to
+    // .gallery-header above. The tooltip-level control wins over the per-text Alignment
+    // in Tooltip Text Design — it is the one that positions the text block.
+    @each $key, $align in $tooltipTextAlign {
+      &[data-tooltip-text-alignment="#{$key}"] {
+        .map-element .hotspot__tooltip .text_box>* {
+          text-align: $align;
+        }
+      }
+    }
+
+    &[data-hotspot-tooltip-image-style-show-border="true"] {
+      .tooltip__image {
+        border-style: var(--_ctm-dn-tp-ie-dn-br-se);
+        border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
+        border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
+        border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
+      }
+    }
+
+    &[data-hotspot-tooltip-image-style-show-shadow="true"] {
+      .tooltip__image {
+        box-shadow: var(--_show-shadow,
+            var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd) var(--_ctm-dn-tp-ie-dn-sw-cr));
+      }
+    }
+
+    &[data-hotspot-style-show-shadow="true"] {
+      .hotspot {
+        box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd) var(--_ctm-dn-ht-se-sw-cr);
+      }
+    }
+
+    &[data-hotspot-style-show-border="true"] {
+      .hotspot {
+        border-style: var(--_ctm-dn-ht-se-br-se);
+        border-color: var(--_ctm-dn-ht-se-br-cr);
+        border-width: var(--_ctm-dn-ht-se-br-wh);
+        border-radius: var(--_ctm-dn-ht-se-br-rs);
+      }
+    }
+
+    .map-element {
+      --text-high-contrast-rgb-value: 49, 49, 49;
+      --detail-medium-contrast: rgb(234, 234, 234);
+      --text-body: rgb(54, 49, 61);
+
+      position: relative;
+      background-color: var(--_ctm-mob-dn-mp-wt-bd-cr,
+          var(--_ctm-tab-dn-mp-wt-bd-cr, var(--_ctm-dn-mp-wt-bd-cr)));
+
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
+      display: flex;
+      flex-direction: column;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+
+      gap: var(--_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
+          var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg)));
+      // Alignment comes from the [data-text-container-alignment] rules above. It used to
+      // read the *spacing* variable here, which is a length and never valid for
+      // align-content, so the control did nothing.
+
+      width: 100%;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+      // Height is a fixed value from layout, so keep the border inside it rather than
+      // letting it push the widget past the size the user set.
+      box-sizing: border-box;
+
+      border-color: var(--_ctm-mob-dn-mp-wt-br-cr,
+          var(--_ctm-tab-dn-mp-wt-br-cr, var(--_ctm-dn-mp-wt-br-cr)));
+
+      border-style: var(--_ctm-mob-dn-mp-wt-br-se,
+          var(--_ctm-tab-dn-mp-wt-br-se, var(--_ctm-dn-mp-wt-br-se)));
+
+      border-width: var(--_ctm-mob-dn-mp-wt-br-wh,
+          var(--_ctm-tab-dn-mp-wt-br-wh, var(--_ctm-dn-mp-wt-br-wh)));
+
+      border-radius: var(--_ctm-mob-dn-mp-wt-br-rs,
+          var(--_ctm-tab-dn-mp-wt-br-rs, var(--_ctm-dn-mp-wt-br-rs)));
+
+      box-shadow: var(--_show-shadow,
+          var(--_ctm-mob-dn-mp-wt-sw-ae, var(--_ctm-tab-dn-mp-wt-sw-ae, var(--_ctm-dn-mp-wt-sw-ae))) var(--_ctm-mob-dn-mp-wt-sw-br, var(--_ctm-tab-dn-mp-wt-sw-br, var(--_ctm-dn-mp-wt-sw-br))) var(--_ctm-mob-dn-mp-wt-sw-sd, var(--_ctm-tab-dn-mp-wt-sw-sd, var(--_ctm-dn-mp-wt-sw-sd))) var(--_ctm-mob-dn-mp-wt-sw-cr, var(--_ctm-tab-dn-mp-wt-sw-cr, var(--_ctm-dn-mp-wt-sw-cr))));
+
+      .gallery-header {
+        // Text alignment is driven by [data-text-container-alignment] above. The
+        // gallery variable that used to sit here is never emitted for a map element.
+        box-sizing: border-box;
+
+        // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
+        display: flex;
+        flex-direction: column;
+
+        gap: var(--_ctm-mob-dn-mp-wt-tt-cr-lt-te-ad-dn-sg,
+            var(--_ctm-tab-dn-mp-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-mp-wt-tt-cr-lt-te-ad-dn-sg)));
+        padding-block: var(--_ctm-mob-dn-mp-wt-tt-cr-lt-tt-vl-pg,
+            var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-vl-pg)));
+        padding-inline: var(--_ctm-mob-dn-mp-wt-tt-cr-lt-tt-hl-pg,
+            var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-hl-pg)));
+        // design > Map Widget Text Container Design. This used to read a
+        // `...-tt-cr-lt-tt-cr-bd-cr` variable — the Text Container *Layout* prefix with a
+        // property that section has never had — so the Fill control did nothing.
+        background-color: var(--_ctm-mob-dn-mp-wt-tt-cr-dn-bd-cr,
+            var(--_ctm-tab-dn-mp-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-bd-cr)));
+
+        // Text Container Width. 100% is the previous behaviour, so an unset width
+        // still spans the container.
+        width: prepareMediaVariable(--_ctm-dn-mp-wt-lt-tt-cr-wh, 100%);
+        // ...but never wider than the widget. The control accepts a percentage of the
+        // widget and a raw length, and either can be dialled past the widget's own
+        // width — a percentage over 100, or a length longer than the widget. Both used
+        // to push the header (and the text painted on it) out over whatever sits to the
+        // right of the map. Clamping here rather than only capping the control also
+        // covers pages already saved with an oversized width.
+        max-width: 100%;
+        // Lets it shrink to that width beside the map — a flex item defaults to
+        // min-width:auto and refuses to go below its longest word.
+        min-width: 0;
+        // Never shrink below the wrapped text — the map absorbs the remaining height
+        // instead, so a taller heading does not overflow the widget.
+        flex: 0 0 auto;
+        border-color: var(--_ctm-mob-dn-mp-wt-tt-cr-dn-br-cr,
+            var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr)));
+        border-style: var(--_ctm-mob-dn-mp-wt-tt-cr-dn-br-se,
+            var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-se, var(--_ctm-dn-mp-wt-tt-cr-dn-br-se)));
+        border-width: var(--_ctm-mob-dn-mp-wt-tt-cr-dn-br-wh,
+            var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-wh, var(--_ctm-dn-mp-wt-tt-cr-dn-br-wh)));
+        border-radius: var(--_ctm-mob-dn-mp-wt-tt-cr-dn-br-rs,
+            var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-rs, var(--_ctm-dn-mp-wt-tt-cr-dn-br-rs)));
+        box-shadow: var(--_show-shadow,
+            var(--_ctm-mob-dn-mp-wt-tt-cr-dn-sw-ae,
+              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-mp-wt-tt-cr-dn-sw-br,
+              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-br, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-mp-wt-tt-cr-dn-sw-sd,
+              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-mp-wt-tt-cr-dn-sw-cr,
+              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-cr))));
+
+        & h3 {
+          color: var(--_ctm-mob-dn-mp-wt-cr,
+              var(--_ctm-tab-dn-mp-wt-cr, var(--_ctm-dn-mp-wt-cr, var(--_tst-dn-mp-wt-cr))));
+          font-family: var(--_ctm-mob-dn-mp-wt-ft-fy,
+              var(--_ctm-tab-dn-mp-wt-ft-fy, var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy))));
+          text-transform: var(--_ctm-mob-dn-mp-wt-tt-tm,
+              var(--_ctm-tab-dn-mp-wt-tt-tm, var(--_ctm-dn-mp-wt-tt-tm, var(--_tst-dn-mp-wt-tt-tm))));
+          word-wrap: var(--_ctm-mob-dn-mp-wt-wd-wp,
+              var(--_ctm-tab-dn-mp-wt-wd-wp, var(--_ctm-dn-mp-wt-wd-wp, break-word)));
+          word-break: var(--_ctm-mob-dn-mp-wt-wd-bk,
+              var(--_ctm-tab-dn-mp-wt-wd-bk, var(--_ctm-dn-mp-wt-wd-bk, var(--_tst-dn-mp-wt-wd-bk))));
+          font-size: var(--_ctm-mob-dn-mp-wt-ft-se,
+              var(--_ctm-tab-dn-mp-wt-ft-se, var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se))));
+          font-weight: var(--_ctm-mob-dn-mp-wt-ft-wt,
+              var(--_ctm-tab-dn-mp-wt-ft-wt, var(--_ctm-dn-mp-wt-ft-wt, var(--_tst-dn-mp-wt-ft-wt))));
+          font-style: var(--_ctm-mob-dn-mp-wt-ft-se-ic,
+              var(--_ctm-tab-dn-mp-wt-ft-se-ic,
+                var(--_ctm-dn-mp-wt-ft-se-ic, var(--_tst-dn-mp-wt-ft-se-ic))));
+          text-align: var(--_ctm-mob-dn-mp-wt-tt-an,
+              var(--_ctm-tab-dn-mp-wt-tt-an, var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an))));
+          letter-spacing: var(--_ctm-mob-dn-mp-wt-lr-sg,
+              var(--_ctm-tab-dn-mp-wt-lr-sg, var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg))));
+          line-height: var(--_ctm-mob-dn-mp-wt-le-ht,
+              var(--_ctm-tab-dn-mp-wt-le-ht, var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht))));
+          text-decoration: var(--_ctm-mob-dn-mp-wt-ue,
+              var(--_ctm-tab-dn-mp-wt-ue, var(--_ctm-dn-mp-wt-ue, var(--_tst-dn-mp-wt-ue))));
+        }
+
+        & p {
+          color: var(--_ctm-mob-dn-mp-wt-cr-dc,
+              var(--_ctm-tab-dn-mp-wt-cr-dc, var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc))));
+          font-family: var(--_ctm-mob-dn-mp-wt-ft-fy-dc,
+              var(--_ctm-tab-dn-mp-wt-ft-fy-dc,
+                var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc))));
+          text-transform: var(--_ctm-mob-dn-mp-wt-tt-tm-dc,
+              var(--_ctm-tab-dn-mp-wt-tt-tm-dc,
+                var(--_ctm-dn-mp-wt-tt-tm-dc, var(--_tst-dn-mp-wt-tt-tm-dc))));
+          word-wrap: var(--_ctm-mob-dn-mp-wt-wd-wp-dc,
+              var(--_ctm-tab-dn-mp-wt-wd-wp-dc, var(--_ctm-dn-mp-wt-wd-wp-dc, break-word)));
+          word-break: var(--_ctm-mob-dn-mp-wt-wd-bk-dc,
+              var(--_ctm-tab-dn-mp-wt-wd-bk-dc,
+                var(--_ctm-dn-mp-wt-wd-bk-dc, var(--_tst-dn-mp-wt-wd-bk-dc))));
+          font-size: var(--_ctm-mob-dn-mp-wt-ft-se-dc,
+              var(--_ctm-tab-dn-mp-wt-ft-se-dc,
+                var(--_ctm-dn-mp-wt-ft-se-dc, var(--_tst-dn-mp-wt-ft-se-dc))));
+          font-weight: var(--_ctm-mob-dn-mp-wt-ft-wt-dc,
+              var(--_ctm-tab-dn-mp-wt-ft-wt-dc,
+                var(--_ctm-dn-mp-wt-ft-wt-dc, var(--_tst-dn-mp-wt-ft-wt-dc))));
+          font-style: var(--_ctm-mob-dn-mp-wt-ft-se-ic-dc,
+              var(--_ctm-tab-dn-mp-wt-ft-se-ic-dc,
+                var(--_ctm-dn-mp-wt-ft-se-ic-dc, var(--_tst-dn-mp-wt-ft-se-ic-dc))));
+          text-align: var(--_ctm-mob-dn-mp-wt-tt-an-dc,
+              var(--_ctm-tab-dn-mp-wt-tt-an-dc,
+                var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc))));
+          letter-spacing: var(--_ctm-mob-dn-mp-wt-lr-sg-dc,
+              var(--_ctm-tab-dn-mp-wt-lr-sg-dc,
+                var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc))));
+          line-height: var(--_ctm-mob-dn-mp-wt-le-ht-dc,
+              var(--_ctm-tab-dn-mp-wt-le-ht-dc,
+                var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc))));
+          text-decoration: var(--_ctm-mob-dn-mp-wt-ue-dc,
+              var(--_ctm-tab-dn-mp-wt-ue-dc, var(--_ctm-dn-mp-wt-ue-dc, var(--_tst-dn-mp-wt-ue-dc))));
+        }
+
+        // h3 {
+        //   margin-bottom: var(--_mb-4);
+        // }
+      }
+
+      .img__overlay {
+        background: var(--_ctm-mob-dn-ie-se-oy-cr,
+            var(--_ctm-tab-dn-ie-se-oy-cr, var(--_ctm-dn-ie-se-oy-cr, var(--_tst-dn-ie-se-oy-cr))));
+
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+      }
+
+      @keyframes scaleInOut {
+        0% {
+          transform: scale(1);
+        }
+
+        50% {
+          transform: scale(1.5);
+        }
+
+        100% {
+          transform: scale(1);
+        }
+      }
+
+      // Sonar ripple: each ring fades in at the pin size, expands and fades out.
+      @keyframes sonar {
+        0% {
+          transform: scale(1);
+          opacity: 0.6;
+        }
+
+        100% {
+          // Expands to ~1.8x the pin — clearly visible motion but still tight to the
+          // pin (not spreading far, per the earlier "going very long" feedback).
+          transform: scale(1.8);
+          opacity: 0;
+        }
+      }
+
+      .hotspot__container {
+        position: absolute;
+        // The marker element is already anchored at the location's lat/lng, so the pin
+        // and the tooltip both sit at its origin and are placed from there. The 43%/12%
+        // that used to be here came from the image hotspot's static-image layout and
+        // means nothing for a marker.
+        top: 0;
+        left: 0;
+
+        .hotspot__main {
+          position: relative;
+
+          // Divi Pixel-style sonar: a single bordered ring centred on the pin that
+          // expands and fades out on a loop. Only the ring animates — the pin/icon is
+          // static and kept on top via z-index. Rendered in JS only when the animation
+          // toggle is on. Duration comes from the frequency control (2s if none set), so
+          // the user's ms value drives the speed.
+          .svg-sonar-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
+            height: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
+            translate: -50% -50%;
+            pointer-events: none;
+            z-index: 1;
+
+            .sonar-circle {
+              position: absolute;
+              inset: 0;
+              border-radius: 50%;
+              // Ring colour follows the pin's background colour; visible fallback so the
+              // ripple never renders invisibly if the background var isn't emitted.
+              border: 1px solid prepareMediaVariable(--_ctm-dn-pn-se-bd-cr, #243dc6);
+              opacity: 0;
+              animation: sonar prepareMediaVariable(--_ctm-dn-pn-se-an-fy, 2s) linear infinite;
+            }
+
+            // Square pins get matching square rings; circle (default) stays 50%.
+            &[data-hotspot-shape="square"] .sonar-circle {
+              border-radius: 0;
+            }
+          }
+
+          .hotspot {
+            // background: var(--_ctm-dn-ht-se-bd-cr);
+            // height: var(--_ctm-dn-tp-tt-dn-ft-se);
+            // width: var(--_ctm-dn-tp-tt-dn-ft-se);
+            position: absolute;
+            // Above the sonar rings (container is z-index 1), so the pin/icon stays on top.
+            z-index: 2;
+            cursor: pointer;
+            // width: var(--_ctm-dn-ht-se-ht-se);
+            // height: var(--_ctm-dn-ht-se-ht-se);
+            // background-color: var(--_ctm-dn-ht-se-bd-cr);
+            width: var(--_ctm-mob-dn-pn-se-ht-se,
+                var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se)));
+            height: var(--_ctm-mob-dn-pn-se-ht-se,
+                var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se)));
+
+            height: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
+            width: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
+
+            position: absolute;
+            cursor: pointer;
+
+            display: flex;
+            align-items: center;
+            top: 50%;
+            left: 50%;
+
+            translate: -50% -50%;
+            box-sizing: border-box;
+            justify-content: center;
+            box-shadow: var(--_ctm-mob-dn-pn-se-sw-ae,
+                var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))) var(--_ctm-mob-dn-pn-se-sw-br,
+                var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))) var(--_ctm-mob-dn-pn-se-sw-sd,
+                var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))) var(--_ctm-mob-dn-pn-se-sw-cr,
+                var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr)));
+
+            // Pin corners follow the Shape control only — Circle or Square. There is no
+            // separate radius control for pins, and this used to be applied as an inline
+            // style from MarkersComponent, which outranked every rule in this file.
+            &[data-hotspot-shape="circle"] {
+              border-radius: 50%;
+            }
+
+            &[data-hotspot-shape="square"] {
+              border-radius: 0;
+            }
+
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-pn-se-in-se);
+              height: prepareMediaVariable(--_ctm-dn-pn-se-in-se);
+
+              path[fill] {
+                fill: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
+              }
+
+              path[stroke] {
+                stroke: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
+              }
+            }
+
+            // One gate for "this pin has a styled box": always true for a shape pin,
+            // and for an icon pin only while its Background toggle is on. It used to
+            // also match [data-show-animation="true"], which meant turning the
+            // background off did nothing as soon as the animation was enabled.
+            &[data-show-shape-styles="true"] {
+              background-color: var(--_ctm-mob-dn-pn-se-bd-cr,
+                  var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr)));
+
+              border-style: var(--_ctm-mob-dn-pn-se-br-se,
+                  var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se)));
+              border-color: var(--_ctm-mob-dn-pn-se-br-cr,
+                  var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr)));
+              border-width: var(--_ctm-mob-dn-pn-se-br-wh,
+                  var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh)));
+              // No border-radius here — it would land after the shape rules above and
+              // undo Circle. The Shape control is the only thing that rounds a pin.
+              // box-shadow is applied unconditionally above so it works for all pins,
+              // independent of this shape/animation gate.
+            }
+          }
+        }
+      }
+
+      .hotspot__tooltip {
+        --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
+        position: absolute;
+        background: prepareMediaVariable(--_ctm-dn-tp-dn-bd-cr);
+        z-index: 1000;
+        // Sizing follows the image hotspot: the user's width/height with a floor under
+        // them. The caps are viewport-relative on purpose — this element's containing
+        // block is the Google marker, which is effectively zero-sized, so a percentage
+        // max-width would resolve to 0 and clamp the tooltip down to its min instead of
+        // holding the size the user set. The viewport cap still stops a desktop-sized
+        // tooltip spilling off a phone screen.
+        width: prepareMediaVariable(--_ctm-dn-tp-dn-tp-wh);
+        height: prepareMediaVariable(--_ctm-dn-tp-dn-tp-ht);
+        min-width: 100px;
+        min-height: 100px;
+        max-width: calc(100vw - 32px);
+        max-height: calc(100vh - 32px);
+        box-sizing: border-box;
+        // Placement comes from the [data-hotspot-position] transforms above, measured
+        // from the marker origin.
+        top: 0;
+        left: 0;
+        // No overflow here on purpose. The tip is an ::after sitting 10px outside the
+        // box, so any overflow value other than visible clips it away — that's what was
+        // eating the caret. The image hotspot scrolls its inner wrapper instead, and
+        // .text_box below does the same.
+        overflow: visible;
+
+        padding: 4px 8px;
+        display: flex;
+        justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
+        align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
+
+        &::after {
+          content: "";
+          position: absolute;
+
+          border-width: 5px;
+          border-style: solid;
+        }
+
+        // The scroll container, mirroring .tooltip__image_with_text on the image
+        // hotspot: long content scrolls in here rather than on the tooltip itself.
+        .text_box {
+          overflow-y: auto;
+          max-width: 100%;
+          width: 100%;
+          height: 100%;
+          // This wrapper fills the tooltip on both axes, so the justify-content /
+          // align-items set on .hotspot__tooltip above have nothing left to move —
+          // that is why both alignment controls looked dead. Same trap the image
+          // hotspot hit with .tooltip__image_with_text (hotspot.scss): the alignment
+          // has to be re-applied on the box that actually holds the title and the
+          // description. The stack is a column here, so the *vertical* control drives
+          // justify-content and the *horizontal* one drives align-items — the opposite
+          // mapping to the tooltip itself.
+          display: flex;
+          flex-direction: column;
+          justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
+          align-items: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
+
+          // align-items shrinks each child to its content width, so the text still
+          // needs a cap to wrap against instead of overflowing the tooltip.
+          >* {
+            max-width: 100%;
+          }
+
+          h6 {
+            font-size: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se);
+            font-family: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-fy);
+            color: prepareMediaVariable(--_ctm-dn-tp-tt-dn-cr);
+
+            font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-wt);
+            font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic);
+            text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg);
+            line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht);
+            // Underline and line-through are two independent toggles writing two
+            // variables, so they have to be composed, not chained. `var(--lh, <ue>)`
+            // never reaches its fallback: the schema declares linethrough with an
+            // empty value, and stylesToString emits it as `--…-lh: ;`, which is a
+            // *defined* empty value rather than a missing one — so var() substitutes
+            // nothing and the whole declaration is thrown away. Listing both keywords
+            // on text-decoration-line lets either, both or neither apply; when both
+            // resolve empty the declaration is invalid and the initial `none` stands,
+            // which is exactly the both-off case.
+            text-decoration-line: var(--_ctm-mob-dn-tp-tt-dn-ue,
+                var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue, ))) var(--_ctm-mob-dn-tp-tt-dn-lh,
+                var(--_ctm-tab-dn-tp-tt-dn-lh, var(--_ctm-dn-tp-tt-dn-lh, )));
+            // Same text properties the text element exposes (see text-temp-v2.scss).
+            text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-tm, none);
+            word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-wp, normal);
+            word-break: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-bk, normal);
+
+            // Text Overflow toggle in the typography panel; the line count rides in on
+            // --_sf-line-clamp from the element.
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
+          }
+
+          p {
+            font-size: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-dc);
+            color: prepareMediaVariable(--_ctm-dn-tp-tt-dn-cr-dc);
+            font-family: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-fy-dc);
+            font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-wt-dc);
+            font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
+            text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an-dc);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg-dc);
+            line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht-dc);
+            // Same composition as the title above.
+            text-decoration-line: var(--_ctm-mob-dn-tp-tt-dn-ue-dc,
+                var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc, ))) var(--_ctm-mob-dn-tp-tt-dn-lh-dc,
+                var(--_ctm-tab-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-lh-dc, )));
+            text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-tm-dc, none);
+            word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-wp-dc, normal);
+            word-break: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-bk-dc, normal);
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+            }
+          }
+        }
+
+        .tooltip__image {
+          width: 100%;
+          background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
+          transition: transform 0.3s ease-in-out;
+          display: flex;
+          justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
+          align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
+
+          img {
+            object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
+            height: -webkit-fill-available;
+            max-width: 100%;
+            rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
+            scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
+
+            &:hover {
+              &[data-on-img-hover="Zoom In"] {
+                transform: scale(1.08);
+              }
+
+              &[data-on-img-hover="Zoom Out"] {
+                transform: scale(0.92);
+              }
+            }
+          }
+        }
+      }
+
+      // .hotspot__main {
+      //   position: relative;
+      //   .hotspot {
+      //     background: var(
+      //       --_ctm-mob-dn-pn-se-bd-cr,
+      //       var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
+      //     );
+      //     border-style: var(
+      //       --_ctm-mob-dn-pn-se-br-se,
+      //       var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
+      //     );
+      //     border-color: var(
+      //       --_ctm-mob-dn-pn-se-br-cr,
+      //       var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
+      //     );
+      //     border-width: var(
+      //       --_ctm-mob-dn-pn-se-br-wh,
+      //       var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
+      //     );
+      //     border-radius: var(
+      //       --_ctm-mob-dn-pn-se-br-rs,
+      //       var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
+      //     );
+      //     box-shadow: var(
+      //       --_show-shadow,
+      //       var(
+      //           --_ctm-mob-dn-pn-se-sw-ae,
+      //           var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
+      //         )
+      //         var(
+      //           --_ctm-mob-dn-pn-se-sw-br,
+      //           var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
+      //         )
+      //         var(
+      //           --_ctm-mob-dn-pn-se-sw-sd,
+      //           var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
+      //         )
+      //         var(
+      //           --_ctm-mob-dn-pn-se-sw-cr,
+      //           var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
+      //         )
+      //     );
+
+      //     position: absolute;
+      //     cursor: pointer;
+      //     width: var(
+      //       --_ctm-mob-dn-pn-se-ht-se,
+      //       var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
+      //     );
+      //     height: var(
+      //       --_ctm-mob-dn-pn-se-ht-se,
+      //       var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
+      //     );
+      //     background-color: var(
+      //       --_ctm-mob-dn-pn-se-bd-cr,
+      //       var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
+      //     );
+
+      //     display: flex;
+      //     align-items: center;
+      //     top: 50%;
+      //     left: 50%;
+      //     transform: translate(-50%, -50%);
+      //     justify-content: center;
+      //     animation: scaleInOut
+      //       var(
+      //         --_ctm-mob-dn-pn-se-an-fy,
+      //         var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
+      //       )
+      //       infinite;
+
+      //     .icon {
+      //       display: var(--_sf-show-icon-ff, flex);
+
+      //       svg {
+      //         width: var(
+      //           --_ctm-mob-dn-pn-se-in-se,
+      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
+      //         );
+      //         height: var(
+      //           --_ctm-mob-dn-pn-se-in-se,
+      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
+      //         );
+
+      //         path {
+      //           stroke: var(
+      //             --_ctm-mob-dn-pn-se-in-c1,
+      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
+      //           );
+      // Overrides the stroke-width presentation attribute baked into the icon markup.
+      stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
+      //           fill: var(
+      //             --_ctm-mob-dn-pn-se-in-c1,
+      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
+      //           );
+      //         }
+      //       }
+      //     }
+      //   }
+      //   .hotspot__tooltip {
+      //     position: absolute;
+      //     background: var(
+      //       --_ctm-mob-dn-tp-dn-bd-cr,
+      //       var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
+      //     );
+      //     border-style: var(
+      //       --_ctm-mob-dn-tp-dn-br-se,
+      //       var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
+      //     );
+      //     border-color: var(
+      //       --_ctm-mob-dn-tp-dn-br-cr,
+      //       var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
+      //     );
+      //     border-width: var(
+      //       --_ctm-mob-dn-tp-dn-br-wh,
+      //       var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
+      //     );
+      //     border-radius: var(
+      //       --_ctm-mob-dn-tp-dn-br-rs,
+      //       var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
+      //     );
+
+      //     box-shadow: var(
+      //       --_show-shadow,
+      //       var(
+      //           --_ctm-mob-dn-tp-dn-sw-ae,
+      //           var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
+      //         )
+      //         var(
+      //           --_ctm-mob-dn-tp-dn-sw-br,
+      //           var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
+      //         )
+      //         var(
+      //           --_ctm-mob-dn-tp-dn-sw-sd,
+      //           var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
+      //         )
+      //         var(
+      //           --_ctm-mob-dn-tp-dn-sw-cr,
+      //           var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
+      //         )
+      //     );
+
+      //     z-index: 1000;
+      //     min-width: 100px;
+      //     width: var(
+      //       --_ctm-mob-dn-tp-dn-tp-wh,
+      //       var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
+      //     );
+      //     min-height: 100px;
+      //     height: var(
+      //       --_ctm-mob-dn-tp-dn-tp-ht,
+      //       var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
+      //     );
+
+      //     // border-radius: 4px;
+      //     // transform: translate(-10%, -130%);
+      //     left: -10px;
+      //     bottom: 7px;
+      //     padding: 4px 8px;
+      //     display: flex;
+      //     justify-content: var(
+      //       --_ctm-mob-dn-tp-dn-hl-at,
+      //       var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
+      //     );
+      //     align-items: var(
+      //       --_ctm-mob-dn-tp-dn-vl-at,
+      //       var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
+      //     );
+
+      //     &::after {
+      //       content: "";
+      //       position: absolute;
+      //       top: 100%;
+      //       left: 20px;
+      //       margin-left: -5px;
+      //       border-width: 5px;
+      //       border-style: solid;
+      //       border-color: var(
+      //           --_ctm-mob-dn-tp-dn-bd-cr,
+      //           var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
+      //         )
+      //         transparent transparent transparent;
+      //     }
+      //     span {
+      //       svg {
+      //         width: var(
+      //           --_ctm-mob-dn-pn-se-in-se,
+      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
+      //         );
+      //         height: var(
+      //           --_ctm-mob-dn-pn-se-in-se,
+      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
+      //         );
+      //         path {
+      //           stroke: var(
+      //             --_ctm-mob-dn-pn-se-in-c1,
+      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
+      //           );
+      // Overrides the stroke-width presentation attribute baked into the icon markup.
+      stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
+      //         }
+      //       }
+      //     }
+
+      //     .text_box {
+      //       h6 {
+      //         font-size: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ft-se,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
+      //         );
+      //         font-family: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ft-fy,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
+      //         );
+      //         color: var(
+      //           --_ctm-mob-dn-tp-tt-dn-cr,
+      //           var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
+      //         );
+
+      //         font-weight: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ft-wt,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
+      //         );
+      //         font-style: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
+      //         );
+      //         text-align: var(
+      //           --_ctm-mob-dn-tp-tt-dn-tt-an,
+      //           var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
+      //         );
+      //         letter-spacing: var(
+      //           --_ctm-mob-dn-tp-tt-dn-lr-sg,
+      //           var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
+      //         );
+      //         line-height: var(
+      //           --_ctm-mob-dn-tp-tt-dn-le-ht,
+      //           var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
+      //         );
+      //         text-decoration: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ue,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
+      //         );
+      //       }
+
+      //       p {
+      //         font-size: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
+      //         );
+      //         color: var(
+      //           --_ctm-mob-dn-tp-tt-dn-cr-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
+      //         );
+      //         font-family: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
+      //         );
+      //         font-weight: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
+      //         );
+      //         font-style: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
+      //         );
+      //         text-align: var(
+      //           --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
+      //         );
+      //         letter-spacing: var(
+      //           --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
+      //         );
+      //         line-height: var(
+      //           --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
+      //         );
+      //         text-decoration: var(
+      //           --_ctm-mob-dn-tp-tt-dn-ue-dc,
+      //           var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
+      //         );
+      //       }
+      //     }
+      //     .tooltip__image {
+      //       background-color: var(
+      //         --_ctm-mob-dn-tp-ie-dn-bd-cr,
+      //         var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
+      //       );
+      //       transition: transform 0.3s ease-in-out;
+      //       border-style: var(
+      //         --_ctm-mob-dn-tp-ie-dn-br-se,
+      //         var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
+      //       );
+      //       border-color: var(
+      //         --_ctm-mob-dn-tp-ie-dn-br-cr,
+      //         var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
+      //       );
+      //       border-width: var(
+      //         --_ctm-mob-dn-tp-ie-dn-br-wh,
+      //         var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
+      //       );
+      //       border-radius: var(
+      //         --_ctm-mob-dn-tp-ie-dn-br-rs,
+      //         var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
+      //       );
+      //       box-shadow: var(
+      //         --_show-shadow,
+      //         var(
+      //             --_ctm-mob-dn-tp-ie-dn-sw-ae,
+      //             var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
+      //           )
+      //           var(
+      //             --_ctm-mob-dn-tp-ie-dn-sw-br,
+      //             var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
+      //           )
+      //           var(
+      //             --_ctm-mob-dn-tp-ie-dn-sw-sd,
+      //             var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
+      //           )
+      //           var(
+      //             --_ctm-mob-dn-tp-ie-dn-sw-cr,
+      //             var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
+      //           )
+      //       );
+      //       display: flex;
+      //       justify-content: var(
+      //         --_ctm-mob-dn-tp-ie-dn-hl-at,
+      //         var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
+      //       );
+      //       align-items: var(
+      //         --_ctm-mob-dn-tp-ie-dn-vl-at,
+      //         var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
+      //       );
+
+      //       img {
+      //         object-fit: var(
+      //           --_ctm-mob-dn-tp-ie-dn-ft-os,
+      //           var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
+      //         );
+      //         max-width: 100%;
+      //         rotate: calc(
+      //           var(
+      //               --_ctm-mob-dn-tp-ie-dn-ud,
+      //               var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
+      //             ) *
+      //             1deg
+      //         );
+      //         scale: var(
+      //           --_ctm-mob-dn-tp-ie-dn-zm-ie,
+      //           var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
+      //         );
+      //       }
+      //     }
+      //   }
+      // }
+
+      .map {
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        // Yields height to the heading rather than demanding the full 100%.
+        flex: 1 1 auto;
+        min-height: 0;
+        // design > Map Style. The map box paints its own border from that section's
+        // scope (`--_ctm-dn-mp-se-*`), independent of the widget's border on
+        // `.map-element` and the header's on `.gallery-header`. `overflow: hidden` so a
+        // rounded corner actually clips the tiles inside it.
+        overflow: hidden;
+        border-color: prepareMediaVariable(--_ctm-dn-mp-ie-br-cr);
+        border-style: prepareMediaVariable(--_ctm-dn-mp-ie-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-mp-ie-br-wh);
+        border-radius: prepareMediaVariable(--_ctm-dn-mp-ie-br-rs);
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    // "Show Border" / "Show Shadow" switches. Each design section paints its box from
+    // CSS variables, so the switches reach the stylesheet as data attributes and the
+    // matching border-width / box-shadow is zeroed here. Kept at the end of the block
+    // and matched to the same selector depth as the rules they override — anywhere
+    // earlier and the section rules above would win the tie on source order.
+    &[data-map-widget-border="false"] .map-element {
+      border-width: 0;
+      border-style: none;
+    }
+
+    &[data-map-widget-shadow="false"] .map-element {
+      box-shadow: none;
+    }
+
+    &[data-text-container-border="false"] .map-element>.gallery-header {
+      border-width: 0;
+      border-style: none;
+    }
+
+    &[data-text-container-shadow="false"] .map-element>.gallery-header {
+      box-shadow: none;
+    }
+
+    &[data-pin-border="false"] .map-element .hotspot__container .hotspot__main .hotspot {
+      border-width: 0;
+      border-style: none;
+    }
+
+    &[data-pin-shadow="false"] .map-element .hotspot__container .hotspot__main .hotspot {
+      box-shadow: none;
+    }
+
+    &[data-map-border="false"] .map-element .map {
+      border-width: 0;
+      border-style: none;
+    }
+  }
+}