/* Checkout-only responsive form, order summary, payment and city dialog. */
:root {
  --checkout-summary-width: 420px;
  --checkout-item-image: 62px;
  --checkout-icon: 24px;
  --checkout-step-size: 28px;
  --checkout-city-width: 520px;
  --checkout-total-font: 1.35rem;
  --checkout-label-size: 0.92rem;
}
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--checkout-summary-width);
  gap: var(--space-8);
  align-items: start;
}
.checkout-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-7);
}
.checkout-mode-tabs button {
  padding: var(--space-5) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  border: var(--space-0);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-0);
}
.checkout-mode-tabs button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.checkout-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.checkout-fields > div:first-child {
  grid-column: 1/-1;
}
.checkout-fields .field-icon {
  margin-bottom: var(--space-3);
}
.checkout-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  margin-top: var(--space-5);
}
.checkout-step h3 {
  font-size: var(--font-lead);
  font-family: var(--font-body);
  margin: var(--space-0);
  font-weight: var(--weight-strong);
}
.checkout-step > span {
  width: var(--checkout-step-size);
  height: var(--checkout-step-size);
  display: grid;
  place-items: center;
  border: var(--border-width) solid var(--color-border);
  font-size: var(--font-xs);
}
.delivery-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.delivery-options label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-4);
  cursor: pointer;
  font-size: var(--checkout-label-size);
}
.delivery-options label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.delivery-options input,
.payment-choice input {
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.delivery-options small {
  display: block;
  font-size: var(--font-xs);
  color: var(--color-muted);
  margin-top: var(--space-1);
}
.checkout-location-note,
.checkout-currency-note,
.checkout-secure {
  font-size: var(--font-xs);
  line-height: 1.8;
  color: var(--color-muted);
  margin-block: var(--space-4);
}
.checkout-summary {
  position: sticky;
  top: var(--space-6);
}
.checkout-summary > h2 {
  font-size: var(--font-h3);
}
.checkout-summary-item {
  display: grid;
  grid-template-columns: var(--checkout-item-image) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  border-bottom: var(--border-width) solid var(--color-border);
  padding-block: var(--space-4);
  font-size: var(--font-small);
}
.checkout-summary-item img {
  width: var(--checkout-item-image);
  height: 80px;
  object-fit: cover;
}
.checkout-summary-item h3 {
  font-family: var(--font-body);
  font-size: var(--font-small);
  font-weight: var(--weight-strong);
  margin-bottom: var(--space-1);
}
.checkout-summary-item small {
  font-size: var(--font-xs);
  line-height: 1.6;
  color: var(--color-muted);
}
.checkout-summary-item > strong {
  font-size: var(--font-xs);
  white-space: nowrap;
}
.checkout-totals {
  margin-block: var(--space-5);
}
.checkout-totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font-size: var(--font-small);
}
.summary-shipping-location {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.checkout-totals .checkout-total {
  font-size: var(--checkout-total-font);
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
}
.coupon-row {
  display: flex;
  gap: var(--space-2);
}
.coupon-row .field-icon {
  flex: 1;
  min-width: var(--width-control-min);
  margin: var(--space-0);
  padding-inline: var(--space-3);
}
.coupon-row button {
  padding-inline: var(--space-4);
  font-size: var(--font-xs);
  min-height: var(--height-button);
}
.payment-methods {
  border: var(--space-0);
  padding: var(--space-0);
  margin: var(--space-6) var(--space-0);
}
.payment-methods legend {
  font-size: var(--font-small);
  font-weight: var(--weight-strong);
  margin-bottom: var(--space-4);
}
.payment-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  margin-bottom: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  cursor: pointer;
  font-size: var(--font-small);
}
.payment-choice:has(input:checked) {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.payment-choice:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
.payment-choice > i {
  font-size: var(--checkout-icon);
  width: var(--checkout-icon);
}
.payment-choice small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-xxs);
  color: var(--color-muted);
}
.checkout-pay {
  width: var(--width-fluid);
}
.checkout-agreement {
  line-height: 1.8;
  font-size: var(--font-xs);
}
#checkoutSignIn {
  margin-bottom: var(--space-6);
}
#checkoutSignIn .luxury-button {
  width: var(--width-fluid);
}
.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-small);
  margin-top: var(--space-5);
}
.city-dialog {
  max-width: var(--checkout-city-width);
}
.city-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}
.city-modal-header h2 {
  font-size: var(--font-h3);
  margin-bottom: var(--space-0);
}
.city-modal-header .eyebrow {
  font-size: var(--font-xs);
  margin-bottom: var(--space-3);
}
#cityForm {
  padding: var(--space-6);
}
#cityForm .luxury-button {
  width: var(--width-fluid);
}
@media (max-width: 1199.98px) {
  :root {
    --checkout-summary-width: 360px;
  }
  .checkout-layout {
    gap: var(--space-6);
  }
  .checkout-summary {
    padding: var(--space-5);
  }
  .delivery-options {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991.98px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .checkout-summary {
    position: static;
  }
  .delivery-options {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 575.98px) {
  .checkout-fields,
  .delivery-options {
    grid-template-columns: 1fr;
  }
  .checkout-mode-tabs button {
    font-size: var(--font-xs);
  }
  .checkout-summary-item {
    gap: var(--space-2);
  }
  .city-modal-header,
  #cityForm {
    padding: var(--space-5);
  }
}

/* Layout-only luxury checkout refinement. Desktop columns are precisely 6:4. */
:root {
  --checkout-heading-size: 3rem;
  --checkout-summary-weight: 600;
  --checkout-total-weight: 700;
  --checkout-payment-icon: 21px;
  --checkout-small-link: 0.72rem;
  --checkout-summary-fill: var(--color-surface);
}
.checkout-layout {
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--space-8);
}
.checkout-main > .page-heading {
  font-size: var(--checkout-heading-size);
  margin-bottom: var(--space-7);
}
.checkout-mode-tabs {
  margin-bottom: var(--space-6);
}
.checkout-summary {
  background: var(--checkout-summary-fill);
  box-shadow: none;
  border-top: var(--border-focus) solid var(--color-primary);
  padding: var(--space-7);
}
.checkout-summary > .eyebrow {
  font-size: var(--font-xs);
  font-weight: var(--checkout-summary-weight);
  margin-bottom: var(--space-4);
}
.checkout-summary > h2 {
  font-size: var(--font-h3);
  margin-bottom: var(--space-2);
}
.checkout-currency-note {
  margin-top: var(--space-0);
  margin-bottom: var(--space-7);
}
.checkout-totals {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-4);
  margin-block: var(--space-0) var(--space-6);
}
.checkout-totals > div {
  font-size: var(--font-body-size);
  font-weight: var(--checkout-summary-weight);
  padding-block: var(--space-4);
}
.checkout-totals strong {
  font-weight: var(--checkout-total-weight);
}
.checkout-totals .checkout-total {
  font-size: var(--checkout-total-font);
  font-weight: var(--checkout-total-weight);
  padding-top: var(--space-6);
}
.summary-shipping-location {
  margin-bottom: var(--space-4);
  font-weight: var(--weight-medium);
}
.coupon-row .field-icon {
  background: var(--color-bg);
}
.payment-methods {
  margin-block: var(--space-7);
}
.payment-methods legend {
  font-size: var(--font-body-size);
  font-weight: var(--checkout-summary-weight);
  margin-bottom: var(--space-3);
}
.payment-choice {
  border: var(--space-0);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-4) var(--space-0);
  gap: var(--space-4);
  margin: var(--space-0);
  background: transparent;
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
}
.payment-choice:has(input:checked) {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-primary);
}
.payment-choice > i {
  font-size: var(--checkout-payment-icon);
  width: var(--checkout-payment-icon);
  color: var(--color-text);
}
.payment-choice small {
  display: none;
}
.payment-choice input {
  width: 16px;
  height: 16px;
  margin: var(--space-0);
}
.missing-city-link {
  display: inline-block;
  font-size: var(--checkout-small-link);
  color: var(--color-muted);
  line-height: 1.7;
  padding: var(--space-0);
  margin-top: var(--space-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  border: var(--space-0);
  background: transparent;
}
.missing-city-link:hover {
  color: var(--color-primary);
}
.checkout-agreement {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-5);
}
.checkout-secure {
  text-align: center;
  line-height: 1.8;
}
.checkout-pay {
  margin-top: var(--space-3);
}
@media (max-width: 991.98px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .checkout-summary {
    position: static;
  }
}
@media (max-width: 575.98px) {
  :root {
    --checkout-heading-size: 2.35rem;
  }
  .checkout-summary {
    padding: var(--space-5);
  }
  .payment-choice {
    padding-block: var(--space-4);
  }
}

/* Checkout columns now use the same page background. */
.checkout-main > .page-panel,
.checkout-summary {
  background: var(--color-bg);
  box-shadow: none;
}
/* Checkout-only refinements: clean 6:4 layout and shared page background. */
:root{--checkout-micro-size:.73rem;--checkout-summary-rule:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg));--checkout-coupon-height:48px;--checkout-coupon-label:.8rem;--checkout-summary-heading:1.9rem;--checkout-summary-bold:600;--checkout-total-size:1.55rem}
.checkout-layout{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
.checkout-summary{min-width:var(--space-0);background:var(--color-transparent);box-shadow:none;border:var(--space-0);padding:var(--space-0) var(--space-0) var(--space-0) var(--space-7)}
.checkout-summary>h2{font-family:var(--font-heading);font-size:var(--checkout-summary-heading);margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:var(--border-width) solid var(--checkout-summary-rule)}
.checkout-summary-lines{gap:var(--space-4);margin:var(--space-0)}
.checkout-summary-lines dt,.checkout-summary-lines dd{font-size:var(--font-base,1rem);font-weight:var(--checkout-summary-bold);margin:var(--space-0)}
.checkout-summary-lines dd{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.checkout-summary-lines .checkout-total{padding-top:var(--space-5);margin-top:var(--space-2);border-top:var(--border-width) solid var(--checkout-summary-rule)}
.checkout-summary-lines .checkout-total dt,.checkout-summary-lines .checkout-total dd{font-size:var(--checkout-total-size);font-weight:var(--checkout-summary-bold)}
.checkout-location{font-size:var(--font-xs);color:var(--color-muted);line-height:1.65;margin:var(--space-4) var(--space-0) var(--space-0);padding-bottom:var(--space-5);border-bottom:var(--border-width) solid var(--checkout-summary-rule)}
.coupon-form{padding:var(--space-5) var(--space-0);margin:var(--space-0);border-bottom:var(--border-width) solid var(--checkout-summary-rule)}
.coupon-form>label{display:block;font-size:var(--checkout-coupon-label);font-weight:var(--weight-strong);margin-bottom:var(--space-3)}
.coupon-input-row{display:flex;gap:var(--space-2);align-items:stretch}
.coupon-input-field{flex:1;min-width:var(--space-0);display:flex;align-items:center;gap:var(--space-2);border:var(--border-width) solid var(--color-border);padding:var(--space-0) var(--space-3);background:var(--color-transparent)}
.coupon-input-field:focus-within{border-color:var(--color-primary)}
.coupon-input-field>i{color:var(--color-muted);flex-shrink:0}
.coupon-input-field input{width:100%;min-width:var(--space-0);min-height:var(--checkout-coupon-height);border:var(--space-0);background:var(--color-transparent);padding:var(--space-0);border-radius:var(--radius-input,0);box-shadow:none}
.coupon-input-row .luxury-button{padding-inline:var(--space-4);min-height:var(--checkout-coupon-height)}
#couponResponse{font-size:var(--font-xs);margin:var(--space-2) var(--space-0) var(--space-0);overflow-wrap:anywhere}
.missing-city-text,.checkout-fields .missing-city-text{display:inline;font-family:var(--font-body);font-size:var(--checkout-micro-size);font-weight:var(--weight-body);line-height:1.4;color:var(--color-muted);background:none;border:var(--space-0);border-radius:var(--radius-button,0);padding:var(--space-0);margin:var(--space-2) var(--space-0) var(--space-0);min-height:var(--space-0);box-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.missing-city-text:hover{color:var(--color-primary)}
.payment-methods{border:var(--space-0);margin:var(--space-0);padding:var(--space-5) var(--space-0)}
.payment-methods legend{font-size:var(--font-base,1rem);font-weight:var(--weight-strong);margin-bottom:var(--space-3)}
.payment-choice{background:var(--color-transparent);border:var(--space-0);border-bottom:var(--border-width) solid var(--checkout-summary-rule);padding:var(--space-3) var(--space-0);margin:var(--space-0);border-radius:var(--radius-input,0);box-shadow:none;display:flex;align-items:center;gap:var(--space-3)}
.payment-choice:last-child{border-bottom:var(--space-0)}
.checkout-agreement{font-size:var(--font-xs);align-items:flex-start;line-height:1.6;margin-bottom:var(--space-4)}
.checkout-secure{font-size:var(--font-xs);color:var(--color-muted);line-height:1.65}
@media(max-width:991.98px){.checkout-layout{grid-template-columns:minmax(0,1fr)}.checkout-summary{padding:var(--space-6) var(--space-0) var(--space-0);border-top:var(--border-width) solid var(--checkout-summary-rule)}}