/* Measured from 购买方式.jpg, 1920 × 3655. */
.purchase-page { color-scheme: light; background: #fff; color: #131313; }
.purchase-page .brand { display: none; }
.purchase-content { position: relative; min-height: 167.364583vw; }
.purchase-word { position: absolute; inset: 0 0 auto; width: 100%; height: 57.291667vw; overflow: visible; }
.purchase-heading { position: absolute; top: 58.854167vw; left: 3.125%; margin: 0; font: 500 8.097166vw / 1 "HONOR Sans Brand"; letter-spacing: -0.065em; }
.purchase-copy { position: absolute; top: 75.46875vw; left: 3.125%; right: 3.072917%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.177083vw; color: #ccc; font: 400 1.041667vw / 1.25 "Helvetica Now Display", "HONOR Sans Brand"; }
.purchase-copy p { margin: 0; }
.purchase-copy-line { display: block; white-space: nowrap; }
.purchase-chinese { font-family: "HONOR Sans Brand"; font-weight: 500; }
.purchase-copy .purchase-english { margin-top: 4.166667vw; letter-spacing: -0.02em; }
.purchase-visuals { position: absolute; top: 100.729167vw; left: 51.614583%; width: 45.3125%; display: grid; gap: 1.354167vw; }
.purchase-store-link { display: block; width: 100%; border-radius: 0; }
.purchase-store-link:focus-visible { outline: 2px solid #131313; outline-offset: 6px; }
.purchase-page .site-footer { background: #131313; }

@media (max-width: 600px) {
  .purchase-page .navigation { width: calc(100% - 24px); }
  .purchase-content { min-height: 0; padding: 84px 18px 76px; }
  .purchase-word { position: relative; inset: auto; display: block; width: calc(100% + 36px); height: 57.291667vw; margin-left: -18px; }
  .purchase-heading { position: static; margin-top: 30px; font-size: clamp(42px, 11vw, 66px); line-height: 1; }
  .purchase-copy { position: static; display: block; margin-top: 38px; font-size: 13px; line-height: 1.45; }
  .purchase-details { margin-top: 32px; }
  .purchase-copy-line { display: inline; white-space: normal; }
  .purchase-copy .purchase-english { margin-top: 32px; }
  .purchase-visuals { position: static; width: 100%; margin-top: 36px; gap: 12px; }
}
