/* v17.62 — shared mobile product stage and full-width desktop canvas. */

/* Mobile only: remove heavy scene art and give all five product slides one
   neutral, predictable stage. Product loops remain available after entry. */
@media (max-width:640px) {
  :root,
  html[data-finish="white"],
  html[data-finish="titanium"] {
    --mobile-safe-gutter:16px;
    --rp-edge-gap:var(--mobile-safe-gutter);
    --rp-stage-width:min(calc(100vw - (2 * var(--mobile-safe-gutter))),560px);
    --rp-product-height:clamp(280px,44svh,420px);
    --rp-badge-size:clamp(32px,9vw,42px);
    --rp-badge-gap:clamp(3px,1.3vw,6px);
    --rp-product-badge-gap:4px;
  }

  :is(#slide-1,#slide-2,#slide-3,#slide-4,#slide-5) {
    width:100%!important;
    padding-right:var(--mobile-safe-gutter)!important;
    padding-left:var(--mobile-safe-gutter)!important;
    background:var(--bg-a)!important;
    background-image:none!important;
  }

  /* All decorative scene layers are desktop/tablet storytelling only. */
  :is(
    #slide-1 .slide-light,
    #slide-1 .washer-cloud,
    #slide-2 .dishwasher-kitchen,
    #slide-2 .dishwasher-scene-sunlight,
    #slide-2 .dishwasher-floor-light,
    #slide-2 .dishwasher-product-light,
    #slide-2 .dishwasher-cat-stage,
    #slide-3 .cooler-linework,
    #slide-3 .slide-light,
    #slide-4 .heater-room,
    #slide-4 .slide-light,
    #slide-4 .floor-glow,
    #slide-5 .oven-kitchen,
    #slide-5 .oven-aura,
    #slide-5 .oven-surface-light
  ) {
    display:none!important;
  }

  /* Override every old per-product mobile exception with one shared box. */
  :is(#slide-1,#slide-2,#slide-4,#slide-5) {
    --rp-stage-width:min(calc(100vw - (2 * var(--mobile-safe-gutter))),560px);
    --rp-product-height:clamp(280px,44svh,420px);
  }

  :is(
    #slide-1 .product-left,
    #slide-2 .dishwasher-composition,
    #slide-4 .heater-composition,
    #slide-5 .oven-composition
  ) {
    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;
    margin:clamp(6px,1svh,10px) auto 0!important;
    align-self:start!important;
    justify-self:center!important;
  }

  #slide-2 .dishwasher-composition {
    margin-top:clamp(6px,1svh,10px)!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
  ) {
    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
  ) {
    inset:calc(var(--rp-product-height) + var(--rp-product-badge-gap)) 0 auto!important;
    width:100%!important;
    grid-template-columns:repeat(5,var(--rp-badge-size))!important;
    column-gap:var(--rp-badge-gap)!important;
    justify-content:center!important;
  }

  /* The wide cooler plaque uses the same side gutter and badge rhythm without
     inheriting the tall appliance box. */
  #slide-3 .cooler-content {
    grid-template-rows:auto auto auto auto auto!important;
  }
  #slide-3 .plaque-stage {
    width:var(--rp-stage-width)!important;
    max-width:var(--rp-stage-width)!important;
    height:clamp(126px,32vw,184px)!important;
    min-height:126px!important;
    margin:clamp(8px,1.2svh,12px) auto 0!important;
    align-self:start!important;
  }
  #slide-3 .cooler-feature-rail {
    width:100%!important;
    grid-template-columns:repeat(5,var(--rp-badge-size))!important;
    column-gap:var(--rp-badge-gap)!important;
    justify-content:center!important;
    margin:var(--rp-product-badge-gap) auto 0!important;
  }
}

/* Desktop: the pagination no longer owns a separate background strip. The
   content canvas returns to the full viewport and therefore shifts right. */
@media (min-width:1025px) {
  :root {
    --pagination-gutter:0px;
  }
  main {
    width:100%!important;
    margin-right:0!important;
  }
  .site-header {
    right:0!important;
  }
  .pagination {
    right:clamp(22px,2.7vw,45px)!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    transform:scale(.9);
    transform-origin:right bottom;
  }
}