/* Payment — Figma 23:7222 @1920; 191:8849 @1300; 191:8906 @900; 191:8958 @420; 161:7417 @360 */

/* —— Viewport-fit stage —— */
html:has(body.payment-page),
body.payment-page.product-page {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
  margin: 0;
  background: #fff;
}

body.payment-page {
  --payment-art: 1920;
  --payment-scale: 1;
}

.payment-stage {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.payment-artboard {
  width: calc(var(--payment-art) * 1px);
  margin: 0 auto;
  transform: scale(var(--payment-scale));
  transform-origin: top left;
  will-change: transform;
}

@media (min-width: 1301px) {
  body.payment-page {
    --payment-art: 1920;
    --payment-scale: calc(100vw / 1920);
  }
}

@media (max-width: 1300px) and (min-width: 1000px) {
  body.payment-page {
    --payment-art: 1300;
    --payment-scale: calc(100vw / 1300);
  }
  html:has(body.payment-page),
  body.payment-page.product-page {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 999px) and (min-width: 700px) {
  body.payment-page {
    --payment-art: 900;
    --payment-scale: calc(100vw / 900);
  }
  html:has(body.payment-page),
  body.payment-page.product-page {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 699px) and (min-width: 361px) {
  body.payment-page {
    --payment-art: 420;
    --payment-scale: calc(100vw / 420);
  }
  html:has(body.payment-page),
  body.payment-page.product-page {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 360px) {
  body.payment-page {
    --payment-art: 360;
    --payment-scale: calc(100vw / 360);
  }
  html:has(body.payment-page),
  body.payment-page.product-page {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* —— 1920 base (Figma 23:7222; chrome ≈108) —— */
.payment-main {
  position: relative;
  width: 1920px;
  margin: 0 auto;
  padding-bottom: 0;
  box-sizing: border-box;
  min-height: 569px; /* footer @677 − 108 */
}

.payment-bc {
  position: absolute;
  left: 161px;
  top: 32px; /* 140 − 108 */
  z-index: 2;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  width: auto;
  max-width: calc(100% - 161px);
  min-height: 36px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 14px;
}

.payment-bc__link {
  box-sizing: border-box;
  color: #666666;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(102, 102, 102, 0.35);
  padding-bottom: 1px;
}
.payment-bc__link:link,
.payment-bc__link:visited,
.payment-bc__link:hover,
.payment-bc__link:focus {
  color: #666666;
  text-decoration: none;
}

.payment-bc__sep {
  display: block;
  width: 10px;
  height: 1px;
  margin: 0 16px;
  background: #dddddd;
  flex-shrink: 0;
}

.payment-bc__current {
  box-sizing: border-box;
  color: #666666;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
}

.payment-layout {
  position: relative;
  width: 1920px;
  height: 569px; /* 677 − 108 */
  margin: 0;
}

.payment-title {
  position: absolute;
  left: 161px;
  top: 108px; /* 216 − 108 */
  margin: 0;
  width: 128px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 35.2px;
  letter-spacing: 0;
  color: #262626;
  font-synthesis: none;
}

.payment-hero {
  position: absolute;
  left: 162px;
  top: 187px; /* 295 − 108 */
  width: 131px;
  height: 131px;
  display: block;
}

.payment-methods {
  position: absolute;
  left: 162px;
  top: 332.6px; /* 440.6 − 108 */
  width: 494px;
}

.payment-methods__title {
  margin: 0 0 9.8px; /* 477 − 440.6 − 26.6 (lh box) */
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 26.6px;
  letter-spacing: 0;
  color: #262626;
  font-synthesis: none;
}

.payment-methods__list {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0;
  color: #262626;
  white-space: pre-line;
  font-synthesis: none;
}

.payment-methods__list--compact {
  display: none;
}

.payment-detail {
  position: absolute;
  left: 855px;
  top: 126px; /* 234 − 108 */
  width: 905px;
}

.payment-detail__icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0 12px; /* 270 − 234 − 24 */
}

.payment-detail__body {
  margin: 0;
}

.payment-detail__text {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0;
  color: #262626;
  white-space: pre-line;
  font-synthesis: none;
}

.payment-detail__text strong {
  font-weight: 700;
}

.payment-detail__text--1920 {
  display: block;
  width: 905px;
  margin-bottom: 0; /* track follows; Figma gap ≈2px absorbed by line boxes */
}

.payment-detail__track {
  display: block;
  margin: 0;
  width: 874px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0;
  color: #262626;
  white-space: pre-line;
  font-synthesis: none;
}

.payment-detail__text--merge,
.payment-detail__text--compact {
  display: none;
}

/* product.css adds 48px footer margin — Figma footer instance starts flush after content */
.payment-page .site-footer {
  margin-top: 0;
}

/* ==========================================================================
   1300 — Figma 191:8849 (chrome header renders 108, Figma instance 104)
   ========================================================================== */
@media (max-width: 1300px) and (min-width: 1000px) {
  .payment-main,
  .payment-layout {
    width: 1300px;
  }

  .payment-layout {
    height: 521px; /* 629 − 108 */
  }

  .payment-main {
    min-height: 521px;
  }

  .payment-bc {
    left: 19px;
    top: 28px; /* 136 − 108 */
  }

  .payment-bc__current {
    font-weight: 300;
    color: #666666;
    border-bottom: 1px solid rgba(38, 38, 38, 0.16);
    padding-bottom: 1px;
  }

  .payment-title {
    left: 19px;
    top: 80px; /* 188 − 108 */
    width: 107px;
  }

  .payment-hero {
    left: 19px;
    top: 139px; /* 247 − 108 */
  }

  .payment-methods {
    left: 19px;
    top: 284.6px; /* 392.6 − 108 */
    width: 494px;
  }

  .payment-methods__title {
    margin-bottom: 9.8px; /* 429 − 392.6 − 26.6 */
  }

  .payment-detail {
    left: 549px;
    top: 98px; /* 206 − 108 */
    width: 732px;
  }

  .payment-detail__icon {
    margin-bottom: 24px; /* 254 − 206 − 24 */
  }

  .payment-detail__text--1920,
  .payment-detail__track {
    display: none;
  }

  .payment-detail__text--merge {
    display: block;
    width: 732px;
    line-height: 30px; /* 20 × 1.5 */
  }
}

/* ==========================================================================
   900 — Figma 191:8906 (header 104)
   ========================================================================== */
@media (max-width: 999px) and (min-width: 700px) {
  .payment-main,
  .payment-layout {
    width: 900px;
  }

  .payment-layout {
    height: 739px; /* 843 − 104 */
  }

  .payment-main {
    min-height: 739px;
  }

  .payment-bc {
    left: 77px;
    top: 16px; /* 120 − 104 */
  }

  .payment-bc__current {
    font-weight: 300;
    color: #666666;
    border-bottom: 1px solid rgba(38, 38, 38, 0.16);
    padding-bottom: 1px;
  }

  .payment-title {
    left: 77px;
    top: 68px; /* 172 − 104 */
    width: 107px;
  }

  .payment-hero {
    left: 77px;
    top: 119px; /* 223 − 104 (cart fill) */
  }

  .payment-methods {
    left: 77px;
    top: 264.6px; /* 368.6 − 104 */
    width: 494px;
  }

  .payment-methods__title {
    margin-bottom: 9.8px; /* 405 − 368.6 − 26.6 */
  }

  .payment-detail {
    left: 77px;
    top: 461px; /* 565 − 104 */
    width: 746px;
  }

  .payment-detail__icon {
    margin-bottom: 24px; /* 613 − 565 − 24 */
  }

  .payment-detail__text--1920,
  .payment-detail__track {
    display: none;
  }

  .payment-detail__text--merge {
    display: block;
    width: 746px;
    line-height: 30px;
  }
}

/* ==========================================================================
   420 — Figma 191:8958 (header 74)
   ========================================================================== */
@media (max-width: 699px) and (min-width: 361px) {
  .payment-main,
  .payment-layout {
    width: 420px;
  }

  .payment-layout {
    height: 716px; /* 790 − 74 */
  }

  .payment-main {
    min-height: 716px;
  }

  .payment-bc {
    left: 12px;
    top: 24px; /* 98 − 74 */
    min-height: 20px;
  }

  .payment-bc__current {
    font-weight: 300;
    color: #666666;
    border-bottom: 1px solid rgba(38, 38, 38, 0.16);
    padding-bottom: 1px;
  }

  .payment-title {
    left: 12px;
    top: 76px; /* 150 − 74 */
    width: 107px;
  }

  .payment-hero {
    left: 12px;
    top: 124px; /* 198 − 74 (cart fill) */
  }

  .payment-methods {
    left: 12px;
    top: 259.6px; /* 333.6 − 74 */
    width: 385px;
  }

  .payment-methods__title {
    margin-bottom: 9.8px; /* 370 − 333.6 − 26.6 */
  }

  .payment-methods__list--desk {
    display: none;
  }

  .payment-methods__list--compact {
    display: block;
    width: 385px;
  }

  .payment-detail {
    left: 12px;
    top: 428px; /* 502 − 74 */
    width: 396px;
  }

  .payment-detail__icon {
    margin-bottom: 24px; /* 550 − 502 − 24 */
  }

  .payment-detail__text--1920,
  .payment-detail__track,
  .payment-detail__text--merge {
    display: none;
  }

  .payment-detail__text--compact {
    display: block;
    width: 396px;
    font-size: 16px;
    line-height: 24px; /* 16 × 1.5 */
  }
}

/* ==========================================================================
   360 — Figma 161:7417 (header 74)
   ========================================================================== */
@media (max-width: 360px) {
  .payment-main,
  .payment-layout {
    width: 360px;
  }

  .payment-layout {
    height: 752px; /* 826 − 74 */
  }

  .payment-main {
    min-height: 752px;
  }

  .payment-bc {
    left: 16px;
    top: 25px; /* 99 − 74 */
    min-height: 20px;
  }

  .payment-bc__current {
    font-weight: 400;
    color: #666666;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .payment-title {
    left: 16px;
    top: 74px; /* 148 − 74 */
    width: 81px;
    font-size: 24px;
    line-height: 31.2px; /* 24 × 1.3 */
  }

  .payment-hero {
    left: 16px;
    top: 124px; /* 198 − 74 */
  }

  .payment-methods {
    left: 16px;
    top: 259.6px; /* 333.6 − 74 */
    width: 328px;
  }

  .payment-methods__title {
    margin-bottom: 9.8px;
  }

  .payment-methods__list--desk {
    display: none;
  }

  .payment-methods__list--compact {
    display: block;
    width: 328px;
  }

  .payment-detail {
    left: 16px;
    top: 428px; /* 502 − 74 */
    width: 328px;
  }

  .payment-detail__icon {
    margin-bottom: 24px;
  }

  .payment-detail__text--1920,
  .payment-detail__track,
  .payment-detail__text--merge {
    display: none;
  }

  .payment-detail__text--compact {
    display: block;
    width: 328px;
    font-size: 16px;
    line-height: 24px;
  }
}