.mvhs2{
  width: 100%;
}

/* ===== Stage ===== */
.mvhs2-stage{
  position: relative;
  width: 100%;
  height: var(--mvhs2-h);
  overflow: hidden;
}
@media (max-width: 767px){
  .mvhs2-stage{ height: var(--mvhs2-hm); }
}

.mvhs2-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition: opacity 360ms ease;
}
.mvhs2-slide.is-active{
  opacity:1;
  pointer-events:auto;
}
.mvhs2-media{
  width:100%;
  height:100%;
  /* Base (desktop) media sizing */
  object-fit: var(--mvhs2-fit, cover) !important;
  object-position: var(--mvhs2-pos, 50% 50%) !important;
  display:block;
}

/* Force-fit for themes that override img/video sizing (Elementor-like behavior) */
.mvhs2-stage img,
.mvhs2-stage video{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit: var(--mvhs2-fit, cover) !important;
  object-position: var(--mvhs2-pos, 50% 50%) !important;
  display:block !important;
}
@media (max-width: 767px){
  .mvhs2-stage img,
  .mvhs2-stage video{
    object-fit: var(--mvhs2-fit-m, var(--mvhs2-fit, cover)) !important;
    object-position: var(--mvhs2-pos-m, var(--mvhs2-pos, 50% 50%)) !important;
  }
}

/* Mobile overrides MUST come after the base rule (or use !important)
   otherwise the later base rule will win on mobile.
   This is the reason your "contain" / position settings looked like they did nothing. */
@media (max-width: 767px){
  .mvhs2-media{
    object-fit: var(--mvhs2-fit-m, var(--mvhs2-fit, cover)) !important;
    object-position: var(--mvhs2-pos-m, var(--mvhs2-pos, 50% 50%)) !important;
  }
}

/* ===== Tabs (Ref-style) ===== */
.mvhs2-tabs{
  display: grid;
  grid-template-columns: var(--mvhs2-arrow-hit,44px) minmax(0,1fr) var(--mvhs2-arrow-hit,44px);
  align-items: center;
  justify-items: center;
  gap: 8px;
  padding: 18px 16px 0;
}

.mvhs2-arrow{
  width: var(--mvhs2-arrow-hit);
  height: var(--mvhs2-arrow-hit);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: var(--mvhs2-arrow-pad) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  color: var(--mvhs2-arrow-color) !important;
  transition: color 180ms ease, opacity 180ms ease;
}
.mvhs2-arrow:hover{ color:#000 !important; }
.mvhs2-arrow svg,
.mvhs2-arrow img,
.mvhs2-arrow .mvhs2-arrow-mask{
  width: var(--mvhs2-arrow-size,22px) !important;
  height: var(--mvhs2-arrow-size,22px) !important;
  display:block;
}

.mvhs2-arrow svg{max-width:100% !important; max-height:100% !important;}

.mvhs2-tablist{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--mvhs2-tabs-border);
  min-width: 0;
}

.mvhs2-tab{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:none !important;
  padding: 10px 0;
  cursor: pointer;
  font-family: var(--mvhs2-tabs-font);
  font-size: var(--mvhs2-tabs-size);
  letter-spacing: var(--mvhs2-tabs-ls);
  text-transform: var(--mvhs2-tabs-tt);
  font-weight: var(--mvhs2-tabs-w);
  color: var(--mvhs2-tabs-color) !important;
  white-space: nowrap;
  transition: color 180ms ease, font-weight 180ms ease;
  outline: none !important;
}
.mvhs2-tab:hover{ color: var(--mvhs2-tabs-hover) !important; }
.mvhs2-tab.is-active{
  color: var(--mvhs2-tabs-active) !important;
  font-weight: var(--mvhs2-tabs-wa);
}

.mvhs2-underline{
  position:absolute;
  left:0;
  bottom:-1px;
  height: var(--mvhs2-ul-h);
  background: var(--mvhs2-ul-c);
  width: 0;
  transform: translateX(0);
  transition: transform 320ms ease, width 320ms ease;
  will-change: transform, width;
  pointer-events:none;
}

/* Desktop behavior: show all tabs evenly */
@media (min-width: 768px){
  .mvhs2-tabs{ padding-left: 0; padding-right: 0; }
  .mvhs2-tablist{ justify-content: space-between; }
}

/* Mobile behavior: show only ACTIVE tab centered (ref-request from you) */
@media (max-width: 767px){
  .mvhs2-tab{ font-size: var(--mvhs2-tabs-size-m); }
  .mvhs2-tablist{ justify-content: center; gap: 0; }
  .mvhs2-tab{ display:none; }
  .mvhs2-tab.is-active{ display:inline-flex; }
}

/* ===== Below header ===== */
.mvhs2-below{
  margin-top: var(--mvhs2-below-mt);
  text-align: var(--mvhs2-below-align);
  color: var(--mvhs2-below-color);
  font-family: var(--mvhs2-below-font);
  font-size: var(--mvhs2-below-size);
  font-weight: var(--mvhs2-below-w);
}
@media (max-width: 767px){
  .mvhs2-below{ font-size: var(--mvhs2-below-size-m); }
}


/* ===== v2.1.0 additions: overlay + sizing ===== */

.mvhs2-tabs{
  padding-left: var(--mvhs2-tabs-pad-x);
  padding-right: var(--mvhs2-tabs-pad-x);
  max-width: var(--mvhs2-tabs-maxw);
  margin-left: auto;
  margin-right: auto;
}
.mvhs2-arrow svg{ width: var(--mvhs2-arrow-size); height: var(--mvhs2-arrow-size); }

/* Overlay */
.mvhs2-stage{ position: relative; }
.mvhs2-overlay{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: var(--mvhs2-ov-mb);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: var(--mvhs2-ov-gap);
  color: var(--mvhs2-ov-color);
  text-align:center;
  z-index: 3;
  pointer-events: auto;
}
.mvhs2-ov-title{
  font-family: var(--mvhs2-ov-font);
  font-size: var(--mvhs2-ov-sm);
  font-weight: var(--mvhs2-ov-sm-w);
  line-height: 1.2;
}
.mvhs2-ov-cta{
  font-family: var(--mvhs2-ov-font);
  font-size: var(--mvhs2-ov-cta);
  font-weight: var(--mvhs2-ov-cta-w);
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.mvhs2-ov-cta.has-ul::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height: var(--mvhs2-ov-ul-h);
  background: var(--mvhs2-ov-ul-c);
}
@media (max-width: 767px){
  .mvhs2-ov-title{ font-size: var(--mvhs2-ov-sm-m); }
  .mvhs2-ov-cta{ font-size: var(--mvhs2-ov-cta-m); }
}


/* ===== v2.1.1 arrow + underline fixes ===== */

.mvhs2-tabs{ overflow: visible; padding-left: var(--mvhs2-tabs-pad-x); padding-right: var(--mvhs2-tabs-pad-x); }
.mvhs2-arrow{ overflow: visible; }
.mvhs2-arrow-img{
  width: var(--mvhs2-arrow-size);
  height: var(--mvhs2-arrow-size);
  display:block;
  object-fit: contain;
}
.mvhs2-tabs{ align-items: center; }
.mvhs2-tablist{ align-items: center; }


/* ===== v2.1.2 ui fixes: arrows not covered + better grid ===== */

.mvhs2-tabs{
  position: relative;
  grid-template-columns: max-content 1fr max-content;
}
.mvhs2-arrow{
  position: relative;
  z-index: 5; /* stay above any borders/underline */
  flex: 0 0 auto;
}
.mvhs2-tablist{
  position: relative;
  z-index: 1;
}

/* ensure arrow content always visible */
.mvhs2-arrow svg,
.mvhs2-arrow-img{
  display:block !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* avoid theme button styles hiding svg */
.mvhs2-arrow{ font-size: 0 !important; line-height: 0 !important; }
.mvhs2-arrow svg{ font-size: initial; }

/* prevent border line visually 'cutting' through arrow cell */
.mvhs2-tabs::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:1px;
  background: var(--mvhs2-tabs-border);
  opacity: 0; /* tablist already has border; this is here only if theme removes it */
  pointer-events:none;
}


/* ===== v2.1.3 arrow color support for inline svg ===== */

.mvhs2-arrow{
  color: var(--mvhs2-arrow-color) !important;
}
.mvhs2-arrow:hover{
  color: var(--mvhs2-arrow-hover) !important;
}
/* Make inline SVG scale like configured */
.mvhs2-arrow svg{
  width: var(--mvhs2-arrow-size,22px) !important;
  height: var(--mvhs2-arrow-size,22px) !important;
}


/* ===== v2.1.4 tabs vertical padding ===== */

.mvhs2-tabs{
  padding-top: var(--mvhs2-tabs-pad-y);
  padding-bottom: 0;
}


/* ===== v2.1.5 arrow layout fix (icon visible + symmetric) ===== */

/* symmetric columns so left/right are perfectly aligned */
.mvhs2-tabs{
  display: grid;
  grid-template-columns: var(--mvhs2-arrow-hit) 1fr var(--mvhs2-arrow-hit);
  align-items: center;
  column-gap: 0;
}

/* arrow button reset (avoid theme border/background) */
.mvhs2-arrow{
  width: var(--mvhs2-arrow-hit) !important;
  height: var(--mvhs2-arrow-hit) !important;
  padding: var(--mvhs2-arrow-pad) !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mvhs2-arrow-color) !important;
  cursor: pointer;
}

/* ensure svg paths are visible even if theme targets svg */
.mvhs2-arrow svg,
.mvhs2-arrow-img{
  width: var(--mvhs2-arrow-size,22px) !important;
  height: var(--mvhs2-arrow-size,22px) !important;
  display: block !important;
  overflow: visible !important;
}

.mvhs2-arrow svg path{
  stroke: currentColor !important;
}

.mvhs2-arrow:hover{ color: var(--mvhs2-arrow-hover) !important; }

/* keep tablist centered in middle column */
.mvhs2-tablist{
  justify-content: space-between;
  width: 100%;
}


/* ===== v2.2.0 ref polish ===== */

/* Overlay typography like ref */
.mvhs2-overlay{
  text-shadow: var(--mvhs2-ov-shadow);
  letter-spacing: var(--mvhs2-ov-ls);
}
.mvhs2-ov-title{
  opacity: .92;
}
.mvhs2-ov-cta{
  opacity: .98;
}
.mvhs2-ov-cta.has-ul::after{
  bottom: calc(-1 * var(--mvhs2-ov-ul-off));
  border-radius: 1px;
}

/* Tabs/underline like ref: thin, clean */
.mvhs2-underline{
  border-radius: 1px;
}

/* Arrow icon look (thin chevron), no boxes */
.mvhs2-arrow{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== v2.2.2: custom arrow icons (safe on mobile) ===== */

.mvhs2-arrow-mask{
  width: var(--mvhs2-arrow-size);
  height: var(--mvhs2-arrow-size);
  background: currentColor;
  display: none;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
}

/* IMG fallback always exists */
.mvhs2-arrow-img{
  width: var(--mvhs2-arrow-size,22px) !important;
  height: var(--mvhs2-arrow-size,22px) !important;
  display:block !important;
  object-fit: contain;
}

/*
  IMPORTANT:
  Some mobile browsers (notably Safari/iOS) can fail to render CSS mask-image
  when the SVG is loaded from a different origin / with strict headers.
  If we hide the <img> fallback, the icon becomes invisible.

  Therefore we keep the <img> fallback ALWAYS visible.
  The mask is optional and is disabled on mobile for maximum reliability.
*/
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .mvhs2-arrow-mask{
    display:block;
    -webkit-mask-image: var(--mvhs2-arrow-url);
            mask-image: var(--mvhs2-arrow-url);
  }
  /* keep img visible (no opacity hack) */
  .mvhs2-arrow-img{ opacity: 1 !important; }
}

@media (max-width: 767px){
  /* Mobile: disable mask to avoid CORS/renderer issues; use IMG only */
  .mvhs2-arrow-mask{ display:none !important; }
  .mvhs2-arrow-img{ opacity: 1 !important; display:block !important; }
  /* Also force arrows visible even if theme adds mobile button hiding */
  .mvhs2-tabs .mvhs2-arrow{ display:flex !important; visibility:visible !important; opacity:1 !important; }
}

/* Mobile layout safety: avoid collapsing stage/tabs */
.mvhs2-stage{
  height: var(--mvhs2-h, 520px);
}
@media (max-width: 767px){
  .mvhs2-stage{ height: var(--mvhs2-hm, 520px); min-height: 420px; }
  .mvhs2-tabs{ padding: 14px 16px 0; }
  .mvhs2-tablist{ justify-content: center; }
}