/* Shared {$tpshop_config['shop_info_appName']} theme for the purchase flow. */
:root {
  --purchase-ink: #203247;
  --purchase-muted: #66748a;
  --purchase-line: #cbdfe5;
  --purchase-sky: #9ee7f2;
  --purchase-sky-soft: #e6faff;
  --purchase-cream: #fff8df;
  --purchase-paper: #ffffff;
  --purchase-yellow: #ffc72c;
  --purchase-yellow-deep: #d88710;
  --purchase-red: #ef5a45;
  --purchase-red-deep: #c53d31;
  --purchase-green: #2d9b61;
  --purchase-blue: #1976d2;

  --shop-ink: var(--purchase-ink);
  --shop-muted: var(--purchase-muted);
  --shop-line: var(--purchase-line);
  --shop-surface: var(--purchase-paper);
  --shop-canvas: #f5fcff;
  --shop-cyan: var(--purchase-blue);
  --shop-cyan-bright: #0d6cae;
  --shop-gold: var(--purchase-yellow);
  --shop-red: var(--purchase-red);
  --shop-purple: var(--purchase-blue);

  --checkout-ink: var(--purchase-ink);
  --checkout-muted: var(--purchase-muted);
  --checkout-line: var(--purchase-line);
  --checkout-surface: var(--purchase-paper);
  --checkout-canvas: #f5fcff;
  --checkout-cyan: var(--purchase-blue);
  --checkout-cyan-bright: #18b8d8;
  --checkout-gold: var(--purchase-yellow);
  --checkout-danger: var(--purchase-red);

  --payment-ink: var(--purchase-ink);
  --payment-muted: var(--purchase-muted);
  --payment-line: var(--purchase-line);
  --payment-surface: var(--purchase-paper);
  --payment-canvas: #f5fcff;
  --payment-cyan: var(--purchase-blue);
  --payment-cyan-bright: #18b8d8;
  --payment-gold: var(--purchase-yellow);
  --payment-danger: var(--purchase-red);

  --result-ink: var(--purchase-ink);
  --result-muted: var(--purchase-muted);
  --result-line: var(--purchase-line);
  --result-canvas: #f5fcff;
  --result-cyan: var(--purchase-blue);
  --result-cyan-bright: #18b8d8;
  --result-gold: var(--purchase-yellow);
  --result-success: var(--purchase-green);
  --result-danger: var(--purchase-red);
  --result-pending: #d88710;

  --message-ink: var(--purchase-ink);
  --message-muted: var(--purchase-muted);
  --message-line: var(--purchase-line);
  --message-bg: #f5fcff;
  --message-surface: var(--purchase-paper);
  --message-success: var(--purchase-green);
  --message-success-soft: #e3f7ea;
  --message-error: var(--purchase-red);
  --message-error-soft: #fff0ec;
  --message-accent: var(--purchase-blue);
  --message-gold: var(--purchase-yellow);

  --coda-ink: var(--purchase-ink);
  --coda-muted: var(--purchase-muted);
  --coda-line: var(--purchase-line);
  --coda-canvas: #e9faff;
  --coda-panel: var(--purchase-paper);
  --coda-cyan: var(--purchase-blue);
  --coda-cyan-soft: var(--purchase-sky-soft);
  --coda-gold: var(--purchase-yellow);
  --coda-success: var(--purchase-green);
  --coda-danger: var(--purchase-red);
  --coda-danger-soft: #fff0ec;

  --external-ink: var(--purchase-ink);
  --external-muted: var(--purchase-muted);
  --external-line: var(--purchase-line);
  --external-canvas: #e9faff;
  --external-panel: var(--purchase-paper);
  --external-success: var(--purchase-green);
  --external-success-soft: #e3f7ea;
  --external-error: var(--purchase-red);
  --external-error-soft: #fff0ec;
}

/* {$tpshop_config['shop_info_appName']} purchase refresh */
:root {
  --purchase-ink: #123858;
  --purchase-muted: #526781;
  --purchase-line: rgba(21, 58, 96, 0.16);
  --purchase-sky: #77e7fb;
  --purchase-sky-soft: #e8fbff;
  --purchase-cream: #fff8d7;
  --purchase-paper: #ffffff;
  --purchase-yellow: #ffd23f;
  --purchase-yellow-deep: #f18b18;
  --purchase-red: #ff4f70;
  --purchase-red-deep: #d6224c;
  --purchase-green: #36c21f;
  --purchase-blue: #1688e8;
}

.shop-product-page,
.checkout-page,
.payment-page,
.payment-result-page,
.system-message-page,
.coda-payment-page,
.external-payment-page {
  background:
    radial-gradient(circle at 14% 7%, rgba(255, 210, 63, 0.32), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(255, 79, 112, 0.12), transparent 22%),
    linear-gradient(180deg, #dffbff, #fff8d7 48%, #e8fbff);
}

.shop-banner {
  border-bottom: 8px solid #ffffff;
  background: #67dcf4;
}

.shop-banner__overlay {
  background: linear-gradient(90deg, rgba(8, 55, 96, 0.82), rgba(8, 74, 122, 0.5) 46%, rgba(255,255,255,0.03));
  box-shadow: inset 0 -100px 90px rgba(12, 83, 132, 0.16);
}

.shop-banner__content p {
  border-left-color: var(--purchase-yellow);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--purchase-red);
}

.shop-banner__content h1,
.shop-banner__content > span {
  color: #ffffff;
  text-shadow: 0 4px 0 rgba(13, 87, 147, 0.48);
}

.shop-market {
  background: transparent;
}

.shop-category-bar,
.checkout-panel,
.checkout-game-id,
.checkout-delivery,
.checkout-summary,
.payment-panel,
.payment-summary,
.payment-result-summary,
.system-message,
.coda-payment__panel,
.external-payment__panel {
  border: 3px solid #ffffff;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 30px rgba(13, 87, 147, 0.1);
}

.shop-category-bar {
  background: #dffbff;
}

.shop-category {
  border-radius: 14px;
  color: #0d5793;
}

.shop-category.is-active {
  border-color: #ffffff;
  background: linear-gradient(180deg, #ff75bc, #f33f7a);
  box-shadow: 0 5px 0 #b81c54;
}

.shop-product-card {
  border: 3px solid #ffffff;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 9px 0 rgba(22, 136, 232, 0.12), 0 18px 30px rgba(13, 87, 147, 0.1);
}

.shop-product-card:hover,
.shop-product-card:focus-visible {
  border-color: #bff6ff;
  box-shadow: 0 7px 0 rgba(24, 191, 227, 0.28), 0 18px 30px rgba(13, 87, 147, 0.14);
}

.shop-product-card.is-selected {
  border-color: #ff75bc;
  box-shadow: 0 0 0 4px rgba(255, 79, 112, 0.13), 0 8px 0 #ffd23f;
}

.shop-product-card__visual,
.checkout-item__image,
.shop-order__product img {
  background: linear-gradient(180deg, #e8fbff, #fff8d7);
  border-color: #bdeef7;
}

.shop-order {
  border: 4px solid #ffffff;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 0 rgba(22, 136, 232, 0.14), 0 22px 38px rgba(13, 87, 147, 0.14);
}

.shop-order__heading,
.checkout-panel__heading,
.payment-panel__heading,
.payment-summary__heading,
.checkout-summary__heading {
  background: #e8fbff;
  border-bottom-color: #d5eef4;
}

.shop-checkout,
.checkout-submit,
.payment-submit,
.payment-result-action.is-primary,
.system-message__action--primary,
.coda-payment__submit {
  border: 2px solid #ffffff;
  border-radius: 16px;
  background: linear-gradient(180deg, #8cf023, #36c21f);
  color: #ffffff;
  box-shadow: 0 6px 0 #159018;
  text-shadow: 0 2px 0 rgba(20, 106, 18, 0.28);
}

/* Product shop full refresh */
.shop-product-page {
  --shop-ink: #123858;
  --shop-muted: #5c6f84;
  --shop-line: rgba(18, 56, 88, 0.14);
  --shop-panel: #ffffff;
  --shop-sky-soft: #e9fbff;
  --shop-yellow: #ffd23f;
  --shop-red: #ff4f70;
  --shop-red-deep: #d6224c;
  --shop-blue: #1688e8;
  --shop-green: #32b85c;
  --shop-shadow: 0 18px 38px rgba(19, 73, 112, 0.13);
  background: linear-gradient(180deg, #e9fbff 0, #fffdf3 440px, #f7fcff 100%);
  color: var(--shop-ink);
}

.shop-product-page .shop-main {
  padding-top: var(--nav-h, 72px);
}

.shop-product-page .shop-banner {
  min-height: 430px;
  height: min(52vh, 500px);
  border-bottom: 0;
  background: #7be3f8;
}

.shop-product-page .shop-banner > img {
  filter: saturate(1.06) contrast(1.03);
  object-position: center 48%;
}

.shop-product-page .shop-banner__overlay {
  background:
    linear-gradient(90deg, rgba(11, 47, 80, 0.84) 0%, rgba(9, 94, 142, 0.54) 42%, rgba(255, 255, 255, 0.04) 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(255, 248, 214, 0.58));
  box-shadow: inset 0 -92px 84px rgba(255, 253, 243, 0.88);
}

.shop-product-page .shop-banner__content {
  justify-content: center;
  max-width: var(--max, 1280px);
  padding-top: 24px;
  padding-bottom: 54px;
}

.shop-product-page .shop-banner__content p {
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-left: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff75bc, #f33f7a);
  color: #ffffff;
  box-shadow: 0 4px 0 #b81c54;
  text-shadow: 0 1px 0 rgba(83, 21, 52, 0.24);
}

.shop-product-page .shop-banner__content h1 {
  max-width: 760px;
  color: #ffffff;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  font-weight: 900;
  line-height: 0.96;
  text-shadow: 0 5px 0 #0d6aa4, 0 14px 28px rgba(2, 43, 80, 0.34);
}

.shop-product-page .shop-banner__content > span {
  max-width: 540px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.6;
  text-shadow: 0 2px 0 rgba(0, 70, 115, 0.2);
}

.shop-product-page .shop-market {
  position: relative;
  z-index: 1;
  margin-top: -38px;
  padding: 0 0 78px;
  border-top: 0;
  background: transparent;
}

.shop-product-page .shop-category-bar {
  gap: 10px;
  margin-bottom: 28px;
  padding: 10px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  background: rgba(232, 251, 255, 0.94);
  box-shadow: 0 8px 0 rgba(119, 205, 222, 0.42), var(--shop-shadow);
}

.shop-product-page .shop-category {
  min-height: 46px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: #31536f;
  font-size: 0.88rem;
}

.shop-product-page .shop-category span {
  min-width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #ffffff;
  color: #245271;
  box-shadow: inset 0 -2px 0 rgba(18, 56, 88, 0.08);
}

.shop-product-page .shop-category:hover,
.shop-product-page .shop-category:focus-visible {
  border-color: #7bcbd9;
  background: #ffffff;
  color: #0d659a;
}

.shop-product-page .shop-category.is-active {
  border-color: #ffffff;
  background: linear-gradient(180deg, #ff6757, #ef493b);
  color: #ffffff;
  box-shadow: 0 5px 0 #c7372f;
}

.shop-product-page .shop-category.is-active span {
  background: var(--shop-yellow);
  color: #674200;
}

.shop-product-page .shop-layout {
  grid-template-columns: minmax(0, 1fr) minmax(350px, 380px);
  gap: 28px;
}

.shop-product-page .shop-catalog__heading {
  min-height: 66px;
  margin-bottom: 18px;
  align-items: flex-end;
}

.shop-product-page .shop-catalog__heading p,
.shop-product-page .shop-order__heading p {
  margin-bottom: 7px;
  color: var(--shop-red);
  font-size: 0.78rem;
  letter-spacing: 0;
}

.shop-product-page .shop-catalog__heading h2,
.shop-product-page .shop-order__heading h2 {
  color: var(--shop-ink);
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 900;
}

.shop-product-page .shop-catalog__heading > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #e8fbff;
  color: #31536f;
  font-weight: 800;
}

.shop-product-page .shop-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.shop-product-page .shop-product-card {
  min-height: 342px;
  grid-template-rows: 190px minmax(0, 1fr);
  border: 2px solid rgba(37, 151, 178, 0.24);
  border-radius: 8px;
  background: var(--shop-panel);
  box-shadow: 0 7px 0 #d6ebef, 0 18px 28px rgba(32, 78, 103, 0.08);
}

.shop-product-page .shop-product-card:hover,
.shop-product-page .shop-product-card:focus-visible {
  border-color: #52bfd4;
  box-shadow: 0 5px 0 #91d5df, 0 18px 34px rgba(32, 78, 103, 0.16);
  transform: translateY(2px);
}

.shop-product-page .shop-product-card.is-selected {
  border-color: var(--shop-red);
  box-shadow: 0 0 0 3px rgba(255, 79, 112, 0.14), 0 7px 0 #f18b18, 0 18px 32px rgba(209, 71, 65, 0.16);
}

.shop-product-page .shop-product-card__visual {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #d6e9ed;
  background: linear-gradient(180deg, #e8fbff, #d8f6ff 66%, #fff4b8);
}

.shop-product-page .shop-product-card__visual::before {
  content: "";
  position: absolute;
  inset: auto 14px 13px;
  height: 14px;
  border-radius: 999px;
  background: rgba(32, 78, 103, 0.12);
  filter: blur(6px);
}

.shop-product-page .shop-product-card.is-selected .shop-product-card__visual {
  background: linear-gradient(180deg, #fff6c7, #e8fbff 70%, #c9f6ff);
}

.shop-product-page .shop-product-card__visual img {
  position: relative;
  z-index: 1;
  width: min(76%, 170px);
  height: min(76%, 170px);
  object-fit: contain;
}

.shop-product-page .shop-product-card__body {
  padding: 17px 16px 16px;
}

.shop-product-page .shop-product-card__category {
  margin-bottom: 6px;
  color: var(--shop-blue);
  font-size: 0.72rem;
}

.shop-product-page .shop-product-card__body > strong {
  color: var(--shop-ink);
  font-size: 1rem;
  line-height: 1.35;
}

.shop-product-page .shop-product-card__meta {
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
}

.shop-product-page .shop-product-card__meta b {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff0c4;
  color: #bf432f;
  font-size: 1.12rem;
  line-height: 1;
}

.shop-product-page .shop-product-card__meta small {
  color: #52718d;
  font-weight: 800;
}

.shop-product-page .shop-empty {
  border: 2px dashed #8fcbd5;
  border-radius: 8px;
  background: #e8fbff;
}

.shop-product-page .shop-order {
  top: calc(var(--nav-h, 72px) + 20px);
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-ink);
  box-shadow: 0 8px 0 #b9dce3, 0 28px 48px rgba(32, 78, 103, 0.16);
}

.shop-product-page .shop-order::before {
  content: "";
  display: block;
  height: 8px;
  background: repeating-linear-gradient(90deg, #ff4f70 0 46px, #ffd23f 46px 92px, #18d4f2 92px 138px, #61d72a 138px 184px);
}

.shop-product-page .shop-order__heading {
  padding: 24px 26px 20px;
  border-bottom: 2px solid #dcebef;
  background: linear-gradient(180deg, #e8fbff, #dff6fb);
}

.shop-product-page .shop-order__heading h2 {
  font-size: 1.35rem;
}

.shop-product-page .shop-order form {
  padding: 24px 26px 26px;
}

.shop-product-page .shop-order__product {
  min-height: 104px;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.shop-product-page .shop-order__product img {
  width: 104px;
  height: 104px;
  border: 2px solid #b8dce3;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8df, #e8fbff);
}

.shop-product-page .shop-order__product span,
.shop-product-page .shop-order__product small {
  color: var(--shop-blue);
}

.shop-product-page .shop-order__product strong {
  color: var(--shop-ink);
  font-size: 1.04rem;
}

.shop-product-page .shop-order__product small {
  color: var(--shop-muted);
}

.shop-product-page .shop-order__row,
.shop-product-page .shop-order__quantity,
.shop-product-page .shop-order__total,
.shop-product-page .shop-order__field,
.shop-product-page .shop-order__notice {
  border-color: #dce9ec;
}

.shop-product-page .shop-order__row span,
.shop-product-page .shop-order__quantity label,
.shop-product-page .shop-order__total span,
.shop-product-page .shop-order__field label {
  color: var(--shop-muted);
  font-size: 0.84rem;
}

.shop-product-page .shop-order__row strong,
.shop-product-page .shop-order__total strong {
  color: #bf432f;
}

.shop-product-page .shop-order__row .shop-order__delivery {
  color: var(--shop-green);
}

.shop-product-page .shop-order__notice {
  color: var(--shop-muted);
}

.shop-product-page .shop-stepper {
  width: 132px;
  height: 38px;
  grid-template-columns: 38px 56px 38px;
  border: 2px solid #92c8d2;
  border-radius: 6px;
  background: #ffffff;
}

.shop-product-page .shop-stepper button,
.shop-product-page .shop-stepper input {
  height: 34px;
  color: var(--shop-ink);
}

.shop-product-page .shop-stepper button {
  background: #fff2a8;
  color: #6b4700;
}

.shop-product-page .shop-stepper button:hover:not(:disabled),
.shop-product-page .shop-stepper button:focus-visible {
  background: var(--shop-yellow);
}

.shop-product-page .shop-stepper input {
  border-color: #92c8d2;
}

.shop-product-page .shop-order__total {
  min-height: 68px;
}

.shop-product-page .shop-order__total strong {
  font-size: 1.75rem;
}

.shop-product-page .shop-checkout {
  min-height: 54px;
  border: 2px solid #ffffff;
  border-radius: 7px;
  background: linear-gradient(180deg, #ff6757, #ef493b);
  color: #ffffff;
  box-shadow: 0 6px 0 var(--shop-red-deep), 0 13px 22px rgba(197, 61, 49, 0.16);
}

.shop-product-page .shop-checkout:hover:not(:disabled),
.shop-product-page .shop-checkout:focus-visible {
  background: #f36b57;
  color: #ffffff;
  box-shadow: 0 3px 0 var(--shop-red-deep), 0 10px 18px rgba(197, 61, 49, 0.18);
  transform: translateY(3px);
}

.shop-product-page .shop-order__status {
  color: var(--shop-red-deep);
}

@media (max-width: 1160px) {
  .shop-product-page .shop-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
  }

  .shop-product-page .shop-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .shop-product-page .shop-banner {
    min-height: 330px;
    height: 42vh;
  }

  .shop-product-page .shop-banner__content {
    padding-bottom: 44px;
  }

  .shop-product-page .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-product-page .shop-order {
    position: static;
  }
}

@media (max-width: 640px) {
  .shop-product-page .shop-main {
    padding-top: var(--nav-h, 62px);
  }

  .shop-product-page .shop-banner {
    min-height: 285px;
    height: 285px;
  }

  .shop-product-page .shop-banner__overlay {
    background:
      linear-gradient(90deg, rgba(9, 64, 102, 0.82), rgba(10, 94, 136, 0.34)),
      linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(255, 248, 214, 0.72));
  }

  .shop-product-page .shop-banner__content {
    padding-bottom: 36px;
  }

  .shop-product-page .shop-banner__content p {
    margin-bottom: 10px;
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  .shop-product-page .shop-banner__content h1 {
    max-width: 330px;
    font-size: 2.45rem;
    line-height: 1;
  }

  .shop-product-page .shop-banner__content > span {
    max-width: 300px;
    margin-top: 12px;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .shop-product-page .shop-market {
    margin-top: -24px;
    padding-bottom: 48px;
  }

  .shop-product-page .shop-category-bar {
    width: calc(100% + 24px);
    margin-right: -12px;
    margin-bottom: 22px;
    padding: 8px 12px 11px 8px;
    border-right: 0;
    border-radius: 8px 0 0 8px;
  }

  .shop-product-page .shop-category {
    min-height: 42px;
    padding: 0 13px;
    font-size: 0.78rem;
  }

  .shop-product-page .shop-catalog__heading {
    min-height: auto;
    align-items: flex-start;
    margin-bottom: 14px;
  }

  .shop-product-page .shop-catalog__heading h2 {
    font-size: 1.35rem;
  }

  .shop-product-page .shop-catalog__heading > span {
    min-height: 28px;
    padding: 0 10px;
    font-size: 0.78rem;
  }

  .shop-product-page .shop-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .shop-product-page .shop-product-card {
    min-height: 238px;
    grid-template-rows: 132px minmax(0, 1fr);
  }

  .shop-product-page .shop-product-card__visual {
    border-right: 0;
    border-bottom: 2px solid #d6e9ed;
  }

  .shop-product-page .shop-product-card__visual img {
    width: min(82%, 112px);
    height: min(82%, 112px);
  }

  .shop-product-page .shop-product-card__body {
    padding: 11px;
  }

  .shop-product-page .shop-product-card__category {
    font-size: 0.62rem;
  }

  .shop-product-page .shop-product-card__body > strong {
    font-size: 0.88rem;
    line-height: 1.28;
  }

  .shop-product-page .shop-product-card__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
  }

  .shop-product-page .shop-product-card__meta b {
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.95rem;
  }

  .shop-product-page .shop-product-card__meta small {
    max-width: 100%;
    font-size: 0.68rem;
    text-align: left;
  }

  .shop-product-page .shop-order__heading,
  .shop-product-page .shop-order form {
    padding-right: 18px;
    padding-left: 18px;
  }

  .shop-product-page .shop-order__product {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 86px;
  }

  .shop-product-page .shop-order__product img {
    width: 86px;
    height: 86px;
  }
}

@media (max-width: 380px) {
  .shop-product-page .shop-product-grid {
    gap: 8px;
  }

  .shop-product-page .shop-product-card {
    min-height: 226px;
    grid-template-rows: 120px minmax(0, 1fr);
  }

  .shop-product-page .shop-product-card__body {
    padding: 10px;
  }

  .shop-product-page .shop-order__quantity {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
  }
}

.shop-checkout:hover,
.checkout-submit:hover,
.payment-submit:hover,
.payment-result-action.is-primary:hover,
.system-message__action--primary:hover,
.coda-payment__submit:hover {
  transform: translateY(-1px);
}

.shop-stepper {
  border-radius: 16px;
}

.checkout-breadcrumb > span:last-child,
.payment-breadcrumb > span:last-child,
.payment-result-breadcrumb > span:last-child,
.shop-catalog__heading p,
.shop-order__heading p,
.checkout-heading p,
.payment-status__copy p,
.payment-panel__heading p,
.payment-result-eyebrow,
.system-message__eyebrow {
  color: var(--purchase-red);
}

.shop-product-page,
.checkout-page,
.payment-page,
.payment-result-page,
.system-message-page,
.coda-payment-page,
.external-payment-page {
  color: var(--purchase-ink);
  font-family: var(--font-body, "Trebuchet MS", "Segoe UI", Arial, sans-serif);
}

/* Product catalog */
.shop-product-page {
  background: #f5fcff;
}

.shop-banner {
  height: min(460px, 54vh);
  min-height: 350px;
  border-bottom: 7px solid var(--purchase-yellow);
  background: var(--purchase-sky);
  color: var(--purchase-ink);
}

.shop-banner > img {
  object-position: center 46%;
}

.shop-banner__overlay {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 -90px 80px rgba(32, 50, 71, 0.14);
}

.shop-banner__content {
  justify-content: flex-end;
  padding-bottom: 46px;
}

.shop-banner__content p {
  margin-bottom: 9px;
  padding: 5px 10px;
  border-left: 5px solid var(--purchase-red);
  background: rgba(255, 248, 223, 0.94);
  color: #0d659a;
}

.shop-banner__content h1 {
  color: #173e5c;
  font-size: 46px;
  font-weight: 900;
  text-shadow: 0 2px 0 #ffffff, 2px 0 0 #ffffff, -2px 0 0 #ffffff;
}

.shop-banner__content > span {
  margin-top: 10px;
  color: #173e5c;
  font-size: 17px;
  font-weight: 800;
  text-shadow: 0 1px 0 #ffffff, 1px 0 0 #ffffff;
}

.shop-market {
  padding-top: 30px;
  border-top: 1px solid #ffffff;
  background: #fffdf7;
}

.shop-category-bar {
  gap: 8px;
  padding: 6px;
  border: 2px solid #c8e6eb;
  border-radius: 8px;
  background: #e8f8fa;
}

.shop-category {
  border: 2px solid transparent;
  background: transparent;
  color: #31536f;
}

.shop-category span {
  background: #ffffff;
  color: #31536f;
}

.shop-category:hover,
.shop-category:focus-visible {
  border-color: #7bcbd9;
  background: #ffffff;
  color: #0d659a;
}

.shop-category.is-active {
  border-color: #ffffff;
  background: var(--purchase-red);
  color: #ffffff;
  box-shadow: 0 4px 0 var(--purchase-red-deep);
}

.shop-category.is-active span {
  background: var(--purchase-yellow);
  color: #5f3d00;
}

.shop-catalog__heading p,
.shop-order__heading p {
  color: var(--purchase-red);
}

.shop-product-grid {
  gap: 16px;
}

.shop-product-card {
  border: 2px solid #cbe0e5;
  background: #ffffff;
  box-shadow: 0 7px 0 #d6ebef, 0 14px 24px rgba(32, 78, 103, 0.08);
}

.shop-product-card:hover,
.shop-product-card:focus-visible {
  border-color: #6bc5d5;
  box-shadow: 0 5px 0 #91d5df, 0 16px 28px rgba(32, 78, 103, 0.14);
  transform: translateY(2px);
}

.shop-product-card.is-selected {
  border-color: var(--purchase-red);
  box-shadow: 0 0 0 3px rgba(239, 90, 69, 0.12), 0 7px 0 var(--purchase-yellow-deep);
}

.shop-product-card__visual {
  border-bottom: 2px solid #d6e9ed;
  background: var(--purchase-sky-soft);
}

.shop-product-card.is-selected .shop-product-card__visual {
  background: #fff3bd;
}

.shop-product-card__category {
  color: var(--purchase-blue);
}

.shop-product-card__body > strong {
  color: var(--purchase-ink);
}

.shop-product-card__meta b {
  color: #b74734;
}

.shop-empty {
  border: 2px dashed #8fcbd5;
  background: var(--purchase-sky-soft);
}

.shop-order {
  border: 3px solid #ffffff;
  border-top: 7px solid var(--purchase-red);
  background: #ffffff;
  color: var(--purchase-ink);
  box-shadow: 0 9px 0 #b9dce3, 0 24px 42px rgba(32, 78, 103, 0.16);
}

.shop-order__heading {
  border-bottom: 2px solid #dcebef;
  background: var(--purchase-sky-soft);
}

.shop-order__heading h2 {
  color: var(--purchase-ink);
}

.shop-order__product img {
  border: 2px solid #b8dce3;
  background: #fff8df;
}

.shop-order__product span,
.shop-order__product small {
  color: var(--purchase-blue);
}

.shop-order__product small {
  color: var(--purchase-muted);
}

.shop-order__row,
.shop-order__quantity,
.shop-order__total,
.shop-order__field,
.shop-order__notice {
  border-color: #dce9ec;
}

.shop-order__row span,
.shop-order__quantity label,
.shop-order__total span,
.shop-order__field label {
  color: var(--purchase-muted);
}

.shop-order__row strong,
.shop-order__total strong {
  color: #b74734;
}

.shop-order__row .shop-order__delivery {
  color: var(--purchase-green);
}

.shop-order__notice {
  color: var(--purchase-muted);
}

.shop-stepper {
  border: 2px solid #92c8d2;
  background: #ffffff;
}

.shop-stepper button,
.shop-stepper input {
  color: var(--purchase-ink);
}

.shop-stepper button {
  background: #fff2a8;
  color: #6b4700;
}

.shop-stepper button:hover:not(:disabled),
.shop-stepper button:focus-visible {
  background: var(--purchase-yellow);
}

.shop-stepper input {
  border-color: #92c8d2;
}

.shop-order__field input {
  border: 2px solid var(--purchase-line);
  background: #ffffff;
  color: var(--purchase-ink);
}

.shop-order__field input::placeholder {
  color: #98a8b3;
}

.shop-order__error,
.shop-order__status {
  color: var(--purchase-red-deep);
}

.shop-checkout,
.checkout-submit,
.payment-submit,
.payment-result-action.is-primary,
.system-message__action--primary,
.coda-payment__button.is-primary {
  border: 2px solid #ffffff;
  background: var(--purchase-red);
  color: #ffffff;
  box-shadow: 0 6px 0 var(--purchase-red-deep), 0 12px 20px rgba(197, 61, 49, 0.16);
}

.shop-checkout:hover:not(:disabled),
.shop-checkout:focus-visible,
.checkout-submit:hover:not(:disabled),
.checkout-submit:focus-visible,
.payment-submit:hover:not(:disabled),
.payment-submit:focus-visible,
.payment-result-action.is-primary:hover,
.payment-result-action.is-primary:focus-visible,
.system-message__action--primary:hover,
.system-message__action--primary:focus-visible,
.coda-payment__button.is-primary:hover,
.coda-payment__button.is-primary:focus-visible {
  background: #f36b57;
  box-shadow: 0 3px 0 var(--purchase-red-deep), 0 9px 16px rgba(197, 61, 49, 0.18);
  color: #ffffff;
  transform: translateY(3px);
}

/* Checkout */
.checkout-page,
.payment-page,
.payment-result-page,
.system-message-page {
  background: #f5fcff;
}

.checkout-main,
.payment-main,
.payment-result-main,
.system-message-main {
  background: #f5fcff;
}

.checkout-breadcrumb a,
.payment-breadcrumb a,
.payment-result-breadcrumb a {
  color: #31536f;
}

.checkout-heading p,
.checkout-panel__heading p,
.checkout-game-id__heading p,
.checkout-delivery p,
.checkout-summary__heading p,
.payment-status__copy p,
.payment-panel__heading p,
.payment-summary__heading p,
.payment-success-banner__copy p,
.payment-success-order__heading p,
.payment-success-game__copy p {
  color: var(--purchase-red);
}

.checkout-panel,
.checkout-game-id,
.checkout-delivery,
.payment-panel {
  border: 2px solid #d4e6ea;
  background: #ffffff;
  box-shadow: 0 7px 0 #dfedf0;
}

.checkout-panel__heading,
.payment-panel__heading {
  background: var(--purchase-sky-soft);
}

.checkout-panel__heading > span,
.checkout-game-id__field label span,
.payment-status__badge {
  border-color: #e7a912;
  background: #fff2a8;
  color: #6b4700;
}

.checkout-table__head {
  background: #f4fafb;
}

.checkout-item__image {
  border: 2px solid #b9dce3;
  background: var(--purchase-cream);
}

.checkout-item__product span,
.checkout-item__subtotal strong {
  color: var(--purchase-blue);
}

.checkout-game-id {
  border-left: 6px solid var(--purchase-yellow);
}

.checkout-game-id__field input {
  border: 2px solid var(--purchase-line);
  background: #ffffff;
}

.checkout-game-id__field input:focus {
  border-color: #18b8d8;
  box-shadow: 0 0 0 4px rgba(24, 184, 216, 0.14);
}

.checkout-delivery {
  border-left: 6px solid var(--purchase-green);
  background: #edfaf2;
}

.checkout-summary,
.payment-summary,
.payment-result-summary {
  border: 3px solid #ffffff;
  border-top: 7px solid var(--purchase-yellow);
  background: #ffffff;
  color: var(--purchase-ink);
  box-shadow: 0 9px 0 #b9dce3, 0 24px 42px rgba(32, 78, 103, 0.15);
}

.checkout-summary__heading,
.payment-summary__heading,
.payment-result-summary__heading {
  border-color: #dce9ec;
  background: var(--purchase-sky-soft);
}

.checkout-summary__heading h2,
.payment-summary__heading h2,
.payment-result-summary__heading h2 {
  color: var(--purchase-ink);
}

.checkout-summary__row,
.checkout-summary__total,
.checkout-summary__secure,
.payment-summary__details > div,
.payment-summary__total,
.payment-summary__secure,
.payment-result-details > div,
.payment-result-total,
.payment-result-summary__note {
  border-color: #dce9ec;
}

.checkout-summary__row span,
.checkout-summary__total span,
.payment-summary__details dt,
.payment-summary__total span,
.payment-result-details dt,
.payment-result-total span {
  color: var(--purchase-muted);
}

.checkout-summary__row strong,
.checkout-summary__total strong,
.payment-summary__details dd,
.payment-summary__total strong,
.payment-result-details dd,
.payment-result-total strong {
  color: var(--purchase-ink);
}

.checkout-summary__total strong,
.payment-summary__total strong,
.payment-result-total strong {
  color: #b74734;
}

.checkout-summary__secure strong,
.payment-summary__secure strong,
.payment-result-summary__note strong {
  color: var(--purchase-green);
}

.checkout-summary__secure span,
.payment-summary__secure span,
.payment-result-summary__note span {
  color: var(--purchase-muted);
}

/* Payment selection */
.payment-status {
  padding: 22px 24px;
  border: 2px solid #c8e5d3;
  border-left: 7px solid var(--purchase-green);
  border-radius: 8px;
  background: #edfaf2;
}

.payment-status__mark {
  border: 3px solid #ffffff;
  background: #55c982;
  box-shadow: 0 6px 0 #278b55;
}

.payment-status__mark::after {
  border-color: #ffffff;
}

.payment-panel__step {
  background: var(--purchase-yellow);
  color: #624000;
}

.payment-method {
  border: 2px solid #d4e4e8;
  background: #ffffff;
}

.payment-method:hover,
.payment-method:focus-within {
  border-color: #72c9d7;
  background: var(--purchase-sky-soft);
}

.payment-method.is-selected {
  border-color: var(--purchase-red);
  background: #fff3ef;
  box-shadow: 0 0 0 3px rgba(239, 90, 69, 0.1);
}

.payment-method__control,
.payment-check__box {
  border-color: #89aeb7;
  background: #ffffff;
}

.payment-method input:checked + .payment-method__control,
.payment-check input:checked + .payment-check__box {
  border-color: var(--purchase-blue);
  background: var(--purchase-blue);
}

.payment-method__logo {
  border-color: #d9e6e9;
  background: #ffffff;
}

.payment-confirmation__body {
  background: #fffdf7;
}

.payment-order-link {
  border-color: #8bbbc6;
  color: #31536f;
}

.payment-order-link:hover,
.payment-order-link:focus-visible {
  background: var(--purchase-sky-soft);
  color: var(--purchase-blue);
}

/* Payment result pages */
.payment-success-banner {
  border: 2px solid #c9e4d2;
  border-left: 7px solid var(--purchase-green);
  background: #edfaf2;
  box-shadow: 0 7px 0 #c5dfcf;
}

.payment-result-page--error .payment-success-banner {
  border-color: #f1c7bf;
  border-left-color: var(--purchase-red);
  background: #fff3ef;
  box-shadow: 0 7px 0 #f0d3cd;
}

.payment-result-page--pending .payment-success-banner {
  border-color: #ecd48a;
  border-left-color: var(--purchase-yellow-deep);
  background: #fff8d8;
  box-shadow: 0 7px 0 #e7d9a8;
}

.payment-result-mark.is-success {
  background: #55c982;
  box-shadow: 0 6px 0 #278b55;
}

.payment-result-mark.is-success::after {
  border-color: #ffffff;
}

.payment-result-mark.is-error {
  background: var(--purchase-red);
  box-shadow: 0 6px 0 var(--purchase-red-deep);
}

.payment-result-mark.is-error::before,
.payment-result-mark.is-error::after {
  background: #ffffff;
}

.payment-result-mark.is-pending {
  background: var(--purchase-yellow);
  box-shadow: 0 6px 0 var(--purchase-yellow-deep);
}

.payment-success-paid {
  border-color: #b8dce3;
  background: #ffffff;
}

.payment-success-paid > strong {
  color: #b74734;
}

.payment-success-order,
.payment-success-game {
  border: 2px solid #d4e6ea;
  background: #ffffff;
  box-shadow: 0 7px 0 #dfedf0;
}

.payment-success-order__heading {
  background: var(--purchase-sky-soft);
}

.payment-success-details > div:nth-child(odd) {
  background: #ffffff;
}

.payment-success-details > div:nth-child(even) {
  background: #f6fbfc;
}

.payment-result-action.is-secondary {
  border: 2px solid #89b9c4;
  background: #ffffff;
  color: #31536f;
}

.payment-result-action.is-secondary:hover,
.payment-result-action.is-secondary:focus-visible {
  background: var(--purchase-sky-soft);
  color: var(--purchase-blue);
}

.payment-success-game__visual {
  background: var(--purchase-sky-soft);
}

.payment-result-page--error .payment-success-game__visual {
  background: #fff0ec;
}

.payment-result-page--pending .payment-success-game__visual {
  background: #fff7d0;
}

.payment-success-game__copy {
  background: #ffffff;
  color: var(--purchase-ink);
}

.payment-success-game__copy strong {
  color: var(--purchase-ink);
}

.payment-success-game__copy span {
  color: var(--purchase-muted);
}

/* Provider and system pages */
.system-message {
  border: 3px solid #ffffff;
  border-top: 7px solid var(--purchase-yellow);
  background: #ffffff;
  box-shadow: 0 10px 0 #b9dce3, 0 24px 42px rgba(32, 78, 103, 0.15);
}

.system-message__visual {
  background: var(--purchase-sky-soft);
}

.system-message-page--error .system-message__visual {
  background: #fff0ec;
}

.system-message__mark {
  border-color: #ffffff;
  background: var(--purchase-yellow);
  color: #694600;
  box-shadow: 0 6px 0 var(--purchase-yellow-deep);
}

.system-message__content {
  background: #ffffff;
}

.system-message__embedded {
  border-color: #b8dce3;
  background: #fffdf7;
}

.system-message__action,
.coda-payment__button.is-secondary {
  border: 2px solid #89b9c4;
  background: #ffffff;
  color: #31536f;
}

.system-message__action:hover,
.system-message__action:focus-visible,
.coda-payment__button.is-secondary:hover,
.coda-payment__button.is-secondary:focus-visible {
  background: var(--purchase-sky-soft);
  color: var(--purchase-blue);
}

.coda-payment-main,
.external-payment-main {
  background: #e9faff;
}

.coda-payment,
.external-result {
  border: 3px solid #ffffff;
  border-top: 7px solid var(--purchase-yellow);
  background: #ffffff;
  box-shadow: 0 10px 0 #b6dce4, 0 24px 42px rgba(32, 78, 103, 0.16);
}

.coda-payment__brand {
  border-color: #d8eaee;
  background: var(--purchase-sky-soft);
}

.coda-payment__brand img,
.coda-payment__brand-mark {
  border: 2px solid #ffffff;
  background: var(--purchase-yellow);
  color: #654300;
  box-shadow: 0 5px 0 var(--purchase-yellow-deep);
}

.coda-payment__status {
  background: #ffffff;
}

.coda-payment__loader {
  border-color: #a6dbe4;
  background: var(--purchase-sky-soft);
}

.coda-payment__progress {
  background: #f6fbfc;
}

.coda-payment__progress i {
  border-color: #a8c1c7;
  background: #ffffff;
}

.coda-payment__progress .is-active i {
  border-color: var(--purchase-yellow-deep);
  box-shadow: 0 0 0 4px rgba(255, 199, 44, 0.2);
}

.coda-payment__details > div,
.external-order__details > div {
  border-color: #dce9ec;
}

.external-result__status {
  border-top: 0;
  border-left: 7px solid var(--purchase-green);
  background: #edfaf2;
}

.is-error .external-result__status {
  border-left-color: var(--purchase-red);
  background: #fff0ec;
}

.external-result__icon {
  border: 3px solid #ffffff;
  background: #55c982;
  box-shadow: 0 6px 0 #278b55;
}

.external-result__icon::after {
  border-color: #ffffff;
}

.is-error .external-result__icon {
  border-color: #ffffff;
  background: var(--purchase-red);
  box-shadow: 0 6px 0 var(--purchase-red-deep);
}

.is-error .external-result__icon::before,
.is-error .external-result__icon::after {
  background: #ffffff;
}

.external-order__heading {
  background: var(--purchase-sky-soft);
}

.external-order__badge {
  background: #e3f7ea;
  color: var(--purchase-green);
}

.is-error .external-order__badge {
  background: #fff0ec;
  color: var(--purchase-red-deep);
}

@media (max-width: 600px) {
  .shop-banner {
    height: 310px;
    min-height: 310px;
  }

  .shop-banner__overlay {
    background: rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 -110px 75px rgba(32, 50, 71, 0.18);
  }

  .shop-banner__content {
    padding-bottom: 28px;
  }

  .shop-banner__content h1 {
    font-size: 32px;
  }

  .shop-category-bar {
    border-right: 0;
    border-radius: 8px 0 0 8px;
  }

  .shop-product-card__visual {
    border-right: 2px solid #d6e9ed;
  }

  .payment-status,
  .payment-success-banner,
  .external-result__status {
    border-left-width: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-category,
  .shop-product-card,
  .shop-checkout,
  .checkout-submit,
  .payment-submit,
  .payment-result-action,
  .system-message__action,
  .coda-payment__button {
    transition: none;
  }
}

/* Final {$tpshop_config['shop_info_appName']} pass after legacy purchase rules */
.shop-product-page,
.checkout-page,
.payment-page,
.payment-result-page,
.system-message-page,
.coda-payment-page,
.external-payment-page {
  background:
    radial-gradient(circle at 14% 7%, rgba(255, 210, 63, 0.32), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(255, 79, 112, 0.12), transparent 22%),
    linear-gradient(180deg, #dffbff, #fff8d7 48%, #e8fbff);
}

.shop-banner__overlay {
  background: linear-gradient(90deg, rgba(8, 55, 96, 0.82), rgba(8, 74, 122, 0.5) 46%, rgba(255,255,255,0.03));
}

.shop-banner__content h1,
.shop-banner__content > span {
  color: #ffffff;
  text-shadow: 0 4px 0 rgba(13, 87, 147, 0.48);
}

.shop-category-bar,
.checkout-panel,
.checkout-game-id,
.checkout-delivery,
.checkout-summary,
.payment-panel,
.payment-summary,
.payment-result-summary,
.system-message,
.coda-payment__panel,
.external-payment__panel {
  border: 3px solid #ffffff;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(13, 87, 147, 0.1);
}

.shop-product-card {
  border: 3px solid #ffffff;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 9px 0 rgba(22, 136, 232, 0.12), 0 18px 30px rgba(13, 87, 147, 0.1);
}

.shop-product-card.is-selected {
  border-color: #ff75bc;
  box-shadow: 0 0 0 4px rgba(255, 79, 112, 0.13), 0 8px 0 #ffd23f;
}

.shop-order {
  border: 4px solid #ffffff;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 0 rgba(22, 136, 232, 0.14), 0 22px 38px rgba(13, 87, 147, 0.14);
}

.shop-checkout,
.checkout-submit,
.payment-submit,
.payment-result-action.is-primary,
.system-message__action--primary,
.coda-payment__submit {
  border: 2px solid #ffffff;
  border-radius: 16px;
  background: linear-gradient(180deg, #8cf023, #36c21f);
  color: #ffffff;
  box-shadow: 0 6px 0 #159018;
  text-shadow: 0 2px 0 rgba(20, 106, 18, 0.28);
}

/* Product page must win after shared purchase fallbacks. */
.shop-product-page {
  background: linear-gradient(180deg, #e9fbff 0, #fffdf3 440px, #f7fcff 100%);
}

/* Payment success page refresh */
.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) {
  background: linear-gradient(180deg, #e8fbff 0, #f7fdff 360px, #f4fbff 100%);
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-result-main {
  background: transparent;
  padding-bottom: 64px;
}

.payment-success-banner--gem {
  position: relative;
  grid-template-columns: 76px minmax(0, 1fr) minmax(190px, auto);
  gap: 24px;
  padding: 30px 34px;
  border: 1px solid rgba(40, 191, 127, 0.28);
  border-left: 6px solid #23b874;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(236, 255, 244, 0.98), rgba(229, 249, 255, 0.96) 58%, rgba(255, 250, 231, 0.98));
  box-shadow: 0 18px 44px rgba(34, 116, 139, 0.14);
}

.payment-success-banner--gem .payment-result-mark--gem {
  width: 76px;
  height: 76px;
  background: linear-gradient(145deg, #5ddc8f, #20ad6d);
  box-shadow: inset 0 -8px 0 rgba(10, 96, 70, 0.18), 0 12px 22px rgba(35, 184, 116, 0.24);
}

.payment-success-banner--gem .payment-result-mark--gem::after {
  top: 20px;
  left: 30px;
  width: 14px;
  height: 26px;
  border-color: #ffffff;
}

.payment-success-banner--gem .payment-success-banner__copy h1 {
  color: #0c2344;
  font-size: 36px;
}

.payment-success-banner--gem .payment-success-banner__copy > span {
  max-width: 620px;
  color: #446272;
  font-size: 14px;
}

.payment-success-gems {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.payment-success-gems i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  transform: rotate(45deg);
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(30, 52, 84, 0.12);
}

.payment-success-gems .is-red { background: #f4554d; }
.payment-success-gems .is-blue { background: #2fa9ff; }
.payment-success-gems .is-yellow { background: #ffd44f; }
.payment-success-gems .is-green { background: #36c878; }
.payment-success-gems .is-purple { background: #9b6cff; }

.payment-success-banner--gem .payment-success-paid {
  padding: 18px 22px;
  border: 1px solid rgba(37, 172, 119, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.payment-success-banner--gem .payment-success-paid > strong {
  color: #f0523e;
  font-size: 34px;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 24px;
  margin-top: 24px;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order,
.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game {
  border: 1px solid rgba(90, 174, 204, 0.26);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(35, 99, 128, 0.12);
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order {
  min-height: 0;
  padding: 30px;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order__heading {
  border-bottom-color: #d7ebf2;
  background: transparent;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order__heading h2 {
  color: #0c2344;
  font-size: 22px;
}

.payment-success-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 4px;
}

.payment-success-steps span {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #d4edf4;
  border-radius: 8px;
  background: #f5fcff;
  color: #3b6172;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.payment-success-steps i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2fbd76;
  box-shadow: 0 0 0 4px rgba(47, 189, 118, 0.12);
}

.payment-success-steps .is-current {
  border-color: rgba(255, 191, 51, 0.52);
  background: #fff9e7;
  color: #8b5a00;
}

.payment-success-steps .is-current i {
  background: #ffbf33;
  box-shadow: 0 0 0 4px rgba(255, 191, 51, 0.18);
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-details > div {
  border-bottom-color: #d7ebf2;
  background: #ffffff;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-details > div:nth-child(even) {
  border-left-color: #d7ebf2;
}

.payment-success-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid #d8edf3;
  border-radius: 8px;
  background: #f6fcff;
  color: #496777;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.payment-success-details--simple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}

.payment-success-details--simple > div,
.payment-success-details--simple > div:nth-child(odd),
.payment-success-details--simple > div:nth-child(even) {
  padding: 18px 18px 18px 0;
  border-left: 0;
}

.payment-success-details--simple > div:not(:last-child) {
  border-right: 1px solid #d7ebf2;
}

.payment-success-details--simple > div + div {
  padding-left: 18px;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-result-action.is-primary {
  border: 1px solid #f0523e;
  border-radius: 8px;
  background: #f0523e;
  color: #ffffff;
  box-shadow: inset 0 -4px 0 rgba(117, 28, 20, 0.24);
  text-shadow: none;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-result-action.is-secondary {
  border: 1px solid #4fb8d7;
  border-radius: 8px;
  background: #ffffff;
  color: #0c4e78;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game {
  display: grid;
  min-height: 420px;
  grid-template-rows: minmax(280px, 1fr) auto;
  background: #0e2947;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__visual {
  position: relative;
  overflow: hidden;
  padding: 28px;
  background: linear-gradient(180deg, rgba(222, 249, 255, 0.96), rgba(222, 255, 239, 0.92));
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__visual img {
  position: relative;
  width: min(100%, 430px);
  max-height: 286px;
  filter: drop-shadow(0 18px 20px rgba(12, 39, 58, 0.18));
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy {
  padding: 24px 26px 26px;
  background: linear-gradient(135deg, #0e2947, #15395c);
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy p {
  color: #ffd44f;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy strong {
  color: #ffffff;
  font-size: 18px;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy span {
  color: rgba(255, 255, 255, 0.72);
}

.payment-success-game__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.payment-success-game__stats span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.payment-success-sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order {
  display: block;
  align-self: start;
  padding: 26px;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order__actions {
  margin-top: 22px;
  padding-top: 0;
}

.payment-success-details--simple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.payment-success-details--simple > div,
.payment-success-details--simple > div:nth-child(odd),
.payment-success-details--simple > div:nth-child(even) {
  min-height: 92px;
  padding: 16px;
  border: 1px solid #d8edf3;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f7fcff);
}

.payment-success-details--simple > div:not(:last-child) {
  border-right: 1px solid #d8edf3;
}

.payment-success-details--simple > div + div {
  padding-left: 16px;
}

.payment-success-details--simple dt {
  margin-bottom: 9px;
  color: #627d91;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.payment-success-details--simple dd {
  color: #0c2344;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-grid {
  align-items: start;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game {
  min-height: 0;
  grid-template-rows: 250px auto;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__visual {
  padding: 18px 24px 0;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__visual img {
  max-height: 286px;
  transform: translateY(-4px);
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy {
  padding: 20px 26px 22px;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy strong {
  font-size: 17px;
}

.payment-success-game__stats {
  margin-top: 12px;
}

@media (max-width: 880px) {
  .payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-grid {
    grid-template-columns: 1fr;
  }

  .payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: minmax(230px, auto);
  }
}

@media (max-width: 680px) {
  .payment-success-banner--gem {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 22px 20px;
  }

  .payment-success-banner--gem .payment-success-banner__copy h1 {
    font-size: 27px;
  }

  .payment-success-steps {
    grid-template-columns: 1fr;
  }

  .payment-success-details--simple {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .payment-success-details--simple > div,
  .payment-success-details--simple > div:nth-child(odd),
  .payment-success-details--simple > div:nth-child(even) {
    min-height: 0;
    padding: 14px 15px;
    border-right: 0;
  }

  .payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order {
    padding: 24px 20px;
  }

  .payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, auto) auto;
  }
}

@media (max-width: 420px) {
  .payment-success-banner--gem {
    padding: 19px 16px;
  }

  .payment-success-banner--gem .payment-success-banner__copy h1 {
    font-size: 23px;
  }

  .payment-success-gems i {
    width: 17px;
    height: 17px;
    border-radius: 5px;
  }
}

/* Final payment success layout: one main receipt card plus one game card. */
.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 24px;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order--complete {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-self: stretch;
  padding: 30px;
  border: 1px solid rgba(90, 174, 204, 0.26);
  border-left: 6px solid #23b874;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 253, 255, 0.96));
  box-shadow: 0 16px 38px rgba(35, 99, 128, 0.12);
}

.payment-success-complete {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(150px, auto);
  gap: 20px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #d7ebf2;
}

.payment-success-complete .payment-result-mark--gem {
  width: 72px;
  height: 72px;
  margin: 0;
  background: linear-gradient(145deg, #5ddc8f, #20ad6d);
  box-shadow: inset 0 -8px 0 rgba(10, 96, 70, 0.18), 0 12px 22px rgba(35, 184, 116, 0.22);
}

.payment-success-complete .payment-result-mark--gem::after {
  top: 18px;
  left: 28px;
  width: 13px;
  height: 25px;
  border-color: #ffffff;
}

.payment-success-complete__copy p {
  margin: 0 0 7px;
  color: #f0523e;
  font-family: var(--font-display, sans-serif);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.payment-success-complete__copy h1 {
  margin: 0;
  color: #0c2344;
  font-family: var(--font-display, sans-serif);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
}

.payment-success-complete__copy > span {
  display: block;
  margin-top: 8px;
  color: #496777;
  font-size: 14px;
  line-height: 1.55;
}

.payment-success-complete .payment-success-paid {
  min-width: 150px;
  padding: 15px 18px;
  border: 1px solid rgba(37, 172, 119, 0.2);
  border-radius: 8px;
  background: #ffffff;
  text-align: right;
}

.payment-success-complete .payment-success-paid > strong {
  color: #f0523e;
  font-size: 31px;
}

.payment-success-order--complete .payment-success-details--simple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.payment-success-order--complete .payment-success-details--simple > div,
.payment-success-order--complete .payment-success-details--simple > div:nth-child(odd),
.payment-success-order--complete .payment-success-details--simple > div:nth-child(even) {
  min-height: 90px;
  padding: 16px;
  border: 1px solid #d8edf3;
  border-radius: 8px;
  background: #ffffff;
}

.payment-success-order--complete .payment-success-order__actions {
  margin-top: 24px;
  padding-top: 0;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game {
  min-height: 0;
  align-self: stretch;
  grid-template-rows: 270px auto;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__visual {
  padding: 22px 24px 0;
}

@media (max-width: 980px) {
  .payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .payment-success-complete {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .payment-success-complete .payment-success-paid {
    grid-column: 1 / -1;
    text-align: left;
  }

  .payment-success-order--complete .payment-success-details--simple {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order--complete {
    padding: 22px 18px;
  }

  .payment-success-complete__copy h1 {
    font-size: 25px;
  }
}

/* Match the side game card to the lighter receipt card. */
.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game {
  border: 1px solid rgba(90, 174, 204, 0.26);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f4fcff);
  box-shadow: 0 16px 38px rgba(35, 99, 128, 0.12);
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__visual {
  border-bottom: 1px solid #d7ebf2;
  background:
    linear-gradient(180deg, rgba(229, 250, 255, 0.98), rgba(237, 255, 245, 0.96));
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy {
  padding: 22px 26px 24px;
  background: #ffffff;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy p {
  color: #f0523e;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy strong {
  color: #0c2344;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-game__copy span {
  color: #496777;
}

.payment-success-game__stats span {
  border-color: #d8edf3;
  background: #f6fcff;
  color: #0c4e78;
}

/* Single-column payment success page. */
.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-grid {
  display: block;
  max-width: 880px;
  margin: 28px auto 0;
}

.payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-order--complete {
  min-height: 0;
}

.payment-success-order--complete .payment-success-order__actions {
  justify-content: center;
}

@media (max-width: 720px) {
  .payment-result-page:not(.payment-result-page--pending):not(.payment-result-page--error) .payment-success-grid {
    margin-top: 20px;
  }
}

/* Single-column payment error page. */
.payment-result-page--error .payment-success-grid {
  display: block;
  max-width: 880px;
  margin: 28px auto 0;
}

.payment-result-page--error .payment-success-order--complete {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(240, 82, 62, 0.24);
  border-left: 6px solid #f0523e;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 244, 0.96));
  box-shadow: 0 16px 38px rgba(128, 53, 35, 0.12);
}

.payment-result-page--error .payment-success-complete {
  border-bottom-color: #f1d9d2;
}

.payment-result-page--error .payment-success-complete .payment-result-mark.is-error {
  width: 72px;
  height: 72px;
  margin: 0;
  background: linear-gradient(145deg, #ff765f, #f0523e);
  box-shadow: inset 0 -8px 0 rgba(117, 28, 20, 0.2), 0 12px 22px rgba(240, 82, 62, 0.2);
}

.payment-result-page--error .payment-success-complete .payment-result-mark.is-error::before,
.payment-result-page--error .payment-success-complete .payment-result-mark.is-error::after {
  top: 34px;
  left: 21px;
  width: 30px;
  height: 4px;
  background: #ffffff;
}

.payment-result-page--error .payment-success-complete__copy p {
  color: #f0523e;
}

.payment-result-page--error .payment-success-complete .payment-success-paid {
  border-color: rgba(240, 82, 62, 0.2);
}

.payment-result-page--error .payment-success-complete .payment-success-paid > small,
.payment-result-page--error .payment-success-complete .payment-success-paid > strong {
  color: #f0523e;
}

.payment-result-page--error .payment-success-complete .payment-success-paid > small i {
  background: #f0523e;
}

.payment-result-page--error .payment-success-details--simple > div,
.payment-result-page--error .payment-success-details--simple > div:nth-child(odd),
.payment-result-page--error .payment-success-details--simple > div:nth-child(even) {
  border-color: #f0ddd8;
  background: #ffffff;
}

.payment-result-page--error .payment-result-action.is-primary {
  border-color: #f0523e;
  background: #f0523e;
  color: #ffffff;
  box-shadow: inset 0 -4px 0 rgba(117, 28, 20, 0.24);
}

.payment-result-page--error .payment-result-action.is-secondary {
  border-color: #4fb8d7;
  background: #ffffff;
  color: #0c4e78;
}

@media (max-width: 720px) {
  .payment-result-page--error .payment-success-grid {
    margin-top: 20px;
  }

  .payment-result-page--error .payment-success-complete .payment-result-mark.is-error {
    width: 58px;
    height: 58px;
  }

  .payment-result-page--error .payment-success-complete .payment-result-mark.is-error::before,
  .payment-result-page--error .payment-success-complete .payment-result-mark.is-error::after {
    top: 27px;
    left: 17px;
    width: 24px;
  }
}

@media (max-width: 460px) {
  .payment-result-page--error .payment-success-order--complete {
    padding: 22px 18px;
  }
}