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

package/dist/map.scss

@@ -27,101 +27,77 @@ $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,
     ),
@@ -143,9 +119,11 @@ $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};
@@ -159,6 +137,7 @@ $data: (
     }
   }
 }
+
 [data-div-type="element"] {
   &[data-element-type="map"] {
     // width: var(--_lt-wh);
@@ -166,26 +145,17 @@ $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;
     }
@@ -195,6 +165,7 @@ $data: (
     &[data-text-container-position="Bottom"] .map-element {
       flex-direction: column-reverse;
     }
+
     &[data-text-container-position="Left"],
     &[data-text-container-position="Right"] {
       .map-element {
@@ -202,15 +173,17 @@ $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 {
+        >.gallery-header {
           width: auto;
           flex: 0 0 auto;
         }
-        > .map {
+
+        >.map {
           flex: 1 1 auto;
         }
       }
     }
+
     &[data-text-container-position="Right"] .map-element {
       flex-direction: row-reverse;
     }
@@ -219,23 +192,27 @@ $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;
         }
       }
@@ -249,6 +226,7 @@ $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);
@@ -257,12 +235,13 @@ $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);
@@ -271,21 +250,20 @@ $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);
@@ -294,16 +272,15 @@ $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)));
 
@@ -311,10 +288,8 @@ $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.
@@ -325,33 +300,20 @@ $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
@@ -362,163 +324,97 @@ $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))
-        );
+        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))
-            )
-        );
+        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)))
-          );
-          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, 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))));
         }
 
         & 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))
-            )
-          );
-          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, 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))));
         }
 
         // h3 {
@@ -527,33 +423,36 @@ $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).
@@ -561,6 +460,7 @@ $data: (
           opacity: 0;
         }
       }
+
       .hotspot__container {
         position: absolute;
         // The marker element is already anchored at the location's lat/lng, so the pin
@@ -569,6 +469,7 @@ $data: (
         // means nothing for a marker.
         top: 0;
         left: 0;
+
         .hotspot__main {
           position: relative;
 
@@ -615,14 +516,10 @@ $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);
@@ -638,22 +535,11 @@ $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
@@ -661,6 +547,7 @@ $data: (
             &[data-hotspot-shape="circle"] {
               border-radius: 50%;
             }
+
             &[data-hotspot-shape="square"] {
               border-radius: 0;
             }
@@ -672,6 +559,7 @@ $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.
@@ -684,23 +572,15 @@ $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,
@@ -709,6 +589,7 @@ $data: (
           }
         }
       }
+
       .hotspot__tooltip {
         --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
         position: absolute;
@@ -749,6 +630,7 @@ $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 {
@@ -776,14 +658,9 @@ $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);
@@ -795,6 +672,7 @@ $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);
@@ -805,14 +683,9 @@ $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);
@@ -822,6 +695,7 @@ $data: (
             }
           }
         }
+
         .tooltip__image {
           width: 100%;
           background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
@@ -829,6 +703,7 @@ $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;
@@ -840,6 +715,7 @@ $data: (
               &[data-on-img-hover="Zoom In"] {
                 transform: scale(1.08);
               }
+
               &[data-on-img-hover="Zoom Out"] {
                 transform: scale(0.92);
               }
@@ -847,6 +723,7 @@ $data: (
           }
         }
       }
+
       // .hotspot__main {
       //   position: relative;
       //   .hotspot {
@@ -1208,6 +1085,16 @@ $data: (
         width: 100%;
         height: 100%;
         min-width: 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%;
@@ -1224,22 +1111,32 @@ $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;
+    }
   }
-}
+}