/* =============================================================================
   50/50 Accordion — Content mode
   When mediaMode="content" the other column shows text, not a cropped image.
   Remove the aspect-ratio box and overflow constraints.
   ============================================================================= */

.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;
}

/* Content mode: col--media holds the content intro AND the CTA underneath
   it as two sibling flex items. The desktop rule below (min-width:1280px)
   sets the column to `display: flex` with the default row direction +
   `justify-content: center`, which puts the content and CTA side-by-side
   instead of stacked. Force a column direction whenever this block is in
   content mode, so the CTA always lands BELOW its content sibling. The
   align-items: center kept here centers the stack horizontally; the
   intro and CTA stay at their natural widths. */
.vio-fifty-fifty-accordion--mode-content .vio-fifty-fifty-accordion__col--media {
  flex-direction: column;
  align-items: center;
}

/* Content-mode section sizing override.
   The default section pins to `min-height: 100dvh` so the IMAGE side
   can fill the viewport top-to-bottom. In content mode there's no
   image to anchor — both columns are text — and the forced viewport
   height was leaving a huge empty band above/below the (short) text
   content because the columns center vertically inside the tall row.
   Drop the viewport pin in content mode so the section sizes to its
   actual content with normal vertical padding only. */
@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;
  }
  /* Specificity bump: the original rule `.vio-fifty-fifty-accordion
     .vio-fifty-fifty-accordion__grid` lives later in the file with
     the same 0,2,0 specificity, so source order beat us out and the
     `minmax(100dvh - 100px, auto)` floor kept the row claiming
     viewport height. Chain `.vio-fifty-fifty-accordion` and the
     `--mode-content` modifier on the same element to get 0,3,0 and
     out-rank it. Reset the row floor to `auto` so the grid sizes to
     content. */
  .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;
  }
}

/* Mobile stacking order: content on top, image below.
   Scoped to below the two-column breakpoint so desktop layout is unaffected.
   Chained class bumps specificity so this wins over
   .vio-fifty-fifty-accordion--content-right rules at 768-1279px. */
@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;
  }
}

/* =============================================================================
   Sticky opposite column
   When `stickyOpposite` is on, the non-accordion column pins to the top of the
   viewport while the accordion column scrolls. `align-self: start` is required
   for sticky inside a CSS grid — without it the column stretches and never
   leaves the viewport so sticky can't engage. The 96px top offset clears a
   typical sticky page header; tune with --vio-fa-sticky-top if needed.
   Disabled below 1280px (single-column stack) where sticky makes no sense.
   ============================================================================= */
/* Sticky offset tracks the global fixed-header height set by JS in
   --vio-fixed-top; falls back to 96px (the historical accordion
   value) when JS hasn't measured yet. Kept identical between the
   50/50 accordion and the 50/50 image-copy blocks so both pin under
   the same header line. */
@media (min-width: 1280px) {
  /* Higher specificity than the generic `.vio-fifty-fifty-accordion
     .vio-fifty-fifty-accordion__col--media { align-self: center }` rule
     further down — without the extra .vio-fifty-fifty-accordion class
     in front the rules tied on specificity and the later one won, so
     the media stayed vertically centered instead of pinning to the top
     for the sticky effect. */
  .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;
  }

  /* Sticky accordion column — mirror of --sticky-opposite but for the
     content side. Pin the accordion column to the viewport top so the
     user can keep interacting with it while the opposite column
     (taller image / content area) scrolls past. */
  .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;
  }

  /* Vertical alignment for the accordion content column. Only meaningful
     when sticky-content is OFF — sticky overrides align-self to `start`
     to engage. The default rule below (`align-self: center` from the
     content-mode column rule further down) used to apply to col--content
     too in some contexts; these modifiers give editors explicit control. */
  .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;
  }
}

/* =============================================================================
   Treatment FAQs (rendered when `includeFaqs` is on and the current treatment
   has cached FAQs). Distinct from the existing core/details accordion so it
   reads as a separate "questions" section — rectangular button, sparkle icon,
   chevron, expand-on-click, question goes bold when expanded.
   No custom fonts — inherits the global font stack.
   ============================================================================= */
/* Both grid columns need min-width: 0 so long children (FAQ answers, long
   words) don't push the grid track wider than the viewport. CSS grid items
   default to min-width: auto which uses the content's intrinsic size. */
.vio-fifty-fifty-accordion__col,
.vio-fifty-fifty-accordion__col--content,
.vio-fifty-fifty-accordion__col--media {
  min-width: 0;
}

/* Section padding override — per Figma the 50/50 accordion block sits at
   50px on all sides (not the default 100px top/bottom). Desktop only;
   tablet/mobile keep the generic .vio-section padding.
   Also pins section to 100vh (full viewport height) per designer spec —
   image fills its half of the viewport top to bottom; grid stretches so
   both columns occupy the full height. */
@media (min-width: 1280px) {
  .vio-section.vio-fifty-fifty-accordion,
  section.vio-section.vio-fifty-fifty-accordion {
    /* Section padding 50px on all four sides (50px breathing room for
       BOTH columns — image and content alike). */
    padding: 50px;
    /* `min-height: 100dvh` — section is at least the viewport height
       (image's full bleed budget) but ALLOWED to grow if the content
       column's natural height exceeds the available space. No internal
       scroll on the column; content pushes the section taller instead.
       `overflow: visible` lets the taller-than-viewport content paint
       freely; the section just lengthens to wrap it. */
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    /* `contain: layout paint` isolates internal layout / paint changes
       so FAQ animations don't trigger work outside the section. `size`
       isn't included so we still let CSS calculate the fixed height. */
    contain: layout paint;
  }
  /* Pass the section's full viewport height down through every wrapper
     between .vio-section and the grid (inner → content → body → grid).
     Each link must be a flex column with min-height: 0 and flex: 1 1 auto
     so the grid receives the full available height. ALSO strip the global
     .vio-section__inner max-width:1440px + padding:0 50px so the grid (and
     thus the media column) can span the actual section width — without
     this the image sits at viewport_x = ~110 (= ~60 margin + 50 inner
     padding on a 1561-wide viewport) instead of the 50px we want. */
  .vio-section.vio-fifty-fifty-accordion .vio-section__inner,
  section.vio-section.vio-fifty-fifty-accordion .vio-section__inner,
  .vio-section.vio-fifty-fifty-accordion .vio-section__content,
  .vio-section.vio-fifty-fifty-accordion .vio-section__body {
    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;   /* beats global align-items: start */
    /* Row min = section content area (100dvh − 100px section padding),
       but allowed to grow if content's natural height exceeds it. So
       the section is at minimum 100dvh, and grows taller when content
       needs more. No internal scrollbar required — content drives the
       section's height. */
    grid-template-rows: minmax(calc(100vh - 100px), auto);
    grid-template-rows: minmax(calc(100dvh - 100px), auto);
  }
  /* Media column: holds the image. Locked to the section's viewport
     content area (100dvh − 100px section padding) and explicitly
     opted-OUT of the grid row's `align-items: stretch` via
     `align-self: start`, so the image stays at viewport height even
     when the content column makes the grid row taller. Result:
       - Content shorter than viewport → image fills viewport content
         area normally, section is 100dvh.
       - Content TALLER than viewport → grid row grows to fit content,
         but the image's column does NOT grow with it (capped). When
         the `--sticky-opposite` modifier is on, the column also sticks
         to the viewport's top as the user scrolls the content side. */
  .vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--media {
    /* Per VIO design — media column hosts a FIXED 4:5 portrait crop
       sized to 75% of the viewport height (width derives via the
       aspect ratio). Column track stays at its grid width (50%);
       the media element inside is centered vertically + horizontally
       so the crop sits in the middle of the half. */
    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);
  }
  /* Content column: the section provides 50px padding on all edges and
     the grid adds a 100px gap between columns, so the content column
     needs no horizontal padding of its own. Vertical padding gives
     breathing room above and below the content stack. When content's
     natural height exceeds the grid row floor (100dvh - 100px section
     padding), the row grows, the section grows, and the image grows in
     step. Content centers vertically when shorter than the row's min. */
  .vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--content {
    min-height: 0;
    max-width: 700px;
    width: 100%;
    justify-self: center;
    /* No vertical padding here — the parent section already provides
       50px top/bottom padding, so adding another 50px on the column
       pushes content 100px from the section edge. Anchor content to
       the top of the column instead of vertically centering. */
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  /* 100px gap between media and content columns. */
  .vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__grid {
    gap: 100px;
  }
  /* Media column has no negative margins — section padding-top/bottom is
     already 0, so the image naturally fills the section's full height
     (top of section to bottom of section). */
  .vio-fifty-fifty-accordion .vio-fifty-fifty-accordion__col--media {
    /* nothing — defaults work because section has 0 top/bottom padding. */
  }
}

/* FAQ styles moved to shared assets/css/vio-faqs.css */

/* ──────────────────────────────────────────────────────────────────────────
   Round 2 redesign — image overlay (mediaOverlay attribute)
   When enabled, the media-side Title / Lead / CTA renders ON TOP of the
   image, anchored to the bottom-left corner with 50px padding.
   ──────────────────────────────────────────────────────────────────────── */

.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__media {
  position: relative;
  overflow: hidden;
}

/* Overlay mode: image fills its entire column edge-to-edge, CTA sits
   on top. The media container stretches to 100% of its column (no
   centered 4:5 crop) and the picture/img fill it via object-fit. */
.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) {
  /* Override the centered 4:5 crop: keep the same height, fill the
     full column width so the overlay/gradient covers the entire side. */
  .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;
  }
}

/* Dark gradient radiates from the content anchor toward the opposite edge. */
.vio-fifty-fifty-accordion--media-overlay .vio-fifty-fifty-accordion__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Directional gradients per desktop overlay alignment.
   The overlay div is a CHILD of __media, so we use :has() on __media
   to detect which alignment class is present and style its ::after. */
.vio-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--top-left)::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-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--top-center)::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-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--top-right)::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-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--middle-left)::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-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--middle-center)::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-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--middle-right)::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-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--bottom-left)::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-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--bottom-center)::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-fifty-fifty-accordion__media:has(.vio-fifty-fifty-accordion__overlay--bottom-right)::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%);
}

/* Mobile overlay alignment gradient overrides */
@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,0.70) 0%, rgba(0,0,0,0.30) 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,0.65) 0%, rgba(0,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,0.70) 0%, rgba(0,0,0,0.30) 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,0.65) 0%, rgba(0,0,0,0.30) 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,0.45) 0%, rgba(0,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,0.65) 0%, rgba(0,0,0,0.30) 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,0.75) 0%, rgba(0,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,0.65) 0%, rgba(0,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,0.75) 0%, rgba(0,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;
}

/* Overlay alignment modifiers — 9 positions (vertical × horizontal). */
.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; }

/* Mobile overlay alignment overrides */
@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;
}

/* Bold-only words inside the overlay title (e.g. "Zero <b>Downtime</b>"). */
.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;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Round 2 redesign — accordion → tabs layout (accordionLayout attribute)
   When `--layout-tabs` is set, the inner core/details blocks restyle into:
   - A horizontal row of tab buttons (summary elements)
   - One content panel below (the currently-open details' content)
   The view.js makes only one tab open at a time and adds active class.
   ──────────────────────────────────────────────────────────────────────── */

.vio-fifty-fifty-accordion--layout-tabs .vio-accordion {
  display: block;
}

/* Hide native disclosure arrow */
.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;
}

/* When the view.js runs, it lifts all summaries into a wrapper div above
   the content panels. The CSS-only fallback (no JS) just lets details
   stack vertically as before. The .is-tabs-ready class gets added by JS
   to switch to the actual tabs layout. */
.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready {
  display: flex;
  flex-direction: column;
}
/* Wrapper for the tabs menu + overflow scroll arrow indicator.
   Flex row: arrows sit on either side, the scrollable menu flexes the
   remaining width. JS toggles `is-overflowing`, `is-scroll-start`,
   `is-scroll-end` on the .vio-accordion to drive arrow visibility. */
.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, 0.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 0.15s ease, border-color 0.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[aria-selected="true"],
.vio-fifty-fifty-accordion--layout-tabs .vio-accordion.is-tabs-ready .vio-tabs-menu__btn.is-active {
  background: var(--wp--preset--color--vio-lotion, #FEFFF9);
  border-color: rgba(3, 3, 3, 0.15);
  border-right: 1px solid rgba(3, 3, 3, 0.15);
  border-bottom-color: #B29D92;
}
/* Last tab keeps its right edge so the row looks closed. */
.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, 0.15);
}

/* Scroll-arrow buttons — circular, clickable. Sit as flex siblings of
   the scrollable menu inside the wrap. Visibility toggled via classes
   on the .vio-accordion. */
.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%;
  /* Always-on light circle so the arrow reads against the section bg
     regardless of whether the section is mtn-greige or lotion. */
  background: var(--wp--preset--color--vio-alabaster, #F2F0E6);
  color: var(--wp--preset--color--vio-ink, #030303);
  cursor: pointer;
  padding: 0;
  transition: background 0.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;
}

/* Tab content panels — show only the active one. The panel background
   matches the active tab (lotion) so the active tab + its content read
   as one continuous surface. */
.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;
}

/* ──────────────────────────────────────────────────────────────────────────
   Light CTA variant — white solid bg, ink text, no border. Used for the
   media-side CTA when sitting on dark imagery (overlay mode) where the
   transparent secondary variant would disappear.
   ──────────────────────────────────────────────────────────────────────── */
/* Light variant moved to assets/css/viomedspa-buttons.css so it's
   available globally (used by featured-categories CTA, etc.). */