/* Elementor / Hello Elementor static-overrides
 * =============================================
 * Substitutes for runtime behavior elementor-frontend.js normally provides.
 * Link AFTER the captured Elementor stylesheets in the rebuilt page.
 * Workflow-owned — do not hand-author per client; lift new entries here if
 * a new Elementor site needs another rule.
 *
 * Origin: shared/process-memory.md § Run 5 L16, L18, L19 (bigwoodystreeservice, 2026-05-22).
 */

/* L16 — `.elementor-invisible{visibility:hidden}` is removed by Elementor JS
 * via IntersectionObserver when the element enters the viewport (entrance
 * animations). On a JS-free static rebuild, force it visible. */
.elementor-invisible { visibility: visible !important; }

/* L16 — Elementor JS clears the `.elementor-background-video-container.elementor-loading`
 * opacity:0 once the video is ready. Without JS the video container would
 * stay invisible. Build-time-injected static <video> elements need this on. */
.elementor .elementor-background-video-container.elementor-loading {
  opacity: 1 !important;
}

/* L18 — Elementor's mobile burger nav has a duplicate dropdown menu marked
 * `aria-hidden="true"` and toggled visible by JS. Without JS the duplicate
 * sits in the DOM with default block layout. Hide it explicitly. */
nav.elementor-nav-menu--dropdown[aria-hidden="true"] { display: none; }

/* L17 NOTE — Elementor's inline lazy-load `<style>` block lives in the
 * captured page HTML (not in any CSS file). It MUST be stripped at build
 * time; do NOT counter-override it from this stylesheet, because doing so
 * (e.g. `background-image: revert !important`) nukes every legitimate
 * background-image declaration in post-XXX.css. The wp-build-page builder
 * handles the strip. */

/* L19/L61 — Elementor Pro sticky-header pinning. Live sites use
 * jquery.sticky.min.js to pin a container marked `sticky:top` in its
 * data-settings JSON; the static rebuild drops that JS. Run 9
 * (chattanoogaexteriors 2026-05-26) reversed the L19 "no override needed"
 * decision after operator feedback — the missing stickiness is visible and
 * unwelcome. CSS-only fix: apply position:sticky to the Elementor theme
 * header wrapper itself. Putting sticky on the inner sticky-marked
 * container doesn't work because its containing block (the wrapper) is
 * only ~158px tall, so the sticky scope is exhausted after the first
 * scroll. Putting sticky on the wrapper instead means the document body
 * becomes the containing block (body is full page-height), so the header
 * pins for the duration of the scroll. The data-settings selector below
 * is kept as a secondary anchor and to make the override generic across
 * Elementor sites that may not use elementor-location-header. */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 99;
}
header.elementor-location-header [data-settings*='&quot;sticky&quot;:&quot;top&quot;'],
header.elementor-location-header [data-settings*='"sticky":"top"'] {
  position: relative;
  top: 0;
  z-index: 99;
}

/* Run 8 L41 — Loop-carousel / Swiper widgets stack every slide full-height
 * without JS. On listing pages with prominent carousels (Run 8 saw
 * /press-release/ with 21 cards × ~2400px each = 51673px total page height
 * vs live's 2016px with a working carousel), this explodes the page.
 * Constrain to the first slide statically. The "wrong slide visible on a
 * first-slide-only render" case stays a residual delta (Run 6 L29) but
 * the page is no longer unusable. */
.elementor-widget-loop-carousel .swiper-slide:not(:first-child),
.elementor-widget-loop-grid .swiper-slide:not(:first-child),
.elementor-widget-posts .swiper-slide:not(:first-child) { display: none; }
.elementor-widget-loop-carousel .swiper-wrapper,
.elementor-widget-loop-grid .swiper-wrapper,
.elementor-widget-posts .swiper-wrapper { transform: none !important; }

/* Run 9 L66/L67 (chattanoogaexteriors 2026-05-26) — image-carousel as a
 * uniform-sized horizontal scroll strip with working arrows. L41 separation
 * applies (loop/posts carousels stay first-slide-only; image-carousels show
 * every slide). All slides forced to a uniform width + 1:1 aspect so the
 * row reads as a swatch palette, not a jagged photo strip. Arrows re-shown
 * (no longer display:none) and wired up via a tiny vanilla JS shim
 * (`shared/templates/elementor-static-overrides.js`) that maps clicks to
 * scrollBy on the swiper-wrapper. The arrows still work without JS too —
 * the strip is natively scrollable. */
.elementor-widget-image-carousel { position: relative; }
.elementor-widget-image-carousel .swiper,
.elementor-widget-image-carousel .swiper-container,
.elementor-widget-image-carousel .swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  transform: none !important;
  gap: 16px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}
.elementor-widget-image-carousel .swiper-slide {
  flex: 0 0 240px !important;
  width: 240px !important;
  display: flex !important;
  flex-direction: column;
  scroll-snap-align: start;
}
.elementor-widget-image-carousel .swiper-slide img {
  width: 240px !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block !important;
}
.elementor-widget-image-carousel .swiper-slide figcaption,
.elementor-widget-image-carousel .swiper-slide .elementor-image-carousel-caption {
  text-align: center;
  padding: 8px 0 0;
  font-size: 14px;
}
.elementor-widget-image-carousel .swiper-button-prev,
.elementor-widget-image-carousel .swiper-button-next {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  border: none;
  font-size: 18px;
  user-select: none;
}
.elementor-widget-image-carousel .swiper-button-prev { left: -8px; }
.elementor-widget-image-carousel .swiper-button-next { right: -8px; }
.elementor-widget-image-carousel .swiper-button-prev::before { content: '‹'; }
.elementor-widget-image-carousel .swiper-button-next::before { content: '›'; }
.elementor-widget-image-carousel .swiper-pagination { display: none !important; }

/* Run 9 L67/L68 — companion "all-at-once" grid that mirrors the image-
 * carousel content. Inserted by wp-build-page.py immediately after every
 * image-carousel widget. Operator requests on /siding-services/:
 *   L67: "show off all available siding colors" at a glance
 *   L68: bigger images, label style matches the carousel caption,
 *        equalize columns/rows so the grid reads evenly
 * Fixed 6-column desktop grid so 18 items lay out as a clean 6×3 (and 12
 * items as 6×2, 24 as 6×4 — divisible-by-6 product palettes are typical
 * for siding/decking/roofing). Falls back to 4 / 3 / 2 columns at narrower
 * breakpoints. Caption style matches the Elementor image-carousel caption
 * (Roboto, bold italic, uppercase) for visual consistency with the
 * fidelity-locked slider above it. */
.yourmediafy-color-grid {
  display: grid;
  /* Run 9 L72 (chattanoogaexteriors 2026-05-26): minmax(0, 1fr), not just
   * 1fr. `1fr` is shorthand for `minmax(min-content, 1fr)`, and
   * `white-space: nowrap` captions on /about/ ("BOB Chatt 5 Year Winner"
   * etc) gave min-content = full caption width, blowing the columns
   * wider than their 1fr share and breaking the grid out of the page
   * container (docWidth 1937 vs 1440 viewport). minmax(0, 1fr) lets the
   * cell shrink below intrinsic width; the figcaption's
   * overflow:hidden + text-overflow:ellipsis then handles any overflow. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 20px;
  margin: 40px auto 0;
  padding: 16px 0;
  max-width: 1400px;
}
@media (max-width: 1200px) { .yourmediafy-color-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .yourmediafy-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .yourmediafy-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yourmediafy-color-grid__item {
  text-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Run 9 L69 (chattanoogaexteriors 2026-05-26): each grid item gets a
   * subtle white card lift so the swatches pop off gray section
   * backgrounds. Operator observation on /roofing-services/: shingle photos
   * are mid-gray earth tones and the section's #C1C1C1 background made
   * every swatch look "grayed out" even though the source images are
   * vibrant. White padding + soft shadow restores the perceived contrast
   * without touching the source image. */
  background: #fff;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
}
.yourmediafy-color-grid__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
/* Run 9 L77 (chattanoogaexteriors 2026-05-26) — Elementor Gallery widget
 * fallback. Live JS (e-gallery.min.js) lays out gallery items in a
 * masonry/grid pattern and sets each .e-gallery-image's background from
 * its data-thumbnail attribute. Stripped on flat rebuilds — without
 * intervention the gallery container is just stacked zero-height divs.
 * Lay items out as a responsive grid of square cells; the companion JS
 * shim (initGalleries) sets the background-image per item. */
.elementor-widget-gallery .elementor-gallery__container,
.elementor-widget-gallery .e-gallery-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1200px) {
  .elementor-widget-gallery .elementor-gallery__container,
  .elementor-widget-gallery .e-gallery-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .elementor-widget-gallery .elementor-gallery__container,
  .elementor-widget-gallery .e-gallery-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .elementor-widget-gallery .elementor-gallery__container,
  .elementor-widget-gallery .e-gallery-container { grid-template-columns: 1fr; }
}
.elementor-widget-gallery .elementor-gallery-item,
.elementor-widget-gallery .e-gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  width: auto !important;
  height: auto !important;
}
.elementor-widget-gallery .e-gallery-image,
.elementor-widget-gallery .elementor-gallery-item__image {
  position: absolute !important;
  inset: 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Run 9 L78 (chattanoogaexteriors 2026-05-26) — Team-gallery hover overlay
 * with name + title; clicks scroll to the matching `#bio-<slug>` anchor
 * further down the page. wp-build-page.py detects team galleries (item
 * aria-labels match h3 person-name headings elsewhere on the page),
 * marks the widget with `.ym-team-gallery`, wraps each item with
 * `<a class="ym-team-item" href="#bio-slug">`, and injects an overlay
 * div. CSS provides hover-to-reveal, smooth opacity transition, and
 * scroll-margin so the anchor doesn't land under the sticky header. */
.ym-team-gallery .ym-team-item {
  cursor: pointer;
  text-decoration: none;
}
/* Hide Elementor's native always-visible caption inside team galleries —
 * it competes with our hover overlay. */
.ym-team-gallery .elementor-gallery-item__overlay,
.ym-team-gallery .elementor-gallery-item__content,
.ym-team-gallery .elementor-gallery-item__title,
.ym-team-gallery .elementor-gallery-item__description {
  display: none !important;
}
/* Run 9 L79 (chattanoogaexteriors 2026-05-26): team galleries get a
 * 5-column desktop layout with taller (portrait) cards. Headshots
 * benefit from 3:4 aspect because they're typically composed for
 * portrait orientation; the previous L77 1:1 square crop chopped off
 * heads or shoulders on some shots. Responsive: 5→4→3→2→1 cols. */
.elementor-widget-gallery.ym-team-gallery .elementor-gallery__container,
.elementor-widget-gallery.ym-team-gallery .e-gallery-container {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) {
  .elementor-widget-gallery.ym-team-gallery .elementor-gallery__container,
  .elementor-widget-gallery.ym-team-gallery .e-gallery-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .elementor-widget-gallery.ym-team-gallery .elementor-gallery__container,
  .elementor-widget-gallery.ym-team-gallery .e-gallery-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .elementor-widget-gallery.ym-team-gallery .elementor-gallery__container,
  .elementor-widget-gallery.ym-team-gallery .e-gallery-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.ym-team-gallery .ym-team-item,
.ym-team-gallery .e-gallery-item,
.ym-team-gallery .elementor-gallery-item {
  aspect-ratio: 3 / 4 !important;
}
/* Bias the cropped portrait so faces stay near the top. */
.ym-team-gallery .e-gallery-image,
.ym-team-gallery .elementor-gallery-item__image {
  background-position: center top !important;
}
.ym-team-gallery .ym-team-item .ym-team-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.ym-team-gallery .ym-team-item:hover .ym-team-overlay,
.ym-team-gallery .ym-team-item:focus-visible .ym-team-overlay {
  opacity: 1;
}
.ym-team-gallery .ym-team-item .ym-team-name {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.ym-team-gallery .ym-team-item .ym-team-title {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 13px;
  margin-top: 6px;
  opacity: 0.9;
}
/* Sticky header is ~158px tall — offset the anchor scroll so the bio
 * heading lands below it instead of under it. */
[id^="bio-"] { scroll-margin-top: 180px; }

/* Run 9 L75/L76 (chattanoogaexteriors 2026-05-26) — image modal that
 * replaces the JS-driven Elementor popup on flat rebuilds. Opened by the
 * popup helper in elementor-static-overrides.js when a `popup:open` link
 * is clicked. Vertically + horizontally centered, dark backdrop, close on
 * backdrop click / × / Esc. Close button colors are forced because the
 * captured Elementor button CSS targets bare `<button>` elements and
 * paints them brand-pink on hover. */
.ym-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
}
.ym-modal--open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
}
.ym-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: zoom-out;
}
.ym-modal__panel {
  position: relative;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 64px);
}
.ym-modal__panel img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 64px);
  object-fit: contain;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.ym-modal__close,
.ym-modal__close:visited {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  transition: color 0.15s, background-color 0.15s;
}
.ym-modal__close:hover,
.ym-modal__close:focus {
  color: #fff !important;
  background-color: #FF0000 !important;
  outline: none;
}

.yourmediafy-color-grid__item figcaption {
  margin-top: 14px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000;
  /* Run 9 L71 (chattanoogaexteriors 2026-05-26): keep every label on a
   * single line so card heights stay uniform across the grid. The widest
   * label observed is "COBBLESTONE GRAY" (15 chars) — 14px Roboto bold
   * italic with 0.5px letter-spacing fits comfortably inside a ~180px
   * card cell. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Run 9 L70 (chattanoogaexteriors 2026-05-26) — Elementor section
 * background-overlay pseudo-element draws on TOP of children when the
 * runtime JS that manages z-index isn't loaded. Symptom: every direct
 * child of the section is washed out by the overlay's color/opacity (a
 * 50% white overlay on /roofing-services/'s color section turned every
 * shingle swatch into a milky-haze tile, even on the carousel above the
 * grid; labels styled #000 rendered as ~#888 because they sat under the
 * overlay too). On live, Elementor JS injects z-index on the children
 * making them sit above the overlay; we strip that JS. CSS-only fix:
 * pin the section ::before overlay at z-index 0 (still above the section's
 * own bg-color and bg-image, which paint at the section's own background
 * layer, but below positioned children) and lift direct children to
 * z-index 1. Pointer events disabled on the pseudo so clicks/touches
 * still reach the content. */
.elementor-element.e-con::before,
.elementor-section::before {
  z-index: 0 !important;
  pointer-events: none;
}
/* Lift normal content children above the ::before overlay, but EXCLUDE
 * elements that need to stay position:absolute to cover the section
 * (background-video-container, background-overlay, motion-effects layers).
 * Run 9 L73 (chattanoogaexteriors 2026-05-26): the prior unrestricted
 * `> *` selector turned the hero's video-bg container into a regular
 * flex item, collapsing the hero video and shrinking the text column. */
.elementor-element.e-con > *:not(.elementor-background-video-container):not(.elementor-background-video-hosted):not(.elementor-background-overlay):not(.elementor-motion-effects-container):not(.elementor-shape):not(.elementor-background-slideshow),
.elementor-section > *:not(.elementor-background-video-container):not(.elementor-background-video-hosted):not(.elementor-background-overlay):not(.elementor-motion-effects-container):not(.elementor-shape):not(.elementor-background-slideshow) {
  position: relative;
  z-index: 1;
}

/* Run 8 L49 — Elementor nav-menu sub-menu dropdowns are gated by
 * `jquery.smartmenus.min.js` (stripped on flat rebuilds). Provide a
 * CSS-only :hover / :focus-within toggle so Practice Areas / Attorneys
 * dropdowns are reachable.
 *
 * DO NOT add visual styling here — the captured Elementor stylesheets
 * carry the brand-correct typography, color, spacing, and dividers.
 * This rule must ONLY change `display` and structural positioning so
 * the captured look survives. */
.elementor-nav-menu .menu-item-has-children { position: relative; }
.elementor-nav-menu .menu-item-has-children > .sub-menu,
.elementor-nav-menu .menu-item-has-children > ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
}
/* Run 9 L74 (chattanoogaexteriors 2026-05-26): L70/L73 gave every
 * `.elementor-element.e-con` direct child `z-index: 1`. In a header
 * section with multiple columns (logo / nav / CTA), they all stack
 * equally — document order determines paint order. The CTA column
 * (Monthly Promos + Phone) comes after the nav column in document order,
 * so it paints on top, eating mouse events on submenu items below the
 * first (operator caught: hover Services → see first item → moving down
 * loses hover → submenu closes). Fix: bump the column containing the
 * nav-menu widget above sibling columns via `:has()`. Also lift the
 * hovered/focused LI to z-index 999 so any future stacking-context
 * surprise doesn't bury the dropdown. */
.elementor-element.e-con:has(.elementor-widget-nav-menu) {
  z-index: 100 !important;
}
/* The nav-menu widget itself is `.elementor-element` (not `.e-con`), so
 * L70/L73's child-lift gave it `z-index: 1`. In a header column container,
 * sibling widgets (CTA buttons, phone, social) are also at z:1 and stack
 * by document order — CTA columns later in the markup paint on top of the
 * nav, covering submenu items below the first. Bump the nav widget itself
 * above its column siblings. */
.elementor-widget-nav-menu {
  z-index: 50 !important;
}
.elementor-nav-menu .menu-item-has-children:hover,
.elementor-nav-menu .menu-item-has-children:focus-within {
  z-index: 999;
}
.elementor-nav-menu .menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu .menu-item-has-children:focus-within > .sub-menu,
.elementor-nav-menu .menu-item-has-children:hover > ul.sub-menu,
.elementor-nav-menu .menu-item-has-children:focus-within > ul.sub-menu {
  display: block;
}
/* Nested fly-out: position to the right of the parent item. Elementor's
 * captured CSS sets `.sub-menu .sub-menu { top: 100% }` for touch/mobile
 * — overrides our `top: 0` unless we mark it !important. */
.elementor-nav-menu .sub-menu .menu-item-has-children > .sub-menu,
.elementor-nav-menu .sub-menu .menu-item-has-children > ul.sub-menu {
  top: 0 !important;
  left: 100% !important;
}

/* Sub-menu width: Elementor's kit CSS sets an explicit `width: 156px`
 * on .sub-menu (intended for smartmenus to resize at runtime). On a
 * static rebuild this clips long labels like "Social Security Disability".
 * Force width:auto and a min-width so the longest item dictates the box. */
.elementor-nav-menu .sub-menu,
.elementor-nav-menu ul.sub-menu {
  white-space: nowrap;
  width: auto !important;
  min-width: 220px !important;
}
.elementor-nav-menu .sub-menu .elementor-sub-item,
.elementor-nav-menu .sub-menu li { white-space: nowrap; }

/* Bridge the hover gap between a parent menu item and its sub-menu.
 * Without this, the mouse leaves the parent's hover region while crossing
 * the empty space to reach the dropdown, the sub-menu closes, and items
 * are unreachable. Invisible ::before extends the hover region 16px
 * upward (top-level) or leftward (nested). No layout impact. */
.elementor-nav-menu .menu-item-has-children > .sub-menu::before,
.elementor-nav-menu .menu-item-has-children > ul.sub-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.elementor-nav-menu .sub-menu .menu-item-has-children > .sub-menu::before,
.elementor-nav-menu .sub-menu .menu-item-has-children > ul.sub-menu::before {
  top: 0;
  left: -16px;
  right: auto;
  width: 16px;
  height: auto;
  bottom: 0;
}

/* Run 8 L50 — chevron <span> injected as actual HTML by wp-build-page.py
 * (Elementor's pointer-underline animation owns both ::before and ::after
 * on .elementor-item — pseudo-elements lose every battle). Style the
 * injected class so the angle-down glyph renders at every top-level
 * parent menu item. Nested .elementor-sub-item parents get their chevron
 * from Elementor's captured CSS natively; the injection script doesn't
 * touch them. */
.elementor-nav-menu .lt-submenu-chevron {
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-left: 0.45em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/></svg>") no-repeat center / contain;
}