/* v17.56 — one calm, shared tablet/mobile composition for product slides.
   Order: centered copy, complete commerce card and signature, then the full
   appliance. Desktop (1025px and wider) keeps the approved composition. */

@media (max-width:1024px) {
  :root { --pagination-gutter:0px; }

  main {
    width:100%;
    margin-right:0;
  }

  .transition-zone,
  :is(#slide-1,#slide-2,#slide-3,#slide-4,#slide-5) > .scroll-cue {
    display:none!important;
  }

  :is(#slide-1,#slide-2,#slide-3,#slide-4,#slide-5) {
    width:100%;
    height:100svh;
    min-height:640px;
    padding:calc(var(--header-height) + 14px) clamp(18px,4vw,36px) 18px;
    overflow:hidden;
    background:
      radial-gradient(ellipse 58% 38% at 50% 76%,color-mix(in srgb,var(--halo-strong) 42%,transparent),transparent 74%),
      linear-gradient(180deg,transparent 0 66%,color-mix(in srgb,var(--bg-b) 24%,transparent) 100%);
  }

  :is(#slide-1,#slide-2,#slide-4,#slide-5) {
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    gap:clamp(10px,1.8svh,18px);
    align-items:stretch;
  }

  /* Shared copy hierarchy. */
  :is(#slide-1 .washer-copy,#slide-2 .dishwasher-copy,#slide-3 .cooler-copy,#slide-4 .heater-copy,#slide-5 .oven-copy) {
    position:relative!important;
    inset:auto!important;
    width:min(100%,640px)!important;
    max-width:640px!important;
    margin:0 auto!important;
    transform:none!important;
    translate:none!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    gap:0;
    text-align:center!important;
  }

  :is(
    #slide-1 .washer-copy h1,#slide-2 .dishwasher-title-lead,#slide-3 .cooler-title-lead,
    #slide-4 .heater-title-lead,#slide-5 .oven-copy h1
  ) {
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    font-family:"YekanBakhFaNum",Tahoma,Arial,sans-serif!important;
    font-size:clamp(27px,4.2vw,38px)!important;
    font-weight:900!important;
    line-height:1.16!important;
    letter-spacing:-.025em!important;
    white-space:normal!important;
    text-wrap:balance!important;
    text-align:center!important;
  }

  :is(
    #slide-1 .washer-copy h2,#slide-2 .dishwasher-title-name,#slide-3 .cooler-title-name,
    #slide-4 .heater-title-name,#slide-5 .oven-title-name
  ) {
    width:100%!important;
    max-width:100%!important;
    margin:4px 0 0!important;
    font-family:"YekanBakhFaNum",Tahoma,Arial,sans-serif!important;
    font-size:clamp(18px,2.7vw,24px)!important;
    font-weight:900!important;
    line-height:1.32!important;
    letter-spacing:-.015em!important;
    white-space:normal!important;
    text-wrap:balance!important;
    text-align:center!important;
  }

  :is(
    #slide-1 .washer-copy h3,#slide-2 .dishwasher-title-detail,#slide-3 .cooler-tagline,
    #slide-4 .product-detail,#slide-5 .oven-title-detail
  ) {
    width:100%!important;
    max-width:100%!important;
    margin:5px 0 0!important;
    font-family:"YekanBakhFaNum",Tahoma,Arial,sans-serif!important;
    font-size:clamp(13px,1.85vw,16px)!important;
    font-weight:400!important;
    line-height:1.5!important;
    letter-spacing:0!important;
    white-space:normal!important;
    text-wrap:balance!important;
    text-align:center!important;
  }

  /* One commerce component and one signature rhythm on every product slide. */
  :is(
    #slide-1 .washer-commerce,#slide-2 .dishwasher-commerce,#slide-3 .cooler-commerce,
    #slide-4 .heater-commerce,#slide-5 .oven-commerce
  ) {
    position:relative!important;
    inset:auto!important;
    width:min(370px,100%)!important;
    margin:clamp(10px,1.5svh,15px) auto 0!important;
    transform:none!important;
    translate:none!important;
    align-self:center!important;
  }

  :is(
    #slide-1 .washer-signature,#slide-2 .dishwasher-signature,#slide-3 .cooler-signature,
    #slide-4 .heater-signature,#slide-5 .oven-signature
  ) {
    width:min(370px,100%)!important;
    margin:6px auto 0!important;
    align-self:center!important;
    justify-content:center!important;
    font-size:clamp(10px,1.35vw,12px)!important;
    line-height:1.2!important;
    text-align:center!important;
  }

  :is(
    #slide-1 .washer-signature img,#slide-2 .dishwasher-signature img,#slide-3 .cooler-signature img,
    #slide-4 .heater-signature img,#slide-5 .oven-signature img
  ) {
    width:27px!important;
    height:16px!important;
  }

  :is(#slide-1,#slide-2,#slide-3,#slide-4,#slide-5).text-moving :is(
    .copy > *, .oven-copy > *, .heater-copy-stack .heater-commerce,
    .oven-commerce, .commerce-card > *, .oven-signature
  ) {
    animation:none!important;
  }

  /* Slide 1 — copy/card first, then one complete centered washer. */
  #slide-1 .washer-copy {
    grid-row:1;
    align-self:start;
  }
  #slide-1 .product-left {
    position:relative!important;
    z-index:3;
    grid-row:2;
    align-self:stretch;
    justify-self:center;
    inset:auto!important;
    width:min(92vw,520px)!important;
    height:100%!important;
    max-height:100%!important;
    transform:none!important;
    translate:none!important;
    overflow:visible;
  }
  #slide-1 .product-left > .finish-asset {
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform:none!important;
    scale:1!important;
    animation:none!important;
  }
  #slide-1 .washer-grade-badges {
    --washer-badge-base:min(41svh,72vw,390px)!important;
    left:0!important;
    right:auto!important;
    bottom:5%!important;
    width:clamp(39px,6.8vw,58px)!important;
    height:min(72%,340px)!important;
    row-gap:2%!important;
  }
  #slide-1 .washer-cloud { display:none!important; }

  /* Slide 2 — remove the decorative cat on compact layouts and preserve the
     entire dishwasher inside a centered, floor-safe composition. */
  #slide-2 .dishwasher-copy {
    grid-row:1;
    align-self:start;
  }
  #slide-2 .dishwasher-copy::before { display:none!important; }
  #slide-2 .dishwasher-composition {
    position:relative!important;
    z-index:4;
    grid-row:2;
    align-self:stretch;
    justify-self:center;
    inset:auto!important;
    width:min(82vw,460px)!important;
    height:100%!important;
    max-height:100%!important;
    transform:none!important;
    translate:none!important;
  }
  #slide-2 .dishwasher-composition .product-dishwasher {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    translate:none!important;
  }
  #slide-2 .product-dishwasher > .finish-asset {
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform:none!important;
    scale:1!important;
    animation:none!important;
  }
  #slide-2 .dishwasher-grade-badges {
    --dishwasher-badge-base:min(41svh,72vw,390px)!important;
    left:0!important;
    right:auto!important;
    bottom:5%!important;
    width:clamp(39px,6.8vw,58px)!important;
    height:min(72%,340px)!important;
    row-gap:2%!important;
  }
  #slide-2 :is(.dishwasher-cat-stage,.dishwasher-counter-decor,.dishwasher-product-light,.dishwasher-floor-light) {
    display:none!important;
  }
  #slide-2 .dishwasher-kitchen {
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-position:center bottom!important;
    background-size:cover!important;
    opacity:.14!important;
    filter:grayscale(1) saturate(0) contrast(.88)!important;
  }

  /* Slide 3 — same order, with the plaque treated as the centered product. */
  #slide-3 {
    display:block!important;
  }
  #slide-3 .cooler-content {
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    align-items:start;
    width:min(100%,760px)!important;
    height:100%;
    margin:0 auto;
  }
  #slide-3 .cooler-copy { grid-row:1; }
  #slide-3 .cooler-copy::before {
    inset:-14px -22px!important;
    opacity:.48!important;
  }
  #slide-3 .cooler-commerce { grid-row:2; }
  #slide-3 .cooler-signature { grid-row:3; }
  #slide-3 .plaque-stage {
    position:relative!important;
    grid-row:4;
    align-self:center;
    justify-self:center;
    inset:auto!important;
    width:min(92vw,720px)!important;
    margin:clamp(16px,2.3svh,26px) auto 0!important;
    transform:none!important;
  }
  #slide-3 .cooler-feature-rail {
    grid-row:5;
    align-self:end;
    margin:8px auto 0!important;
    gap:clamp(2px,.7vw,6px)!important;
  }
  #slide-3 .cooler-feature-badge {
    width:clamp(42px,7.5vw,62px)!important;
    height:clamp(42px,7.5vw,62px)!important;
  }
  #slide-3 .cooler-linework {
    inset:0!important;
    transform:none!important;
    background-position:center!important;
    background-size:cover!important;
    opacity:.14!important;
    filter:grayscale(1) saturate(0) blur(.45px)!important;
  }

  /* Slide 4 — stack copy/card above the full centered heater. */
  #slide-4 .heater-copy-stack {
    position:relative!important;
    z-index:8;
    grid-row:1;
    align-self:start;
    inset:auto!important;
    width:min(100%,640px)!important;
    margin:0 auto!important;
    transform:none!important;
    translate:none!important;
  }
  #slide-4 .heater-composition {
    position:relative!important;
    z-index:4;
    grid-row:2;
    align-self:center;
    justify-self:center;
    inset:auto!important;
    width:min(78vw,47svh,430px)!important;
    height:auto!important;
    aspect-ratio:1;
    transform:none!important;
    translate:none!important;
  }
  #slide-4 .heater-stage {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  #slide-4 .heater-stage > .finish-asset {
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    animation:none!important;
  }
  #slide-4 .heater-grade-badges {
    --heater-badge-base:min(41svh,72vw,390px)!important;
    left:-2%!important;
    right:auto!important;
    bottom:5%!important;
    width:clamp(39px,6.8vw,58px)!important;
    height:72%!important;
    row-gap:2%!important;
  }
  #slide-4 .heater-room::before {
    background-position:center!important;
    background-size:cover!important;
    opacity:.14!important;
    filter:grayscale(1) saturate(0)!important;
  }
  #slide-4 .heater-window-weather { opacity:.42!important; }
  #slide-4 .heater-flake { animation:none!important; }
  #slide-4 :is(.floor-glow,.light-heater) { opacity:.22!important; }

  /* Slide 5 — the built-in oven uses the same vertical sequence. */
  #slide-5 .oven-copy-stack {
    position:relative!important;
    z-index:8;
    grid-row:1;
    align-self:start;
    inset:auto!important;
    width:min(100%,640px)!important;
    margin:0 auto!important;
    transform:none!important;
    translate:none!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
  }
  #slide-5 .oven-copy-stack::before { display:none!important; }
  #slide-5 .oven-purchase-stack { width:100%; }
  #slide-5 .oven-composition {
    position:relative!important;
    z-index:4;
    grid-row:2;
    align-self:center;
    justify-self:center;
    inset:auto!important;
    width:min(80vw,47svh,440px)!important;
    height:auto!important;
    aspect-ratio:1;
    transform:none!important;
    translate:none!important;
  }
  #slide-5 .oven-stage {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  #slide-5 .oven-image { animation:none!important; }
  #slide-5 .oven-grade-badges {
    left:-11%!important;
    right:auto!important;
    top:auto!important;
    bottom:5%!important;
    width:clamp(39px,6.8vw,58px)!important;
    height:72%!important;
    row-gap:2%!important;
  }
  #slide-5 .oven-kitchen {
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-position:center!important;
    background-size:cover!important;
    opacity:.14!important;
    filter:grayscale(1) saturate(0)!important;
  }
  #slide-5 :is(.oven-aura,.oven-surface-light) { display:none!important; }
}

/* v17.57 — shared compact-layout product stage.
   Slides 1, 2, 4 and 5: a large product (minimum half viewport height) with
   the five badges vertically beside it. Slide 3 is intentionally the only
   exception: the plaque stays large and its badges remain underneath. */
@media (max-width:1024px) {
  :root,
  html[data-finish="white"],
  html[data-finish="titanium"] {
    --rp-image-height:clamp(300px,50svh,520px);
    --rp-product-width:min(84vw,var(--rp-image-height),460px);
    --rp-badge-size:clamp(42px,6vw,58px);
    --rp-badge-gap:clamp(4px,.8svh,8px);
    --rp-frame-width:min(96vw,calc(var(--rp-product-width) + var(--rp-badge-size) + 12px));
  }

  :is(#slide-1,#slide-2,#slide-3,#slide-4,#slide-5) {
    height:auto!important;
    min-height:100svh!important;
  }

  :is(#slide-1,#slide-2,#slide-4,#slide-5) {
    grid-template-rows:auto minmax(var(--rp-image-height),1fr)!important;
  }

  :is(
    #slide-1 .product-left,
    #slide-2 .dishwasher-composition,
    #slide-4 .heater-composition,
    #slide-5 .oven-composition
  ) {
    box-sizing:border-box!important;
    width:var(--rp-frame-width)!important;
    height:var(--rp-image-height)!important;
    min-height:var(--rp-image-height)!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    align-self:center!important;
    justify-self:center!important;
    overflow:visible!important;
  }

  #slide-1 .product-left > .finish-asset,
  #slide-2 .dishwasher-composition .product-dishwasher,
  #slide-4 .heater-stage,
  #slide-5 .oven-stage {
    position:absolute!important;
    inset:0 0 0 auto!important;
    width:var(--rp-product-width)!important;
    height:var(--rp-image-height)!important;
    max-height:var(--rp-image-height)!important;
    aspect-ratio:auto!important;
  }

  #slide-2 .product-dishwasher > .finish-asset,
  #slide-4 .heater-stage > .finish-asset,
  #slide-5 .oven-image,
  #slide-5 .oven-image img {
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }

  :is(
    #slide-1 .washer-grade-badges,
    #slide-2 .dishwasher-grade-badges,
    #slide-4 .heater-grade-badges,
    #slide-5 .oven-grade-badges
  ) {
    position:absolute!important;
    z-index:7!important;
    left:0!important;
    right:auto!important;
    top:auto!important;
    bottom:0!important;
    width:var(--rp-badge-size)!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:var(--rp-badge-size)!important;
    grid-template-rows:repeat(5,var(--rp-badge-size))!important;
    gap:var(--rp-badge-gap)!important;
    transform:none!important;
    align-items:center!important;
    justify-items:center!important;
  }

  :is(
    #slide-1 .washer-grade-badge,
    #slide-2 .dishwasher-grade-badge,
    #slide-4 .heater-grade-badge,
    #slide-5 .oven-grade-badge
  ) {
    width:var(--rp-badge-size)!important;
    height:var(--rp-badge-size)!important;
    min-width:0!important;
    min-height:0!important;
  }

  :is(
    #slide-1 .washer-grade-badge img,
    #slide-2 .dishwasher-grade-badge img,
    #slide-4 .heater-grade-badge img,
    #slide-5 .oven-grade-badge img
  ) {
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }

  /* Cooler: product frame stays equally prominent, but badges are horizontal
     below the plaque exactly as requested. */
  #slide-3 .cooler-content {
    height:auto!important;
    grid-template-rows:auto auto auto var(--rp-image-height) auto!important;
  }
  #slide-3 .plaque-stage {
    box-sizing:border-box!important;
    width:min(94vw,760px)!important;
    height:var(--rp-image-height)!important;
    min-height:var(--rp-image-height)!important;
    margin:10px auto 0!important;
    display:grid!important;
    place-items:center!important;
  }
  #slide-3 .plaque-stage > .finish-asset {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  #slide-3 .cooler-feature-rail {
    width:auto!important;
    height:var(--rp-badge-size)!important;
    display:grid!important;
    grid-template-columns:repeat(5,var(--rp-badge-size))!important;
    grid-template-rows:var(--rp-badge-size)!important;
    gap:var(--rp-badge-gap)!important;
    margin:10px auto 0!important;
    align-self:start!important;
  }
  #slide-3 .cooler-feature-badge {
    width:var(--rp-badge-size)!important;
    height:var(--rp-badge-size)!important;
  }
}

@media (max-width:640px) {
  :root,
  html[data-finish="white"],
  html[data-finish="titanium"] {
    --rp-product-width:min(84vw,var(--rp-image-height),420px);
    --rp-badge-size:clamp(40px,10.5vw,46px);
    --rp-badge-gap:clamp(3px,.7svh,6px);
    --rp-frame-width:min(98vw,calc(var(--rp-product-width) + var(--rp-badge-size) + 8px));
  }
}

@media (max-width:640px) {
  :root { --pagination-gutter:0px; }

  :is(#slide-1,#slide-2,#slide-3,#slide-4,#slide-5) {
    min-height:620px;
    padding:calc(var(--header-height) + 10px) 16px 12px;
    gap:9px;
  }

  :is(
    #slide-1 .washer-copy h1,#slide-2 .dishwasher-title-lead,#slide-3 .cooler-title-lead,
    #slide-4 .heater-title-lead,#slide-5 .oven-copy h1
  ) { font-size:clamp(25px,7.2vw,31px)!important; }

  :is(
    #slide-1 .washer-copy h2,#slide-2 .dishwasher-title-name,#slide-3 .cooler-title-name,
    #slide-4 .heater-title-name,#slide-5 .oven-title-name
  ) { font-size:clamp(16px,4.6vw,20px)!important; }

  :is(
    #slide-1 .washer-copy h3,#slide-2 .dishwasher-title-detail,#slide-3 .cooler-tagline,
    #slide-4 .product-detail,#slide-5 .oven-title-detail
  ) { font-size:clamp(12px,3.25vw,14px)!important; }

  :is(
    #slide-1 .washer-commerce,#slide-2 .dishwasher-commerce,#slide-3 .cooler-commerce,
    #slide-4 .heater-commerce,#slide-5 .oven-commerce
  ) {
    width:min(340px,100%)!important;
    margin-top:8px!important;
  }

  :is(
    #slide-1 .washer-commerce,#slide-2 .dishwasher-commerce,#slide-3 .cooler-commerce,
    #slide-4 .heater-commerce,#slide-5 .oven-commerce
  ) .installment-options {
    padding:3px 5px 5px!important;
  }

  :is(
    #slide-1 .washer-commerce,#slide-2 .dishwasher-commerce,#slide-3 .cooler-commerce,
    #slide-4 .heater-commerce,#slide-5 .oven-commerce
  ) .provider-item {
    height:30px!important;
  }

  :is(
    #slide-1 .washer-commerce,#slide-2 .dishwasher-commerce,#slide-3 .cooler-commerce,
    #slide-4 .heater-commerce,#slide-5 .oven-commerce
  ) .provider-item img {
    height:15px!important;
    max-width:38px!important;
  }

  #slide-1 .product-left { width:min(94vw,430px)!important; }
  #slide-2 .dishwasher-composition { width:min(86vw,390px)!important; }
  #slide-4 .heater-composition { width:min(78vw,42svh,350px)!important; }
  #slide-5 .oven-composition { width:min(80vw,42svh,360px)!important; }
  #slide-3 .plaque-stage { width:min(94vw,560px)!important; }
  #slide-3 .cooler-feature-badge { width:clamp(38px,11vw,48px)!important; height:clamp(38px,11vw,48px)!important; }
}

@media (max-width:420px) and (max-height:700px) {
  :is(#slide-1,#slide-2,#slide-3,#slide-4,#slide-5) {
    min-height:600px;
    padding-top:calc(var(--header-height) + 7px);
  }
  :is(
    #slide-1 .washer-copy h1,#slide-2 .dishwasher-title-lead,#slide-3 .cooler-title-lead,
    #slide-4 .heater-title-lead,#slide-5 .oven-copy h1
  ) { font-size:24px!important; }
  :is(
    #slide-1 .washer-copy h2,#slide-2 .dishwasher-title-name,#slide-3 .cooler-title-name,
    #slide-4 .heater-title-name,#slide-5 .oven-title-name
  ) { font-size:16px!important; }
  :is(
    #slide-1 .washer-copy h3,#slide-2 .dishwasher-title-detail,#slide-3 .cooler-tagline,
    #slide-4 .product-detail,#slide-5 .oven-title-detail
  ) { font-size:12px!important; }
  #slide-1 .product-left { width:min(88vw,370px)!important; }
  #slide-2 .dishwasher-composition { width:min(80vw,340px)!important; }
  #slide-4 .heater-composition,#slide-5 .oven-composition { width:min(72vw,37svh,300px)!important; }
}

/* Final compact-layout guard: legacy phone rules above must not shrink the
   approved shared stage or move the badge rails away from the product. */
@media (max-width:1024px) {
  :is(
    #slide-1 .product-left,
    #slide-2 .dishwasher-composition,
    #slide-4 .heater-composition,
    #slide-5 .oven-composition
  ) {
    width:var(--rp-frame-width)!important;
    height:var(--rp-image-height)!important;
    min-height:var(--rp-image-height)!important;
    max-height:none!important;
    aspect-ratio:auto!important;
  }

  #slide-3 .plaque-stage {
    width:min(94vw,760px)!important;
    height:var(--rp-image-height)!important;
    min-height:var(--rp-image-height)!important;
  }
}