/* v17.65 — the cooler plaque and badges form one centered responsive unit. */

/* Preserve the approved desktop structure exactly. */
#slide-3 .cooler-product-cluster {
  display:contents;
}

@media (max-width:1024px) {
  #slide-3 {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
  }

  #slide-3 .cooler-content {
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    align-items:center!important;
    width:min(100%,760px)!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
  }

  #slide-3 .cooler-copy {
    order:1;
    flex:0 0 auto;
  }

  #slide-3 .cooler-commerce {
    order:2;
    flex:0 0 auto;
  }

  #slide-3 .cooler-signature {
    order:3;
    flex:0 0 auto;
  }

  /* This element owns every pixel left after copy, commerce and signature.
     Its children are centered on both axes as one indivisible composition. */
  #slide-3 .cooler-product-cluster {
    order:4;
    flex:1 1 auto;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:calc(clamp(150px,32vw,240px) + var(--rp-badge-size) + var(--rp-product-badge-gap));
    margin:0 auto;
  }

  #slide-3 .plaque-stage {
    flex:0 0 auto;
    align-self:center!important;
    justify-self:auto!important;
    margin:0 auto!important;
    transform:none!important;
    translate:none!important;
  }

  #slide-3 .cooler-feature-rail {
    flex:0 0 auto;
    align-self:center!important;
    justify-self:auto!important;
    margin:var(--rp-product-badge-gap) auto 0!important;
    transform:none!important;
    translate:none!important;
  }
}

@media (max-width:640px) {
  #slide-3 .cooler-product-cluster {
    min-height:calc(clamp(126px,32vw,184px) + var(--rp-badge-size) + var(--rp-product-badge-gap));
  }
}