/* One immersive studio chapter, scoped to the existing merged landing.
   The photographic hero and every surrounding section retain their own styles. */
.ym-merge .ym-scroll-studio {
  --studio-chalk: #f4f6f2;
  --studio-ink: #111513;
  --studio-muted: #46534c;
  --studio-lime: #dfff24;
  --studio-gutter: clamp(28px, 7vw, 108px);
  --studio-dock-height: 116px;
  --studio-bottom: 0px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--studio-ink);
  background: var(--studio-chalk);
  isolation: isolate;
  scroll-margin-top: 0;
}
.ym-merge .ym-scroll-studio .ym-scroll-stage {
  position: relative;
  height: max(760px, 100svh);
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 59% 39%, #ffffff 0%, #f4f6f2 66%);
}
.ym-merge .ym-scroll-studio.is-enhanced:not(.is-unavailable) { height: 360svh; }
.ym-merge .ym-scroll-studio.is-enhanced:not(.is-unavailable) .ym-scroll-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
.ym-merge .ym-scroll-studio .ym-scroll-court {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #c7d0c5;
  stroke-width: 1;
  opacity: .48;
  pointer-events: none;
}
.ym-merge .ym-scroll-studio .ym-scroll-topline {
  position: absolute;
  z-index: 4;
  top: 28px;
  left: var(--studio-gutter);
  right: var(--studio-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
}
.ym-merge .ym-scroll-studio .ym-scroll-topline > span {
  font: 800 10px/1.4 var(--body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.ym-merge .ym-scroll-studio .ym-scroll-topline a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  color: var(--studio-ink);
  font: 700 11px/1.5 var(--body);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ym-merge .ym-scroll-studio .ym-scroll-topline a span { font-size: 17px; }

/* Native media fills the stage. Pointer events stay with the scroll document. */
.ym-merge .ym-scroll-studio #ymc-product {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.ym-merge .ym-scroll-studio .ymc-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.ym-merge .ym-scroll-studio #ymc-motion-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.ym-merge .ym-scroll-studio .ymc-hero-poster {
  position: absolute;
  top: 8%;
  left: 53%;
  width: 40%;
  height: 78%;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
}

/* The parent updates --beat-opacity and optionally --beat-shift on each beat.
   aria-hidden/inert are managed separately so changing copy is not a live-region loop. */
.ym-merge .ym-scroll-studio .ym-scroll-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.ym-merge .ym-scroll-studio .ym-scroll-beat {
  --beat-opacity: 0;
  --beat-shift: 0px;
  position: absolute;
  top: 47%;
  left: var(--studio-gutter);
  width: min(490px, 39%);
  opacity: var(--beat-opacity);
  transform: translateY(calc(-50% + var(--beat-shift)));
  pointer-events: none;
}
.ym-merge .ym-scroll-studio .ym-scroll-beat[data-beat="0"] { --beat-opacity: 1; }
.ym-merge .ym-scroll-studio .ym-scroll-beat-right { left: 56%; width: min(490px, calc(44% - var(--studio-gutter))); }
.ym-merge .ym-scroll-studio .ym-scroll-beat :is(h2, h3) {
  max-width: none;
  margin: 0;
  color: var(--studio-ink);
  font: 900 clamp(58px, 6.3vw, 96px)/.91 var(--display);
  letter-spacing: -.033em;
  text-transform: uppercase;
}
.ym-merge .ym-scroll-studio .ym-scroll-beat em {
  color: var(--studio-ink);
  font: inherit;
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--studio-lime);
  text-decoration-thickness: .085em;
  text-underline-offset: .045em;
}
.ym-merge .ym-scroll-studio .ym-scroll-beat p {
  max-width: 345px;
  margin: 26px 0 0;
  color: var(--studio-muted);
  font: 400 15px/1.75 var(--body);
}

/* A single stable dock: selected look, swatches, price and personalization. */
.ym-merge .ym-scroll-studio .ym-scroll-dock {
  position: absolute;
  z-index: 5;
  bottom: var(--studio-bottom);
  left: var(--studio-gutter);
  right: var(--studio-gutter);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  grid-template-areas: "name swatches action tools" "status status status status";
  align-items: center;
  gap: 0 30px;
  min-height: var(--studio-dock-height);
  padding: 17px 0 13px;
  border-top: 1px solid #11151324;
  background: linear-gradient(180deg, #f4f6f2e6, #f4f6f2 48%);
}
.ym-merge .ym-scroll-studio .ym-scroll-design { grid-area: name; min-width: 0; }
.ym-merge .ym-scroll-studio .ym-scroll-label {
  display: block;
  margin-bottom: 6px;
  color: var(--studio-muted);
  font: 700 8px/1.4 var(--body);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ym-merge .ym-scroll-studio #ymc-active-name {
  display: block;
  color: var(--studio-ink);
  font: 800 11px/1.4 var(--body);
  letter-spacing: 0;
}
.ym-merge .ym-scroll-studio .ym-scroll-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 5px 0 0;
  line-height: 1;
}
.ym-merge .ym-scroll-studio .ym-scroll-price > span { color: var(--studio-muted); font: 400 10px/1.4 var(--body); }
.ym-merge .ym-scroll-studio .ym-scroll-price strong { color: var(--studio-ink); font: 800 19px/1.1 var(--body); letter-spacing: -.03em; }
.ym-merge .ym-scroll-studio .ymc-swatches {
  grid-area: swatches;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.ym-merge .ym-scroll-studio [data-preview] {
  display: grid;
  place-items: center;
  width: 42px;
  height: 44px;
  min-width: 0;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.ym-merge .ym-scroll-studio [data-preview] span {
  display: block;
  width: 26px;
  height: 26px;
  border: 1px solid #11151338;
  border-radius: 50%;
  background: var(--swatch);
}
.ym-merge .ym-scroll-studio [data-preview][aria-pressed="true"] { border-color: var(--studio-ink); }
.ym-merge .ym-scroll-studio .ymc-customize-current {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-width: 212px;
  max-width: none;
  min-height: 54px;
  margin: 0;
  padding: 15px 21px;
  border: 1px solid var(--studio-lime);
  border-radius: 9px;
  background: var(--studio-lime);
  color: var(--studio-ink);
  font: 800 13px/1.35 var(--body);
  text-align: center;
  text-decoration: none;
}
.ym-merge .ym-scroll-studio .ymc-customize-current:hover { background: #edff75; border-color: #edff75; color: var(--studio-ink); }
.ym-merge .ym-scroll-studio .ymc-customize-current > span { font-size: 20px; line-height: 1; }
.ym-merge .ym-scroll-studio .ym-scroll-tools { grid-area: tools; justify-self: end; }
.ym-merge .ym-scroll-studio #ymc-motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 0 8px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--studio-muted);
  font: 700 10px/1.4 var(--body);
  cursor: pointer;
}
.ym-merge .ym-scroll-studio #ymc-motion-toggle > span { margin-left: 9px; }
.ym-merge .ym-scroll-studio #ymc-motion-toggle:disabled { cursor: default; opacity: .8; }
.ym-merge .ym-scroll-studio #ymc-motion-status {
  grid-area: status;
  min-height: 0;
  max-width: 650px;
  margin: 0;
  padding: 0;
  color: var(--studio-muted);
  font: 400 11px/1.55 var(--body);
}
.ym-merge .ym-scroll-studio #ymc-motion-status:empty { display: none; }
.ym-merge .ym-scroll-studio #ymc-motion-status:not(:empty) { margin-top: 9px; }
.ym-merge .ym-scroll-studio :is(a, button):focus-visible { outline: 3px solid #647500; outline-offset: 4px; }

/* Without enhancement, or after a loading failure, this remains a normal section. */
.ym-merge .ym-scroll-studio:not(.is-enhanced),
.ym-merge .ym-scroll-studio.is-unavailable { height: auto; }
.ym-merge .ym-scroll-studio:not(.is-enhanced) .ym-scroll-stage,
.ym-merge .ym-scroll-studio.is-unavailable .ym-scroll-stage { position: relative; top: auto; height: max(760px, 100svh); }
.ym-merge .ym-scroll-studio:not(.is-enhanced) .ym-scroll-beat,
.ym-merge .ym-scroll-studio.is-unavailable .ym-scroll-beat { display: none; }
.ym-merge .ym-scroll-studio:not(.is-enhanced) .ym-scroll-beat[data-beat="0"],
.ym-merge .ym-scroll-studio.is-unavailable .ym-scroll-beat[data-beat="0"] { display: block; opacity: 1 !important; transform: translateY(-50%) !important; }

@media (min-width: 761px) and (max-width: 1100px) {
  .ym-merge .ym-scroll-studio { --studio-gutter: 32px; }
  .ym-merge .ym-scroll-studio .ym-scroll-dock { gap: 0 16px; grid-template-columns: minmax(150px, 1fr) auto auto auto; }
  .ym-merge .ym-scroll-studio .ymc-customize-current { min-width: 172px; padding-inline: 15px; gap: 12px; font-size: 12px; }
  .ym-merge .ym-scroll-studio [data-preview] { width: 34px; padding: 4px; }
}

/* Phones get three separate regions: editorial caption, transparent scene,
   and a single shopping dock. The media camera fits only its own viewport. */
.ym-merge .ym-scroll-progress { display: none; }
@media (max-width: 760px), (max-height: 649px) {
  .ym-merge .ym-scroll-studio {
    --studio-gutter: 18px;
    --studio-bottom: env(safe-area-inset-bottom, 0px);
    --studio-dock-height: 146px;
    --studio-media-top: 188px;
  }
  .ym-merge .ym-scroll-studio.is-enhanced:not(.is-unavailable) { height: 360svh; }
  .ym-merge .ym-scroll-studio .ym-scroll-topline { top: 8px; min-height: 36px; gap: 10px; }
  .ym-merge .ym-scroll-studio .ym-scroll-topline > span { font-size: 8px; letter-spacing: .12em; }
  .ym-merge .ym-scroll-studio .ym-scroll-topline a { font-size: 10px; min-height: 44px; gap: 7px; }
  .ym-merge .ym-scroll-studio .ym-scroll-progress { display: block; position: absolute; top: 53px; left: var(--studio-gutter); right: var(--studio-gutter); height: 2px; background: #1115131c; }
  .ym-merge .ym-scroll-studio .ym-scroll-progress span { display: block; height: 100%; background: #536100; transform-origin: left; transform: scaleX(var(--scroll-progress, 0)); }
  .ym-merge .ym-scroll-studio .ym-scroll-court { opacity: .24; }
  .ym-merge .ym-scroll-studio #ymc-product { top: var(--studio-media-top); bottom: calc(var(--studio-dock-height) + var(--studio-bottom) + 8px); height: auto; }
  .ym-merge .ym-scroll-studio .ymc-hero-poster { inset: 4% 8%; width: 84%; height: 92%; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat,
  .ym-merge .ym-scroll-studio .ym-scroll-beat-right { top: 68px; left: var(--studio-gutter); right: var(--studio-gutter); width: auto; transform: translateY(var(--beat-shift)); }
  .ym-merge .ym-scroll-studio .ym-scroll-beat :is(h2, h3) { font-size: clamp(30px, 8.25vw, 38px); line-height: .96; letter-spacing: -.025em; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat p { max-width: 400px; margin-top: 9px; font-size: 11px; line-height: 1.45; }
  .ym-merge .ym-scroll-studio .ym-scroll-dock {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name tools" "swatches action" "status status";
    align-content: center;
    gap: 10px 10px;
    min-height: var(--studio-dock-height);
    padding: 10px 0 14px;
  }
  .ym-merge .ym-scroll-studio .ym-scroll-label { display: none; }
  .ym-merge .ym-scroll-studio #ymc-active-name { font-size: 10px; line-height: 1.35; }
  .ym-merge .ym-scroll-studio .ym-scroll-price { margin-top: 4px; gap: 6px; }
  .ym-merge .ym-scroll-studio .ym-scroll-price > span { font-size: 10px; }
  .ym-merge .ym-scroll-studio .ym-scroll-price strong { font-size: 18px; }
  .ym-merge .ym-scroll-studio .ymc-swatches { gap: 0; justify-content: flex-start; }
  .ym-merge .ym-scroll-studio [data-preview] { width: 44px; height: 44px; padding: 8px; }
  .ym-merge .ym-scroll-studio [data-preview] span { width: 26px; height: 26px; }
  .ym-merge .ym-scroll-studio .ymc-customize-current { min-width: 0; min-height: 46px; padding: 10px 12px; gap: 6px; font-size: 11px; line-height: 1.35; }
  .ym-merge .ym-scroll-studio .ymc-customize-current > span { font-size: 16px; }
  .ym-merge .ym-scroll-studio #ymc-motion-toggle { font-size: 10px; min-height: 44px; padding: 4px 0 4px 8px; }
  .ym-merge .ym-scroll-studio #ymc-motion-status { font-size: 10px; }
  .ym-merge .ym-scroll-studio:not(.is-enhanced) .ym-scroll-beat[data-beat="0"],
  .ym-merge .ym-scroll-studio.is-unavailable .ym-scroll-beat[data-beat="0"] { transform: none !important; }
}
@media (max-width: 760px) {
  .ym-merge .ym-scroll-studio .ym-scroll-dock { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name tools" "swatches swatches" "action action" "status status"; gap: 2px 8px; padding: 8px 0 10px; }
  .ym-merge .ym-scroll-studio { --studio-dock-height: 164px; }
  .ym-merge .ym-scroll-studio .ymc-swatches { justify-content: center; gap: 7px; }
  .ym-merge .ym-scroll-studio .ymc-customize-current { width: 100%; min-height: 44px; padding: 9px 14px; }
  body.b3d-landing-page.ym-scroll-active .pdl-mobile-buy { visibility: hidden !important; pointer-events: none !important; transform: translateY(110%) !important; }
  body.b3d-landing-page.ym-scroll-active #ymc-fab { visibility: hidden !important; pointer-events: none !important; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .ym-merge .ym-scroll-studio { --studio-media-top: 128px; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat { top: 62px; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat :is(h2, h3) { font-size: 28px; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat p { display: none; }
}
/* Only genuinely shallow/landscape windows use the ordinary chapter. Portrait
   phones down to 500px retain the complete scroll and all five design reveals. */
@media (max-height: 499px), (min-width: 761px) and (max-height: 649px) {
  .ym-merge .ym-scroll-studio,
  .ym-merge .ym-scroll-studio.is-enhanced:not(.is-unavailable) { height: auto; }
  .ym-merge .ym-scroll-studio .ym-scroll-stage,
  .ym-merge .ym-scroll-studio.is-enhanced:not(.is-unavailable) .ym-scroll-stage,
  .ym-merge .ym-scroll-studio:not(.is-enhanced) .ym-scroll-stage { position: relative; top: auto; height: 700px; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat { display: none; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat[data-beat="0"] { display: block; opacity: 1 !important; transform: none !important; }
  .ym-merge .ym-scroll-studio .ym-scroll-progress { display: none; }
}
@media (min-width: 761px) and (max-height: 649px) {
  .ym-merge .ym-scroll-studio { --studio-gutter: max(30px, calc((100% - 800px)/2)); --studio-bottom: 20px; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat p { max-width: 540px; }
}
@media (prefers-reduced-motion: reduce) {
  .ym-merge .ym-scroll-studio,
  .ym-merge .ym-scroll-studio.is-enhanced:not(.is-unavailable) { height: auto; }
  .ym-merge .ym-scroll-studio .ym-scroll-stage,
  .ym-merge .ym-scroll-studio.is-enhanced:not(.is-unavailable) .ym-scroll-stage { position: relative; top: auto; height: max(700px, 100svh); }
  .ym-merge .ym-scroll-studio .ym-scroll-beat { display: none; }
  .ym-merge .ym-scroll-studio .ym-scroll-beat[data-beat="0"] { display: block; opacity: 1 !important; }
  .ym-merge .ym-scroll-studio .ym-scroll-progress { display: none; }
  .ym-merge .ym-scroll-studio *, .ym-merge .ym-scroll-studio *::before, .ym-merge .ym-scroll-studio *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 760px), (max-height: 649px) {
  .ym-merge .ym-scroll-studio.is-unavailable .ym-scroll-stage { height: max(740px, 100svh); }
  .ym-merge .ym-scroll-studio.is-unavailable #ymc-product { bottom: calc(var(--studio-dock-height) + 50px + var(--studio-bottom)); }
}

@keyframes ym-scroll-caption-in { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  .ym-merge .ym-scroll-studio.is-enhanced .ym-scroll-beat.is-current { animation: ym-scroll-caption-in .18s ease-out both; }
}