@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

// Tooltip tip + placement, ported from the image hotspot (hotspot.scss) so both
// elements anchor their tooltip the same way.
//
// $ics is the tip's border-width: a 5px border with no content box makes a 10px
// triangle whose apex sits at the centre of the 10px box.
$ics: 5px;
$tip: $ics * 2;
$bm: 30px;

// Gap between the pin's edge and the tooltip. Held in a custom property so it can
// track the pin's real size at runtime (see --_sf-tp-gp below) instead of the flat
// 20px this file used to assume — that offset ignored Pin Size, so the tip drifted
// off the pin as soon as the pin was resized.
$g: var(--_sf-tp-gp);

$overflowSelector: ".flex__overflow";

// Each entry places the tooltip relative to the pin's centre, then pins the tip to
// the tooltip edge that faces the pin. Because $g already absorbs the pin's
// half-size, every tip offset below is a constant: the triangle always spans exactly
// the gap, base on the tooltip edge and apex on the pin edge. The previous table did
// this with hand-tuned multipliers (1.25 / 1.75 / 2.05 / 2.7 …) and, in five entries,
// a stray top-level border-color that painted over the tooltip's own border colour.
$data: (
  // tooltip to the LEFT — tip on its right edge, pointing right
  leftTop: (
      transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
      icon: (
        right: -#{$tip},
        bottom: calc(#{$bm} - #{$ics}),
        border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
      ),
    ),
  leftCenter: (
    transform: translate(calc(-100% - #{$g}), -50%),
    icon: (
      right: -#{$tip},
      top: calc(50% - #{$ics}),
      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
    ),
  ),
  leftBottom: (
    transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
    icon: (
      right: -#{$tip},
      top: calc(#{$bm} - #{$ics}),
      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
    ),
  ),
  // tooltip ABOVE — tip on its bottom edge, pointing down
  topLeft: (
      transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
      icon: (
        bottom: -#{$tip},
        right: calc(#{$bm} - #{$ics}),
        border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
      ),
    ),
  topCenter: (
    transform: translate(-50%, calc(-100% - #{$g})),
    icon: (
      bottom: -#{$tip},
      left: calc(50% - #{$ics}),
      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
    ),
  ),
  topRight: (
    transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
    icon: (
      bottom: -#{$tip},
      left: calc(#{$bm} - #{$ics}),
      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
    ),
  ),
  // tooltip to the RIGHT — tip on its left edge, pointing left
  rightTop: (
      transform: translate(#{$g}, calc(-100% + #{$bm})),
      icon: (
        left: -#{$tip},
        bottom: calc(#{$bm} - #{$ics}),
        border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
      ),
    ),
  rightCenter: (
    transform: translate(#{$g}, -50%),
    icon: (
      left: -#{$tip},
      top: calc(50% - #{$ics}),
      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
    ),
  ),
  rightBottom: (
    transform: translate(#{$g}, calc(0% - #{$bm})),
    icon: (
      left: -#{$tip},
      top: calc(#{$bm} - #{$ics}),
      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
    ),
  ),
  // tooltip BELOW — tip on its top edge, pointing up
  bottomLeft: (
      transform: translate(calc(-100% + #{$bm}), #{$g}),
      icon: (
        top: -#{$tip},
        right: calc(#{$bm} - #{$ics}),
        border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
      ),
    ),
  bottomCenter: (
    transform: translate(-50%, #{$g}),
    icon: (
      top: -#{$tip},
      left: calc(50% - #{$ics}),
      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
    ),
  ),
  bottomRight: (
    transform: translate(calc(0% - #{$bm}), #{$g}),
    icon: (
      top: -#{$tip},
      left: calc(#{$bm} - #{$ics}),
      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
    ),
  )
);

[data-div-type="element"] {
  &[data-element-type="map"] {
    // Half the pin as it actually renders, and the gap the tooltip keeps from the
    // pin's centre — both driven by the Pin Size control rather than a literal, so
    // the tip lands on the pin at any size. Unlike the image hotspot there is no
    // icon-only variant to handle: .hotspot is always sized by the pin size here,
    // with the icon drawn inside it.
    --_sf-ht-hf: calc(#{prepareMediaVariable(--_ctm-dn-pn-se-ht-se, 24px)} / 2);
    --_sf-tp-gp: calc(var(--_sf-ht-hf) + #{$ics});

    &[data-hotspot-position] {
      @each $key, $value in $data {
        &[data-hotspot-position="#{$key}"] {
          .hotspot__tooltip {
            @each $prop, $val in $value {
              @if ($prop != icon) {
                #{$prop}: #{$val};
              } @else {
                @each $key2, $value2 in $val {
                  &:after {
                    #{$key2}: #{$value2};
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
[data-div-type="element"] {
  &[data-element-type="map"] {
    // width: var(--_lt-wh);
    // height: var(--_lt-ht);
    // margin: var(--_lt-mn);
    // padding: var(--_lt-pg);
    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

    --_aspect-ratio: calc(
      1 *
        (
          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
        )
    );

    & > .wrapper {
      width: 100%;
      // height: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    // design > Map Widget Layout — where the title/description block sits relative to
    // the map. Top/Bottom stack it (column), Left/Right put it beside the map (row).
    &[data-text-container-position="Bottom"] .map-element {
      flex-direction: column-reverse;
    }
    &[data-text-container-position="Left"],
    &[data-text-container-position="Right"] {
      .map-element {
        flex-direction: row;

        // Beside the map the header sizes to its content and the map takes the rest;
        // stacked above/below it keeps spanning the full width.
        > .gallery-header {
          // Text Container Width. `auto` (the default) is the previous behaviour.
          width: prepareMediaVariable(--_ctm-dn-mp-wt-lt-tt-cr-wh, auto);
          // Shrinkable: the width defaults to 100%, which beside the map is a ceiling —
          // without this the header would take the whole row and collapse the map.
          flex: 0 1 auto;
        }
        > .map {
          flex: 1 1 auto;
        }
      }
    }
    &[data-text-container-position="Right"] .map-element {
      flex-direction: row-reverse;
    }

    // The alignment control switches between the horizontal list (left/center/right)
    // for stacked layouts and the vertical one (top/center/bottom) for side-by-side.
    // Stacked: the header spans the full width, so align the text inside it. Side by
    // side: align the header on the flex cross axis.
    &[data-text-container-alignment="left"] .map-element > .gallery-header {
      text-align: left;
    }
    &[data-text-container-alignment="right"] .map-element > .gallery-header {
      text-align: right;
    }
    &[data-text-container-alignment="top"] .map-element {
      align-items: flex-start;
    }
    &[data-text-container-alignment="bottom"] .map-element {
      align-items: flex-end;
    }
    &[data-text-container-alignment="center"] {
      .map-element {
        align-items: center;

        > .gallery-header {
          text-align: center;
        }
      }
    }

    &[data-hotspot-image-style-show-border="true"] {
      .imageHotspot-element {
        border-style: var(--_ctm-dn-ie-se-br-se);
        border-color: var(--_ctm-dn-ie-se-br-cr);
        border-width: var(--_ctm-dn-ie-se-br-wh);
        border-radius: var(--_ctm-dn-ie-se-br-rs);
      }
    }
    &[data-hotspot-tooltip-style-show-border="true"] {
      .hotspot__tooltip {
        border-style: var(--_ctm-dn-tp-dn-br-se);
        border-color: var(--_ctm-dn-tp-dn-br-cr);
        border-width: var(--_ctm-dn-tp-dn-br-wh);
        border-radius: var(--_ctm-dn-tp-dn-br-rs);
      }
    }
    &[data-hotspot-tooltip-style-show-shadow="true"] {
      .hotspot__tooltip {
        box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
          var(--_ctm-dn-tp-dn-sw-cr);
      }
    }
    &[data-hotspot-tooltip-image-style-show-border="true"] {
      .tooltip__image {
        border-style: var(--_ctm-dn-tp-ie-dn-br-se);
        border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
        border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
        border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
      }
    }
    &[data-hotspot-tooltip-image-style-show-shadow="true"] {
      .tooltip__image {
        box-shadow: var(
          --_show-shadow,
          var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
            var(--_ctm-dn-tp-ie-dn-sw-cr)
        );
      }
    }
    &[data-hotspot-style-show-shadow="true"] {
      .hotspot {
        box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
          var(--_ctm-dn-ht-se-sw-cr);
      }
    }
    &[data-hotspot-style-show-border="true"] {
      .hotspot {
        border-style: var(--_ctm-dn-ht-se-br-se);
        border-color: var(--_ctm-dn-ht-se-br-cr);
        border-width: var(--_ctm-dn-ht-se-br-wh);
        border-radius: var(--_ctm-dn-ht-se-br-rs);
      }
    }
    .map-element {
      --text-high-contrast-rgb-value: 49, 49, 49;
      --detail-medium-contrast: rgb(234, 234, 234);
      --text-body: rgb(54, 49, 61);

      position: relative;
      background-color: var(
        --_ctm-mob-dn-mp-wt-bd-cr,
        var(--_ctm-tab-dn-mp-wt-bd-cr, var(--_ctm-dn-mp-wt-bd-cr))
      );

      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

      display: flex;
      flex-direction: column;
      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);

      gap: var(
        --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
        var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg))
      );
      // Alignment comes from the [data-text-container-alignment] rules above. It used to
      // read the *spacing* variable here, which is a length and never valid for
      // align-content, so the control did nothing.

      width: 100%;
      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
      // Height is a fixed value from layout, so keep the border inside it rather than
      // letting it push the widget past the size the user set.
      box-sizing: border-box;

      border-color: var(
        --_ctm-mob-dn-mp-wt-br-cr,
        var(--_ctm-tab-dn-mp-wt-br-cr, var(--_ctm-dn-mp-wt-br-cr))
      );

      border-style: var(
        --_ctm-mob-dn-mp-wt-br-se,
        var(--_ctm-tab-dn-mp-wt-br-se, var(--_ctm-dn-mp-wt-br-se))
      );

      border-width: var(
        --_ctm-mob-dn-mp-wt-br-wh,
        var(--_ctm-tab-dn-mp-wt-br-wh, var(--_ctm-dn-mp-wt-br-wh))
      );

      border-radius: var(
        --_ctm-mob-dn-mp-wt-br-rs,
        var(--_ctm-tab-dn-mp-wt-br-rs, var(--_ctm-dn-mp-wt-br-rs))
      );

      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-mp-wt-sw-ae, var(--_ctm-tab-dn-mp-wt-sw-ae, var(--_ctm-dn-mp-wt-sw-ae)))
          var(--_ctm-mob-dn-mp-wt-sw-br, var(--_ctm-tab-dn-mp-wt-sw-br, var(--_ctm-dn-mp-wt-sw-br)))
          var(--_ctm-mob-dn-mp-wt-sw-sd, var(--_ctm-tab-dn-mp-wt-sw-sd, var(--_ctm-dn-mp-wt-sw-sd)))
          var(--_ctm-mob-dn-mp-wt-sw-cr, var(--_ctm-tab-dn-mp-wt-sw-cr, var(--_ctm-dn-mp-wt-sw-cr)))
      );

      .gallery-header {
        // Text alignment is driven by [data-text-container-alignment] above. The
        // gallery variable that used to sit here is never emitted for a map element.
        box-sizing: border-box;

        // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
        display: flex;
        flex-direction: column;

        gap: var(
          --_ctm-mob-dn-mp-wt-tt-cr-lt-te-ad-dn-sg,
          var(--_ctm-tab-dn-mp-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-mp-wt-tt-cr-lt-te-ad-dn-sg))
        );
        padding-block: var(
          --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-vl-pg,
          var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-vl-pg))
        );
        padding-inline: var(
          --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-hl-pg,
          var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-hl-pg))
        );
        // design > Map Widget Text Container Design. This used to read a
        // `...-tt-cr-lt-tt-cr-bd-cr` variable — the Text Container *Layout* prefix with a
        // property that section has never had — so the Fill control did nothing.
        background-color: var(
          --_ctm-mob-dn-mp-wt-tt-cr-dn-bd-cr,
          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-bd-cr))
        );

        // Text Container Width. 100% is the previous behaviour, so an unset width
        // still spans the container.
        width: prepareMediaVariable(--_ctm-dn-mp-wt-lt-tt-cr-wh, 100%);
        // ...but never wider than the widget. The control accepts a percentage of the
        // widget and a raw length, and either can be dialled past the widget's own
        // width — a percentage over 100, or a length longer than the widget. Both used
        // to push the header (and the text painted on it) out over whatever sits to the
        // right of the map. Clamping here rather than only capping the control also
        // covers pages already saved with an oversized width.
        max-width: 100%;
        // Lets it shrink to that width beside the map — a flex item defaults to
        // min-width:auto and refuses to go below its longest word.
        min-width: 0;
        // Never shrink below the wrapped text — the map absorbs the remaining height
        // instead, so a taller heading does not overflow the widget.
        flex: 0 0 auto;
        border-color: var(
          --_ctm-mob-dn-mp-wt-tt-cr-dn-br-cr,
          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-mp-wt-tt-cr-dn-br-se,
          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-se, var(--_ctm-dn-mp-wt-tt-cr-dn-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-mp-wt-tt-cr-dn-br-wh,
          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-wh, var(--_ctm-dn-mp-wt-tt-cr-dn-br-wh))
        );
        border-radius: var(
          --_ctm-mob-dn-mp-wt-tt-cr-dn-br-rs,
          var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-rs, var(--_ctm-dn-mp-wt-tt-cr-dn-br-rs))
        );
        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-ae,
              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-ae))
            )
            var(
              --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-br,
              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-br, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-br))
            )
            var(
              --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-sd,
              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-sd))
            )
            var(
              --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-cr,
              var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-cr))
            )
        );

        & h3 {
          color: var(
            --_ctm-mob-dn-mp-wt-cr,
            var(--_ctm-tab-dn-mp-wt-cr, var(--_ctm-dn-mp-wt-cr, var(--_tst-dn-mp-wt-cr)))
          );
          font-family: var(
            --_ctm-mob-dn-mp-wt-ft-fy,
            var(--_ctm-tab-dn-mp-wt-ft-fy, var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy)))
          );
          text-transform: var(
            --_ctm-mob-dn-mp-wt-tt-tm,
            var(--_ctm-tab-dn-mp-wt-tt-tm, var(--_ctm-dn-mp-wt-tt-tm, var(--_tst-dn-mp-wt-tt-tm)))
          );
          word-wrap: var(
            --_ctm-mob-dn-mp-wt-wd-wp,
            var(--_ctm-tab-dn-mp-wt-wd-wp, var(--_ctm-dn-mp-wt-wd-wp, break-word))
          );
          word-break: var(
            --_ctm-mob-dn-mp-wt-wd-bk,
            var(--_ctm-tab-dn-mp-wt-wd-bk, var(--_ctm-dn-mp-wt-wd-bk, var(--_tst-dn-mp-wt-wd-bk)))
          );
          font-size: var(
            --_ctm-mob-dn-mp-wt-ft-se,
            var(--_ctm-tab-dn-mp-wt-ft-se, var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se)))
          );
          font-weight: var(
            --_ctm-mob-dn-mp-wt-ft-wt,
            var(--_ctm-tab-dn-mp-wt-ft-wt, var(--_ctm-dn-mp-wt-ft-wt, var(--_tst-dn-mp-wt-ft-wt)))
          );
          font-style: var(
            --_ctm-mob-dn-mp-wt-ft-se-ic,
            var(
              --_ctm-tab-dn-mp-wt-ft-se-ic,
              var(--_ctm-dn-mp-wt-ft-se-ic, var(--_tst-dn-mp-wt-ft-se-ic))
            )
          );
          text-align: var(
            --_ctm-mob-dn-mp-wt-tt-an,
            var(--_ctm-tab-dn-mp-wt-tt-an, var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an)))
          );
          letter-spacing: var(
            --_ctm-mob-dn-mp-wt-lr-sg,
            var(--_ctm-tab-dn-mp-wt-lr-sg, var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg)))
          );
          line-height: var(
            --_ctm-mob-dn-mp-wt-le-ht,
            var(--_ctm-tab-dn-mp-wt-le-ht, var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht)))
          );
          text-decoration: var(
            --_ctm-mob-dn-mp-wt-ue,
            var(--_ctm-tab-dn-mp-wt-ue, var(--_ctm-dn-mp-wt-ue, var(--_tst-dn-mp-wt-ue)))
          );
        }

        & p {
          color: var(
            --_ctm-mob-dn-mp-wt-cr-dc,
            var(--_ctm-tab-dn-mp-wt-cr-dc, var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc)))
          );
          font-family: var(
            --_ctm-mob-dn-mp-wt-ft-fy-dc,
            var(
              --_ctm-tab-dn-mp-wt-ft-fy-dc,
              var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc))
            )
          );
          text-transform: var(
            --_ctm-mob-dn-mp-wt-tt-tm-dc,
            var(
              --_ctm-tab-dn-mp-wt-tt-tm-dc,
              var(--_ctm-dn-mp-wt-tt-tm-dc, var(--_tst-dn-mp-wt-tt-tm-dc))
            )
          );
          word-wrap: var(
            --_ctm-mob-dn-mp-wt-wd-wp-dc,
            var(
              --_ctm-tab-dn-mp-wt-wd-wp-dc,
              var(--_ctm-dn-mp-wt-wd-wp-dc, break-word)
            )
          );
          word-break: var(
            --_ctm-mob-dn-mp-wt-wd-bk-dc,
            var(
              --_ctm-tab-dn-mp-wt-wd-bk-dc,
              var(--_ctm-dn-mp-wt-wd-bk-dc, var(--_tst-dn-mp-wt-wd-bk-dc))
            )
          );
          font-size: var(
            --_ctm-mob-dn-mp-wt-ft-se-dc,
            var(
              --_ctm-tab-dn-mp-wt-ft-se-dc,
              var(--_ctm-dn-mp-wt-ft-se-dc, var(--_tst-dn-mp-wt-ft-se-dc))
            )
          );
          font-weight: var(
            --_ctm-mob-dn-mp-wt-ft-wt-dc,
            var(
              --_ctm-tab-dn-mp-wt-ft-wt-dc,
              var(--_ctm-dn-mp-wt-ft-wt-dc, var(--_tst-dn-mp-wt-ft-wt-dc))
            )
          );
          font-style: var(
            --_ctm-mob-dn-mp-wt-ft-se-ic-dc,
            var(
              --_ctm-tab-dn-mp-wt-ft-se-ic-dc,
              var(--_ctm-dn-mp-wt-ft-se-ic-dc, var(--_tst-dn-mp-wt-ft-se-ic-dc))
            )
          );
          text-align: var(
            --_ctm-mob-dn-mp-wt-tt-an-dc,
            var(
              --_ctm-tab-dn-mp-wt-tt-an-dc,
              var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc))
            )
          );
          letter-spacing: var(
            --_ctm-mob-dn-mp-wt-lr-sg-dc,
            var(
              --_ctm-tab-dn-mp-wt-lr-sg-dc,
              var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc))
            )
          );
          line-height: var(
            --_ctm-mob-dn-mp-wt-le-ht-dc,
            var(
              --_ctm-tab-dn-mp-wt-le-ht-dc,
              var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc))
            )
          );
          text-decoration: var(
            --_ctm-mob-dn-mp-wt-ue-dc,
            var(--_ctm-tab-dn-mp-wt-ue-dc, var(--_ctm-dn-mp-wt-ue-dc, var(--_tst-dn-mp-wt-ue-dc)))
          );
        }

        // h3 {
        //   margin-bottom: var(--_mb-4);
        // }
      }

      .img__overlay {
        background: var(
          --_ctm-mob-dn-ie-se-oy-cr,
          var(--_ctm-tab-dn-ie-se-oy-cr, var(--_ctm-dn-ie-se-oy-cr, var(--_tst-dn-ie-se-oy-cr)))
        );

        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
      }
      @keyframes scaleInOut {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }
      // Sonar ripple: each ring fades in at the pin size, expands and fades out.
      @keyframes sonar {
        0% {
          transform: scale(1);
          opacity: 0.6;
        }
        100% {
          // Expands to ~1.8x the pin — clearly visible motion but still tight to the
          // pin (not spreading far, per the earlier "going very long" feedback).
          transform: scale(1.8);
          opacity: 0;
        }
      }
      .hotspot__container {
        position: absolute;
        // The marker element is already anchored at the location's lat/lng, so the pin
        // and the tooltip both sit at its origin and are placed from there. The 43%/12%
        // that used to be here came from the image hotspot's static-image layout and
        // means nothing for a marker.
        top: 0;
        left: 0;
        .hotspot__main {
          position: relative;

          // Divi Pixel-style sonar: a single bordered ring centred on the pin that
          // expands and fades out on a loop. Only the ring animates — the pin/icon is
          // static and kept on top via z-index. Rendered in JS only when the animation
          // toggle is on. Duration comes from the frequency control (2s if none set), so
          // the user's ms value drives the speed.
          .svg-sonar-container {
            position: absolute;
            top: 50%;
            left: 50%;
            width: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
            height: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
            translate: -50% -50%;
            pointer-events: none;
            z-index: 1;

            .sonar-circle {
              position: absolute;
              inset: 0;
              border-radius: 50%;
              // Ring colour follows the pin's background colour; visible fallback so the
              // ripple never renders invisibly if the background var isn't emitted.
              border: 1px solid prepareMediaVariable(--_ctm-dn-pn-se-bd-cr, #243dc6);
              opacity: 0;
              animation: sonar prepareMediaVariable(--_ctm-dn-pn-se-an-fy, 2s) linear infinite;
            }

            // Square pins get matching square rings; circle (default) stays 50%.
            &[data-hotspot-shape="square"] .sonar-circle {
              border-radius: 0;
            }
          }

          .hotspot {
            // background: var(--_ctm-dn-ht-se-bd-cr);
            // height: var(--_ctm-dn-tp-tt-dn-ft-se);
            // width: var(--_ctm-dn-tp-tt-dn-ft-se);
            position: absolute;
            // Above the sonar rings (container is z-index 1), so the pin/icon stays on top.
            z-index: 2;
            cursor: pointer;
            // width: var(--_ctm-dn-ht-se-ht-se);
            // height: var(--_ctm-dn-ht-se-ht-se);
            // background-color: var(--_ctm-dn-ht-se-bd-cr);
            width: var(
              --_ctm-mob-dn-pn-se-ht-se,
              var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
            );
            height: var(
              --_ctm-mob-dn-pn-se-ht-se,
              var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
            );

            height: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);
            width: prepareMediaVariable(--_ctm-dn-pn-se-ht-se);

            position: absolute;
            cursor: pointer;

            display: flex;
            align-items: center;
            top: 50%;
            left: 50%;

            translate: -50% -50%;
            box-sizing: border-box;
            justify-content: center;
            box-shadow: var(
                --_ctm-mob-dn-pn-se-sw-ae,
                var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
              )
              var(
                --_ctm-mob-dn-pn-se-sw-br,
                var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
              )
              var(
                --_ctm-mob-dn-pn-se-sw-sd,
                var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
              )
              var(
                --_ctm-mob-dn-pn-se-sw-cr,
                var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
              );

            // Pin corners follow the Shape control only — Circle or Square. There is no
            // separate radius control for pins, and this used to be applied as an inline
            // style from MarkersComponent, which outranked every rule in this file.
            &[data-hotspot-shape="circle"] {
              border-radius: 50%;
            }
            &[data-hotspot-shape="square"] {
              border-radius: 0;
            }

            svg {
              width: prepareMediaVariable(--_ctm-dn-pn-se-in-se);
              height: prepareMediaVariable(--_ctm-dn-pn-se-in-se);

              path[fill] {
                fill: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
              }
              path[stroke] {
                stroke: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
              }
            }

            // One gate for "this pin has a styled box": always true for a shape pin,
            // and for an icon pin only while its Background toggle is on. It used to
            // also match [data-show-animation="true"], which meant turning the
            // background off did nothing as soon as the animation was enabled.
            &[data-show-shape-styles="true"] {
              background-color: var(
                --_ctm-mob-dn-pn-se-bd-cr,
                var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
              );

              border-style: var(
                --_ctm-mob-dn-pn-se-br-se,
                var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
              );
              border-color: var(
                --_ctm-mob-dn-pn-se-br-cr,
                var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
              );
              border-width: var(
                --_ctm-mob-dn-pn-se-br-wh,
                var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
              );
              // No border-radius here — it would land after the shape rules above and
              // undo Circle. The Shape control is the only thing that rounds a pin.
              // box-shadow is applied unconditionally above so it works for all pins,
              // independent of this shape/animation gate.
            }
          }
        }
      }
      .hotspot__tooltip {
        --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
        position: absolute;
        background: prepareMediaVariable(--_ctm-dn-tp-dn-bd-cr);
        z-index: 1000;
        // Sizing follows the image hotspot: the user's width/height with a floor under
        // them. The caps are viewport-relative on purpose — this element's containing
        // block is the Google marker, which is effectively zero-sized, so a percentage
        // max-width would resolve to 0 and clamp the tooltip down to its min instead of
        // holding the size the user set. The viewport cap still stops a desktop-sized
        // tooltip spilling off a phone screen.
        width: prepareMediaVariable(--_ctm-dn-tp-dn-tp-wh);
        height: prepareMediaVariable(--_ctm-dn-tp-dn-tp-ht);
        min-width: 100px;
        min-height: 100px;
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        box-sizing: border-box;
        // Placement comes from the [data-hotspot-position] transforms above, measured
        // from the marker origin.
        top: 0;
        left: 0;
        // No overflow here on purpose. The tip is an ::after sitting 10px outside the
        // box, so any overflow value other than visible clips it away — that's what was
        // eating the caret. The image hotspot scrolls its inner wrapper instead, and
        // .text_box below does the same.
        overflow: visible;

        padding: 4px 8px;
        display: flex;
        justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
        align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);

        &::after {
          content: "";
          position: absolute;

          border-width: 5px;
          border-style: solid;
        }
        // The scroll container, mirroring .tooltip__image_with_text on the image
        // hotspot: long content scrolls in here rather than on the tooltip itself.
        .text_box {
          overflow-y: auto;
          max-width: 100%;
          width: 100%;
          height: 100%;
          // This wrapper fills the tooltip on both axes, so the justify-content /
          // align-items set on .hotspot__tooltip above have nothing left to move —
          // that is why both alignment controls looked dead. Same trap the image
          // hotspot hit with .tooltip__image_with_text (hotspot.scss): the alignment
          // has to be re-applied on the box that actually holds the title and the
          // description. The stack is a column here, so the *vertical* control drives
          // justify-content and the *horizontal* one drives align-items — the opposite
          // mapping to the tooltip itself.
          display: flex;
          flex-direction: column;
          justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
          align-items: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);

          // align-items shrinks each child to its content width, so the text still
          // needs a cap to wrap against instead of overflowing the tooltip.
          > * {
            max-width: 100%;
          }

          h6 {
            font-size: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se);
            font-family: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-fy);
            color: prepareMediaVariable(--_ctm-dn-tp-tt-dn-cr);

            font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic);
            text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht);
            // Underline and line-through are two independent toggles writing two
            // variables, so they have to be composed, not chained. `var(--lh, <ue>)`
            // never reaches its fallback: the schema declares linethrough with an
            // empty value, and stylesToString emits it as `--…-lh: ;`, which is a
            // *defined* empty value rather than a missing one — so var() substitutes
            // nothing and the whole declaration is thrown away. Listing both keywords
            // on text-decoration-line lets either, both or neither apply; when both
            // resolve empty the declaration is invalid and the initial `none` stands,
            // which is exactly the both-off case.
            text-decoration-line: var(
                --_ctm-mob-dn-tp-tt-dn-ue,
                var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue,))
              )
              var(
                --_ctm-mob-dn-tp-tt-dn-lh,
                var(--_ctm-tab-dn-tp-tt-dn-lh, var(--_ctm-dn-tp-tt-dn-lh,))
              );
            // Same text properties the text element exposes (see text-temp-v2.scss).
            text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-tm, none);
            word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-wp, normal);
            word-break: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-bk, normal);

            // Text Overflow toggle in the typography panel; the line count rides in on
            // --_sf-line-clamp from the element.
            &#{$overflowSelector} {
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }
          }
          p {
            font-size: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-dc);
            color: prepareMediaVariable(--_ctm-dn-tp-tt-dn-cr-dc);
            font-family: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-fy-dc);
            font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-wt-dc);
            font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
            text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an-dc);
            letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg-dc);
            line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht-dc);
            // Same composition as the title above.
            text-decoration-line: var(
                --_ctm-mob-dn-tp-tt-dn-ue-dc,
                var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc,))
              )
              var(
                --_ctm-mob-dn-tp-tt-dn-lh-dc,
                var(--_ctm-tab-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-lh-dc,))
              );
            text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-tm-dc, none);
            word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-wp-dc, normal);
            word-break: prepareMediaVariable(--_ctm-dn-tp-tt-dn-wd-bk-dc, normal);

            &#{$overflowSelector} {
              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
            }
          }
        }
        .tooltip__image {
          width: 100%;
          background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
          transition: transform 0.3s ease-in-out;
          display: flex;
          justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
          align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
          img {
            object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
            height: -webkit-fill-available;
            max-width: 100%;
            rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
            scale: var(--_ctm-dn-tp-ie-dn-zm-ie);

            &:hover {
              &[data-on-img-hover="Zoom In"] {
                transform: scale(1.08);
              }
              &[data-on-img-hover="Zoom Out"] {
                transform: scale(0.92);
              }
            }
          }
        }
      }
      // .hotspot__main {
      //   position: relative;
      //   .hotspot {
      //     background: var(
      //       --_ctm-mob-dn-pn-se-bd-cr,
      //       var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
      //     );
      //     border-style: var(
      //       --_ctm-mob-dn-pn-se-br-se,
      //       var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
      //     );
      //     border-color: var(
      //       --_ctm-mob-dn-pn-se-br-cr,
      //       var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
      //     );
      //     border-width: var(
      //       --_ctm-mob-dn-pn-se-br-wh,
      //       var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
      //     );
      //     border-radius: var(
      //       --_ctm-mob-dn-pn-se-br-rs,
      //       var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
      //     );
      //     box-shadow: var(
      //       --_show-shadow,
      //       var(
      //           --_ctm-mob-dn-pn-se-sw-ae,
      //           var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
      //         )
      //         var(
      //           --_ctm-mob-dn-pn-se-sw-br,
      //           var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
      //         )
      //         var(
      //           --_ctm-mob-dn-pn-se-sw-sd,
      //           var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
      //         )
      //         var(
      //           --_ctm-mob-dn-pn-se-sw-cr,
      //           var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
      //         )
      //     );

      //     position: absolute;
      //     cursor: pointer;
      //     width: var(
      //       --_ctm-mob-dn-pn-se-ht-se,
      //       var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
      //     );
      //     height: var(
      //       --_ctm-mob-dn-pn-se-ht-se,
      //       var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
      //     );
      //     background-color: var(
      //       --_ctm-mob-dn-pn-se-bd-cr,
      //       var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
      //     );

      //     display: flex;
      //     align-items: center;
      //     top: 50%;
      //     left: 50%;
      //     transform: translate(-50%, -50%);
      //     justify-content: center;
      //     animation: scaleInOut
      //       var(
      //         --_ctm-mob-dn-pn-se-an-fy,
      //         var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
      //       )
      //       infinite;

      //     .icon {
      //       display: var(--_sf-show-icon-ff, flex);

      //       svg {
      //         width: var(
      //           --_ctm-mob-dn-pn-se-in-se,
      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
      //         );
      //         height: var(
      //           --_ctm-mob-dn-pn-se-in-se,
      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
      //         );

      //         path {
      //           stroke: var(
      //             --_ctm-mob-dn-pn-se-in-c1,
      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
      //           );
  // Overrides the stroke-width presentation attribute baked into the icon markup.
  stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
      //           fill: var(
      //             --_ctm-mob-dn-pn-se-in-c1,
      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
      //           );
      //         }
      //       }
      //     }
      //   }
      //   .hotspot__tooltip {
      //     position: absolute;
      //     background: var(
      //       --_ctm-mob-dn-tp-dn-bd-cr,
      //       var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
      //     );
      //     border-style: var(
      //       --_ctm-mob-dn-tp-dn-br-se,
      //       var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
      //     );
      //     border-color: var(
      //       --_ctm-mob-dn-tp-dn-br-cr,
      //       var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
      //     );
      //     border-width: var(
      //       --_ctm-mob-dn-tp-dn-br-wh,
      //       var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
      //     );
      //     border-radius: var(
      //       --_ctm-mob-dn-tp-dn-br-rs,
      //       var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
      //     );

      //     box-shadow: var(
      //       --_show-shadow,
      //       var(
      //           --_ctm-mob-dn-tp-dn-sw-ae,
      //           var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
      //         )
      //         var(
      //           --_ctm-mob-dn-tp-dn-sw-br,
      //           var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
      //         )
      //         var(
      //           --_ctm-mob-dn-tp-dn-sw-sd,
      //           var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
      //         )
      //         var(
      //           --_ctm-mob-dn-tp-dn-sw-cr,
      //           var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
      //         )
      //     );

      //     z-index: 1000;
      //     min-width: 100px;
      //     width: var(
      //       --_ctm-mob-dn-tp-dn-tp-wh,
      //       var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
      //     );
      //     min-height: 100px;
      //     height: var(
      //       --_ctm-mob-dn-tp-dn-tp-ht,
      //       var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
      //     );

      //     // border-radius: 4px;
      //     // transform: translate(-10%, -130%);
      //     left: -10px;
      //     bottom: 7px;
      //     padding: 4px 8px;
      //     display: flex;
      //     justify-content: var(
      //       --_ctm-mob-dn-tp-dn-hl-at,
      //       var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
      //     );
      //     align-items: var(
      //       --_ctm-mob-dn-tp-dn-vl-at,
      //       var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
      //     );

      //     &::after {
      //       content: "";
      //       position: absolute;
      //       top: 100%;
      //       left: 20px;
      //       margin-left: -5px;
      //       border-width: 5px;
      //       border-style: solid;
      //       border-color: var(
      //           --_ctm-mob-dn-tp-dn-bd-cr,
      //           var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
      //         )
      //         transparent transparent transparent;
      //     }
      //     span {
      //       svg {
      //         width: var(
      //           --_ctm-mob-dn-pn-se-in-se,
      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
      //         );
      //         height: var(
      //           --_ctm-mob-dn-pn-se-in-se,
      //           var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
      //         );
      //         path {
      //           stroke: var(
      //             --_ctm-mob-dn-pn-se-in-c1,
      //             var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
      //           );
  // Overrides the stroke-width presentation attribute baked into the icon markup.
  stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-se-wh, 1.25);
      //         }
      //       }
      //     }

      //     .text_box {
      //       h6 {
      //         font-size: var(
      //           --_ctm-mob-dn-tp-tt-dn-ft-se,
      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
      //         );
      //         font-family: var(
      //           --_ctm-mob-dn-tp-tt-dn-ft-fy,
      //           var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
      //         );
      //         color: var(
      //           --_ctm-mob-dn-tp-tt-dn-cr,
      //           var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
      //         );

      //         font-weight: var(
      //           --_ctm-mob-dn-tp-tt-dn-ft-wt,
      //           var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
      //         );
      //         font-style: var(
      //           --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
      //         );
      //         text-align: var(
      //           --_ctm-mob-dn-tp-tt-dn-tt-an,
      //           var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
      //         );
      //         letter-spacing: var(
      //           --_ctm-mob-dn-tp-tt-dn-lr-sg,
      //           var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
      //         );
      //         line-height: var(
      //           --_ctm-mob-dn-tp-tt-dn-le-ht,
      //           var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
      //         );
      //         text-decoration: var(
      //           --_ctm-mob-dn-tp-tt-dn-ue,
      //           var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
      //         );
      //       }

      //       p {
      //         font-size: var(
      //           --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
      //         );
      //         color: var(
      //           --_ctm-mob-dn-tp-tt-dn-cr-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
      //         );
      //         font-family: var(
      //           --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
      //         );
      //         font-weight: var(
      //           --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
      //         );
      //         font-style: var(
      //           --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
      //         );
      //         text-align: var(
      //           --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
      //         );
      //         letter-spacing: var(
      //           --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
      //         );
      //         line-height: var(
      //           --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
      //         );
      //         text-decoration: var(
      //           --_ctm-mob-dn-tp-tt-dn-ue-dc,
      //           var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
      //         );
      //       }
      //     }
      //     .tooltip__image {
      //       background-color: var(
      //         --_ctm-mob-dn-tp-ie-dn-bd-cr,
      //         var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
      //       );
      //       transition: transform 0.3s ease-in-out;
      //       border-style: var(
      //         --_ctm-mob-dn-tp-ie-dn-br-se,
      //         var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
      //       );
      //       border-color: var(
      //         --_ctm-mob-dn-tp-ie-dn-br-cr,
      //         var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
      //       );
      //       border-width: var(
      //         --_ctm-mob-dn-tp-ie-dn-br-wh,
      //         var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
      //       );
      //       border-radius: var(
      //         --_ctm-mob-dn-tp-ie-dn-br-rs,
      //         var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
      //       );
      //       box-shadow: var(
      //         --_show-shadow,
      //         var(
      //             --_ctm-mob-dn-tp-ie-dn-sw-ae,
      //             var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
      //           )
      //           var(
      //             --_ctm-mob-dn-tp-ie-dn-sw-br,
      //             var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
      //           )
      //           var(
      //             --_ctm-mob-dn-tp-ie-dn-sw-sd,
      //             var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
      //           )
      //           var(
      //             --_ctm-mob-dn-tp-ie-dn-sw-cr,
      //             var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
      //           )
      //       );
      //       display: flex;
      //       justify-content: var(
      //         --_ctm-mob-dn-tp-ie-dn-hl-at,
      //         var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
      //       );
      //       align-items: var(
      //         --_ctm-mob-dn-tp-ie-dn-vl-at,
      //         var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
      //       );

      //       img {
      //         object-fit: var(
      //           --_ctm-mob-dn-tp-ie-dn-ft-os,
      //           var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
      //         );
      //         max-width: 100%;
      //         rotate: calc(
      //           var(
      //               --_ctm-mob-dn-tp-ie-dn-ud,
      //               var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
      //             ) *
      //             1deg
      //         );
      //         scale: var(
      //           --_ctm-mob-dn-tp-ie-dn-zm-ie,
      //           var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
      //         );
      //       }
      //     }
      //   }
      // }

      .map {
        width: 100%;
        height: 100%;
        min-width: 0;
        // Yields height to the heading rather than demanding the full 100%.
        flex: 1 1 auto;
        min-height: 0;
        // design > Map Style. The map box paints its own border from that section's
        // scope (`--_ctm-dn-mp-se-*`), independent of the widget's border on
        // `.map-element` and the header's on `.gallery-header`. `overflow: hidden` so a
        // rounded corner actually clips the tiles inside it.
        overflow: hidden;
        border-color: prepareMediaVariable(--_ctm-dn-mp-ie-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-mp-ie-br-se);
        border-width: prepareMediaVariable(--_ctm-dn-mp-ie-br-wh);
        border-radius: prepareMediaVariable(--_ctm-dn-mp-ie-br-rs);
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    // "Show Border" / "Show Shadow" switches. Each design section paints its box from
    // CSS variables, so the switches reach the stylesheet as data attributes and the
    // matching border-width / box-shadow is zeroed here. Kept at the end of the block
    // and matched to the same selector depth as the rules they override — anywhere
    // earlier and the section rules above would win the tie on source order.
    &[data-map-widget-border="false"] .map-element {
      border-width: 0;
      border-style: none;
    }
    &[data-map-widget-shadow="false"] .map-element {
      box-shadow: none;
    }
    &[data-text-container-border="false"] .map-element > .gallery-header {
      border-width: 0;
      border-style: none;
    }
    &[data-text-container-shadow="false"] .map-element > .gallery-header {
      box-shadow: none;
    }
    &[data-pin-border="false"] .map-element .hotspot__container .hotspot__main .hotspot {
      border-width: 0;
      border-style: none;
    }
    &[data-pin-shadow="false"] .map-element .hotspot__container .hotspot__main .hotspot {
      box-shadow: none;
    }
    &[data-map-border="false"] .map-element .map {
      border-width: 0;
      border-style: none;
    }
  }
}