@sc-360-v2/storefront-cms-library 0.5.60 → 0.5.62

package/dist/map.scss

@@ -27,77 +27,101 @@ $overflowSelector: ".flex__overflow";
 // 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),
+  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},
+  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},
+  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,
+  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},
+  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},
+  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,
+  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},
+  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},
+  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,
+  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},
+  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},
+  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,
     ),
@@ -119,11 +143,9 @@ $data: (
         &[data-hotspot-position="#{$key}"] {
           .hotspot__tooltip {
             @each $prop, $val in $value {
-              @if ($prop !=icon) {
+              @if ($prop != icon) {
                 #{$prop}: #{$val};
-              }
-
-              @else {
+              } @else {
                 @each $key2, $value2 in $val {
                   &:after {
                     #{$key2}: #{$value2};
@@ -137,7 +159,6 @@ $data: (
     }
   }
 }
-
 [data-div-type="element"] {
   &[data-element-type="map"] {
     // width: var(--_lt-wh);
@@ -145,17 +166,26 @@ $data: (
     // 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)))));
+    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)))));
+    --_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 {
+    & > .wrapper {
       width: 100%;
       // height: 100%;
     }
-
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
@@ -165,7 +195,6 @@ $data: (
     &[data-text-container-position="Bottom"] .map-element {
       flex-direction: column-reverse;
     }
-
     &[data-text-container-position="Left"],
     &[data-text-container-position="Right"] {
       .map-element {
@@ -173,17 +202,18 @@ $data: (
 
         // 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 {
-          width: auto;
-          flex: 0 0 auto;
+        > .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 {
+        > .map {
           flex: 1 1 auto;
         }
       }
     }
-
     &[data-text-container-position="Right"] .map-element {
       flex-direction: row-reverse;
     }
@@ -192,27 +222,23 @@ $data: (
     // 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 {
+    &[data-text-container-alignment="left"] .map-element > .gallery-header {
       text-align: left;
     }
-
-    &[data-text-container-alignment="right"] .map-element>.gallery-header {
+    &[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 {
+        > .gallery-header {
           text-align: center;
         }
       }
@@ -226,7 +252,6 @@ $data: (
         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);
@@ -235,13 +260,12 @@ $data: (
         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);
+        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);
       }
     }
-
     &[data-hotspot-tooltip-image-style-show-border="true"] {
       .tooltip__image {
         border-style: var(--_ctm-dn-tp-ie-dn-br-se);
@@ -250,20 +274,21 @@ $data: (
         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));
+        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);
+        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);
@@ -272,15 +297,16 @@ $data: (
         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)));
+      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)));
 
@@ -288,8 +314,10 @@ $data: (
       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)));
+      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.
@@ -300,20 +328,33 @@ $data: (
       // 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))));
+      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
@@ -324,97 +365,204 @@ $data: (
         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)));
+        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)));
-
-        width: 100%;
-        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))));
+        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%);
+        // 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, var(--_tst-dn-mp-wt-wd-wp))));
-          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))));
+          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, var(--_tst-dn-mp-wt-wd-wp-dc))));
-          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))));
+          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 {
@@ -423,36 +571,33 @@ $data: (
       }
 
       .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))));
+        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).
@@ -460,7 +605,6 @@ $data: (
           opacity: 0;
         }
       }
-
       .hotspot__container {
         position: absolute;
         // The marker element is already anchored at the location's lat/lng, so the pin
@@ -469,7 +613,6 @@ $data: (
         // means nothing for a marker.
         top: 0;
         left: 0;
-
         .hotspot__main {
           position: relative;
 
@@ -516,10 +659,14 @@ $data: (
             // 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)));
+            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);
@@ -535,11 +682,22 @@ $data: (
             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)));
+            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
@@ -547,7 +705,6 @@ $data: (
             &[data-hotspot-shape="circle"] {
               border-radius: 50%;
             }
-
             &[data-hotspot-shape="square"] {
               border-radius: 0;
             }
@@ -559,7 +716,6 @@ $data: (
               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.
@@ -572,15 +728,23 @@ $data: (
             // 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)));
+              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,
@@ -589,7 +753,6 @@ $data: (
           }
         }
       }
-
       .hotspot__tooltip {
         --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
         position: absolute;
@@ -630,7 +793,6 @@ $data: (
           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 {
@@ -658,9 +820,14 @@ $data: (
             // 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, )));
+            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);
@@ -672,7 +839,6 @@ $data: (
               @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);
@@ -683,9 +849,14 @@ $data: (
             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-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);
@@ -695,7 +866,6 @@ $data: (
             }
           }
         }
-
         .tooltip__image {
           width: 100%;
           background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
@@ -703,7 +873,6 @@ $data: (
           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;
@@ -715,7 +884,6 @@ $data: (
               &[data-on-img-hover="Zoom In"] {
                 transform: scale(1.08);
               }
-
               &[data-on-img-hover="Zoom Out"] {
                 transform: scale(0.92);
               }
@@ -723,7 +891,6 @@ $data: (
           }
         }
       }
-
       // .hotspot__main {
       //   position: relative;
       //   .hotspot {
@@ -813,8 +980,8 @@ $data: (
       //             --_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);
+  // 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))
@@ -922,8 +1089,8 @@ $data: (
       //             --_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);
+  // Overrides the stroke-width presentation attribute baked into the icon markup.
+  stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
       //         }
       //       }
       //     }
@@ -1085,6 +1252,9 @@ $data: (
         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
@@ -1094,7 +1264,6 @@ $data: (
         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%;
@@ -1111,32 +1280,26 @@ $data: (
       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 {
+    &[data-text-container-border="false"] .map-element > .gallery-header {
       border-width: 0;
       border-style: none;
     }
-
-    &[data-text-container-shadow="false"] .map-element>.gallery-header {
+    &[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;
     }
   }
-}
+}