.xb-cashier-page,
.xb-cashier-page * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.xb-cashier-page {
  --xb-surface: rgba(10, 16, 35, 0.42);
  --xb-surface-strong: rgba(31, 28, 69, 0.56);
  --xb-border: rgba(255, 255, 255, 0.13);
  --xb-text: #f4f7fb;
  --xb-muted: #8f99a8;
  --xb-alipay: #1677ff;
  --xb-wechat: #07c160;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  background-color: #0a0a1e;
  background-image:
    linear-gradient(135deg, rgba(76, 34, 150, 0.34) 0%, rgba(10, 10, 30, 0) 44%),
    linear-gradient(315deg, rgba(0, 132, 184, 0.2) 0%, rgba(10, 10, 30, 0) 48%),
    linear-gradient(180deg, #120c31 0%, #0a0a1e 48%, #07182b 100%);
  color: var(--xb-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.xb-cashier-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    10vw 15vh rgba(255, 255, 255, 0.22),
    25vw 35vh rgba(255, 255, 255, 0.16),
    40vw 10vh rgba(255, 255, 255, 0.2),
    55vw 45vh rgba(255, 255, 255, 0.14),
    70vw 20vh rgba(255, 255, 255, 0.18),
    85vw 55vh rgba(255, 255, 255, 0.17),
    15vw 70vh rgba(255, 255, 255, 0.14),
    60vw 75vh rgba(255, 255, 255, 0.17),
    90vw 85vh rgba(255, 255, 255, 0.14),
    35vw 85vh rgba(255, 255, 255, 0.12),
    74vw 66vh rgba(92, 176, 255, 0.15),
    31vw 58vh rgba(151, 119, 255, 0.15);
}

.xb-cashier-topbar {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(18, 12, 47, 0.48);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13), inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.xb-cashier-brand {
  width: min(100%, 520px);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 11px 14px;
}

.xb-cashier-brand h1 {
  margin: 0;
  color: #eef3f8;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.xb-cashier-shell {
  width: min(100%, 520px);
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 14px 12px max(24px, env(safe-area-inset-bottom));
}

.xb-cashier-form {
  display: grid;
  gap: 12px;
}

.xb-amount-section,
.xb-product-section,
.xb-payment-section,
.xb-keypad,
.xb-state-card {
  border: 1px solid var(--xb-border);
  border-radius: 8px;
  background: linear-gradient(145deg, var(--xb-surface-strong), var(--xb-surface));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.xb-amount-section {
  padding: 15px 16px 16px;
}

.xb-product-section {
  display: grid;
  gap: 11px;
  padding: 15px 16px 16px;
}

.xb-amount-section > label,
.xb-section-label {
  display: block;
  margin: 0;
  color: #929cab;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.xb-product-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.xb-product-options button {
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: #9ba6b4;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 17px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 80ms ease;
}

.xb-product-options button:hover {
  border-color: rgba(102, 161, 255, 0.34);
  color: #d7dee7;
}

.xb-product-options button.is-selected {
  border-color: rgba(102, 161, 255, 0.72);
  background: rgba(22, 119, 255, 0.15);
  color: #a9caff;
  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.1);
}

.xb-product-options button:active {
  transform: scale(0.98);
}

.xb-amount-input-wrap {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.xb-amount-input-wrap > span {
  flex: 0 0 auto;
  margin-right: 5px;
  color: #7f8998;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
}

.xb-amount-input-wrap input {
  min-width: 0;
  max-width: calc(100% - 44px);
  height: 64px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  caret-color: #66a1ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 44px;
  font-weight: 750;
  line-height: 64px;
  text-align: center;
}

.xb-amount-input-wrap input::placeholder {
  color: #687382;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  opacity: 1;
}

.xb-progress-info {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: 8px;
  color: #657080;
  font-size: 10px;
  line-height: 18px;
}

.xb-progress-info strong {
  overflow: hidden;
  color: #8792a2;
  font-size: 11px;
  font-weight: 550;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xb-progress-info span:last-child {
  text-align: right;
}

.xb-progress-track {
  height: 4px;
  overflow: hidden;
  margin-top: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
}

.xb-progress-fill {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--xb-alipay);
  box-shadow: 0 0 12px rgba(22, 119, 255, 0.46);
  transition: width 160ms ease, background-color 160ms ease;
}

.xb-progress-fill.is-wechat {
  background: var(--xb-wechat);
  box-shadow: 0 0 12px rgba(7, 193, 96, 0.4);
}

.xb-quick-amounts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 13px;
}

.xb-quick-amounts button,
.xb-payment-methods button,
.xb-keypad button,
.xb-pay-submit,
.xb-result-back {
  appearance: none;
  border: 0;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.xb-quick-amounts button {
  min-width: 0;
  height: 38px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: #98a2b0;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 80ms ease;
}

.xb-quick-amounts button:hover {
  border-color: rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.065);
  color: #d7dee7;
}

.xb-quick-amounts button.is-selected.is-alipay {
  border-color: rgba(22, 119, 255, 0.74);
  background: rgba(22, 119, 255, 0.15);
  color: #79adff;
  box-shadow: 0 0 16px rgba(22, 119, 255, 0.15);
}

.xb-quick-amounts button.is-selected.is-wechat {
  border-color: rgba(7, 193, 96, 0.68);
  background: rgba(7, 193, 96, 0.13);
  color: #69daa1;
  box-shadow: 0 0 16px rgba(7, 193, 96, 0.13);
}

.xb-quick-amounts button:active,
.xb-payment-methods button:active,
.xb-keypad button:active {
  transform: scale(0.96);
}

.xb-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
}

.xb-keypad button {
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.065);
  color: #e6ebf2;
  font-size: 18px;
  font-weight: 650;
  transition: transform 80ms ease, background-color 80ms ease, border-color 80ms ease;
}

.xb-keypad button:hover {
  border-color: rgba(102, 161, 255, 0.16);
  background: rgba(102, 161, 255, 0.09);
}

.xb-keypad button.is-backspace {
  color: #7d8998;
  background: rgba(255, 255, 255, 0.085);
}

.xb-keypad button.is-backspace svg {
  width: 20px;
  height: 20px;
  margin: auto;
  stroke-width: 1.8;
}

.xb-payment-section {
  display: grid;
  gap: 12px;
  padding: 15px 16px 16px;
}

.xb-payment-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.xb-payment-methods button {
  min-width: 0;
  min-height: 100px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: #bac3ce;
  transition: transform 90ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.xb-payment-methods button:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.045);
}

.xb-payment-methods button.is-selected.is-alipay {
  border-color: rgba(22, 119, 255, 0.76);
  background: rgba(22, 119, 255, 0.12);
  box-shadow: 0 0 22px rgba(22, 119, 255, 0.13), inset 0 0 0 1px rgba(22, 119, 255, 0.12);
}

.xb-payment-methods button.is-selected.is-wechat {
  border-color: rgba(7, 193, 96, 0.72);
  background: rgba(7, 193, 96, 0.11);
  box-shadow: 0 0 22px rgba(7, 193, 96, 0.12), inset 0 0 0 1px rgba(7, 193, 96, 0.1);
}

.xb-pay-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
}

.xb-pay-logo img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}

.xb-pay-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
}

.xb-pay-copy strong {
  overflow: hidden;
  color: #dbe1e8;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xb-pay-copy small {
  color: #6f7b8a;
  font-size: 10px;
}

.xb-payment-methods button > i {
  width: 17px;
  height: 17px;
  position: absolute;
  top: 9px;
  right: 9px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
}

.xb-payment-methods button.is-selected > i::after {
  content: "";
  width: 4px;
  height: 8px;
  position: absolute;
  left: 5px;
  top: 2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.xb-payment-methods button.is-selected.is-alipay > i {
  border-color: var(--xb-alipay);
  background: var(--xb-alipay);
  box-shadow: 0 0 12px rgba(22, 119, 255, 0.45);
}

.xb-payment-methods button.is-selected.is-wechat > i {
  border-color: var(--xb-wechat);
  background: var(--xb-wechat);
  box-shadow: 0 0 12px rgba(7, 193, 96, 0.42);
}

.xb-pay-submit {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.075);
  color: #687382;
  font-size: 14px;
  font-weight: 700;
  transition: transform 100ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.xb-pay-submit.is-ready.is-alipay {
  background: var(--xb-alipay);
  color: #fff;
  box-shadow: 0 9px 28px rgba(22, 119, 255, 0.27);
}

.xb-pay-submit.is-ready.is-wechat {
  background: var(--xb-wechat);
  color: #fff;
  box-shadow: 0 9px 28px rgba(7, 193, 96, 0.23);
}

.xb-pay-submit.is-ready:hover {
  filter: brightness(1.06);
}

.xb-pay-submit.is-ready:active {
  transform: translateY(1px);
}

.xb-pay-submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.xb-cashier-page button:focus-visible,
.xb-cashier-page input:focus-visible {
  outline: 2px solid #66a1ff;
  outline-offset: 2px;
}

.xb-cashier-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, 0.27);
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.22);
  color: #ff8a92;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.xb-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #5f6b79;
  font-size: 10px;
  line-height: 18px;
}

.xb-secure-note svg {
  width: 12px;
  height: 12px;
  color: #647181;
}

.xb-state-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
}

.xb-cashier-loading {
  gap: 12px;
  color: #8792a1;
  font-size: 13px;
}

.xb-cashier-loading p,
.xb-cashier-empty p {
  margin: 0;
}

.xb-cashier-empty {
  gap: 11px;
}

.xb-cashier-empty h2 {
  margin: 4px 0 0;
  color: #e7ebf1;
  font-size: 18px;
}

.xb-cashier-empty p {
  color: #7b8796;
  font-size: 13px;
}

.xb-cashier-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: #66a1ff;
  border-radius: 50%;
  animation: xb-cashier-spin 700ms linear infinite;
}

.xb-cashier-result {
  min-height: 500px;
  justify-content: flex-start;
}

.xb-result-mark {
  width: 62px;
  height: 62px;
  position: relative;
  flex: 0 0 auto;
  margin-top: 48px;
  border-radius: 50%;
  background: rgba(102, 161, 255, 0.13);
}

.xb-result-mark::after {
  content: "";
  position: absolute;
  inset: 19px;
  border: solid #66a1ff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) translate(-2px, -3px);
}

.xb-result-mark.is-success {
  background: rgba(7, 193, 96, 0.14);
  box-shadow: 0 0 28px rgba(7, 193, 96, 0.12);
}

.xb-result-mark.is-success::after {
  border-color: #42d68a;
}

.xb-result-mark.is-danger {
  background: rgba(239, 68, 68, 0.14);
}

.xb-result-mark.is-danger::after {
  inset: 22px 28px;
  border-width: 0 3px 0 0;
  border-color: #ff747e;
  transform: rotate(45deg);
}

.xb-cashier-result h2 {
  margin: 17px 0 0;
  color: #eef2f7;
  font-size: 20px;
}

.xb-result-channel {
  margin: 6px 0 0;
  color: #778393;
  font-size: 12px;
}

.xb-result-amount {
  margin: 22px 0 0;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 38px;
  font-weight: 750;
}

.xb-result-number {
  max-width: 100%;
  overflow: hidden;
  margin: 9px 0 34px;
  color: #657080;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xb-cashier-result .xb-pay-submit,
.xb-result-back {
  width: 100%;
  max-width: 340px;
}

.xb-cashier-processing {
  --xb-process-accent: var(--xb-alipay);
  min-height: 560px;
  justify-content: flex-start;
  padding: 30px 28px 24px;
  overflow: hidden;
}

.xb-cashier-processing.is-wechat {
  --xb-process-accent: var(--xb-wechat);
}

.xb-processing-kicker {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(22, 119, 255, 0.45);
  border-radius: 12px;
  background: rgba(22, 119, 255, 0.12);
  color: #72aaff;
  font-size: 11px;
  font-weight: 700;
}

.xb-cashier-processing.is-wechat .xb-processing-kicker {
  border-color: rgba(7, 193, 96, 0.43);
  background: rgba(7, 193, 96, 0.12);
  color: #60d497;
}

.xb-cashier-processing h2 {
  margin: 18px 0 0;
  color: #f3f6fa;
  font-size: 21px;
  line-height: 1.35;
}

.xb-processing-copy {
  min-height: 20px;
  margin: 7px 0 0;
  color: #8d98a7;
  font-size: 12px;
  line-height: 20px;
}

.xb-order-countdown {
  width: 148px;
  height: 148px;
  position: relative;
  flex: 0 0 148px;
  margin-top: 25px;
}

.xb-order-countdown svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: rotate(-90deg);
}

.xb-order-countdown circle {
  fill: none;
  stroke-width: 7;
}

.xb-countdown-track {
  stroke: rgba(255, 255, 255, 0.09);
}

.xb-countdown-progress {
  stroke: var(--xb-process-accent);
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(22, 119, 255, 0.45));
  transition: stroke-dashoffset 900ms linear;
}

.xb-cashier-processing.is-wechat .xb-countdown-progress {
  filter: drop-shadow(0 0 8px rgba(7, 193, 96, 0.42));
}

.xb-countdown-value {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.xb-countdown-value strong {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 48px;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.xb-countdown-value small {
  min-height: 17px;
  margin-top: 6px;
  color: #7f8b9a;
  font-size: 11px;
  line-height: 17px;
}

.xb-processing-summary {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  border-block: 1px solid rgba(255, 255, 255, 0.09);
}

.xb-processing-summary > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 14px 10px;
}

.xb-processing-summary > span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.xb-processing-summary small {
  color: #707c8b;
  font-size: 10px;
}

.xb-processing-summary strong {
  overflow: hidden;
  color: #e8edf3;
  font-size: 14px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xb-processing-order {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 18px 0 4px;
  color: #697585;
}

.xb-processing-order span {
  font-size: 10px;
}

.xb-processing-order code {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #aab4c1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

.xb-cashier-processing > .xb-secure-note {
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
}

.xb-result-back {
  min-height: 42px;
  margin: 9px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.055);
  color: #8b96a4;
  font-size: 13px;
}

@keyframes xb-cashier-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .xb-cashier-brand {
    min-height: 60px;
    padding-inline: 12px;
  }

  .xb-cashier-brand h1 {
    font-size: 14px;
  }

  .xb-cashier-shell {
    padding: 10px 10px max(20px, env(safe-area-inset-bottom));
  }

  .xb-cashier-form {
    gap: 10px;
  }

  .xb-amount-section,
  .xb-product-section,
  .xb-payment-section {
    padding: 13px 14px 14px;
  }

  .xb-amount-input-wrap {
    min-height: 65px;
  }

  .xb-amount-input-wrap input {
    height: 58px;
    font-size: 39px;
    line-height: 58px;
  }

  .xb-quick-amounts {
    gap: 6px;
    margin-top: 11px;
  }

  .xb-quick-amounts button {
    height: 36px;
    font-size: 11px;
  }

  .xb-keypad {
    gap: 5px;
    padding: 9px;
  }

  .xb-keypad button {
    height: 48px;
  }

  .xb-payment-methods button {
    min-height: 92px;
  }

  .xb-pay-logo,
  .xb-pay-logo img {
    width: 40px;
    height: 40px;
  }

  .xb-cashier-processing {
    min-height: calc(100dvh - 91px);
    padding: 26px 20px 21px;
  }

  .xb-order-countdown {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
    margin-top: 22px;
  }

  .xb-countdown-value strong {
    font-size: 44px;
  }

}

@media (max-width: 350px) {
  .xb-quick-amounts {
    gap: 4px;
  }

  .xb-quick-amounts button {
    padding: 0 2px;
    font-size: 10px;
  }

  .xb-keypad button {
    height: 45px;
  }

  .xb-payment-methods button {
    min-height: 86px;
  }

  .xb-cashier-processing {
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xb-cashier-spinner {
    animation: none;
  }

  .xb-progress-fill,
  .xb-quick-amounts button,
  .xb-payment-methods button,
  .xb-keypad button,
  .xb-pay-submit {
    transition: none;
  }

  .xb-countdown-progress {
    transition: none;
  }

}

/* 单支付方式适配：扫码环境只展示一种支付方式时，卡片限宽整体居中、图标放大 */
.xb-payment-methods.is-single,
.xb-payment-methods:has(> button:only-child) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.xb-payment-methods.is-single button,
.xb-payment-methods button:only-child {
  width: min(100%, 320px);
  min-height: 118px;
  justify-content: center;
}

.xb-payment-methods.is-single .xb-pay-logo,
.xb-payment-methods.is-single .xb-pay-logo img,
.xb-payment-methods button:only-child .xb-pay-logo,
.xb-payment-methods button:only-child .xb-pay-logo img {
  width: 56px;
  height: 56px;
}

@media (max-width: 600px) {
  .xb-payment-methods.is-single button,
  .xb-payment-methods button:only-child {
    width: min(100%, 300px);
    min-height: 110px;
  }

  .xb-payment-methods.is-single .xb-pay-logo,
  .xb-payment-methods.is-single .xb-pay-logo img,
  .xb-payment-methods button:only-child .xb-pay-logo,
  .xb-payment-methods button:only-child .xb-pay-logo img {
    width: 48px;
    height: 48px;
  }
}