/* Checkout groups keep the existing single-column phone flow. */
.shop-topup-fields,
.shop-topup-summary { display: contents; }

/* Keep the phone controls identical after grouping the desktop summary. */
@media (max-width: 600px) {
 .shop-topup-fields > label { margin: 10px 0 5px; font-size: 12px; }
 .shop-topup-summary > .shop-note { margin: 5px 0 8px; line-height: 1.4; }
 .shop-topup-summary > .shop-primary {
  position: static; width: 100%; max-width: none; margin: 8px 0 0;
  min-height: 46px; padding: 11px 12px; font-size: 14px;
  border-radius: 14px; box-shadow: 0 4px 12px #7425c924; z-index: 60;
 }
}
@media (max-width: 600px) and (max-height: 740px) {
 .shop:has(.shop-topup-summary > .shop-primary) { padding-bottom: 66px; }
 .shop-topup-summary > .shop-primary {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100% - 24px);
  margin: 0; border-radius: 16px;
  box-shadow: 0 0 0 7px #f8f4ff, 0 4px 14px #6429a326;
 }
}

@media (min-width: 960px) {
 .shop { background: #f8f5fc; }
 .shop::before, .shop::after { display: none; }
 .shop .shop-nav {
  max-width: 1080px; min-height: 88px; padding: 20px 32px;
  border-bottom: 1px solid #e9e1f0;
 }
 .shop .shop-nav-right { gap: 16px; }
 .shop .shop-nav-right > span { font-size: 13px; }
 .shop .shop-main {
  max-width: 1080px; margin: 0 auto; padding: 36px 32px 32px;
 }
 .shop .shop-card {
  padding: 30px 32px 26px; border: 1px solid #e7deef;
  border-radius: 20px; background: #fff; backdrop-filter: none;
  box-shadow: 0 6px 24px #40215e08;
 }
 .shop .shop-card-top { margin-bottom: 20px; }
 .shop .shop-eastel { font-size: 23px; }
 .shop .shop-chip { font-size: 10px; padding: 7px 10px; }
 .shop .shop-steps {
  justify-content: flex-start; gap: 42px; margin-bottom: 25px; padding-bottom: 22px;
 }
 .shop .shop-step { font-size: 12px; gap: 9px; }
 .shop .shop-step > span { width: 27px; height: 27px; font-size: 11px; }
 .shop .shop-card h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.8px; }
 .shop .shop-subtitle { margin: 8px 0 25px; font-size: 14px; }
 .shop .shop-topup-form {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .9fr);
  gap: 36px; align-items: start;
 }
 .shop .shop-topup-fields { display: block; min-width: 0; }
 .shop .shop-topup-fields > label { font-size: 13px; margin: 0 0 9px; }
 .shop .shop-topup-fields > label > span { font-size: 11px; }
 .shop .shop-phone { min-height: 54px !important; border-radius: 12px !important; }
 .shop .shop-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.55; }
 .shop .shop-promo {
  padding: 11px 13px; margin: 18px 0 23px; border-radius: 10px;
  font-size: 12px; line-height: 1.55; background: #f7f2fe;
 }
 .shop .shop-amounts { gap: 10px !important; margin-bottom: 12px; }
 .shop .shop-amounts button {
  min-height: 60px; padding: 16px 8px; border-radius: 12px !important; font-size: 16px;
 }
 .shop .shop-custom { min-height: 48px !important; height: 48px !important; border-radius: 12px !important; }
 .shop .shop-topup-summary {
  display: block; min-width: 0; padding: 22px;
  border: 1px solid #e9e0f3; border-radius: 14px; background: #fcfaff;
 }
 .shop .shop-topup-summary .shop-summary {
  margin: 0 0 16px; padding: 0 0 18px; background: none;
  border-radius: 0; border-bottom: 1px solid #e8dff2; font-size: 14px;
 }
 .shop .shop-topup-summary .shop-summary strong { font-size: 30px; }
 .shop .shop-topup-summary .shop-bonus-preview {
  margin: 0 0 16px; padding: 13px; gap: 7px; border-radius: 10px;
 }
 .shop .shop-topup-summary .shop-bonus-preview > div { font-size: 13px; gap: 8px; }
 .shop .shop-topup-summary .shop-bonus-preview strong { font-size: 25px; white-space: nowrap; }
 .shop .shop-topup-summary .shop-bonus-preview small { font-size: 11px; line-height: 1.5; }
 .shop .shop-topup-summary .shop-passport-note {
  margin: 0 0 15px; padding: 10px 11px; background: #f5f0fa; font-size: 11px; line-height: 1.6;
 }
 .shop .shop-topup-summary > .shop-note { margin: 0 0 13px; font-size: 12px; line-height: 1.55; }
 .shop .shop-topup-summary .shop-primary {
  min-height: 50px; padding: 14px 12px; border-radius: 11px; font-size: 14px;
  background: #7c21d3; box-shadow: 0 3px 10px #7925c51a;
 }
 .shop .shop-topup-summary .shop-primary:hover:not(:disabled) { background: #6d19bf; }
 .shop .shop-bottom-note { margin: 22px 0 0; font-size: 11px; }
 .shop .shop-footer {
  width: calc(100% - 64px); max-width: 1016px; margin: 0 auto; padding: 20px 0 28px; gap: 8px;
  border-top: 1px solid #e9e1f0; font-size: 11px;
 }
 /* Payment and receipt states have a separate, comfortable reading width. */
 .shop .shop-main:has(.shop-order-details) { max-width: 680px; }
 .shop .shop-card:has(.shop-order-details) .shop-steps { justify-content: space-between; gap: 16px; }
 .shop .shop-order-details > div { padding: 15px 17px; font-size: 14px; }
 .shop .shop-order-details .shop-credit dd { font-size: 25px; }
 .shop .shop-order-id { font-size: 12px; }
 .shop .shop-state-heading .shop-subtitle { font-size: 14px; line-height: 1.65; }
 .shop .shop-cancel { font-size: 13px; }
}