@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.51

package/dist/map.scss

@@ -2,128 +2,142 @@
 @use "sass:list";
 @use "./functions.scss" as *;
 
-$tpgp: 20px;
+// 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;
-$ics: -1px;
 
+// 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% - #{$tpgp}), calc(-100% + #{$bm})),
-    icon: (
-      bottom: #{$bm},
-      right: 0px,
-      transform: translate(calc(100% + #{$ics}), calc(50% + (#{$ics} * 1.25))),
-      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+      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% - #{$tpgp}), calc(-50% + 0px)),
+    transform: translate(calc(-100% - #{$g}), -50%),
     icon: (
-      top: 50%,
-      right: 0px,
-      transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
+      right: -#{$tip},
+      top: calc(50% - #{$ics}),
       border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
     ),
   ),
   leftBottom: (
-    transform: translate(calc(-100% - #{$tpgp}), calc(0% - #{$bm})),
+    transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
     icon: (
-      top: #{$bm},
-      right: 0px,
-      transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
+      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% - #{$tpgp})),
-    icon: (
-      bottom: 0px,
-      right: #{$bm},
-      transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
-      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+      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(calc(-50% - #{$ics}), calc(-100% - #{$tpgp})),
+    transform: translate(-50%, calc(-100% - #{$g})),
     icon: (
-      bottom: 0px,
-      right: 50%,
-      transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
+      bottom: -#{$tip},
+      left: calc(50% - #{$ics}),
       border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
     ),
   ),
   topRight: (
-    transform: translate(calc(-1 * #{$bm}), calc(-100% - #{$tpgp})),
+    transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
     icon: (
-      bottom: 0px,
-      left: #{$bm},
-      transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
+      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(calc(0% + #{$tpgp}), calc(-100% + #{$bm})),
-    icon: (
-      top: 100%,
-      left: 0px,
-      transform: translate(calc(-100% - #{$ics}), calc(50% - (#{$bm} * 1.25))),
-      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+      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(calc(0% + #{$tpgp}), calc(-50% + #{$ics})),
-    border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    transform: translate(#{$g}, -50%),
     icon: (
-      bottom: 50%,
-      left: 0px,
-      transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
+      left: -#{$tip},
+      top: calc(50% - #{$ics}),
       border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
     ),
   ),
   rightBottom: (
-    transform: translate(calc(0% + #{$tpgp}), calc(0% - #{$bm})),
-    border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+    transform: translate(#{$g}, calc(0% - #{$bm})),
     icon: (
-      top: 100%,
-      left: 0,
-      transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
+      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}), calc(-50% + (#{$bm} * 2.7))),
-    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-    icon: (
-      right: #{$bm},
-      top: 0%,
-      transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
-      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+      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(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.7))),
-    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    transform: translate(-50%, #{$g}),
     icon: (
-      right: 50%,
-      top: 0,
-      transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
+      top: -#{$tip},
+      left: calc(50% - #{$ics}),
       border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
   ),
   bottomRight: (
-    transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.7))),
-    border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+    transform: translate(calc(0% - #{$bm}), #{$g}),
     icon: (
-      left: 30px,
-      top: 0,
-      transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
+      top: -#{$tip},
+      left: calc(#{$bm} - #{$ics}),
       border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
-  ),
+  )
 );
 
 [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}"] {
@@ -175,13 +189,55 @@ $data: (
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-    &[data-hotspot-position="topLeft"] {
-      --_show-shadow: none;
-      .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);
+
+    // 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 {
+          width: auto;
+          flex: 0 0 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;
+        }
       }
     }
 
@@ -259,13 +315,15 @@ $data: (
         --_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))
       );
-      align-content: var(
-        --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
-        var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, center)
-      );
+      // 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,
@@ -296,10 +354,9 @@ $data: (
       );
 
       .gallery-header {
-        text-align: var(
-          --_ctm-mob-dn-gy-lt-an,
-          var(--_ctm-tab-dn-gy-lt-an, var(--_ctm-dn-gy-lt-an))
-        );
+        // 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;
@@ -317,9 +374,12 @@ $data: (
           --_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-lt-tt-cr-bd-cr,
-          var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr))
+          --_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%;
@@ -488,17 +548,69 @@ $data: (
           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;
-        top: 43%;
-        left: 12%;
+        // 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);
@@ -512,24 +624,45 @@ $data: (
               var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
             );
 
-            animation: scaleInOut var(--_ctm-dn-pn-se-an-fy) infinite;
+            height: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
+            width: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
+
+            position: absolute;
+            cursor: pointer;
 
-            width: var(--_ctm-dn-pn-se-ht-se);
-            height: var(--_ctm-dn-pn-se-ht-se);
-            background-color: var(--_ctm-dn-ht-se-bd-cr);
             display: flex;
             align-items: center;
             top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%);
+
+            translate: -50% -50%;
             box-sizing: border-box;
             justify-content: center;
-            animation: scaleInOut var(--_ctm-dn-pn-se-an-fy) infinite;
+            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="any"] {
-              border-radius: var(--_ctm-dn-ht-se-br-rs);
+            &[data-hotspot-shape="square"] {
+              border-radius: 0;
             }
 
             svg {
@@ -543,6 +676,11 @@ $data: (
                 stroke: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
               }
             }
+
+            // 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,
@@ -561,29 +699,10 @@ $data: (
                 --_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))
-                  )
-              );
+              // 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.
             }
           }
         }
@@ -591,22 +710,35 @@ $data: (
       .hotspot__tooltip {
         --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
         position: absolute;
-        background: var(--_ctm-dn-tp-dn-bd-cr);
+        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;
-        width: var(--_ctm-dn-tp-dn-tp-wh);
         min-height: 100px;
-        height: var(--_ctm-dn-tp-dn-tp-ht);
-        top: 43%;
-        left: 12%;
-        overflow-y: auto;
-        // top: var(--_sf-im-psn-tp, 0);
-        // left: var(--_sf-im-psn-lt, 0);
+        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: var(--_ctm-dn-tp-dn-hl-at);
-        align-items: var(--_ctm-dn-tp-dn-vl-at);
+        justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
+        align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
 
         &::after {
           content: "";
@@ -615,30 +747,77 @@ $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 {
           overflow-y: auto;
+          max-width: 100%;
+          width: 100%;
+          height: 100%;
+
           h6 {
-            font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
-            font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
-            color: var(--_ctm-dn-tp-tt-dn-cr);
-
-            font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
-            font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
-            text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
-            letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
-            line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
-            text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
+            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: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
-            color: var(--_ctm-dn-tp-tt-dn-cr-dc);
-            font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
-            font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
-            font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
-            text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
-            letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
-            line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
-            text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
+            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 {
@@ -1022,11 +1201,39 @@ $data: (
       .map {
         width: 100%;
         height: 100%;
+        min-width: 0;
         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;
+    }
   }
 }