/* v17.60 layout, retained in v17.71 — one deliberately simple product
   composition for tablet/mobile: large centered product, then one compact
   centered badge row. The asset loader may promote the poster to a loop. */
@media (max-width:1024px) {
  :root,
  html[data-finish="white"],
  html[data-finish="titanium"] {
    --rp-edge-gap:clamp(8px,2.2vw,18px);
    --rp-stage-width:min(calc(100vw - (2 * var(--rp-edge-gap))),820px);
    --rp-product-height:min(760px,max(50svh,calc(127vw - 24px)));
    --rp-badge-size:clamp(36px,8.6vw,58px);
    --rp-badge-gap:clamp(2px,1.2vw,8px);
    --rp-product-badge-gap:clamp(2px,.65svh,7px);
  }

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

  :is(#slide-1,#slide-2,#slide-4,#slide-5) {
    grid-template-rows:auto auto!important;
    row-gap:0!important;
  }

  /* Washer and dishwasher share one calmer product scale. The roughly 10%
     reduction gives a standard mobile hero its necessary edge breathing room. */
  :is(#slide-1,#slide-2) {
    --rp-stage-width:min(90vw,738px);
    --rp-product-height:min(684px,max(45svh,calc(114vw - 22px)));
  }

  :is(
    #slide-1 .product-left,
    #slide-2 .dishwasher-composition,
    #slide-4 .heater-composition,
    #slide-5 .oven-composition
  ) {
    position:relative!important;
    box-sizing:border-box!important;
    inset:auto!important;
    width:var(--rp-stage-width)!important;
    max-width:var(--rp-stage-width)!important;
    height:calc(var(--rp-product-height) + var(--rp-product-badge-gap) + var(--rp-badge-size))!important;
    min-height:0!important;
    max-height:none!important;
    margin:clamp(2px,.7svh,7px) auto 0!important;
    align-self:start!important;
    justify-self:center!important;
    transform:none!important;
    translate:none!important;
    overflow:visible!important;
    animation:none!important;
    transition:none!important;
  }

  #slide-1 .product-left > .finish-asset {
    position:absolute!important;
    inset:0 0 auto!important;
    width:100%!important;
    height:var(--rp-product-height)!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 .dishwasher-composition {
    margin-top:clamp(14px,1.8svh,22px)!important;
  }
  #slide-2 .product-dishwasher > .finish-asset {
    position:absolute!important;
    inset:0 0 auto!important;
    width:100%!important;
    height:var(--rp-product-height)!important;
  }

  #slide-4 .heater-stage,
  #slide-5 .oven-stage {
    position:absolute!important;
    inset:0 0 auto!important;
    width:100%!important;
    height:var(--rp-product-height)!important;
    max-width:none!important;
    max-height:none!important;
    transform:none!important;
    translate:none!important;
  }

  :is(
    #slide-1 .product-left > .finish-asset,
    #slide-2 .product-dishwasher > .finish-asset,
    #slide-4 .heater-stage > .finish-asset,
    #slide-5 .oven-image,
    #slide-5 .oven-image img
  ) {
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    scale:1!important;
    transform:none!important;
    animation:none!important;
    transition:none!important;
  }

  #slide-5 .oven-image {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  #slide-5 :is(.oven-aura,.oven-surface-light) { display:none!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:8!important;
    inset:calc(var(--rp-product-height) + var(--rp-product-badge-gap)) 0 auto!important;
    width:100%!important;
    height:var(--rp-badge-size)!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(5,var(--rp-badge-size))!important;
    grid-template-rows:var(--rp-badge-size)!important;
    column-gap:var(--rp-badge-gap)!important;
    row-gap:0!important;
    align-items:center!important;
    justify-content:center!important;
    justify-items:center!important;
    margin:0!important;
    transform:none!important;
    translate:none!important;
    animation:none!important;
    transition:none!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-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    transform:none!important;
    animation:none!important;
    transition:none!important;
  }

  #slide-3 .cooler-content {
    height:auto!important;
    grid-template-rows:auto auto auto auto auto!important;
  }
  #slide-3 .plaque-stage {
    position:relative!important;
    inset:auto!important;
    width:var(--rp-stage-width)!important;
    max-width:var(--rp-stage-width)!important;
    height:clamp(150px,32vw,240px)!important;
    min-height:150px!important;
    margin:clamp(2px,.7svh,7px) auto 0!important;
    display:grid!important;
    place-items:center!important;
    animation:none!important;
    transition:none!important;
  }
  #slide-3 .plaque-stage > .finish-asset {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform:none!important;
    animation:none!important;
    transition:none!important;
  }
  #slide-3 .cooler-feature-rail {
    position:relative!important;
    inset:auto!important;
    width:100%!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;
    column-gap:var(--rp-badge-gap)!important;
    justify-content:center!important;
    align-items:center!important;
    margin:var(--rp-product-badge-gap) auto 0!important;
    transform:none!important;
    animation:none!important;
    transition:none!important;
  }
  #slide-3 .cooler-feature-badge,
  #slide-3 .cooler-feature-badge img {
    width:var(--rp-badge-size)!important;
    height:var(--rp-badge-size)!important;
    max-width:var(--rp-badge-size)!important;
    max-height:var(--rp-badge-size)!important;
    object-fit:contain!important;
  }
}

@media (max-width:420px) and (max-height:700px) {
  :root,
  html[data-finish="white"],
  html[data-finish="titanium"] {
    --rp-edge-gap:6px;
    --rp-badge-size:34px;
    --rp-badge-gap:3px;
  }
}