/* Keep desktop checkout steps centered inside one viewport. Narrow screens retain
   normal document flow so forms never become inaccessible on mobile devices. */
@media all and (min-width: 981px) {
  html:has(body.checkout-viewport) {
    height: 100%;
    overflow: hidden;
  }

  body.checkout-viewport {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.checkout-viewport header {
    z-index: 20;
  }

  body.checkout-viewport .center-wrapper {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-top: clamp(110px, 15vh, 160px);
    padding-bottom: clamp(20px, 4vh, 48px);
  }

  body.checkout-viewport.theme-challenge .body-right-col .center-wrapper {
    padding-top: clamp(78px, 10vh, 112px);
    padding-bottom: clamp(12px, 2vh, 24px);
  }

  body.checkout-viewport.theme-challenge .body-right-col .center-wrapper > div,
  body.checkout-viewport.theme-competition .center-wrapper > div {
    max-height: 100%;
    transform-origin: center center;
  }

  body.checkout-viewport.theme-challenge .body-right-col .center-wrapper > div {
    position: relative;
    top: clamp(-88px, -8.75vh, -52px);
  }

  body.checkout-viewport.theme-challenge .body-right-col .tile,
  body.checkout-viewport.theme-competition .tile {
    padding-top: clamp(30px, 4vh, 48px);
    padding-bottom: clamp(30px, 4vh, 48px);
  }

  body.checkout-viewport.theme-challenge .body-right-col .steps,
  body.checkout-viewport.theme-competition .steps {
    margin-bottom: clamp(12px, 2vh, 22px);
  }

  body.checkout-viewport.theme-challenge .body-columns,
  body.checkout-viewport.theme-challenge .body-columns > * {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.checkout-viewport.theme-challenge .body-left-col .center-wrapper {
    padding-top: clamp(130px, 20vh, 210px);
  }

  body.checkout-viewport.theme-competition .center-wrapper {
    padding-top: clamp(120px, 16vh, 170px);
  }
}

@media all and (min-width: 981px) and (max-height: 1050px) {
  body.checkout-viewport header .box {
    margin-top: 30px;
  }

  body.checkout-viewport.theme-competition header {
    top: 30px;
  }

  body.checkout-viewport .center-wrapper,
  body.checkout-viewport.theme-competition .center-wrapper,
  body.checkout-viewport.theme-challenge .body-left-col .center-wrapper,
  body.checkout-viewport.theme-challenge .body-right-col .center-wrapper {
    padding-top: 76px;
    padding-bottom: 12px;
  }

  body.checkout-viewport .tile {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  body.checkout-viewport.theme-challenge .body-right-col .tile,
  body.checkout-viewport.theme-competition .tile {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  body.checkout-viewport .steps {
    margin-bottom: 10px;
  }

  body.checkout-viewport.theme-challenge .body-right-col .steps,
  body.checkout-viewport.theme-competition .steps {
    margin-bottom: 10px;
  }

  body.checkout-viewport .tile .title {
    font-size: 28px;
    margin-bottom: 12px;
  }

  body.checkout-viewport .input-text,
  body.checkout-viewport .input-radio,
  body.checkout-viewport .input-checkbox {
    margin-bottom: 8px;
  }

  body.checkout-viewport .input-radio .input-line label {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.checkout-viewport .summary-list > li > span {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body.checkout-viewport .summary-list > li:last-child {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  body.checkout-viewport .consents {
    margin-top: 8px;
  }
}

@supports not (zoom: 1) {
  [data-checkout-fit] {
    transform: scale(var(--checkout-fit-scale));
  }
}

/* Xone checkout only: keep the original 50/50 page split and 550px form width.
   The progress indicator uses the free space beside a taller, roomier form. */
@media all and (min-width: 981px) {
  body.checkout-viewport.theme-challenge .checkout-stage--external {
    width: 100%;
    max-width: 718px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .checkout-form-column,
  body.checkout-viewport.theme-challenge .checkout-stage--external .tile {
    width: 100%;
    max-width: 550px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .checkout-consents {
    margin-top: 14px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .checkout-consents .input-checkbox {
    margin-bottom: 12px;
  }
}

@media all and (min-width: 981px) and (max-width: 1399px) {
  body.checkout-viewport.theme-challenge .body-right-col .center-wrapper > .checkout-stage--external {
    top: clamp(-22px, -2vh, -14px);
  }
}

@media all and (min-width: 1400px) {
  body.checkout-viewport.theme-challenge .checkout-stage--external {
    --summary-step-gap: clamp(44px, 5vh, 58px);
    display: grid;
    grid-template-columns: minmax(0, 550px) minmax(100px, 1fr);
    column-gap: clamp(18px, 1.5vw, 28px);
    align-items: center;
    max-width: 718px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .checkout-form-column {
    grid-column: 1;
    grid-row: 1;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .tile {
    padding: clamp(44px, 5vh, 54px) clamp(56px, 4vw, 76px);
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .steps {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--summary-step-gap);
    margin: 0;
    padding: 0;
    text-align: left;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .steps::before {
    display: none;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .steps > li {
    display: flex;
    align-items: center;
    min-height: 52px;
    width: 100%;
    padding: 0 0 0 42px;
    background: transparent;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(50% + 14px);
    left: 14px;
    width: 1px;
    height: calc(var(--summary-step-gap) + 24px);
    background: rgba(0, 0, 0, 0.3);
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .steps > li img {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    background: #EDEDED;
    transform: translateY(-50%);
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .steps > li span {
    font-size: 14px;
    line-height: 19px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .tile .title {
    margin-bottom: 18px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .input-text,
  body.checkout-viewport.theme-challenge .checkout-stage--external .input-radio {
    margin-bottom: 15px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .input-radio .input-line label {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .summary-list > li > span {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  body.checkout-viewport.theme-challenge .checkout-stage--external .summary-list > li:last-child {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}