/* ==========================================================================
   VIO Med Spa — reverse-engineered block styles (concatenated 1:1)
   Each block below is a self-contained section component from the site.
   ========================================================================== */


/* ############################## block-hero.css ############################## */
/**
 * Hero — 9-position content anchor + directional gradient overlay.
 *
 * Mirrors media-cta but more conservatively scoped. The anchor rules
 * ONLY apply when `.vio-hero__innerLayout` carries a `vio-hero--anchor-*`
 * class — legacy hero blocks without the anchor class keep their
 * 2-column grid layout from viomedspa-global.css intact.
 *
 * Rendered DOM (front-end):
 *   section.vio-section.vio-hero
 *     .vio-section__inner > .vio-section__content > .vio-section__body
 *       .vio-hero__innerLayout.vio-hero--anchor-{position}
 *         .vio-hero__media     (image, position: absolute, inset: 0)
 *           + ::after          (directional gradient)
 *         .vio-hero__inner     (content stack, absolutely positioned)
 */

/* The innerLayout becomes the positioning context for the content
   stack + gradient. Stretches to fill the section.
   IMPORTANT: the global rule
     `.vio-hero div.vio-section__intro+div.vio-section__body { position:
     absolute; inset:0 }`
   only fires when a `.vio-section__intro` sibling exists. We pass
   `hide_intro: true` so no intro is rendered → that adjacent-sibling
   rule never matches → the body has no size → the media (inset:0) is
   sized against a 0-height parent. Force an explicit min-height on
   the innerLayout itself that matches the hero canvas. */
.vio-hero__innerLayout[class*="vio-hero--anchor-"] {
	position: relative;
	width: 100%;
}

/* ── CONTENT STACK — anchored to one of 9 edges/corners ─────────────
   `width: min(720px, 100% - 100px)` gives a definite width so the
   text doesn't shrink-to-fit (which would collapse a multi-line title
   like "Foo,<br>Bar." down to its widest unbreakable token). The
   `100% - 100px` keeps a 50px breathing margin on the opposite edge. */
.vio-hero__innerLayout[class*="vio-hero--anchor-"] > .vio-hero__inner {
	position: absolute;
	display: block;
	height: auto;
	/* Give the headline maximum room to stay on one line — long
	   poetic phrases like "where a life well lived" need ~900-1000px
	   at the hero display font size. min(1600px, …) leaves 50px
	   breathing room on the opposite edge of the section while
	   uncapping anything narrower. */
	width: min(1600px, calc(100% - 100px));
	max-width: 100%;
	padding: 50px;
	margin: 0;
	z-index: 3;
}
.vio-hero__innerLayout[class*="vio-hero--anchor-"] > .vio-hero__inner > .vio-section__content {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	grid-template-columns: none;
}

/* Vertical anchoring */
.vio-hero--anchor-top-left > .vio-hero__inner,
.vio-hero--anchor-top-center > .vio-hero__inner,
.vio-hero--anchor-top-right > .vio-hero__inner   { top: 0; }

.vio-hero--anchor-middle-left > .vio-hero__inner,
.vio-hero--anchor-middle-center > .vio-hero__inner,
.vio-hero--anchor-middle-right > .vio-hero__inner {
	top: 50%;
	transform: translateY(-50%);
}

.vio-hero--anchor-bottom-left > .vio-hero__inner,
.vio-hero--anchor-bottom-center > .vio-hero__inner,
.vio-hero--anchor-bottom-right > .vio-hero__inner { bottom: 0; }

/* Horizontal anchoring + text alignment on the stack itself. Children
   inherit `text-align`; flex/grid children are handled separately
   below for the CTA wrapper. */
.vio-hero--anchor-top-left > .vio-hero__inner,
.vio-hero--anchor-middle-left > .vio-hero__inner,
.vio-hero--anchor-bottom-left > .vio-hero__inner { left: 0; right: auto; text-align: left; }

.vio-hero--anchor-top-center > .vio-hero__inner,
.vio-hero--anchor-middle-center > .vio-hero__inner,
.vio-hero--anchor-bottom-center > .vio-hero__inner {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	text-align: center;
}
.vio-hero--anchor-middle-center > .vio-hero__inner {
	transform: translate(-50%, -50%);
}

.vio-hero--anchor-top-right > .vio-hero__inner,
.vio-hero--anchor-middle-right > .vio-hero__inner,
.vio-hero--anchor-bottom-right > .vio-hero__inner { right: 0; left: auto; text-align: right; }

/* CTA wrapper alignment — `.vio-section__cta` is typically a flex
   container that center-justifies its button. Anchor it to the same
   edge as the rest of the stack. Scoped only to anchored heroes. */
.vio-hero--anchor-top-left .vio-section__cta,
.vio-hero--anchor-middle-left .vio-section__cta,
.vio-hero--anchor-bottom-left .vio-section__cta {
	justify-content: flex-start;
	margin-left: 0;
	margin-right: auto;
}
.vio-hero--anchor-top-center .vio-section__cta,
.vio-hero--anchor-middle-center .vio-section__cta,
.vio-hero--anchor-bottom-center .vio-section__cta {
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}
.vio-hero--anchor-top-right .vio-section__cta,
.vio-hero--anchor-middle-right .vio-section__cta,
.vio-hero--anchor-bottom-right .vio-section__cta {
	justify-content: flex-end;
	margin-left: auto;
	margin-right: 0;
}

/* ── GRADIENT — directional dark→transparent overlay on the media ─
   Painted on `.vio-hero__media::after`. Each anchor pulls the dark
   band from its own corner/edge inward. Gentler stops than media-cta
   since hero text is typically larger and the image fills the fold. */
.vio-hero__innerLayout[class*="vio-hero--anchor-"] .vio-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

/* Directional gradients — follow the desktop anchor at all
   breakpoints. Mobile-anchor overrides below replace these when a
   mobile anchor class is present. */
.vio-hero--anchor-top-left .vio-hero__media::after {
	background: linear-gradient(to bottom right, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0) 75%);
}
.vio-hero--anchor-top-center .vio-hero__media::after {
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0) 75%);
}
.vio-hero--anchor-top-right .vio-hero__media::after {
	background: linear-gradient(to bottom left, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0) 75%);
}
.vio-hero--anchor-middle-left .vio-hero__media::after {
	background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0) 80%);
}
.vio-hero--anchor-middle-center .vio-hero__media::after {
	background: radial-gradient(circle at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 85%);
}
.vio-hero--anchor-middle-right .vio-hero__media::after {
	background: linear-gradient(to left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0) 80%);
}
.vio-hero--anchor-bottom-left .vio-hero__media::after {
	background: linear-gradient(to top right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0) 80%);
}
.vio-hero--anchor-bottom-center .vio-hero__media::after {
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0) 75%);
}
.vio-hero--anchor-bottom-right .vio-hero__media::after {
	background: linear-gradient(to top left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0) 80%);
}

/* Escape hatch — suppress gradient. */
.vio-hero.vio-hero--no-gradient .vio-hero__media::after {
	display: none;
}

/* ── MOBILE CONTENT ANCHOR ─────────────────────────────────────────
   Overrides the desktop anchor at mobile widths. Must live here (in
   the block stylesheet that loads in <body>) so it wins over the
   desktop anchor rules above at equal specificity via source order.
   The same rules previously lived in viomedspa-global.css but lost
   the specificity race because that file loads in <head>. */
@media (max-width: 767px) {
	/* Base mobile gutters — applies to every anchored hero (any
	   `vio-hero--anchor-*` class). Desktop padding of 50px + width
	   subtraction of 100px crushes long titles into one-word lines on
	   phones. Keep positioning from the desktop anchor; only tighten
	   the horizontal box so the title gets breathing room. */
	.vio-hero__innerLayout[class*="vio-hero--anchor-"] > .vio-hero__inner {
		width: min(720px, calc(100% - 16px));
		padding: 16px 8px;
	}

	.vio-hero--mobile-anchor-top-left > .vio-hero__inner,
	.vio-hero--mobile-anchor-top-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-top-right > .vio-hero__inner,
	.vio-hero--mobile-anchor-middle-left > .vio-hero__inner,
	.vio-hero--mobile-anchor-middle-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-middle-right > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-left > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-right > .vio-hero__inner {
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		transform: none;
		width: min(720px, calc(100% - 16px));
		padding: 16px 8px;
	}

	/* Vertical */
	.vio-hero--mobile-anchor-top-left > .vio-hero__inner,
	.vio-hero--mobile-anchor-top-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-top-right > .vio-hero__inner    { top: 0; }

	.vio-hero--mobile-anchor-middle-left > .vio-hero__inner,
	.vio-hero--mobile-anchor-middle-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-middle-right > .vio-hero__inner {
		top: 50%;
		transform: translateY(-50%);
	}

	.vio-hero--mobile-anchor-bottom-left > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-right > .vio-hero__inner { bottom: 0; }

	/* Horizontal + text alignment */
	.vio-hero--mobile-anchor-top-left > .vio-hero__inner,
	.vio-hero--mobile-anchor-middle-left > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-left > .vio-hero__inner  { left: 0; right: auto; text-align: left; }

	.vio-hero--mobile-anchor-top-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-middle-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-center > .vio-hero__inner {
		left: 50%;
		right: auto;
		text-align: center;
	}
	.vio-hero--mobile-anchor-top-center > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-center > .vio-hero__inner {
		transform: translateX(-50%);
	}
	.vio-hero--mobile-anchor-middle-center > .vio-hero__inner {
		transform: translate(-50%, -50%);
	}

	.vio-hero--mobile-anchor-top-right > .vio-hero__inner,
	.vio-hero--mobile-anchor-middle-right > .vio-hero__inner,
	.vio-hero--mobile-anchor-bottom-right > .vio-hero__inner { right: 0; left: auto; text-align: right; }

	/* CTA alignment */
	.vio-hero--mobile-anchor-top-left .vio-section__cta,
	.vio-hero--mobile-anchor-middle-left .vio-section__cta,
	.vio-hero--mobile-anchor-bottom-left .vio-section__cta   { justify-content: flex-start; }

	.vio-hero--mobile-anchor-top-center .vio-section__cta,
	.vio-hero--mobile-anchor-middle-center .vio-section__cta,
	.vio-hero--mobile-anchor-bottom-center .vio-section__cta { justify-content: center; }

	.vio-hero--mobile-anchor-top-right .vio-section__cta,
	.vio-hero--mobile-anchor-middle-right .vio-section__cta,
	.vio-hero--mobile-anchor-bottom-right .vio-section__cta  { justify-content: flex-end; }

	/* ── Mobile-anchor directional gradients ──────────────────────── */
	.vio-hero--mobile-anchor-top-left .vio-hero__media::after {
		background: linear-gradient(to bottom right, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0) 75%);
	}
	.vio-hero--mobile-anchor-top-center .vio-hero__media::after {
		background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0) 75%);
	}
	.vio-hero--mobile-anchor-top-right .vio-hero__media::after {
		background: linear-gradient(to bottom left, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0) 75%);
	}
	.vio-hero--mobile-anchor-middle-left .vio-hero__media::after {
		background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0) 80%);
	}
	.vio-hero--mobile-anchor-middle-center .vio-hero__media::after {
		background: radial-gradient(circle at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 85%);
	}
	.vio-hero--mobile-anchor-middle-right .vio-hero__media::after {
		background: linear-gradient(to left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0) 80%);
	}
	.vio-hero--mobile-anchor-bottom-left .vio-hero__media::after {
		background: linear-gradient(to top right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0) 80%);
	}
	.vio-hero--mobile-anchor-bottom-center .vio-hero__media::after {
		background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0) 75%);
	}
	.vio-hero--mobile-anchor-bottom-right .vio-hero__media::after {
		background: linear-gradient(to top left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0) 80%);
	}
}

/* ############################## block-hero-slider.css ############################## */
/* ==========================================================================
   Hero Slider - overlay arrows + progress scrollbar
   ========================================================================== */

/* ── Hide old pagination dots and toggle ─────────────────────────────────── */
.vio-hero-slider .swiper-pagination,
.vio-hero-slider .vio-hero-slider__toggle,
.vio-hero-slider .vio-hero-slider__holder {
  display: none !important;
}

/* ── Arrow buttons (dark circle, negative-space cutout) ──────────────────── */
.vio-hero-slider__arrow {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.vio-hero-slider__arrow:hover {
  opacity: 1;
}
.vio-hero-slider__arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Override global 82px sizing for __prev / __next */
body .vio-hero-slider__prev.vio-hero-slider__arrow,
body .vio-hero-slider__next.vio-hero-slider__arrow {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
body .vio-hero-slider__arrow svg {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

/* Keep global absolute positioning from viomedspa-global.css for prev/next,
   just adjust inset slightly for padding */
body .vio-hero-slider__prev.vio-hero-slider__arrow {
  left: 12px;
}
body .vio-hero-slider__next.vio-hero-slider__arrow {
  right: 12px;
}

/* Hide at start/end */
.vio-hero-slider__arrow.swiper-button-disabled,
.vio-hero-slider__arrow[hidden] {
  display: none;
}

/* ── Pause / Play toggle ────────────────────────────────────────────────── */
.vio-hero-slider__pause {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44x44 touch target for WCAG 2.5.5 AAA */
  width: 44px;
  height: 44px;
}
.vio-hero-slider__pause:hover {
  opacity: 1;
}
.vio-hero-slider__pause:focus-visible {
  opacity: 1;
  outline: 2px solid white;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Progress scrollbar ──────────────────────────────────────────────────── */
.vio-hero-slider__scrollbar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 400px);
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 30;
  pointer-events: none;
}

.vio-hero-slider__scrollbar-bar {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(0);
  transition: transform 0.7s ease, width 0.7s ease;
}

/* Hide scrollbar on single slide */
.vio-hero-slider__carousel.is-single-slide .vio-hero-slider__scrollbar {
  display: none;
}

/* ── Pre-init: show first slide before Swiper JS runs ───────────────────── */
/* Clip overflow (replaces swiper's overflow:hidden while its CSS is deferred). */
.vio-hero-slider__track:not(.swiper-initialized) {
  overflow: hidden;
}
/* Hide slides 2+ so they don't bleed below the hero before Swiper positions them. */
.vio-hero-slider__track:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}
/* Force first slide to fill the track pre-Swiper so the LCP image paints at
   real dimensions instead of flex-collapsed to 0×0 (cuts LCP render delay). */
.vio-hero-slider__track:not(.swiper-initialized) .swiper-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}
.vio-hero-slider__track:not(.swiper-initialized) .swiper-slide:first-child {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

/* ── Mobile: keep arrows visible ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  .vio-hero-slider .vio-hero-slider__prev.vio-hero-slider__arrow,
  .vio-hero-slider .vio-hero-slider__next.vio-hero-slider__arrow {
    display: flex !important;
  }

  .vio-hero-slider__arrow.swiper-button-disabled,
  .vio-hero-slider__arrow[hidden] {
    display: none !important;
  }
}

/* ############################## block-featured-categories.css ############################## */
/**
 * Featured Categories — 50/50 sticky-left + card stack layout.
 *
 * Structure (front-end):
 *   .vio-featured-categories                                (section)
 *     .vio-featured-categories__layout                      (50/50 grid)
 *       .vio-featured-categories__left.is-sticky?           (intro col)
 *         .vio-featured-categories__leftInner               (sticky box)
 *           .vio-featured-categories__eyebrow
 *           [section shell intro: titleAlt, title, lead, content, CTA]
 *       .vio-featured-categories__stack                     (card col)
 *         article.vio-featured-categories__card * N
 *           .vio-featured-categories__media (image)
 *           .vio-featured-categories__overlay
 *             title / title2 / lead / content / CTA
 */

/* ── LAYOUT — 50/50 on desktop, stacked on mobile ───────────────────
   IMPORTANT: do NOT set `align-items: start` here — sticky-positioned
   children rely on the grid item being TALLER than the sticky box so
   the viewport has room to scroll past it. Default `align-items:
   stretch` makes the (shorter) left column match the (taller) right
   column's height, giving sticky a scroll range to traverse. */
.vio-section.vio-featured-categories .vio-featured-categories__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--1250, 50px);
	width: 100%;
}

@media (min-width: 900px) {
	.vio-section.vio-featured-categories .vio-featured-categories__layout {
		grid-template-columns: 1fr 1fr;
		gap: 50px;
	}
}

/* Sticky requires NO `overflow: hidden / clip` on any ancestor in the
   scroll chain. The global rule `.vio-media-cta { overflow: hidden }`
   and section helpers can sneak this in. Reset on our own section. */
.vio-section.vio-featured-categories,
.vio-section.vio-featured-categories > .vio-section__inner,
.vio-section.vio-featured-categories > .vio-section__inner > .vio-section__content,
.vio-section.vio-featured-categories > .vio-section__inner > .vio-section__content > .vio-section__body {
	overflow: visible !important;
}

/* ── LEFT COLUMN — eyebrow + intro stack, optional sticky ─────────── */
.vio-featured-categories__left {
	position: relative;
	/* Make the grid item span the full row height so the sticky child
	   has a tall scroll range to traverse. */
	align-self: stretch;
	height: 100%;
}

/* The `is-sticky` modifier pins the inner content box to the
   viewport's vertical center while the right-hand card column scrolls
   past it.

   Technique: `top: calc(50vh - <half-content-height>)`. The sticky
   element's top edge pins half its own height ABOVE the viewport's
   middle line, which puts its center exactly at the middle. Because
   no `transform` is applied, the element renders at its NATURAL
   document position before sticky engages — i.e., at the top of the
   left column (aligned with the first card on the right). It only
   slides into the viewport's center when sticky engages.

   `--vio-featcat-sticky-half-h` is the editor-tunable approximation
   of half the content stack's height. Override per-section via
   inline style if a long title or extra items push the content
   taller than the default. */
.vio-featured-categories {
	--vio-featcat-sticky-half-h: 200px;
}

@media (min-width: 900px) {
	.vio-featured-categories__left.is-sticky .vio-featured-categories__leftInner {
		position: sticky;
		position: -webkit-sticky;
		top: calc(50vh - var(--vio-featcat-sticky-half-h, 200px));
		top: calc(50dvh - var(--vio-featcat-sticky-half-h, 200px));
		align-self: start;
	}
}

.vio-featured-categories__leftInner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--500, 20px);
}

@media (min-width: 900px) {
	.vio-featured-categories__leftInner {
		padding: 50px 100px 50px 0;
	}
}

.vio-featured-categories__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs, 14px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vio-ink, #030303);
	font-weight: 500;
}

/* Section shell renders the intro inside .leftInner — strip its own
   horizontal centering / max-width so it fills the left column. */
.vio-featured-categories__left .vio-section__intro,
.vio-featured-categories__left .vio-section__head,
.vio-featured-categories__left .vio-section__lead,
.vio-featured-categories__left .vio-section__content-copy {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

/* ── RIGHT COLUMN — vertical card stack ───────────────────────────── */
.vio-featured-categories__stack {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

@media (min-width: 900px) {
	.vio-featured-categories__stack {
		padding-top: 50px;
	}
}

/* ── CARD — image as background, content overlay on top ──────────────
   Scoped to `.vio-featured-categories` to beat legacy global rules in
   viomedspa-global.css (min-height: 410px, text-transform, etc.). */
.vio-featured-categories .vio-featured-categories__card {
	position: relative;
	display: block;
	overflow: hidden;
	/* Editor-controllable via the block's "Card Corner Radius" control
	   (--vio-featcat-radius); otherwise inherits the global image radius. */
	border-radius: var(--vio-featcat-radius, var(--vio-img-radius, 12px));
	aspect-ratio: 16 / 10;
	min-height: 0;
	background: var(--wp--preset--color--vio-mtn-greige, #d8d2c5);
	color: var(--wp--preset--color--vio-lotion, #FEFFF9);
	transition: transform 0.4s ease;
}
.vio-featured-categories__card[data-module-link] {
	cursor: pointer;
}
.vio-featured-categories__card:hover {
	transform: translateY(-2px);
}

.vio-featured-categories__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.vio-featured-categories__media picture,
.vio-featured-categories__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Dark wash so the overlay text stays legible regardless of image. */
.vio-featured-categories__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.35) 45%,
		rgba(0, 0, 0, 0.10) 80%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
}

.vio-featured-categories .vio-featured-categories__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	z-index: 1;
	padding: 45px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--250, 8px);
	color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}

.vio-featured-categories .vio-featured-categories__title {
	margin: 0;
	color: inherit;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--nunito-sans, 'Nunito Sans', sans-serif);
	font-weight: 500;
	font-size: 32px;
	line-height: 30px;
	text-transform: none;
	letter-spacing: normal;
}
/* Defensive: kill any underline inherited from <a>-style globals. */
.vio-featured-categories__title,
.vio-featured-categories__title a,
a.vio-featured-categories__title {
	text-decoration: none !important;
	border-bottom: 0 !important;
}
.vio-featured-categories__title2 {
	margin: var(--wp--preset--spacing--250, 8px) 0 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--base, 18px);
	opacity: 0.95;
}
.vio-featured-categories__lead {
	margin: var(--wp--preset--spacing--250, 8px) 0 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--sm, 16px);
	opacity: 0.85;
	max-width: 56ch;
}
.vio-featured-categories__content {
	margin: var(--wp--preset--spacing--250, 8px) 0 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--sm, 16px);
	opacity: 0.85;
	max-width: 56ch;
}
.vio-featured-categories__content > *:last-child {
	margin-bottom: 0;
}

.vio-featured-categories__cta {
	margin-top: var(--wp--preset--spacing--500, 20px);
	align-self: flex-start;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* Hover handling lives in the .vio-btn--light variant (see
   viomedspa-buttons.css): transparent bg + lotion text/border on
   hover, which renders as an outlined ghost button against the dark
   card scrim. No additional override needed here. */

/* Empty state */
.vio-featured-categories__empty {
	padding: var(--wp--preset--spacing--1250, 50px);
	text-align: center;
	color: var(--wp--preset--color--vio-ink, #030303);
	opacity: 0.6;
}

/* Mobile tweaks */
@media (max-width: 767px) {
	.vio-featured-categories .vio-featured-categories__overlay {
		padding: var(--wp--preset--spacing--750, 28px);
	}
	.vio-featured-categories .vio-featured-categories__title {
		font-size: var(--wp--preset--font-size--heading-4, 24px);
	}
	.vio-featured-categories .vio-featured-categories__card {
		aspect-ratio: 4 / 5;
		min-height: 0;
	}
}

/* ── SCROLL REVEAL — fade in + slide up ──────────────────────────────
   Opt-in via the `vio-featured-categories--animate` modifier (toggled
   by the block's "Animate on Scroll" control). The left intro and EACH
   card are observed individually by initFeaturedCategoryReveals() in
   viomedspa-global.js, which adds `.is-inview` to each element as it
   enters the viewport — so cards reveal one at a time while scrolling.

   Travel distance + duration are editor-controllable, emitted as
   --vio-featcat-travel / --vio-featcat-duration on the layout wrapper
   in render.php (fallbacks match the attribute defaults). */
.vio-featured-categories--animate .vio-featured-categories__leftInner,
.vio-featured-categories--animate .vio-featured-categories__card {
	opacity: 0;
	transform: translateY(var(--vio-featcat-travel, 64px));
	/* Short delay so the motion reads as intentional rather than firing
	   the instant the element crosses into the viewport. */
	transition:
		opacity var(--vio-featcat-duration, 1100ms) ease var(--vio-featcat-delay, 200ms),
		transform var(--vio-featcat-duration, 1100ms) cubic-bezier(0.16, 1, 0.3, 1) var(--vio-featcat-delay, 200ms);
	will-change: opacity, transform;
}

.vio-featured-categories--animate .vio-featured-categories__leftInner.is-inview,
.vio-featured-categories--animate .vio-featured-categories__card.is-inview {
	opacity: 1;
	transform: translateY(0);
}

/* Respect OS Reduce Motion — show everything immediately. */
@media (prefers-reduced-motion: reduce) {
	.vio-featured-categories--animate .vio-featured-categories__leftInner,
	.vio-featured-categories--animate .vio-featured-categories__card {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ############################## block-media-cta.css ############################## */
.vio-section.vio-media-cta:not(.vio-treatment-hero),section.vio-section.vio-media-cta.vio-hero-overlap:not(.vio-treatment-hero),section.vio-section.vio-media-cta:not(.vio-treatment-hero){box-sizing:border-box!important;width:100vw!important;max-width:100vw!important;min-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:0!important;display:block!important;position:relative!important;overflow:hidden!important;min-height:min(70vh,800px);max-height:100vh;max-height:100dvh}.vio-section.vio-media-cta:not(.vio-treatment-hero)>.vio-section__inner,.vio-section.vio-media-cta:not(.vio-treatment-hero)>.vio-section__inner>.vio-section__content,.vio-section.vio-media-cta:not(.vio-treatment-hero)>.vio-section__inner>.vio-section__content>.vio-section__body{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;height:100%!important;min-height:inherit;overflow:visible!important;grid-template-columns:none!important}.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__innerLayout{position:relative;width:100%;height:100%;min-height:min(70vh,800px);z-index:2}.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media,.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media.isContained{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;left:0!important;right:0!important;top:0!important;bottom:0!important}.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media.isContained::before,.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media::before{margin:0!important;padding:0!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important}.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media .vio-media-cta__image,.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media .vio-media-cta__video,.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media img,.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media picture,.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;margin:0!important;padding:0!important}.vio-media-cta__media .vio-media-cta__image.is-mirrored{transform:scaleX(-1)}.vio-media-cta__innerLayout[class*=vio-media-cta--gradient-]::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}.vio-media-cta--gradient-very-light::after{--vio-grad-end:0.25}.vio-media-cta--gradient-light::after{--vio-grad-end:0.45}.vio-media-cta--gradient-medium::after{--vio-grad-end:0.7}.vio-media-cta--gradient-heavy::after{--vio-grad-end:0.9}.vio-media-cta--anchor-bottom-center[class*="--gradient-"]::after,.vio-media-cta--anchor-bottom-left[class*="--gradient-"]::after,.vio-media-cta--anchor-bottom-right[class*="--gradient-"]::after{background:linear-gradient(to top,rgba(3,3,3,var(--vio-grad-end)) 0,transparent 70%)}.vio-media-cta--anchor-top-center[class*="--gradient-"]::after,.vio-media-cta--anchor-top-left[class*="--gradient-"]::after,.vio-media-cta--anchor-top-right[class*="--gradient-"]::after{background:linear-gradient(to bottom,rgba(3,3,3,var(--vio-grad-end)) 0,transparent 70%)}.vio-media-cta--anchor-middle-left[class*="--gradient-"]::after{background:linear-gradient(to right,rgba(3,3,3,var(--vio-grad-end)) 0,transparent 70%)}.vio-media-cta--anchor-middle-right[class*="--gradient-"]::after{background:linear-gradient(to left,rgba(3,3,3,var(--vio-grad-end)) 0,transparent 70%)}.vio-media-cta--anchor-middle-center[class*="--gradient-"]::after{background:radial-gradient(ellipse at center,rgba(3,3,3,var(--vio-grad-end)) 0,transparent 70%)}.vio-section.vio-media-cta .vio-section__title-image{width:100%;height:auto}.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-section__inner.vio-media-cta__inner{position:absolute!important;display:block!important;height:auto!important;width:auto!important;max-width:min(640px,80vw)!important;padding:50px!important;margin:0!important;align-items:initial!important;justify-items:initial!important;z-index:3}.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__inner>.vio-section__content{width:100%!important;height:auto!important;display:block!important;justify-self:stretch!important;margin:0!important}.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft *,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft .vio-section__content,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft .vio-section__cta,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft .vio-section__intro{text-align:left!important;justify-content:flex-start!important;align-items:flex-start!important;justify-self:start!important;align-self:start!important;margin-left:0!important;margin-right:auto!important}.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter *,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter .vio-section__content,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter .vio-section__cta,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter .vio-section__intro{text-align:center!important;justify-content:center!important;align-items:center!important;justify-self:center!important;margin-left:auto!important;margin-right:auto!important}.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight *,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight .vio-section__content,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight .vio-section__cta,.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight .vio-section__intro{text-align:right!important;justify-content:flex-end!important;align-items:flex-end!important;justify-self:end!important;align-self:end!important;margin-left:auto!important;margin-right:0!important}.vio-media-cta--anchor-top-center>.vio-media-cta__inner,.vio-media-cta--anchor-top-left>.vio-media-cta__inner,.vio-media-cta--anchor-top-right>.vio-media-cta__inner{top:0}.vio-media-cta--anchor-middle-center>.vio-media-cta__inner,.vio-media-cta--anchor-middle-left>.vio-media-cta__inner,.vio-media-cta--anchor-middle-right>.vio-media-cta__inner{top:50%;transform:translateY(-50%)}.vio-media-cta--anchor-bottom-center>.vio-media-cta__inner,.vio-media-cta--anchor-bottom-left>.vio-media-cta__inner,.vio-media-cta--anchor-bottom-right>.vio-media-cta__inner{bottom:0}.vio-media-cta--anchor-bottom-left>.vio-media-cta__inner,.vio-media-cta--anchor-middle-left>.vio-media-cta__inner,.vio-media-cta--anchor-top-left>.vio-media-cta__inner{left:0;right:auto;text-align:left}.vio-media-cta--anchor-bottom-center>.vio-media-cta__inner,.vio-media-cta--anchor-middle-center>.vio-media-cta__inner,.vio-media-cta--anchor-top-center>.vio-media-cta__inner{left:50%;right:auto;transform:translateX(-50%);text-align:center}.vio-media-cta--anchor-middle-center>.vio-media-cta__inner{transform:translate(-50%,-50%)}.vio-media-cta--anchor-bottom-right>.vio-media-cta__inner,.vio-media-cta--anchor-middle-right>.vio-media-cta__inner,.vio-media-cta--anchor-top-right>.vio-media-cta__inner{right:0;left:auto;text-align:right}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-center,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-left,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-right{top:0;bottom:auto}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-center,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-left,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-right{top:50%;bottom:auto}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-center,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-left,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-right{top:auto;bottom:0}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-left,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-left,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-left{left:0;right:auto;text-align:left}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-center,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-center,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-center{left:50%;right:auto;text-align:center}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-right,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-right,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-right{right:0;left:auto;text-align:right}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-left,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-right,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-left,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-right{transform:none}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-center,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-center{transform:translateX(-50%)}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-left,.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-right{transform:translateY(-50%)}.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-center{transform:translate(-50%,-50%)}.vio-media-cta .vio-media-cta__media::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;--vio-mediacta-gradient-rgb:0,0,0}.vio-section.vio-section--text-dark .vio-media-cta__media::after{--vio-mediacta-gradient-rgb:254,255,249}.vio-media-cta--anchor-top-left .vio-media-cta__media::after{background:linear-gradient(to bottom right,rgba(var(--vio-mediacta-gradient-rgb),.65) 0,rgba(var(--vio-mediacta-gradient-rgb),.2) 45%,rgba(var(--vio-mediacta-gradient-rgb),0) 75%)}.vio-media-cta--anchor-top-center .vio-media-cta__media::after{background:linear-gradient(to bottom,rgba(var(--vio-mediacta-gradient-rgb),.65) 0,rgba(var(--vio-mediacta-gradient-rgb),.2) 45%,rgba(var(--vio-mediacta-gradient-rgb),0) 75%)}.vio-media-cta--anchor-top-right .vio-media-cta__media::after{background:linear-gradient(to bottom left,rgba(var(--vio-mediacta-gradient-rgb),.65) 0,rgba(var(--vio-mediacta-gradient-rgb),.2) 45%,rgba(var(--vio-mediacta-gradient-rgb),0) 75%)}.vio-media-cta--anchor-middle-left .vio-media-cta__media::after{background:linear-gradient(to right,rgba(var(--vio-mediacta-gradient-rgb),.65) 0,rgba(var(--vio-mediacta-gradient-rgb),.2) 45%,rgba(var(--vio-mediacta-gradient-rgb),0) 75%)}.vio-media-cta--anchor-middle-center .vio-media-cta__media::after{background:radial-gradient(circle at center,rgba(var(--vio-mediacta-gradient-rgb),.55) 0,rgba(var(--vio-mediacta-gradient-rgb),.15) 55%,rgba(var(--vio-mediacta-gradient-rgb),0) 85%)}.vio-media-cta--anchor-middle-right .vio-media-cta__media::after{background:linear-gradient(to left,rgba(var(--vio-mediacta-gradient-rgb),.65) 0,rgba(var(--vio-mediacta-gradient-rgb),.2) 45%,rgba(var(--vio-mediacta-gradient-rgb),0) 75%)}.vio-media-cta--anchor-bottom-left .vio-media-cta__media::after{background:linear-gradient(to top right,rgba(var(--vio-mediacta-gradient-rgb),.85) 0,rgba(var(--vio-mediacta-gradient-rgb),.55) 30%,rgba(var(--vio-mediacta-gradient-rgb),.25) 55%,rgba(var(--vio-mediacta-gradient-rgb),0) 85%)}.vio-media-cta--anchor-bottom-center .vio-media-cta__media::after{background:linear-gradient(to top,rgba(var(--vio-mediacta-gradient-rgb),.65) 0,rgba(var(--vio-mediacta-gradient-rgb),.2) 45%,rgba(var(--vio-mediacta-gradient-rgb),0) 75%)}.vio-media-cta--anchor-bottom-right .vio-media-cta__media::after{background:linear-gradient(to top left,rgba(var(--vio-mediacta-gradient-rgb),.65) 0,rgba(var(--vio-mediacta-gradient-rgb),.2) 45%,rgba(var(--vio-mediacta-gradient-rgb),0) 75%)}.vio-media-cta.vio-media-cta--no-gradient .vio-media-cta__media::after{display:none}@media (max-width:1023px){.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-section__inner.vio-media-cta__inner{padding-top:calc(var(--vio-fixed-top,96px) + 24px)!important}.vio-media-cta__inner.vio-media-cta__inner--secondary{display:none!important}}
/* ############################## block-before-after-global.css ############################## */
@media (min-width:768px){.vio-section.vio-before-after,section.vio-section.vio-before-after{padding:50px 0}.vio-section.vio-before-after .vio-section__inner,section.vio-section.vio-before-after .vio-section__inner{max-width:none;padding-left:0;padding-right:0}}.vio-before-after__empty{text-align:center;color:var(--wp--preset--color--vio-ink,#030303);opacity:.7;padding:24px 0}.vio-before-after__title{font-family:var(--wp--preset--font-family--cormorant-garamond, serif);font-weight:400;font-size:clamp(28px, 4vw, 48px);line-height:1.15;letter-spacing:0;margin:0 0 50px;color:var(--wp--preset--color--vio-ink,#030303);text-align:center}.vio-before-after__title b,.vio-before-after__title strong{font-weight:700}.vio-before-after__grid{display:grid;gap:24px;justify-content:center;align-items:stretch}.vio-before-after__grid--1{grid-template-columns:minmax(0,26vw);max-width:454px;margin:0 auto}.vio-before-after__grid--2{grid-template-columns:minmax(0,26vw) minmax(0,26vw);gap:100px;max-width:1008px;margin:0 auto}@media (max-width:767px){.vio-before-after__grid--1{grid-template-columns:minmax(0,58vw);max-width:none}.vio-before-after__grid--2{grid-template-columns:minmax(0,58vw);max-width:none}}.vio-before-after__grid .vio-before-after__item{width:100%;position:relative}.vio-before-after__grid .vio-before-after__item .image-comparison__slider-wrapper{aspect-ratio:1/1;overflow:hidden;position:relative}.vio-before-after__carousel{position:relative;width:100%}.vio-before-after__track{position:relative;width:100%;height:454px;overflow:visible;contain:layout paint}.vio-before-after__carousel .swiper-wrapper{position:relative;height:100%;display:block;margin:0;padding:0}.vio-before-after__carousel .vio-before-after__slide{position:absolute;top:50%;left:50%;width:454px;height:454px;margin:0;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.6);transition:transform .45s cubic-bezier(.4, 0, .2, 1),width .45s cubic-bezier(.4, 0, .2, 1),height .45s cubic-bezier(.4, 0, .2, 1),opacity .3s ease;z-index:0}.vio-before-after__carousel .vio-before-after__slide.is-active{opacity:1;pointer-events:auto;width:454px;height:454px;transform:translate(-50%,-50%);z-index:3}.vio-before-after__carousel .vio-before-after__slide.is-prev{opacity:1;width:283px;height:283px;transform:translate(calc(-50% - 391px),-50%);z-index:1}.vio-before-after__carousel .vio-before-after__slide.is-next{opacity:1;width:283px;height:283px;transform:translate(calc(-50% + 391px),-50%);z-index:1}.vio-before-after__carousel .vio-before-after__slide.is-prev-2{opacity:1;width:283px;height:283px;transform:translate(calc(-50% - 697px),-50%);z-index:0}.vio-before-after__carousel .vio-before-after__slide.is-next-2{opacity:1;width:283px;height:283px;transform:translate(calc(-50% + 697px),-50%);z-index:0}.vio-before-after__carousel .vio-before-after__slide.is-next-2::after,.vio-before-after__carousel .vio-before-after__slide.is-next::after,.vio-before-after__carousel .vio-before-after__slide.is-prev-2::after,.vio-before-after__carousel .vio-before-after__slide.is-prev::after{content:'';position:absolute;inset:0;background:rgba(178,157,146,.45);pointer-events:none;z-index:10}.vio-before-after__carousel .vio-before-after__slide.is-next-2::after,.vio-before-after__carousel .vio-before-after__slide.is-prev-2::after{background:rgba(178,157,146,.6)}.vio-before-after__carousel .vio-before-after__slide .image-comparison{width:100%;height:100%}@media (min-width:768px){.vio-before-after__track{height:26vw;max-height:454px}.vio-before-after__carousel .vio-before-after__slide,.vio-before-after__carousel .vio-before-after__slide.is-active{width:26vw;height:26vw;max-width:454px;max-height:454px}.vio-before-after__carousel .vio-before-after__slide.is-next,.vio-before-after__carousel .vio-before-after__slide.is-next-2,.vio-before-after__carousel .vio-before-after__slide.is-prev,.vio-before-after__carousel .vio-before-after__slide.is-prev-2{width:16vw;height:16vw;max-width:283px;max-height:283px}.vio-before-after__carousel .vio-before-after__slide.is-prev{transform:translate(calc(-50% - 23vw),-50%)}.vio-before-after__carousel .vio-before-after__slide.is-next{transform:translate(calc(-50% + 23vw),-50%)}.vio-before-after__carousel .vio-before-after__slide.is-prev-2{transform:translate(calc(-50% - 41vw),-50%)}.vio-before-after__carousel .vio-before-after__slide.is-next-2{transform:translate(calc(-50% + 41vw),-50%)}}@media (max-width:767px){.vio-section.vio-before-after,section.vio-section.vio-before-after{padding-left:0;padding-right:0}.vio-section.vio-before-after .vio-section__inner,section.vio-section.vio-before-after .vio-section__inner{max-width:none;padding-left:0;padding-right:0}.vio-before-after__track{height:58vw;min-height:200px;max-height:420px;contain:layout}.vio-before-after__carousel .vio-before-after__slide,.vio-before-after__carousel .vio-before-after__slide.is-active{width:58vw;height:58vw;min-width:200px;min-height:200px;max-width:420px;max-height:420px}.vio-before-after__carousel .vio-before-after__slide.is-next,.vio-before-after__carousel .vio-before-after__slide.is-prev{width:52vw;height:52vw;min-width:170px;min-height:170px;max-width:380px;max-height:380px;opacity:1}.vio-before-after__carousel .vio-before-after__slide.is-prev{transform:translate(calc(-50% - 58vw),-50%)}.vio-before-after__carousel .vio-before-after__slide.is-next{transform:translate(calc(-50% + 58vw),-50%)}.vio-before-after__carousel .vio-before-after__slide.is-next-2,.vio-before-after__carousel .vio-before-after__slide.is-prev-2{opacity:0;pointer-events:none}.vio-before-after__title{padding-left:24px;padding-right:24px}.vio-before-after__nav{padding-left:24px;padding-right:24px}.vio-before-after__active-caption{padding-left:24px;padding-right:24px}}.vio-before-after__nav{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:50px}.vio-before-after__nav-btn{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:0 0;color:var(--wp--preset--color--vio-ink,#030303);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s ease}.vio-before-after__nav-btn:focus-visible,.vio-before-after__nav-btn:hover{background:var(--wp--preset--color--vio-alabaster,#f2f0e6)}.vio-before-after__nav-btn svg{width:18px;height:18px;display:block}.vio-before-after__nav-btn:focus-visible{outline:2px solid var(--wp--preset--color--vio-ink,#030303);outline-offset:2px}.vio-before-after .image-comparison__caption{font-size:11px;top:8px;bottom:auto}.vio-before-after .image-comparison__caption--before{left:8px;right:auto}.vio-before-after .image-comparison__caption--after{right:8px;left:auto;text-align:right}.vio-before-after__item-caption{margin:20px 0 0;font-family:Nunito,system-ui,sans-serif;font-size:18px;line-height:1.55;color:inherit;text-align:center;letter-spacing:.01em}.vio-before-after__carousel .vio-before-after__item-caption{display:none}.vio-before-after__active-caption{margin:20px auto 8px;font-family:Nunito,system-ui,sans-serif;font-size:18px;line-height:1.55;color:inherit;text-align:center;letter-spacing:.01em;min-height:1.55em;opacity:1;transition:opacity .18s ease}.vio-before-after__active-caption[data-empty="1"]{opacity:0}
/* ############################## block-before-after-testimonials.css ############################## */
.vio-section.vio-bat,section.vio-section.vio-bat{background:var(--wp--preset--color--vio-lotion,#fefff9);color:var(--wp--preset--color--vio-ink,#030303);width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;box-sizing:border-box;padding:0!important}.vio-bat__inner,.vio-section.vio-bat .vio-bat__inner,.vio-section.vio-bat .vio-section__inner.vio-bat__inner{max-width:100%!important;width:100%!important;margin-left:0!important;margin-right:0!important;padding:50px!important;box-sizing:border-box;display:flex;flex-direction:column}.vio-bat__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start;width:100%}.vio-bat__grid{justify-items:center}.vio-bat__col{display:flex;flex-direction:column;min-width:0;justify-content:center;align-items:center;width:100%;max-width:100%}.vio-bat__col>.vio-bat__title{width:100%;align-self:stretch}.vio-bat__title,.vio-section__title.vio-bat__title{margin:0 0 32px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(32px, 4vw, 56px);line-height:1.1;color:var(--wp--preset--color--vio-ink,#030303);text-align:center}.vio-bat__title b,.vio-bat__title strong{font-weight:700}.vio-bat .vio-bat__col .vio-bat__ba-wrap,.vio-bat__ba-wrap,.vio-section.vio-bat .vio-bat__col--ba .vio-bat__ba-wrap{position:relative!important;width:700px!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;overflow:hidden!important}.vio-bat__ba-wrap .vio-section,.vio-bat__ba-wrap>.vio-section,body:not(.editor-styles-wrapper) .entry-content .vio-bat__ba-wrap .vio-section,body:not(.editor-styles-wrapper) .wp-block-post-content .vio-bat__ba-wrap .vio-section{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:0!important;background:0 0!important}.vio-bat__ba-wrap .vio-section__inner{padding:0!important;max-width:none!important}.vio-bat__ba-wrap .vio-before-after__track{height:440px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide{width:440px;height:440px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-active{width:440px;height:440px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next,.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev{width:280px;height:280px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev{transform:translate(calc(-50% - 410px),-50%)}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next{transform:translate(calc(-50% + 410px),-50%)}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next-2,.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev-2{width:280px;height:280px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev-2{transform:translate(calc(-50% - 700px),-50%)}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next-2{transform:translate(calc(-50% + 700px),-50%)}@media (max-width:900px){.vio-bat__ba-wrap .vio-before-after__track{height:320px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide,.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-active{width:320px;height:320px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next,.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev{width:200px;height:200px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev{transform:translate(calc(-50% - 300px),-50%)}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next{transform:translate(calc(-50% + 300px),-50%)}}.vio-bat .vio-bat__col .vio-bat__testimonials,.vio-bat__testimonials,.vio-section.vio-bat .vio-bat__col--testimonials .vio-bat__testimonials{position:relative!important;height:clamp(420px,60vh,720px);overflow:hidden!important;width:540px!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%)}.vio-bat__testimonials-track{display:flex;flex-direction:column;gap:36px;animation:vio-bat-scroll var(--vio-bat-scroll-duration,30s) linear infinite;will-change:transform}.vio-bat__testimonials:focus-within .vio-bat__testimonials-track,.vio-bat__testimonials:hover .vio-bat__testimonials-track{animation-play-state:paused}@keyframes vio-bat-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}@media (prefers-reduced-motion:reduce){.vio-bat__testimonials-track{animation:none}}.vio-bat__testimonial{display:flex;flex-direction:column;gap:12px}.vio-bat__testimonial-eyebrow{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(28px, 3.2vw, 44px);line-height:1;color:var(--vio-bat-title-color,var(--wp--preset--color--vio-mouse-dark,#5c4a3a))}.vio-bat__testimonial-quote{margin:0;font-family:Nunito,system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.55;color:var(--wp--preset--color--vio-ink,#030303);max-width:56ch}.vio-bat__testimonial-name{margin:0;font-family:Nunito,system-ui,sans-serif;font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--wp--preset--color--vio-ink,#030303)}.vio-bat__empty{font-style:italic;color:#888}.vio-section.vio-bat.vio-bg--vio-ink{background:var(--wp--preset--color--vio-ink,#141414);color:var(--wp--preset--color--vio-lotion,#fefff9)}.vio-section.vio-bat.vio-bg--vio-ink .vio-bat__testimonial-name,.vio-section.vio-bat.vio-bg--vio-ink .vio-bat__testimonial-quote,.vio-section.vio-bat.vio-bg--vio-ink .vio-bat__title{color:var(--wp--preset--color--vio-lotion,#fefff9)}@media (max-width:900px){.vio-bat__inner{padding:56px clamp(16px,5vw,40px)}.vio-bat__grid{grid-template-columns:1fr;gap:56px}.vio-bat__title{margin-bottom:24px}.vio-bat__testimonials{height:clamp(360px,70vh,560px)}}@media (max-width:600px){.vio-bat__inner{padding:40px 16px}.vio-bat__testimonial-eyebrow{font-size:28px}}@media (max-width:767px){.vio-section.vio-bat,section.vio-section.vio-bat{padding-left:0!important;padding-right:0!important}.vio-section.vio-bat .vio-bat__inner,.vio-section.vio-bat .vio-section__inner.vio-bat__inner{padding-left:0!important;padding-right:0!important}.vio-bat__title{padding-left:24px;padding-right:24px}.vio-bat__col--testimonials{padding-left:24px;padding-right:24px}.vio-bat .vio-bat__col .vio-bat__ba-wrap,.vio-bat__ba-wrap,.vio-section.vio-bat .vio-bat__col--ba .vio-bat__ba-wrap{overflow:visible!important;width:100%!important}.vio-bat__col--ba{overflow:visible}.vio-bat__ba-wrap .vio-before-after__track{height:58vw;min-height:200px;max-height:420px;contain:layout}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide,.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-active{width:58vw;height:58vw;min-width:200px;min-height:200px;max-width:420px;max-height:420px}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next,.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev{width:52vw;height:52vw;min-width:170px;min-height:170px;max-width:380px;max-height:380px;opacity:1}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev{transform:translate(calc(-50% - 58vw),-50%)}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next{transform:translate(calc(-50% + 58vw),-50%)}.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next-2,.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev-2{opacity:0;pointer-events:none}.vio-bat__ba-wrap .vio-before-after__active-caption{padding-left:24px;padding-right:24px}.vio-bat__ba-wrap .vio-before-after__nav{padding-left:24px;padding-right:24px}}
/* ############################## block-fifty-fifty-image-copy.css ############################## */
/* ==========================================================================
   50/50 Image/Copy — match 50/50 Accordion image handling.

   Goal: at desktop (1280+), the media column behaves identically to the
   50/50 Accordion's media column — section padding, fit, fill, height,
   and column padding all line up. The accordion's rules live in
   `blocks/fifty-fifty-accordion/style.css`; we mirror the same patterns
   here scoped to `.vio-fifty-fifty` so the two blocks render to the
   same visual spec without touching the (legacy) viomedspa-global.css
   rules at lines 1282–1370.
   ========================================================================== */

/* Min-width 0 on grid items so long text doesn't blow the track. */
.vio-fifty-fifty__copy,
.vio-fifty-fifty__media {
	min-width: 0;
}

@media (min-width: 1280px) {

	/* ── SECTION — 50px on all sides, sized to content ────────────── */
	.vio-section.vio-fifty-fifty,
	section.vio-section.vio-fifty-fifty {
		padding: 50px;
		overflow: visible;
		display: flex;
		flex-direction: column;
		contain: layout paint;
	}

	/* Strip the global .vio-section__inner max-width:1440 + horizontal
	   padding so the grid spans the section's full width edge-to-edge
	   (= viewport − 50px section padding). Drop the `flex: 1 1 auto`
	   so wrappers no longer pull the grid up to a forced row height —
	   the grid now sizes to its tallest column. */
	.vio-section.vio-fifty-fifty .vio-section__inner,
	section.vio-section.vio-fifty-fifty .vio-section__inner,
	.vio-section.vio-fifty-fifty .vio-section__content,
	.vio-section.vio-fifty-fifty .vio-section__body {
		flex: 0 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
	}

	/* ── GRID — 2 columns, 100px gap, rows size to content ─────────── */
	.vio-fifty-fifty .vio-fifty-fifty__grid {
		min-height: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 100px;
		align-items: start;
	}

	/* ── MEDIA COLUMN — fixed 4:5 portrait crop at 75vh tall ─────────
	   align-self: start so the image top aligns with the copy column
	   top (and therefore the section title). padding-top matches the
	   copy column's 50px top padding so the image edge and the title
	   start at the same vertical position. */
	.vio-fifty-fifty .vio-fifty-fifty__media {
		min-height: 0;
		/* Viewport-relative for tall viewports, but capped so browser zoom-out
		   (which grows vh values in content-pixel terms) doesn't blow the
		   image up to disproportionate sizes vs. other blocks on the page. */
		height: clamp(320px, 75vh, 720px);
		height: clamp(320px, 75dvh, 720px);
		max-height: 720px;
		width: 100%;
		position: relative;
		overflow: hidden;
		contain: layout paint;
		align-self: start;
		padding-top: 50px;
	}
	/* Content column — top-aligned so the title anchors at the top
	   of the column rather than floating with justify-content:center. */
	.vio-fifty-fifty .vio-fifty-fifty__copy {
		min-height: 0;
		align-self: start;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	/* ── STICKY MEDIA — image stays fixed while copy scrolls ────────
	   Sticky offset mirrors the 50/50 accordion exactly:
	   var(--vio-fixed-top, 96px) — uses the JS-driven fixed-header
	   height when set, falls back to 96px to match the accordion's
	   historical hardcoded value. Same var + same fallback means both
	   blocks pin to the same line under the sticky header. */
	.vio-fifty-fifty--sticky-media .vio-fifty-fifty__media {
		position: sticky;
		top: var(--vio-fixed-top, 96px);
		contain: layout;
	}
	.vio-fifty-fifty--sticky-copy .vio-fifty-fifty__copy {
		position: sticky;
		top: var(--vio-fixed-top, 96px);
	}
	/* Picture + image fill the media container edge to edge. */
	.vio-fifty-fifty .vio-fifty-fifty__media picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
		margin: 0;
	}
	.vio-fifty-fifty .vio-fifty-fifty__media .vio-fifty-fifty__image,
	.vio-fifty-fifty .vio-fifty-fifty__media .vio-fifty-fifty__video,
	.vio-fifty-fifty .vio-fifty-fifty__media > img,
	.vio-fifty-fifty .vio-fifty-fifty__media > video {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
		margin: 0;
		object-fit: cover;
		display: block;
	}

	/* ── CONTENT COLUMN ────────────────────────────────────────────────
	   Vertical padding gives breathing room above and below the content
	   stack. Top padding is the anchor: the image column matches it so
	   the image top aligns with the title. */
	.vio-fifty-fifty .vio-fifty-fifty__copy {
		min-height: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		max-width: 700px;
		width: 100%;
		justify-self: center;
	}

	/* The legacy global rules at viomedspa-global.css:1336-1364 use
	   `order` to swap the copy/media columns based on
	   `.vio-fifty-fifty--align-left/right`. Grid doesn't use order in
	   the same way as flex — but the global rules ARE still in place.
	   To make sure the copy/media columns swap correctly with grid,
	   restate the same orderings here. (Grid does honor `order` for
	   auto-placement.) */
	.vio-fifty-fifty--align-left .vio-fifty-fifty__copy   { order: 1; }
	.vio-fifty-fifty--align-left .vio-fifty-fifty__media  { order: 2; }
	.vio-fifty-fifty--align-right .vio-fifty-fifty__copy  { order: 2; }
	.vio-fifty-fifty--align-right .vio-fifty-fifty__media { order: 1; }

	/* ── FULL-BLEED overrides (1280+) ─────────────────────────────────
	   Close gap, stretch columns, drop media padding-top so the image
	   fills its half edge-to-edge. Copy gets its own padding since the
	   section padding is stripped. 0,3,0 beats the base rules. */
	.vio-section--media-full-bleed.vio-fifty-fifty .vio-fifty-fifty__grid {
		gap: 0;
		align-items: stretch;
	}
	.vio-section--media-full-bleed.vio-fifty-fifty .vio-fifty-fifty__media {
		padding-top: 0;
		height: auto;
		min-height: clamp(320px, 75vh, 720px);
		max-height: none;
		align-self: stretch;
	}
	.vio-section--media-full-bleed.vio-fifty-fifty .vio-fifty-fifty__copy {
		padding: 50px clamp(32px, 6vw, 96px);
	}
}

/* ── Tablet (768-1279) — mirror the desktop media sizing + sticky
   rules. The global flex layout keeps columns side-by-side; these
   rules add the viewport-height clamp and absolute-positioned picture
   so the image always fits on screen, matching the 1280+ grid rules.
   Below 768 columns stack and none of this applies. ────────────── */
@media (min-width: 768px) and (max-width: 1279px) {
	.vio-fifty-fifty:not(.vio-section--media-full-bleed) .vio-fifty-fifty__grid {
		align-items: start;
	}

	/* Full-bleed at tablet: switch from the global flexbox to CSS Grid
	   so the columns are exactly 50/50 regardless of padding. The
	   global flex:1 layout lets copy padding skew the split. */
	.vio-section--media-full-bleed.vio-fifty-fifty .vio-fifty-fifty__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		align-items: stretch;
	}

	/* Constrain media height to viewport (same clamp as desktop).
	   Overrides the global picture 640px/4:5 rules so the image fills
	   the clamped container edge-to-edge via object-fit:cover. */
	.vio-fifty-fifty .vio-fifty-fifty__media {
		height: clamp(320px, 75vh, 720px);
		max-height: 720px;
	}
	.vio-section--media-full-bleed.vio-fifty-fifty .vio-fifty-fifty__media {
		height: auto;
		min-height: clamp(320px, 75vh, 720px);
		max-height: none;
		align-self: stretch;
		padding-top: 0;
	}
	.vio-fifty-fifty .vio-fifty-fifty__media picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		aspect-ratio: auto;
		margin: 0;
	}
	.vio-fifty-fifty .vio-fifty-fifty__media .vio-fifty-fifty__image,
	.vio-fifty-fifty .vio-fifty-fifty__media > img {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
		margin: 0;
		object-fit: cover;
		display: block;
	}

	/* Full-bleed + sticky copy: start-align the copy so it is shorter
	   than the flex container, giving position:sticky room to scroll. */
	.vio-section--media-full-bleed.vio-fifty-fifty--sticky-copy .vio-fifty-fifty__copy {
		align-self: start;
		justify-content: flex-start;
	}

	.vio-fifty-fifty--sticky-copy .vio-fifty-fifty__copy {
		position: sticky;
		top: var(--vio-fixed-top, 96px);
	}
	.vio-fifty-fifty--sticky-media .vio-fifty-fifty__media {
		position: sticky;
		top: var(--vio-fixed-top, 96px);
	}
}

/* ==========================================================================
   No media populated — copy stands alone, centered in the section.

   render.php omits the empty media column and adds `--no-media`. We
   collapse the grid to a single column and center the copy block within
   the section (text alignment still follows the block's align controls,
   so set Intro Align: Center if you want centered text too). The two
   section classes (0,3,0) outrank the desktop `1fr 1fr` grid rule
   (0,2,0), so this wins at every breakpoint without a media query.
   ========================================================================== */
.vio-fifty-fifty.vio-fifty-fifty--no-media .vio-fifty-fifty__grid {
	grid-template-columns: 1fr;
}
.vio-fifty-fifty.vio-fifty-fifty--no-media .vio-fifty-fifty__copy {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	justify-self: center;
}

/* ==========================================================================
   Per-element alignment overrides.

   When the editor picks left/center/right for a specific element in the
   Per-Element Alignment panel, the section gets a modifier class:
     .vio-fifty-fifty--{element}-{align}
   These rules apply text-align (+ flex/grid alignment for the CTA wrapper
   which is a flex container). Empty value in the editor emits no class →
   no override → the element inherits from the section's intro align.
   ========================================================================== */

/* Title */
.vio-fifty-fifty.vio-fifty-fifty--title-left   .vio-section__title { text-align: left;   }
.vio-fifty-fifty.vio-fifty-fifty--title-center .vio-section__title { text-align: center; }
.vio-fifty-fifty.vio-fifty-fifty--title-right  .vio-section__title { text-align: right;  }

/* Title 2 (a.k.a. titleAlt) */
.vio-fifty-fifty.vio-fifty-fifty--title2-left   .vio-section__title-alt { text-align: left;   }
.vio-fifty-fifty.vio-fifty-fifty--title2-center .vio-section__title-alt { text-align: center; }
.vio-fifty-fifty.vio-fifty-fifty--title2-right  .vio-section__title-alt { text-align: right;  }

/* Lead */
.vio-fifty-fifty.vio-fifty-fifty--lead-left   .vio-section__lead { text-align: left;   }
.vio-fifty-fifty.vio-fifty-fifty--lead-center .vio-section__lead { text-align: center; }
.vio-fifty-fifty.vio-fifty-fifty--lead-right  .vio-section__lead { text-align: right;  }

/* Content (body copy paragraph block) — covers section-shell's
   `.vio-section__content-copy` AND the InnerBlocks wrapper used for
   richer content. */
.vio-fifty-fifty.vio-fifty-fifty--content-left   .vio-section__content-copy { text-align: left;   }
.vio-fifty-fifty.vio-fifty-fifty--content-center .vio-section__content-copy { text-align: center; }
.vio-fifty-fifty.vio-fifty-fifty--content-right  .vio-section__content-copy { text-align: right;  }

/* CTA — flex container; need both `justify-content` and `text-align` so
   buttons (or button groups) anchor to the chosen edge regardless of
   whether they're block-level or inline. Applies to BOTH the inline
   `.vio-fifty-fifty__ctas` flex row and the stacked
   `.vio-section__cta` / `.vio-section__bottom-cta` wrappers. */
.vio-fifty-fifty.vio-fifty-fifty--cta-left .vio-section__cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-left .vio-section__bottom-cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-left .vio-fifty-fifty__ctas {
	justify-content: flex-start !important;
	text-align: left;
}
.vio-fifty-fifty.vio-fifty-fifty--cta-center .vio-section__cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-center .vio-section__bottom-cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-center .vio-fifty-fifty__ctas {
	justify-content: center !important;
	text-align: center;
}
.vio-fifty-fifty.vio-fifty-fifty--cta-right .vio-section__cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-right .vio-section__bottom-cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-right .vio-fifty-fifty__ctas {
	justify-content: flex-end !important;
	text-align: right;
}

/* ==========================================================================
   Items list/grid — "+ title + content" rows between lead and CTA.

   Two layouts (set via `itemsLayout` attribute):
     - `grid` (default) — 2 columns at 768+ (1 col on mobile).
       Order: 1 top-left, 2 top-right, 3 bottom-left, 4 bottom-right.
     - `list`           — always single column, stacked top to bottom.
   ========================================================================== */
.vio-fifty-fifty__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;       /* default: 1 col (mobile + list) */
	gap: var(--wp--preset--spacing--750, 28px) var(--wp--preset--spacing--1000, 40px);
	width: 100%;
}

/* Grid layout: 2 columns at 768+. */
@media (min-width: 768px) {
	.vio-fifty-fifty__items.vio-fifty-fifty__items--grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* List layout: explicit single column on every breakpoint. */
.vio-fifty-fifty__items.vio-fifty-fifty__items--list {
	grid-template-columns: 1fr;
}

/* Single-row layout: all items in one horizontal row at 768+, equal-width
   columns regardless of how many items there are. Stacks (1 col) on mobile
   like the others via the base rule. */
@media (min-width: 768px) {
	.vio-fifty-fifty__items.vio-fifty-fifty__items--row {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

.vio-fifty-fifty__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--wp--preset--spacing--500, 16px);
	align-items: start;
	margin: 0;
}

.vio-fifty-fifty__item-mark {
	font-size: 1.25em;
	line-height: 1;
	font-weight: 400;
	color: inherit;
	opacity: 0.8;
	user-select: none;
	margin-top: 0.15em;
}

.vio-fifty-fifty__item-mark svg {
	width: 1.25em;
	height: 1.25em;
	display: block;
	stroke: currentColor;
}

.vio-fifty-fifty__item-body {
	min-width: 0;
}

.vio-fifty-fifty__item-title {
	margin: 0 0 var(--wp--preset--spacing--250, 6px) 0;
	font-size: var(--wp--preset--font-size--base, 18px);
	font-weight: 600;
	line-height: 1.3;
	/* Defeat any inherited uppercase heading style (some themes apply
	   `text-transform: uppercase` to h4 inside sections). Item titles
	   should render as plain mixed-case. */
	text-transform: none;
	letter-spacing: normal;
}

.vio-fifty-fifty__item-content {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 16px);
	line-height: 1.45;
	opacity: 0.92;
}

/* The items sit in the natural flow of the copy column. Give breathing
   room above (separating from lead/content) and below (separating from
   the CTA). */
.vio-fifty-fifty__copy > .vio-fifty-fifty__items {
	margin-top: var(--wp--preset--spacing--1000, 40px);
	margin-bottom: var(--wp--preset--spacing--1000, 40px);
}

/* Block-level alignment of the items grid itself within the copy column.
   When the intro is centered (and `items` inherits the intro align via
   `vio-fifty-fifty--items-center`), we want the WHOLE grid centered as
   a block — its leftmost edge tucked closer to the lead text above —
   not stretched edge-to-edge with item-1 hugging the column's left wall.
   Use a max-width with auto side margins so the grid stays well within
   the column on wide screens but still grows on narrow ones. */
.vio-fifty-fifty.vio-fifty-fifty--items-left .vio-fifty-fifty__items {
	margin-left: 0;
	margin-right: auto;
}
.vio-fifty-fifty.vio-fifty-fifty--items-center .vio-fifty-fifty__items {
	max-width: min(560px, 100%);
	margin-left: auto;
	margin-right: auto;
}
.vio-fifty-fifty.vio-fifty-fifty--items-right .vio-fifty-fifty__items {
	max-width: min(560px, 100%);
	margin-left: auto;
	margin-right: 0;
}

/* ==========================================================================
   Copy-as-image variant (50/50 Image/Image).
   The copy column is replaced by a second .vio-fifty-fifty__media element.
   Both columns share the same sizing/crop rules at desktop.
   ========================================================================== */
@media (min-width: 1280px) {
	.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy {
		min-height: 0;
		/* Mirrors the primary media column's cap so both sides of the
		   image/image variant stay in scale with each other AND with the
		   image/copy variant across zoom levels. */
		height: clamp(320px, 75vh, 720px);
		height: clamp(320px, 75dvh, 720px);
		max-height: 720px;
		width: 100%;
		position: relative;
		overflow: hidden;
		contain: layout paint;
		align-self: center;
		padding: 0;
	}
	.vio-fifty-fifty.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
	}
	.vio-fifty-fifty.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy .vio-fifty-fifty__image,
	.vio-fifty-fifty.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy > img {
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		object-fit: cover;
		display: block;
	}
}

/* Mobile: both images stack, each gets 4:5 crop. */
@media (max-width: 1279px) {
	.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy {
		aspect-ratio: 4 / 5;
		overflow: hidden;
		position: relative;
	}
	.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy .vio-fifty-fifty__image,
	.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ==========================================================================
   Tablet border-radius fix (768px – 1279px).

   The global base rule gives .vio-fifty-fifty__media border-radius+overflow:hidden,
   but at tablet the picture inside is max-width:640px and centered — it sits
   inset from the container edges, so the container's overflow clip never hits
   the image corners. Apply radius directly on the picture (which already has
   overflow:hidden from global CSS) so the image corners are clipped by the
   picture element itself. Also cover the fallback bare <img> case.
   At 1280px+ the picture is position:absolute;inset:0 and the container clip
   handles everything, so this rule is scoped to below that breakpoint.
   ========================================================================== */
@media (max-width: 1279px) {
	.vio-fifty-fifty:not(.vio-section--media-full-bleed) .vio-fifty-fifty__media picture,
	.vio-fifty-fifty:not(.vio-section--media-full-bleed) .vio-fifty-fifty__media > img {
		border-radius: var(--vio-img-radius, 0px);
	}
}

/* ==========================================================================
   Inline CTAs mobile fix (preserved from prior version).
   ========================================================================== */
@media (max-width: 767px) {
	.vio-fifty-fifty__ctas {
		flex-direction: column;
	}
	.vio-fifty-fifty__ctas .vio-btn {
		width: 100%;
	}
}

/* ############################## block-fifty-fifty-accordion.css ############################## */
.vio-fifty-fifty-accordion--mode-content .vio-fifty-fifty-accordion__col--media,.vio-fifty-fifty-accordion--mode-content .vio-fifty-fifty-accordion__media{aspect-ratio:auto;overflow:visible}.vio-fifty-fifty-accordion--mode-content .vio-fifty-fifty-accordion__col--media{flex-direction:column;align-items:center}@media (min-width:1280px){.vio-section.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--mode-content,section.vio-section.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--mode-content{min-height:0}.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--mode-content .vio-fifty-fifty-accordion__grid{grid-template-rows:auto}}@media (max-width:767px){.vio-fifty-fifty-accordion--mode-content .vio-fifty-fifty-accordion__col--media{aspect-ratio:auto;overflow:visible}}@media (max-width:1279px){.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--mobile-content-first .vio-fifty-fifty-accordion__col--content{order:1}.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--mobile-content-first .vio-fifty-fifty-accordion__col--media{order:2}}@media (min-width:1280px){.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--sticky-opposite .vio-fifty-fifty-accordion__col--media{position:sticky;top:var(--vio-fixed-top,96px);align-self:start}.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--sticky-content .vio-fifty-fifty-accordion__col--content{position:sticky;top:var(--vio-fixed-top,96px);align-self:start}.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--valign-start .vio-fifty-fifty-accordion__col--content{align-self:start}.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--valign-center .vio-fifty-fifty-accordion__col--content{align-self:center}.vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--valign-end .vio-fifty-fifty-accordion__col--content{align-self:end}}.vio-fifty-fifty-accordion__col,.vio-fifty-fifty-accordion__col--content,.vio-fifty-fifty-accordion__col--media{min-width:0}@media (min-width:1280px){.vio-section.vio-fifty-fifty-accordion,section.vio-section.vio-fifty-fifty-accordion{padding:50px;min-height:100vh;min-height:100dvh;overflow:visible;display:flex;flex-direction:column;contain:layout paint}.vio-section.vio-fifty-fifty-accordion .vio-section__body,.vio-section.vio-fifty-fifty-accordion .vio-section__content,.vio-section.vio-fifty-fifty-accordion .vio-section__inner,section.vio-section.vio-fifty-fifty-accordion .vio-section__inner{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}.vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__grid{flex:1 1 auto;min-height:0;height:100%;align-items:stretch!important;grid-template-rows:minmax(calc(100vh - 100px),auto);grid-template-rows:minmax(calc(100dvh - 100px),auto)}.vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--media{min-height:0;align-self:center;display:flex;align-items:center;justify-content:center;contain:layout paint}.vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--media .vio-fifty-fifty-accordion__media{position:relative;height:75vh;height:75dvh;width:100%;max-height:75dvh;overflow:hidden;contain:layout paint size}.vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--media picture{position:absolute;inset:0;display:block}.vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--media .vio-fifty-fifty-accordion__image,.vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--media video{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;transform:translateZ(0)}.vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--content{min-height:0;max-width:700px;width:100%;justify-self:center;padding:0;display:flex;flex-direction:column;justify-content:flex-start}.vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__grid{gap:100px}}.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__media{position:relative;overflow:hidden}.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__media picture{display:block;width:100%;height:100%}.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__image,.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__video{width:100%;height:100%;display:block;object-fit:cover}@media (min-width:1280px){.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__media{width:100%;max-width:none;aspect-ratio:auto}.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__media picture{max-width:none}.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__image,.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__video{max-width:none;aspect-ratio:auto;margin:0}}.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__media::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--top-left)::after{background:linear-gradient(to bottom right,rgba(0,0,0,.7) 0,rgba(0,0,0,.3) 35%,rgba(0,0,0,0) 75%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--top-center)::after{background:linear-gradient(to bottom,rgba(0,0,0,.65) 0,rgba(0,0,0,.25) 35%,rgba(0,0,0,0) 75%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--top-right)::after{background:linear-gradient(to bottom left,rgba(0,0,0,.7) 0,rgba(0,0,0,.3) 35%,rgba(0,0,0,0) 75%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--middle-left)::after{background:linear-gradient(to right,rgba(0,0,0,.65) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,0) 80%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--middle-center)::after{background:radial-gradient(circle at center,rgba(0,0,0,.45) 0,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 85%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--middle-right)::after{background:linear-gradient(to left,rgba(0,0,0,.65) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,0) 80%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--bottom-left)::after{background:linear-gradient(to top right,rgba(0,0,0,.75) 0,rgba(0,0,0,.35) 35%,rgba(0,0,0,0) 80%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--bottom-center)::after{background:linear-gradient(to top,rgba(0,0,0,.65) 0,rgba(0,0,0,.25) 35%,rgba(0,0,0,0) 75%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--bottom-right)::after{background:linear-gradient(to top left,rgba(0,0,0,.75) 0,rgba(0,0,0,.35) 35%,rgba(0,0,0,0) 80%)}@media (max-width:767px){.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-top-left)::after{background:linear-gradient(to bottom right,rgba(0,0,0,.7) 0,rgba(0,0,0,.3) 35%,rgba(0,0,0,0) 75%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-top-center)::after{background:linear-gradient(to bottom,rgba(0,0,0,.65) 0,rgba(0,0,0,.25) 35%,rgba(0,0,0,0) 75%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-top-right)::after{background:linear-gradient(to bottom left,rgba(0,0,0,.7) 0,rgba(0,0,0,.3) 35%,rgba(0,0,0,0) 75%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-middle-left)::after{background:linear-gradient(to right,rgba(0,0,0,.65) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,0) 80%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-middle-center)::after{background:radial-gradient(circle at center,rgba(0,0,0,.45) 0,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 85%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-middle-right)::after{background:linear-gradient(to left,rgba(0,0,0,.65) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,0) 80%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-bottom-left)::after{background:linear-gradient(to top right,rgba(0,0,0,.75) 0,rgba(0,0,0,.35) 35%,rgba(0,0,0,0) 80%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-bottom-center)::after{background:linear-gradient(to top,rgba(0,0,0,.65) 0,rgba(0,0,0,.25) 35%,rgba(0,0,0,0) 75%)}.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--mobile-bottom-right)::after{background:linear-gradient(to top left,rgba(0,0,0,.75) 0,rgba(0,0,0,.35) 35%,rgba(0,0,0,0) 80%)}}.vio-fifty-fifty-accordion__overlay{position:absolute;inset:0;z-index:2;padding:50px;color:var(--wp--preset--color--vio-lotion,#fefff9);display:flex;flex-direction:column;gap:25px}.vio-fifty-fifty-accordion__overlay--top-left{justify-content:flex-start;align-items:flex-start;text-align:left}.vio-fifty-fifty-accordion__overlay--top-center{justify-content:flex-start;align-items:center;text-align:center}.vio-fifty-fifty-accordion__overlay--top-right{justify-content:flex-start;align-items:flex-end;text-align:right}.vio-fifty-fifty-accordion__overlay--middle-left{justify-content:center;align-items:flex-start;text-align:left}.vio-fifty-fifty-accordion__overlay--middle-center{justify-content:center;align-items:center;text-align:center}.vio-fifty-fifty-accordion__overlay--middle-right{justify-content:center;align-items:flex-end;text-align:right}.vio-fifty-fifty-accordion__overlay--bottom-left{justify-content:flex-end;align-items:flex-start;text-align:left}.vio-fifty-fifty-accordion__overlay--bottom-center{justify-content:flex-end;align-items:center;text-align:center}.vio-fifty-fifty-accordion__overlay--bottom-right{justify-content:flex-end;align-items:flex-end;text-align:right}@media (max-width:767px){.vio-fifty-fifty-accordion__overlay--mobile-top-left{justify-content:flex-start;align-items:flex-start;text-align:left}.vio-fifty-fifty-accordion__overlay--mobile-top-center{justify-content:flex-start;align-items:center;text-align:center}.vio-fifty-fifty-accordion__overlay--mobile-top-right{justify-content:flex-start;align-items:flex-end;text-align:right}.vio-fifty-fifty-accordion__overlay--mobile-middle-left{justify-content:center;align-items:flex-start;text-align:left}.vio-fifty-fifty-accordion__overlay--mobile-middle-center{justify-content:center;align-items:center;text-align:center}.vio-fifty-fifty-accordion__overlay--mobile-middle-right{justify-content:center;align-items:flex-end;text-align:right}.vio-fifty-fifty-accordion__overlay--mobile-bottom-left{justify-content:flex-end;align-items:flex-start;text-align:left}.vio-fifty-fifty-accordion__overlay--mobile-bottom-center{justify-content:flex-end;align-items:center;text-align:center}.vio-fifty-fifty-accordion__overlay--mobile-bottom-right{justify-content:flex-end;align-items:flex-end;text-align:right}}.vio-fifty-fifty-accordion__overlay-title{font-family:var(--wp--preset--font-family--cormorant-garamond, serif);font-weight:400;font-size:48px;line-height:1.1;letter-spacing:0}.vio-fifty-fifty-accordion__overlay-lead{font-family:var(--wp--preset--font-family--nunito-sans, sans-serif);font-size:16px;line-height:1.5;max-width:480px}.vio-fifty-fifty-accordion__overlay-lead p{margin:0}.vio-fifty-fifty-accordion__overlay-title b,.vio-fifty-fifty-accordion__overlay-title strong{font-weight:700}@media (max-width:768px){.vio-fifty-fifty-accordion__overlay{padding:30px;gap:16px}.vio-fifty-fifty-accordion__overlay-title{font-size:32px}.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__col--media img{aspect-ratio:3/4!important;object-fit:cover!important;max-width:100%!important}}.vio-fifty-fifty-accordion .vio-accordion details{margin-bottom:3px}.vio-fifty-fifty-accordion .vio-accordion details:last-child{margin-bottom:0}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion{display:block}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion details{border:none;border-bottom:none;margin:0;padding:0}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion details>summary{list-style:none;cursor:pointer}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion details>summary::-webkit-details-marker{display:none}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready{display:flex;flex-direction:column}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu-wrap{display:flex;align-items:stretch;gap:8px;margin-bottom:0}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu{display:flex;flex:1 1 0;min-width:0;flex-direction:row;gap:0;margin:0;overflow-x:auto;scrollbar-width:none}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu::-webkit-scrollbar{display:none}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu__btn{background:var(--wp--preset--color--vio-mtn-greige,#b29d92);border:1px solid rgba(3,3,3,.15);border-right:none;border-bottom:2px solid transparent;padding:16px 24px;font-family:var(--wp--preset--font-family--nunito-sans, sans-serif);font-size:18px;font-weight:400;color:var(--wp--preset--color--vio-ink,#030303);cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu__btn:hover{background:var(--wp--preset--color--vio-alabaster,#f2f0e6)}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu__btn.is-active,.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu__btn[aria-selected=true]{background:var(--wp--preset--color--vio-lotion,#fefff9);border-color:rgba(3,3,3,.15);border-right:1px solid rgba(3,3,3,.15);border-bottom-color:#b29d92}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu__btn:last-child{border-right:1px solid rgba(3,3,3,.15)}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu-arrow{flex:0 0 auto;width:36px;height:36px;display:none;align-items:center;justify-content:center;align-self:center;border:0;border-radius:50%;background:var(--wp--preset--color--vio-alabaster,#f2f0e6);color:var(--wp--preset--color--vio-ink,#030303);cursor:pointer;padding:0;transition:background .15s ease}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu-arrow:hover{background:var(--wp--preset--color--vio-lotion,#fefff9)}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu-arrow svg{width:16px;height:16px;display:block}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready.is-overflowing:not(.is-scroll-end) .vio-tabs-menu-arrow--next{display:flex}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready.is-overflowing:not(.is-scroll-start) .vio-tabs-menu-arrow--prev{display:flex}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu-wrap{position:relative;margin-bottom:0}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-panel{display:none;padding:24px;background:var(--wp--preset--color--vio-lotion,#fefff9);color:var(--wp--preset--color--vio-ink,#030303)}.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-panel.is-active{display:block}
/* ############################## block-basic-callout.css ############################## */
/* =============================================================================
   Basic Callout — block-wide spacing + non-full-bleed layout
   Per designer: section sits at 50px left/right padding on desktop, and
   adjacent head-elements (title, titleAlt, lead, content, CTA) are
   separated by exactly 100px of vertical breathing room. Because the
   layout uses flex `gap`, an unpopulated element produces zero space
   instead of a fixed-height empty band — collapsing automatically when
   any of (title, titleAlt, lead, content) is blank.

   Unlike most VIO sections (which are full-bleed), the Basic Callout sits
   as a centered box of its bg color within the page width — so the page
   bg (lotion by default) shows on either side. If the callout bg matches
   the page bg, the callout visually disappears into the page (no box).
   ============================================================================= */

/* Override the post-content full-bleed (which sets width: 100vw) so the
   callout sits 50px in from each viewport edge — exposing the page bg
   (lotion) on both sides regardless of how wide the viewport is.

   The base full-bleed rule in viomedspa-global.css uses
     body:not(.editor-styles-wrapper) .wp-block-post-content
     .vio-section:not(.wp-block-group) { width:100vw; margin-left:calc(50% - 50vw) }
   We match the same selector + an extra class so this wins on specificity,
   and reuse the `calc(50% - 50vw)` trick to escape post-content's own
   max-width — but then add +50px so the left edge lands 50px in from
   viewport-left, and constrain the width to viewport-minus-100px so the
   right edge lands 50px in from viewport-right. Result: 50px of page bg
   always visible on both sides, the callout box itself in between. */
/* Apply on any page regardless of post-content wrapper. The original
   override scoped to `.wp-block-post-content .vio-section.vio-basic-callout`
   matched only on Site 1 — on microsites the routing replaces the
   core/post-content block's output with raw pre-rendered HTML (no
   `.wp-block-post-content` wrapper class), so the scoped rule didn't
   apply and the section reverted to its parent's natural full width.

   The margin trick `calc(50% - 50vw + 50px)` plus `width: calc(100vw - 100px)`
   is parent-width-agnostic: regardless of whether the parent is a
   constrained post-content container (Site 1) or a full-viewport main
   element (microsite), the math always positions the section's left
   edge at viewport_x = 50px and its right edge at viewport_x = 100vw - 50px.
   !important guards against the global full-bleed rule winning the
   cascade in either context. */
.vio-section.vio-basic-callout {
  width: calc(100vw - 100px) !important;
  max-width: calc(100vw - 100px) !important;
  margin-left: calc(50% - 50vw + 50px) !important;
  margin-right: calc(50% - 50vw + 50px) !important;
}

/* ── Basic Callout Frame ──────────────────────────────────────────────
   Optional outer wrapper rendered around a basic-callout section.
   Provides 50px of vertical padding in the page bg color (lotion) so
   the colored callout box reads as a distinct card with lotion gutters
   on all four sides — even when the surrounding sections (above/below)
   share the same color as the callout.

   The inner .vio-basic-callout still applies its own 100vw-100px escape,
   which now resolves against the same viewport (the outer frame is
   already full-bleed), so the L/R 50px lotion gutters are preserved. */
.vio-section.vio-basic-callout-frame {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
  /* Reset any inherited horizontal padding so the inner section's escape
     trick keeps working without competing with frame padding. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Zero out the inner callout's own vertical margins (browsers can give
   block sections collapsing margins) so the frame's 50px padding is the
   sole source of vertical separation. */
.vio-section.vio-basic-callout-frame > .vio-section.vio-basic-callout {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 1280px) {
  .vio-section.vio-basic-callout,
  section.vio-section.vio-basic-callout {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* Flex column with gap on the head/intro — every direct child gets 100px
   of space above/below it (gap only applies BETWEEN actual children, so
   missing siblings collapse the space automatically). */
.vio-basic-callout .vio-section__intro {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.vio-basic-callout .vio-section__head {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 0;
}
/* Element-level margin reset — the gap above handles all vertical
   spacing, so we don't want default heading/p margins adding to it. */
.vio-basic-callout .vio-section__head > * {
  margin: 0;
}
.vio-basic-callout .vio-section__lead,
.vio-basic-callout .vio-section__content-copy {
  margin: 0;
}
.vio-basic-callout .vio-section__lead > :last-child,
.vio-basic-callout .vio-section__content-copy > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1279px) {
  /* Tablet/mobile — proportionally smaller gap so the block isn't a giant
     wall of whitespace on a phone. */
  .vio-basic-callout .vio-section__intro,
  .vio-basic-callout .vio-section__head {
    gap: 48px;
  }
}

/* =============================================================================
   Basic Callout — Boxed variant
   The outer section is transparent so only the cream inner box is visible.
   Negative margins on the outer section pull it up/down so the cream box
   appears to float as a notch at the boundary between adjacent sections.
   Desktop only — on mobile the block renders as a normal section.
   ============================================================================= */

@media (min-width: 1080px) {
  .vio-basic-callout--boxed {
    /* Outer background — gradient from CSS custom properties set via inline style.
       Defaults fall through to transparent on BOTH halves so the section above
       (when negative-margin-top creates an overlap) shows through the left/right
       strips around the inset card. Editors who explicitly pick a non-transparent
       top/bottom in the inspector still get the gradient — they're choosing a
       deliberate fill colour. */
    background: linear-gradient(
      to bottom,
      var(--vio-boxed-bg-top, transparent) 50%,
      var(--vio-boxed-bg-bottom, transparent) 50%
    ) !important;
    overflow: visible;

    /* Zero vertical padding — the inner box controls all vertical space. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* position:relative activates z-index so this section paints on top of
       the adjacent 50/50 sections (which are position:static). */
    position: relative;
    z-index: 2;
  }

  /* Negative outer-section margins pull the section's edges up/down into the
     adjacent sections, so the cream inner box floats at the boundary.
     WordPress injects: `:root :where(.is-layout-flow) > .vio-section`
       { margin-block-start: 0 !important }  <- specificity (0,2,0)
     Three classes = (0,3,0) beats it. */
  .vio-section.vio-basic-callout.vio-basic-callout--boxed {
    margin-block-start: var(--vio-boxed-overlap-top, -6.8vw) !important;
    margin-block-end:   var(--vio-boxed-overlap-bottom, -4.2vw) !important;
  }

  .vio-basic-callout--boxed .vio-section__inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--wp--preset--color--vio-lotion, #f9f5f1) !important;
    padding: 36px var(--wp--preset--spacing--500, 20px);
  }

}

/* =============================================================================
   Basic Callout — FAQ 50/50 mode
   When includeFaqs is on, the block becomes a two-column grid: content + FAQs.
   ============================================================================= */

.vio-basic-callout__col,
.vio-basic-callout__col--content,
.vio-basic-callout__col--faqs {
  min-width: 0;
}

/* When in FAQ mode, tighten the intro gap from the normal 100px to something
   more appropriate for a side-by-side layout. */
.vio-basic-callout--has-faqs .vio-section__intro {
  gap: 24px;
}
.vio-basic-callout--has-faqs .vio-section__head {
  gap: 24px;
}

@media (min-width: 768px) {
  .vio-basic-callout--has-faqs .vio-basic-callout__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 100px gap between the two columns — the ONLY horizontal breathing
       room between content + FAQs. No outer padding, so each column's
       content can stretch edge-to-edge of its 50% slot. */
    gap: 100px;
    align-items: center;
  }

  /* Vertical centering only — content + FAQs flex-stack and center
     vertically when the column is taller than its content. Outer edges
     (left of content column, right of FAQs column) get no padding so
     text can stretch the full width of its column. The grid gap above
     handles the inner spacing. */
  .vio-basic-callout.vio-basic-callout--has-faqs .vio-basic-callout__col--content,
  .vio-basic-callout.vio-basic-callout--has-faqs .vio-basic-callout__col--faqs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .vio-basic-callout.vio-basic-callout--has-faqs .vio-basic-callout__col--content {
    max-width: 700px;
    width: 100%;
    justify-self: center;
  }

  /* Legacy hook — same effect as the default now (centered). */
  .vio-basic-callout--content-valign-center .vio-basic-callout__col--content {
    align-self: center;
  }

  /* FAQs on the left: swap column order */
  .vio-basic-callout--faqs-left .vio-basic-callout__col--content {
    order: 2;
  }
  .vio-basic-callout--faqs-left .vio-basic-callout__col--faqs {
    order: 1;
  }

  /* Sticky FAQ column */
  .vio-basic-callout--sticky-faqs .vio-basic-callout__col--faqs {
    position: sticky;
    top: calc(var(--vio-fixed-top, 96px) + 24px);
    align-self: start;
  }
}

/* Mobile: stack vertically, content first */
@media (max-width: 767px) {
  .vio-basic-callout--has-faqs .vio-basic-callout__grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .vio-basic-callout__col--content {
    order: 1;
  }
  .vio-basic-callout__col--faqs {
    order: 2;
  }

  /* Restore scroll-nav arrows on mobile inside the basic-callout FAQ column.
     The global vio-faqs.css hides them at max-width:767px for a touch-swipe
     pattern, but arrow nav is more discoverable here on a single stacked column. */
  .vio-basic-callout .vio-faqs__scroll-wrap {
    display: flex;
  }
  .vio-basic-callout .vio-faqs__scrollnav {
    display: flex;
  }
}

/* =============================================================================
   Basic Callout — Surround
   Outer wrapper that creates an inset card look. The outer div is full-bleed
   with the surround colour; the inner section keeps its own bg, producing a
   visible border of surround colour on all sides.
   ============================================================================= */

.vio-basic-callout-surround {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(24px, 4vw, 50px);
}

/* The inner section should NOT do its own inset when wrapped */
.vio-basic-callout-surround .vio-section.vio-basic-callout {
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: var(--vio-img-radius, 12px);
  overflow: hidden;
}

/* =============================================================================
   Basic Callout — Outer Background
   Full-bleed wrapper that colours the gutter strips on either side of the
   inset section. Unlike Surround (which adds padding to create a card frame),
   Outer Background has zero padding — the section keeps its normal 50px inset
   and the wrapper colour simply fills behind it.
   ============================================================================= */

.vio-basic-callout-outer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ############################## block-social-media.css ############################## */
.vio-social-media .vio-sm__body{width:100%}.vio-sm__carousel{--vio-sm-peek:24px;position:relative;width:100%;max-width:440px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column}.vio-sm__carousel .vio-carousel-compare__track-wrapper{position:relative;overflow:hidden;width:calc(100% + (var(--vio-sm-peek) * 2));margin-left:calc(var(--vio-sm-peek) * -1);margin-right:calc(var(--vio-sm-peek) * -1);padding-bottom:20px;margin-bottom:-20px;cursor:grab;container-type:inline-size}.vio-sm__carousel .vio-carousel-compare__track-wrapper:active{cursor:grabbing}.vio-sm__carousel .vio-carousel-compare__track{position:relative;width:100%}.vio-sm__carousel .vio-carousel-compare__slide{position:absolute;top:0;left:var(--vio-sm-peek);width:calc(100% - (var(--vio-sm-peek) * 2));min-width:0;display:flex;flex-direction:column;transition:transform .4s ease;transform:translateX(calc(100% + var(--vio-sm-peek)));pointer-events:none;z-index:0}.vio-sm__carousel .vio-carousel-compare__slide.is-far-next{transform:translateX(calc(100% + var(--vio-sm-peek)));z-index:0}.vio-sm__carousel .vio-carousel-compare__slide.is-far-prev{transform:translateX(calc(-100% - var(--vio-sm-peek)));z-index:0}.vio-sm__carousel .vio-carousel-compare__slide.is-active{position:relative;left:0;margin-left:var(--vio-sm-peek);margin-right:var(--vio-sm-peek);transform:translateX(0);pointer-events:auto;z-index:3;box-shadow:none;background:0 0}.vio-sm__carousel .vio-carousel-compare__slide.is-next{transform:translateX(var(--vio-sm-peek)) translateY(20px) scale(.92);transform-origin:right top;z-index:1}.vio-sm__carousel .vio-carousel-compare__slide.is-prev{transform:translateX(calc(var(--vio-sm-peek) * -1)) translateY(20px) scale(.92);transform-origin:left top;z-index:1}.vio-sm__carousel .vio-carousel-compare__slide::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,var(--vio-sm-peek-dim,.75));pointer-events:none;transition:opacity .4s ease;opacity:1;z-index:10}.vio-sm__carousel .vio-carousel-compare__slide.is-active::after{opacity:0}.vio-sm__carousel .vio-carousel-compare__arrow{position:absolute;top:calc(var(--vio-sm-locked-card-h,calc(100cqw - (var(--vio-sm-peek) * 2)))/ 2);transform:translateY(-50%);z-index:5;background:0 0;border:none;padding:4px;cursor:pointer;opacity:.85;transition:opacity .2s ease;width:44px;height:44px;display:flex;align-items:center;justify-content:center}.vio-sm__carousel .vio-carousel-compare__arrow:hover{opacity:1}.vio-sm__carousel .vio-carousel-compare__arrow:focus-visible{opacity:1;outline:2px solid var(--wp--preset--color--vio-ink,#030303);outline-offset:2px;border-radius:50%}.vio-sm__carousel{--vio-sm-active-aspect:0.5625}.vio-sm__carousel .vio-carousel-compare__arrow--prev{left:auto;right:calc(50% + (var(--vio-sm-locked-card-w,calc(50svh * var(--vio-sm-active-aspect,.5625)))/ 2) + 8px)}.vio-sm__carousel .vio-carousel-compare__arrow--next{left:calc(50% + (var(--vio-sm-locked-card-w,calc(50svh * var(--vio-sm-active-aspect,.5625)))/ 2) + 8px);right:auto}.vio-sm__carousel .vio-carousel-compare__arrow[hidden]{display:none}@media (max-width:639px){.vio-sm__carousel:not(.vio-sm__carousel--layout-coverflow):not(.vio-sm__carousel--layout-hybrid){padding-bottom:56px}.vio-sm__carousel:not(.vio-sm__carousel--layout-coverflow):not(.vio-sm__carousel--layout-hybrid) .vio-carousel-compare__arrow{top:auto;bottom:6px;transform:none}.vio-sm__carousel:not(.vio-sm__carousel--layout-coverflow):not(.vio-sm__carousel--layout-hybrid) .vio-carousel-compare__arrow--prev{right:auto;left:calc(50% - 52px)}.vio-sm__carousel:not(.vio-sm__carousel--layout-coverflow):not(.vio-sm__carousel--layout-hybrid) .vio-carousel-compare__arrow--next{left:calc(50% + 8px);right:auto}}.vio-sm__carousel .vio-carousel-compare__progress{position:relative;height:4px;border-radius:999px;background:rgba(0,0,0,.12);margin-top:var(--wp--preset--spacing--500,20px);width:var(--vio-sm-card-w,calc(100% - (var(--vio-sm-peek) * 2)));margin-left:auto;margin-right:auto}.vio-sm__carousel .vio-carousel-compare__progress-bar{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:rgba(0,0,0,.55);transition:left .4s ease,width .4s ease}.vio-sm__card{position:relative;display:flex;flex-direction:column;width:100%;background:0 0;border:0;overflow:hidden}.vio-sm__media{position:relative;width:100%;aspect-ratio:1/1;background:0 0;overflow:hidden}.vio-sm__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.vio-sm__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}.vio-sm__card--playing .vio-sm__video{cursor:pointer}.vio-sm__card--reel .vio-sm__video{object-fit:cover!important}.vio-sm__card{max-width:calc(50svh * var(--vio-sm-aspect,1));max-width:calc(50vh * var(--vio-sm-aspect,1));margin-inline:auto}.vio-sm__platform-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;pointer-events:none}.vio-sm__platform-badge .vio-sm__platform-icon{width:18px;height:18px}.vio-sm__type-pill{position:absolute;top:10px;right:10px;z-index:2;padding:3px 8px;font-size:11px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);border-radius:999px;display:inline-flex;align-items:center;gap:4px;pointer-events:none}.vio-sm__permalink{position:absolute;inset:0;z-index:1;text-indent:-9999px;overflow:hidden}.vio-sm__permalink:focus-visible{outline:2px solid var(--wp--preset--color--vio-ink,#030303);outline-offset:-3px}.vio-sm__play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease,top .25s ease,left .25s ease,width .25s ease,height .25s ease,opacity .2s ease}.vio-sm__play-button:hover{background:rgba(0,0,0,.75)}.vio-sm__play-button .vio-sm__icon--play-glyph{margin-left:3px;display:inline-flex}.vio-sm__play-button .vio-sm__icon--pause-glyph{display:none}.vio-sm__card--playing .vio-sm__play-button .vio-sm__icon--play-glyph{display:none}.vio-sm__card--playing .vio-sm__play-button .vio-sm__icon--pause-glyph{display:inline-flex}.vio-sm__card--playing .vio-sm__play-button{top:auto;left:10px;bottom:10px;transform:none;width:32px;height:32px;background:rgba(0,0,0,.6);opacity:.85}.vio-sm__card--playing .vio-sm__play-button:hover{transform:none;opacity:1}.vio-sm__card--playing .vio-sm__play-button .vio-sm__icon--pause-glyph{width:16px;height:16px}.vio-sm__play-toggle{position:absolute;bottom:10px;right:10px;z-index:3;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center}.vio-sm__card--playing .vio-sm__play-toggle{display:inline-flex}.vio-sm__play-toggle:hover{background:rgba(0,0,0,.75)}.vio-sm__play-toggle .vio-sm__icon--sound{display:none}.vio-sm__play-toggle .vio-sm__icon--muted{display:block}.vio-sm__play-toggle[aria-pressed=true] .vio-sm__icon--sound{display:block}.vio-sm__play-toggle[aria-pressed=true] .vio-sm__icon--muted{display:none}.vio-sm__caption-wrap{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;background:var(--wp--preset--color--vio-lotion,#fefff9)}.vio-sm__carousel .vio-carousel-compare__slide:not(.is-active) .vio-sm__caption-wrap{visibility:hidden}.vio-sm__username{font-size:12px;font-weight:600;letter-spacing:.02em;color:#725c50}.vio-sm__caption{margin:0;font-size:14px;line-height:1.5;color:var(--wp--preset--color--vio-ink,#030303);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.vio-sm__card--expanded .vio-sm__caption{display:block;-webkit-line-clamp:unset;overflow:visible}.vio-sm__caption-toggle{margin-top:4px;align-self:flex-start;background:0 0;border:0;padding:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--wp--preset--color--vio-ink,#030303);text-decoration:underline;text-underline-offset:3px}.vio-sm__empty{text-align:center;padding:32px 16px;border:1px dashed var(--wp--preset--color--vio-mtn-greige,#e9e3dc);color:var(--wp--preset--color--vio-mouse,#b29d92)}.vio-sm__empty p{margin:4px 0}.vio-sm__media[style*=aspect-ratio] .vio-sm__image,.vio-sm__media[style*=aspect-ratio] .vio-sm__video{object-fit:cover;background:0 0}.vio-sm__embed,.vio-sm__embed .vio-sm__embed-video,.vio-sm__embed iframe,.vio-sm__embed video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}.vio-sm__embed video{object-fit:cover;background:#000}.vio-sm__embed-card{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;background:#000;color:#fff;text-decoration:none}.vio-sm__embed-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease,transform .4s ease}.vio-sm__embed-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.35) 60%,rgba(0,0,0,.55) 100%);opacity:1;transition:background .25s ease;pointer-events:none}.vio-sm__embed-ig-icon{display:block;color:#fff;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, .5))}.vio-sm__embed-cta{font-family:var(--wp--preset--font-family--nunito-sans, 'Nunito Sans', sans-serif);font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:none;text-shadow:0 1px 2px rgba(0,0,0,.5)}.vio-sm__embed-card:hover .vio-sm__embed-poster{transform:scale(1.02)}.vio-sm__embed-card:hover .vio-sm__embed-overlay{background:linear-gradient(180deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.55) 60%,rgba(0,0,0,.7) 100%)}.vio-sm__ig-crop{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#000}.vio-sm__ig-crop.vio-sm__ig-crop iframe{position:absolute;inset:auto;border:0;display:block;transform-origin:center center}.vio-sm__ig-crop[data-aspect=reel] iframe{width:130%;height:250%;top:-6%;left:50%;transform:translateX(-50%)}.vio-sm__ig-crop[data-aspect=post] iframe{width:120%;height:200%;top:-4%;left:50%;transform:translateX(-50%)}@media (min-width:1280px){.vio-section.vio-social-media.vio-social-media--layout-split,section.vio-section.vio-social-media.vio-social-media--layout-split{padding:50px;overflow:visible;display:flex;flex-direction:column;contain:layout paint}.vio-section.vio-social-media.vio-social-media--layout-split .vio-section__body,.vio-section.vio-social-media.vio-social-media--layout-split .vio-section__content,.vio-section.vio-social-media.vio-social-media--layout-split .vio-section__inner{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}.vio-social-media--layout-split .vio-social-media__grid{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:center}.vio-social-media--layout-split .vio-social-media__col--content{min-height:0;padding:0 24px;display:flex;flex-direction:column;justify-content:center}.vio-social-media--layout-split .vio-social-media__col--media{min-height:0;display:flex;flex-direction:column;justify-content:center;align-self:stretch}.vio-social-media--layout-split .vio-sm__carousel{max-width:none}.vio-social-media--layout-split .vio-sm__card{max-width:calc((100vh - 150px) * var(--vio-sm-aspect,1));max-width:calc((100dvh - 150px) * var(--vio-sm-aspect,1))}}.vio-social-media__content--align-left{text-align:left}.vio-social-media__content--align-center{text-align:center}.vio-social-media__content--align-right{text-align:right}.vio-social-media__content--align-left .vio-section__cta{justify-content:flex-start}.vio-social-media__content--align-center .vio-section__cta{justify-content:center}.vio-social-media__content--align-right .vio-section__cta{justify-content:flex-end}.vio-social-media__content--align-center .vio-section__content-copy,.vio-social-media__content--align-center .vio-section__eyebrow,.vio-social-media__content--align-center .vio-section__lead,.vio-social-media__content--align-center .vio-section__title{text-align:center}.vio-social-media__content--align-right .vio-section__content-copy,.vio-social-media__content--align-right .vio-section__eyebrow,.vio-social-media__content--align-right .vio-section__lead,.vio-social-media__content--align-right .vio-section__title{text-align:right}.vio-social-media__grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}@media (min-width:1024px){.vio-social-media__grid{grid-template-columns:1fr 1fr;gap:50px}}.vio-social-media__col{min-width:0;display:flex;flex-direction:column;justify-content:center}@media (min-width:1024px){.vio-social-media__grid--media-left .vio-social-media__col--media{order:0}.vio-social-media__grid--media-left .vio-social-media__col--content{order:1}.vio-social-media__grid--media-right .vio-social-media__col--media{order:1}.vio-social-media__grid--media-right .vio-social-media__col--content{order:0}}@media (max-width:1023px){.vio-social-media__grid--mobile-content-first .vio-social-media__col--content{order:0}.vio-social-media__grid--mobile-content-first .vio-social-media__col--media{order:1}}.vio-social-media__content{display:flex;flex-direction:column;gap:24px}.vio-social-media__content .vio-section__eyebrow{font-family:var(--wp--preset--font-family--nunito, 'Nunito Sans', sans-serif);font-weight:700;font-size:13px;line-height:30px;letter-spacing:.1538em;color:var(--wp--preset--color--vio-mouse,#b29d92);text-transform:uppercase}.vio-social-media__content .vio-section__title{margin:0}.vio-social-media__content .vio-section__content-copy p,.vio-social-media__content .vio-section__lead p{margin:0 0 .75em}.vio-sm__carousel.vio-sm__carousel--layout-coverflow{position:relative;max-width:min(1400px,100%);width:100%;margin-left:auto;margin-right:auto;padding-bottom:0}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__track-wrapper{width:100%;margin-left:0;margin-right:0;overflow:hidden;padding-bottom:0;margin-bottom:0;cursor:default}.vio-social-media--layout-feed .vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__track-wrapper{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__track{position:relative;width:100%;min-height:0}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide{position:absolute;top:0;left:50%;width:clamp(240px,26%,380px);margin:0;padding:0;transition:transform .75s cubic-bezier(.22, 1, .36, 1),opacity .55s cubic-bezier(.22, 1, .36, 1);will-change:transform,opacity;transform:translateX(-50%) scale(.4);opacity:0;pointer-events:none;z-index:0;display:block}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__media{aspect-ratio:9/16}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide::after{display:none!important;content:none;background:0 0;opacity:0}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-active{position:relative;top:0;left:0;margin:0 auto;transform:scale(1);opacity:1;z-index:3;pointer-events:auto;background:0 0;box-shadow:none}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-far-next,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-far-prev,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-next,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-prev{transform:translateX(calc(-50% + (var(--vio-cf-d,0) * 100%))) scale(.85);transform-origin:center center;opacity:var(--vio-cf-side-opacity, .8)}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-next,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-prev{z-index:2}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-far-next,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-far-prev{z-index:1}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__card{width:100%;background:0 0;box-shadow:none;max-width:none}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav{display:flex;align-items:center;gap:16px;margin-top:28px;padding:0 8px;max-width:600px;margin-left:auto;margin-right:auto}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav .vio-carousel-compare__arrow{position:relative;flex:0 0 auto;top:auto;left:auto;right:auto;bottom:auto;transform:none;width:40px;height:40px;color:var(--wp--preset--color--vio-ink,#030303);opacity:.7;background:0 0;border:none;padding:4px;cursor:pointer;z-index:auto;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav .vio-carousel-compare__arrow:focus-visible,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav .vio-carousel-compare__arrow:hover{opacity:1;outline-offset:2px}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav .vio-carousel-compare__progress{position:relative;flex:1;height:4px;border-radius:999px;background:rgba(0,0,0,.12);margin:0;width:auto;max-width:none;top:auto;left:auto}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav .vio-carousel-compare__progress-bar{background:rgba(0,0,0,.55)}.vio-bg--vio-ink .vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav .vio-carousel-compare__arrow{color:var(--wp--preset--color--vio-lotion,#fefff9)}.vio-bg--vio-ink .vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav .vio-carousel-compare__progress{background:rgba(255,255,255,.18)}.vio-bg--vio-ink .vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-sm__nav .vio-carousel-compare__progress-bar{background:rgba(255,255,255,.75)}@media (max-width:1024px){.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide{width:clamp(220px,32%,320px)}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-far-next,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-far-prev,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-next,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-prev{transform:translateX(calc(-50% + (var(--vio-cf-d,0) * 95%))) scale(.8)}}@media (max-width:640px){.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide{width:clamp(220px,62%,320px)}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-next,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-prev{transform:translateX(calc(-50% + (var(--vio-cf-d,0) * 85%))) scale(.55);opacity:var(--vio-cf-side-opacity, .7)}.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-far-next,.vio-sm__carousel.vio-sm__carousel--layout-coverflow .vio-carousel-compare__slide.is-far-prev{opacity:0}}.vio-sm__carousel.vio-sm__carousel--layout-hybrid{position:relative;max-width:none;width:100%;margin-left:auto;margin-right:auto;padding-bottom:0}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__track-wrapper{width:100%;margin-left:0;margin-right:0;overflow:hidden;padding-bottom:0;margin-bottom:0;cursor:grab}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__track-wrapper:active{cursor:grabbing}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__track{display:flex;flex-wrap:nowrap;gap:16px;width:auto;transition:transform .6s cubic-bezier(.22, 1, .36, 1);will-change:transform}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__slide{position:relative;top:auto;left:auto;flex:0 0 calc((100% - 16px * 2)/ 3);min-width:0;margin:0;padding:0;transform:none;opacity:1;pointer-events:auto;z-index:0;display:block;transition:none}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__slide::after{display:none!important;content:none;background:0 0;opacity:0}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__media{aspect-ratio:9/16}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__card{width:100%;background:0 0;box-shadow:none;max-width:none}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav{display:flex;align-items:center;gap:16px;margin-top:28px;padding:0 8px;max-width:600px;margin-left:0;margin-right:auto}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav .vio-carousel-compare__arrow{position:relative;flex:0 0 auto;top:auto;left:auto;right:auto;bottom:auto;transform:none;width:40px;height:40px;color:var(--wp--preset--color--vio-ink,#030303);opacity:.7;background:0 0;border:none;padding:4px;cursor:pointer;z-index:auto;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav .vio-carousel-compare__arrow:focus-visible,.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav .vio-carousel-compare__arrow:hover{opacity:1}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav .vio-carousel-compare__progress{position:relative;flex:1;height:4px;border-radius:999px;background:rgba(0,0,0,.12);margin:0;width:auto;max-width:none;top:auto;left:auto}.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav .vio-carousel-compare__progress-bar{background:rgba(0,0,0,.55);transition:left .4s ease,width .4s ease}.vio-bg--vio-ink .vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav .vio-carousel-compare__arrow{color:var(--wp--preset--color--vio-lotion,#fefff9)}.vio-bg--vio-ink .vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav .vio-carousel-compare__progress{background:rgba(255,255,255,.18)}.vio-bg--vio-ink .vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__nav .vio-carousel-compare__progress-bar{background:rgba(255,255,255,.75)}@media (max-width:1023px){.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__slide{flex:0 0 calc((100% - 16px)/ 2)}}@media (max-width:639px){.vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__slide{flex:0 0 calc(100% / 1.2)}}@media (min-width:1024px){.vio-social-media--layout-split .vio-social-media__grid:has(.vio-sm__carousel--layout-hybrid){grid-template-columns:1fr 3fr;position:relative}.vio-social-media--layout-split .vio-sm__carousel.vio-sm__carousel--layout-hybrid{position:static;padding-bottom:0}.vio-social-media--layout-split .vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__track-wrapper{min-height:0}.vio-social-media--layout-split .vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-carousel-compare__slide{flex:0 0 auto;width:calc((100vh - 100px) * .75 * (9 / 16));width:calc((100dvh - 100px) * .75 * (9 / 16))}.vio-social-media--layout-split .vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__card{max-width:none}.vio-social-media--layout-split .vio-sm__carousel.vio-sm__carousel--layout-hybrid .vio-sm__media{height:calc((100vh - 100px) * .75);height:calc((100dvh - 100px) * .75);aspect-ratio:9/16}.vio-social-media--layout-split .vio-social-media__grid:has(.vio-sm__carousel--layout-hybrid) .vio-sm__nav{position:absolute;bottom:0;left:0;width:calc((100% - 100px)/ 4);margin:0;padding:0;max-width:none}}@media (min-width:1024px){.vio-social-media--layout-split .vio-social-media__grid--media-left:has(.vio-sm__carousel--layout-hybrid){grid-template-columns:3fr 1fr}.vio-social-media--layout-split .vio-social-media__grid--media-left:has(.vio-sm__carousel--layout-hybrid) .vio-sm__nav{left:auto;right:0}}
/* ############################## block-image-interactive.css ############################## */
/**
 * VIO Image Interactive (Treatment Map) - style.css
 *
 * Layout, color, and interaction only. Typography (font-family, font-size,
 * font-weight, line-height, letter-spacing, text-transform, font-style) is
 * inherited entirely from the global theme so headings, body copy, and
 * buttons match the rest of the site without any block-local overrides.
 *
 * Per-element class names map onto matching global classes where possible:
 *   .vio-im__title  ← also tagged .vio-section__title  (inherits h2 styling)
 *   .vio-im__intro  ← also tagged .vio-section__lead   (inherits lead styling)
 *   .vio-im__cta-btn-wrap → wraps a .vio-btn--primary (global button styles)
 */

/* ── Section frame ───────────────────────────────────────────────────────── */
/* Wider than the legacy 1100px so each 50% column has real estate to feel
   like a true split (matches the Basic Callout 50/50 + Accordion patterns).
   Centered with auto margins so the whole module sits in the middle of
   the page regardless of viewport width. */
.vio-image-interactive .vio-image-interactive__body {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
}

/* ── Module header ───────────────────────────────────────────────────────── */
.vio-image-interactive .vio-im__eyebrow {
	color: var(--vio-im-label-color, var(--wp--preset--color--vio-mouse, #B29D92));
	margin-bottom: 12px;
}
.vio-image-interactive .vio-im__title {
	margin: 0 0 14px;
}
.vio-image-interactive .vio-im__intro {
	max-width: 580px;
	margin: 0 0 28px;
}

/* ── Pill switcher ───────────────────────────────────────────────────────── */
.vio-image-interactive .vio-im__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}
.vio-image-interactive .vio-im__pill {
	padding: 7px 16px;
	border: 0.5px solid var(--wp--preset--color--vio-mtn-greige, #E9E3DC);
	border-radius: 20px;
	background: #FFFFFF;
	/* Previously #725C50 → 6.25:1 against white (passed AA, failed AAA 7:1).
	   Switched to brand "Vio Mouse Dark" #5C4A3A which clears AAA at ~8:1. */
	color: var(--wp--preset--color--vio-mouse-dark, #5C4A3A);
	cursor: pointer;
	transition: all 0.15s ease;
	/* WCAG 2.5.5 - minimum 44x44px touch target. */
	min-height: 44px;
}
.vio-image-interactive .vio-im__pill:hover {
	border-color: var(--wp--preset--color--vio-mouse, #B29D92);
	color: var(--wp--preset--color--vio-ink, #030303);
}
.vio-image-interactive .vio-im__pill.is-active {
	background: var(--wp--preset--color--vio-ink, #030303);
	border-color: var(--wp--preset--color--vio-ink, #030303);
	color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}
.vio-image-interactive .vio-im__pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
	outline-offset: 2px;
}

/* ── Two-column module ─────────────────────────────────────────────────────
   True 50/50 split on desktop, vertical-center on the cross axis, 100px
   gap between columns (no outer padding so each column's content can
   stretch edge-to-edge of its half). Mirrors the Basic Callout 50/50
   layout for visual consistency across the treatment page sections. */
.vio-image-interactive .vio-im__module {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: stretch;
}
@media (min-width: 720px) {
	.vio-image-interactive .vio-im__module {
		grid-template-columns: 1fr 1fr;
		gap: 100px;
		align-items: center;
	}
}
/* Center each column's content within its own 50% slot so the image
   and the right-side text both visually anchor to the middle of their
   half. The illus container is 1:1 and fills its column already; the
   panel uses justify-content:center for vertical centering. */
.vio-image-interactive .vio-im__module > .vio-im__illus,
.vio-image-interactive .vio-im__module > .vio-im__panel {
	min-width: 0;
	width: 100%;
}

/* Horizontally center each column's content within its own 50% slot.
   The illustration + text panel cap at a max-width that's meaningfully
   smaller than the column so there's visible breathing room either
   side - without that gap the centering technically happens but reads
   as "pinned to the column's left edge" because the item is the same
   width as its column. 500px on a 613px column yields ~55px on each
   side, which is the visual centering the designer is asking for. */
@media (min-width: 720px) {
	/* Illustration: anchor to the LEFT (outer) edge of its column so it
	   visually sits in the left third of the section, not pulled toward
	   the gap in the middle. */
	.vio-image-interactive .vio-im__module > .vio-im__illus {
		max-width: 500px;
		margin-left: 0;
		margin-right: auto;
		justify-self: start;
	}
	/* Content panel: anchor to the RIGHT (outer) edge of its column so
	   it mirrors the illustration on the opposite side. */
	.vio-image-interactive .vio-im__module > .vio-im__panel {
		max-width: 500px;
		margin-left: auto;
		margin-right: 0;
		justify-self: end;
	}
}

/* ── View tabs (multi-view treatments) ───────────────────────────────────── */
/* Sits as an absolute overlay at the top-left of the illustration so it
   doesn't disturb the 2-column module grid. Only emitted when the active
   treatment has hotspots across 2+ views (face/body/skin/skin_deep). */
.vio-image-interactive .vio-im__view-tabs {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 20;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	pointer-events: auto;
}
.vio-image-interactive .vio-im__view-tab {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--nunito-sans, sans-serif);
	font-weight: 500;
	padding: 7px 16px;
	/* Inactive tabs: solid lotion (cream) fill so they're readable against
	   any illustration tone - face skin, body silhouette, dark backgrounds.
	   Soft shadow gives them lift above the illustration. */
	background: var(--wp--preset--color--vio-lotion, #FEFFF9);
	border: 1px solid var(--wp--preset--color--vio-ink, #030303);
	border-radius: 20px;
	color: var(--wp--preset--color--vio-ink, #030303);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vio-image-interactive .vio-im__view-tab:hover {
	background: var(--wp--preset--color--vio-ink, #030303);
	color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}
.vio-image-interactive .vio-im__view-tab.is-active {
	background: var(--wp--preset--color--vio-ink, #030303);
	border-color: var(--wp--preset--color--vio-ink, #030303);
	color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}
.vio-image-interactive .vio-im__view-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
	outline-offset: 2px;
}

/* ── Illustration container ──────────────────────────────────────────────── */
.vio-image-interactive .vio-im__illus {
	position: relative;
	background: var(--wp--preset--color--vio-alabaster, #F2F0E6);
	border: 0.5px solid var(--wp--preset--color--vio-mtn-greige, #E9E3DC);
	border-radius: 12px;
	/* Square aspect. Storage is in 3:4 SVG-viewBox space; the 3:4 → 1:1
	   remap in render.php handles the translation so hotspots land at
	   their authored positions on the 1:1 visible canvas. If you change
	   this, also update $container_aspect_w/h in render.php AND the
	   matching aspect-ratio + storedToPicker/pickerToStored in
	   vio-smap-picker.js/.css. */
	aspect-ratio: 1 / 1;
	overflow: visible;
}
.vio-image-interactive .vio-im__svg,
.vio-image-interactive .vio-im__img {
	width: 100%;
	height: 100%;
	display: none;
}
/* Uploaded photo fills the 1:1 illus container with `cover` so there's
   never empty cream space on the front-end. Same fit as the picker.
   The img is a single shared element (no data-base) - JS swaps its src
   on pill click so siblings sharing a base can each have their own
   per-treatment override (treatment_map_override_image). */
.vio-image-interactive .vio-im__img {
	position: absolute;
	inset: 0;
	object-fit: cover;
	object-position: center;
}
/* Show the per-base SVG sketch matching the active service's base - but
   only when the active service has no resolved image (override or
   per-base global). The .has-image class flips visibility to the img. */
.vio-image-interactive .vio-im__illus:not(.has-image)[data-active-base="FACE"]      .vio-im__svg[data-base="FACE"],
.vio-image-interactive .vio-im__illus:not(.has-image)[data-active-base="SKIN"]      .vio-im__svg[data-base="SKIN"],
.vio-image-interactive .vio-im__illus:not(.has-image)[data-active-base="SKIN_DEEP"] .vio-im__svg[data-base="SKIN_DEEP"],
.vio-image-interactive .vio-im__illus:not(.has-image)[data-active-base="BODY"]      .vio-im__svg[data-base="BODY"] {
	display: block;
}
.vio-image-interactive .vio-im__illus.has-image .vio-im__img {
	display: block;
}

/* ── Before / After slider ──────────────────────────────────────────────────
   Per-treatment override: when the active service has both a before AND
   an after image set in ACF, the slider sits on top of the SVG / base
   photo (z-index: 5) but below the hotspots layer (z-index: 10) so
   editors can still annotate zones over the comparison. */
.vio-image-interactive .vio-im__slider {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
	/* No border-radius - the parent .vio-im__illus already clips its
	   visible area. Inheriting a rounded corner here just nests another
	   curve inside the parent's, leaving a visible cream sliver in each
	   corner. Square edges + parent clip = clean. */
	border-radius: 0;
	z-index: 5;
	/* Default split at 50%, updated by JS as the user drags the handle. */
	--vio-bafter-pos: 50%;
	user-select: none;
	touch-action: pan-y;
}
.vio-image-interactive .vio-im__illus[data-active-service] .vio-im__slider[data-service] {
	/* Hidden by default; the matching pair is shown by the rule below. */
}
/* Display swap: only the slider whose data-service matches the active
   service shows. Generated for any slug the bundle includes - the
   attribute selector handles arbitrary slugs without per-service rules. */
.vio-image-interactive .vio-im__illus .vio-im__slider[data-service] {
	display: none;
}
.vio-image-interactive .vio-im__illus.has-active-slider .vio-im__slider[data-vio-im-active-slider] {
	display: block;
}
.vio-image-interactive .vio-im__slider img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	user-select: none;
}
/* The "after" image shows only the portion to the RIGHT of the handle.
   clip-path inset(top right bottom left) - we trim from the left by the
   handle's current position. */
.vio-image-interactive .vio-im__slider-after {
	clip-path: inset(0 0 0 var(--vio-bafter-pos));
}
/* Slider handle - visual language copied from the testimonials block's
   .image-comparison__slider + __thumb so before/after looks consistent
   across the site. Inactive: 2px white line + 30px transparent circle
   with thin white ring + two inward triangles. Active (drag/hover):
   line fades to transparent, circle shrinks slightly and fills with
   semi-transparent dark (rgba(3,3,3,0.5)). */
.vio-image-interactive .vio-im__slider-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--vio-bafter-pos);
	width: 2px;
	background: #FFFFFF;
	transform: translateX(-50%);
	cursor: ew-resize;
	z-index: 2;
	transition: background-color 0.3s ease;
}
/* The circular thumb. */
.vio-image-interactive .vio-im__slider-handle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--wp--preset--color--vio-lotion, #FEFFF9);
	transition: transform 0.3s ease, background-color 0.3s ease;
}
/* Two inward-pointing triangles inside the circle - same SVG paths the
   testimonials block uses (.image-comparison__thumb-icon). Drawn via
   CSS mask so `background-color` controls fill; we keep them white
   (lotion) in both states. */
.vio-image-interactive .vio-im__slider-handle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 10px;
	background-color: var(--wp--preset--color--vio-lotion, #FEFFF9);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M12.121 4.703V.488c0-.302.384-.454.609-.24l4.42 4.214a.33.33 0 0 1 0 .481l-4.42 4.214c-.225.215-.609.063-.609-.24V4.703z'/><path d='M5.879 4.703V.488c0-.302-.384-.454-.609-.24L.85 4.462a.33.33 0 0 0 0 .481l4.42 4.214c.225.215.609.063.609-.24V4.703z'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M12.121 4.703V.488c0-.302.384-.454.609-.24l4.42 4.214a.33.33 0 0 1 0 .481l-4.42 4.214c-.225.215-.609.063-.609-.24V4.703z'/><path d='M5.879 4.703V.488c0-.302-.384-.454-.609-.24L.85 4.462a.33.33 0 0 0 0 .481l4.42 4.214c.225.215.609.063.609-.24V4.703z'/></svg>") center / contain no-repeat;
	pointer-events: none;
}
/* Hover affordance only - thumb scales up slightly. Matches the
   testimonials' .image-comparison__range:hover~.__thumb behavior.
   Doesn't touch the line or fill. */
.vio-image-interactive .vio-im__slider-handle:hover::before {
	transform: translate(-50%, -50%) scale(1.2);
}
/* Active drag state - white line fades to transparent, thumb shrinks
   and fills with semi-transparent dark. Matches testimonials'
   `--active` rule. Triggered by .is-dragging (set by view.js while the
   pointer is being moved) or keyboard focus. */
.vio-image-interactive .vio-im__slider.is-dragging .vio-im__slider-handle,
.vio-image-interactive .vio-im__slider-handle:focus-visible {
	background-color: rgba(255, 255, 255, 0);
}
.vio-image-interactive .vio-im__slider.is-dragging .vio-im__slider-handle::before,
.vio-image-interactive .vio-im__slider-handle:focus-visible::before {
	transform: translate(-50%, -50%) scale(0.8);
	background-color: rgba(3, 3, 3, 0.5);
}
.vio-image-interactive .vio-im__slider-handle:focus-visible {
	outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
	outline-offset: 4px;
	border-radius: 50%;
}

/* Before/After labels - match testimonials .image-comparison__caption-body:
   bottom corners, very transparent warm-dark pill, lotion-colored text,
   uppercase. Per-label opacity is computed in JS based on slider position
   (via --vio-label-before-opacity / --vio-label-after-opacity custom
   props) so each label fades smoothly as the handle crosses it, instead
   of snapping at the extremes. */
.vio-image-interactive .vio-im__slider-label {
	position: absolute;
	bottom: 12px;
	padding: 4px 8px;
	background-color: rgba(58, 51, 26, 0.20);
	color: var(--wp--preset--color--vio-lotion, #FEFFF9);
	font-size: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.2s ease;
}
.vio-image-interactive .vio-im__slider-label--before {
	left: 12px;
	opacity: var(--vio-label-before-opacity, 1);
}
.vio-image-interactive .vio-im__slider-label--after {
	right: 12px;
	opacity: var(--vio-label-after-opacity, 1);
}
/* Legacy fallback: keep the old is-at-start / is-at-end snap rules so
   any future code path that doesn't set the custom props still hides
   labels at extremes. The JS-driven opacity overrides these at runtime. */
.vio-image-interactive .vio-im__slider.is-at-start .vio-im__slider-label--before,
.vio-image-interactive .vio-im__slider.is-at-end   .vio-im__slider-label--after {
	opacity: 0;
	pointer-events: none;
}
/* When the slider takes over for a treatment, the per-base photo / SVG
   underneath is irrelevant - hide it so the browser stops painting it
   (and so the parent's rounded corners don't show its edge through).
   The illus container's own border + cream background also get dropped
   since the slider photos are the new visual surface. */
.vio-image-interactive .vio-im__illus.has-active-slider {
	background: transparent;
	border-color: transparent;
}
.vio-image-interactive .vio-im__illus.has-active-slider .vio-im__img,
.vio-image-interactive .vio-im__illus.has-active-slider .vio-im__svg {
	display: none !important;
}

/* ── Hotspots ──────────────────────────────────────────────────────────────  */
.vio-image-interactive .vio-im__hs-wrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.vio-image-interactive .vio-im__hs {
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	/* Outline-only: transparent fill, blue-light border. Filled-on-hover/active
	   for affordance so the user gets clear feedback when they engage with
	   a hotspot. Drop shadow stays so the ring reads against skin tones. */
	background: transparent;
	border: 1.5px solid var(--vio-im-hotspot-color, var(--wp--preset--color--vio-blue-light, #7c95a2));
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	transition: all 0.18s ease;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(3, 3, 3, 0.18);
	pointer-events: auto;
	padding: 0;
}
.vio-image-interactive .vio-im__hs:hover,
.vio-image-interactive .vio-im__hs.is-active {
	/* Dot fades out when engaged - the region polygon underneath becomes
	   the visual focus instead. Other dots stay visible so users can
	   move to a different region. pointer-events stay so mouseleave can
	   fire and restore the dot when the user moves away. */
	opacity: 0;
}
.vio-image-interactive .vio-im__hs.is-active {
	/* Keep clickable while invisible - the dot is still the interaction
	   target; only its visual is hidden. */
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
.vio-image-interactive .vio-im__hs:focus-visible {
	outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
	outline-offset: 2px;
}
/* Numbers hidden by design - outline-only circles with no inner text.
   Kept in the DOM for screen reader / aria-label content via the parent
   button's accessible name. */
.vio-image-interactive .vio-im__hs-num {
	display: none;
}
.vio-image-interactive .vio-im__hs-pulse {
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	/* Blue-light ring + soft drop shadow so it stays visible against any
	   photo and matches the hotspot border color. */
	border: 1px solid var(--vio-im-hotspot-color, var(--wp--preset--color--vio-blue-light, #7c95a2));
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: vio-im-pulse 2s ease-out infinite;
	pointer-events: none;
}
.vio-image-interactive .vio-im__hs.is-active .vio-im__hs-pulse {
	display: none;
}
@keyframes vio-im-pulse {
	0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
	100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
	.vio-image-interactive .vio-im__hs-pulse { animation: none; opacity: 0; }
}

/* ── Right panel ─────────────────────────────────────────────────────────── */
.vio-image-interactive .vio-im__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (min-width: 720px) {
	.vio-image-interactive .vio-im__panel {
		min-height: 360px;
		position: relative;
	}
}

/* CTA state */
.vio-image-interactive .vio-im__cta-state {
	transition: opacity 0.2s ease;
}
.vio-image-interactive .vio-im__cta-label {
	color: var(--vio-im-label-color, var(--wp--preset--color--vio-mouse, #B29D92));
	margin-bottom: 16px;
}
.vio-image-interactive .vio-im__cta-title {
	margin: 0 0 16px;
}
.vio-image-interactive .vio-im__cta-sub {
	/* No artificial max-width - content fills its 50% column so the right
	   side anchors edge-to-edge instead of clinging to the column's left. */
	margin: 0 0 28px;
}
.vio-image-interactive .vio-im__cta-btn-wrap {
	margin-top: 0;
}

/* Zone state */
.vio-image-interactive .vio-im__zone-state {
	transition: opacity 0.2s ease;
}
.vio-image-interactive .vio-im__zone-label {
	color: var(--vio-im-label-color, var(--wp--preset--color--vio-mouse, #B29D92));
	margin-bottom: 14px;
}
.vio-image-interactive .vio-im__zone-title {
	margin: 0 0 16px;
}
.vio-image-interactive .vio-im__zone-sell {
	margin: 0 0 18px;
}
.vio-image-interactive .vio-im__zone-fact {
	padding-left: 14px;
	border-left: 2px solid var(--wp--preset--color--vio-mtn-greige, #E9E3DC);
	margin: 0;
}

/* Desktop: stack states absolutely so the visible one keeps its slot.
   Mobile: stack normally, CTA always visible at the bottom of the panel. */
@media (min-width: 720px) {
	.vio-image-interactive .vio-im__cta-state,
	.vio-image-interactive .vio-im__zone-state {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.vio-image-interactive .vio-im__cta-state[hidden],
	.vio-image-interactive .vio-im__zone-state[hidden] {
		display: none;
	}
}
@media (max-width: 719px) {
	/* Mobile uses the natural flow (no absolute positioning), so [hidden]
	   needs an explicit display:none to override the panel's flex layout. */
	.vio-image-interactive .vio-im__cta-state[hidden],
	.vio-image-interactive .vio-im__zone-state[hidden] {
		display: none;
	}
}

/* JSON data tag stays out of the layout. */
.vio-image-interactive script[data-vio-im-data] {
	display: none;
}

/* =============================================================================
   PHASE 1 - POLYGON ZONES (Treatment Map redesign)
   When a hotspot has a `polygon` field with 3+ points, the renderer emits an
   SVG <polygon> in an overlay SVG above the illustration. CSS below styles
   those polygons: subtle diagonal-stripe fill at rest (animated pulse so
   users know they are interactive), solid translucent fill on hover/focus.
   Numbered label sits at the polygon centroid.
   ============================================================================= */

.vio-im__illus { position: relative; }
.vio-im__zones-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;            /* clicks pass through transparent regions */
  z-index: 2;
}
.vio-im__zones-svg .vio-im__zone-group {
  pointer-events: auto;            /* captured by polygon shapes for mobile tap */
  /* No cursor:pointer on desktop - polygons are visual overlays only; the
     dot buttons are the interaction targets. Only show pointer on touch
     devices where the polygons serve as a larger tap area. */
  cursor: default;
  outline: none;
}
@media (hover: none) {
  /* Touch devices: show pointer so users know the zone is tappable. */
  .vio-im__zones-svg .vio-im__zone-group {
    cursor: pointer;
  }
}
/* Satellite polygons (hide_dot hotspots) - non-interactive on their own.
   They light up only when their LINKED primary dot is hovered/clicked.
   Without this, mousing over a satellite region directly would trigger
   the linked-zone activation as if the user had hovered the primary dot. */
.vio-im__zones-svg .vio-im__zone-group--satellite {
  pointer-events: none;
}
.vio-im__zones-svg .vio-im__zone {
  /* Invisible at rest - zone only appears when its matching dot is
     hovered (.is-hover) or activated (.is-active). Triggered by the
     dot, not the polygon itself, so users discover regions through
     the dots. */
  fill: transparent;
  stroke: transparent;
  vector-effect: non-scaling-stroke;
  transition: fill 0.18s ease, stroke 0.18s ease, opacity 0.18s ease;
  opacity: 1;
}
.vio-im__zones-svg .vio-im__zone-group.is-hover .vio-im__zone,
.vio-im__zones-svg .vio-im__zone-group.is-active .vio-im__zone,
.vio-im__zones-svg .vio-im__zone-group:focus-visible .vio-im__zone {
  /* Solid translucent fill when the matching dot is engaged. */
  fill: rgba(178, 157, 146, 0.45);
  stroke: rgba(80, 60, 50, 0.7);
  stroke-width: 0.18;
  opacity: 1;
}

/* Interactivity cue - a subtle white "flash" sweeps through each zone
   on a staggered timer (each zone delays by `--vio-im-zone-stagger`
   seconds from the next), creating a gentle attention-getting ripple
   across the map. Stops while the zone is hovered / active so the user
   isn't distracted while reading the panel content. */
.vio-im__zones-svg .vio-im__zone-flash {
  /* Disabled - zones are invisible at rest, so there's nothing to flash.
     The element is kept in the DOM for backward compatibility with any
     custom CSS extending this. */
  display: none;
}
@keyframes vio-im-zone-flash {
  /* Most of the cycle the flash is invisible; for ~12% of the cycle it
     fades up to ~0.35 alpha and back down. With ~0.66s of "lit" time
     per ~5.5s cycle the flash is plenty visible without being chatty. */
  0%, 100% { opacity: 0; }
  6%       { opacity: 0.40; }
  12%      { opacity: 0; }
}
.vio-im__zones-svg .vio-im__zone-group:hover .vio-im__zone-flash,
.vio-im__zones-svg .vio-im__zone-group:focus-visible .vio-im__zone-flash,
.vio-im__zones-svg .vio-im__zone-group.is-active .vio-im__zone-flash {
  animation: none;
  opacity: 0;
}
/* Respect reduced-motion preferences - no flashing for users with
   prefers-reduced-motion. The stripe pattern stays visible so the zone
   is still discoverable. */
@media (prefers-reduced-motion: reduce) {
  .vio-im__zones-svg .vio-im__zone-flash { animation: none; }
}
.vio-im__zones-svg .vio-im__zone-num {
  /* Hidden - numbers belong on the dot circles, not inside the polygon
     zones. Matches the earlier removal of numbers from the dots themselves. */
  display: none;
}
.vio-im__zones-svg .vio-im__zone-group:hover .vio-im__zone-num,
.vio-im__zones-svg .vio-im__zone-group:focus-visible .vio-im__zone-num,
.vio-im__zones-svg .vio-im__zone-group.is-active .vio-im__zone-num {
  fill: var(--wp--preset--color--vio-ink, #030303);
}
.vio-im__zones-svg .vio-im__zone-group:focus-visible {
  /* SVG <g> elements do not show a default focus ring; draw one ourselves
     via an outline on the polygon for keyboard nav. */
}
.vio-im__zones-svg .vio-im__zone-group:focus-visible .vio-im__zone {
  stroke-width: 0.4;
  stroke: var(--wp--preset--color--vio-ink, #030303);
}