/**
 * wcms.css — Estilos del plugin WC Multi Shipping Addresses.
 *
 * Paleta de variables CSS que respeta los colores del tema activo cuando existen.
 * Compatible con Divi y temas WooCommerce estándar.
 *
 * @package WC_Multi_Shipping
 */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  /* Hereda los tokens de Rodio theme cuando están disponibles */
  --wcms-primary:        var(--rodio-teal,    #00B3A6);
  --wcms-primary-hover:  var(--rodio-teal-dk, #00968b);
  --wcms-primary-light:  var(--rodio-teal-lt, #e6f7f6);
  --wcms-danger:         #dc2626;
  --wcms-danger-hover:   #b91c1c;
  --wcms-success:        #16a34a;
  --wcms-warning:        #d97706;
  --wcms-gray-50:        var(--rodio-gray-50,  #f9fafb);
  --wcms-gray-100:       var(--rodio-gray-100, #f3f4f6);
  --wcms-gray-200:       var(--rodio-gray-200, #e5e7eb);
  --wcms-gray-400:       var(--rodio-gray-400, #9ca3af);
  --wcms-gray-600:       var(--rodio-gray-600, #4b5563);
  --wcms-gray-800:       var(--rodio-gray-900, #111827);
  --wcms-radius:         10px;
  --wcms-radius-sm:      6px;
  --wcms-shadow:         0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --wcms-shadow-md:      0 4px 16px rgba(0,0,0,.12);
  --wcms-shadow-lg:      0 10px 40px rgba(0,0,0,.18);
  --wcms-transition:     .18s ease;
  --wcms-font:           inherit;
  --wcms-border:         1px solid var(--wcms-gray-200);
}

/* ── Reset básico ──────────────────────────────────────────────────────── */
.wcms-myaccount *,
.wcms-checkout-selector *,
.wcms-modal * {
  box-sizing: border-box;
}

/* ── My Account: header ─────────────────────────────────────────────────── */
.wcms-myaccount__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.wcms-myaccount__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wcms-gray-800);
  margin: 0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.wcms-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--wcms-gray-400);
}

.wcms-empty-state p {
  margin: 0;
  font-size: 1rem;
}

/* ── Grid de cards ──────────────────────────────────────────────────────── */
.wcms-addresses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* ── Address card ───────────────────────────────────────────────────────── */
.wcms-address-card {
  position: relative;
  background: #fff;
  border: var(--wcms-border);
  border-radius: var(--wcms-radius);
  padding: 1.25rem;
  box-shadow: var(--wcms-shadow);
  transition: box-shadow var(--wcms-transition), transform var(--wcms-transition);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.wcms-address-card:hover {
  box-shadow: var(--wcms-shadow-md);
  transform: translateY(-2px);
}

.wcms-address-card--default {
  border-color: var(--wcms-primary);
  border-width: 2px;
}

.wcms-address-card__badge {
  position: absolute;
  top: -1px;
  right: 1rem;
}

.wcms-address-card__alias {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  color: var(--wcms-gray-800);
}

.wcms-address-card__alias svg {
  color: var(--wcms-primary);
  flex-shrink: 0;
}

.wcms-address-card__body {
  font-style: normal;
  font-size: .875rem;
  color: var(--wcms-gray-600);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
}

.wcms-address-card__name {
  font-weight: 600;
  color: var(--wcms-gray-800);
}

.wcms-address-card__notes {
  font-size: .8rem;
  color: var(--wcms-gray-400);
}

.wcms-address-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-top: var(--wcms-border);
  padding-top: .75rem;
  margin-top: auto;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.wcms-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wcms-badge--default {
  background: var(--wcms-primary);
  color: #fff;
}

.wcms-badge--sm {
  font-size: .65rem;
  padding: .15rem .5rem;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.wcms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: var(--wcms-radius-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background var(--wcms-transition), color var(--wcms-transition),
              opacity var(--wcms-transition), box-shadow var(--wcms-transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--wcms-font);
}

.wcms-btn:disabled,
.wcms-btn--loading {
  opacity: .65;
  cursor: not-allowed;
  pointer-events: none;
}

.wcms-btn--primary {
  background: var(--wcms-primary);
  color: #fff;
}
.wcms-btn--primary:hover {
  background: var(--wcms-primary-hover);
  color: #fff;
}

.wcms-btn--outline {
  background: transparent;
  color: var(--wcms-primary);
  border: 2px solid var(--wcms-primary);
}
.wcms-btn--outline:hover {
  background: var(--wcms-primary);
  color: #fff;
}

.wcms-btn--ghost {
  background: var(--wcms-gray-100);
  color: var(--wcms-gray-800);
}
.wcms-btn--ghost:hover {
  background: var(--wcms-gray-200);
}

.wcms-btn--danger {
  background: transparent;
  color: var(--wcms-danger);
  border: 1px solid var(--wcms-gray-200);
}
.wcms-btn--danger:hover {
  background: var(--wcms-danger);
  color: #fff;
  border-color: var(--wcms-danger);
}

.wcms-btn--sm {
  padding: .35rem .75rem;
  font-size: .8rem;
}

/* Spinner dentro del botón */
.wcms-btn__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: wcms-spin .6s linear infinite;
}

.wcms-btn--loading .wcms-btn__spinner { display: inline-block; }
.wcms-btn--loading .wcms-btn__label   { opacity: .5; }

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

/* ── Modal ──────────────────────────────────────────────────────────────── */
.wcms-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.wcms-modal[hidden] {
  display: none;
}

.wcms-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.wcms-modal__container {
  position: relative;
  background: #fff;
  border-radius: var(--wcms-radius);
  box-shadow: var(--wcms-shadow-lg);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
  animation: wcms-modal-in .2s ease;
}

@keyframes wcms-modal-in {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.wcms-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: var(--wcms-border);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.wcms-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wcms-gray-800);
  margin: 0;
}

.wcms-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: .35rem;
  color: var(--wcms-gray-400);
  border-radius: var(--wcms-radius-sm);
  transition: color var(--wcms-transition), background var(--wcms-transition);
  line-height: 0;
  flex-shrink: 0;
}

.wcms-modal__close:hover {
  color: var(--wcms-gray-800);
  background: var(--wcms-gray-100);
}

.wcms-modal__body {
  padding: 1.5rem;
}

/* body overflow cuando el modal está abierto */
body.wcms-modal-open {
  overflow: hidden;
}

/* ── Formulario de dirección ─────────────────────────────────────────────── */
/*  Scope doble para ganar especificidad contra Divi y WooCommerce             */
.wcms-modal .wcms-address-form,
.wcms-address-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Separador visual entre secciones del formulario */
.wcms-form-section {
  display: contents; /* sigue el flujo flex del padre */
}

.wcms-form-section + .wcms-form-section > .wcms-form-row:first-child,
.wcms-form-divider {
  padding-top: .25rem;
  border-top: var(--wcms-border);
  margin-top: .15rem;
}

.wcms-modal .wcms-form-row,
.wcms-form-row {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.wcms-modal .wcms-form-row--half,
.wcms-form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.wcms-modal .wcms-form-row--thirds,
.wcms-form-row--thirds {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .85rem;
  align-items: start;
}

.wcms-modal .wcms-form-row--full,
.wcms-form-row--full {
  grid-column: 1 / -1;
}

.wcms-modal .wcms-form-row--actions,
.wcms-form-row--actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  padding-top: .75rem;
  border-top: var(--wcms-border);
  margin-top: .25rem;
}

.wcms-modal .wcms-form-group,
.wcms-form-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.wcms-modal .wcms-form-group--checkbox,
.wcms-form-group--checkbox {
  justify-content: flex-end;
  padding-bottom: .2rem;
}

/* Labels */
.wcms-modal .wcms-form-label,
.wcms-form-label {
  display: block;
  font-size: .75rem !important;
  font-weight: 600 !important;
  color: var(--wcms-gray-600) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wcms-required {
  color: var(--wcms-danger);
  margin-left: .15rem;
}

/* Inputs, selects y textareas                                               */
/* Usamos 'body .wcms-modal' para ganar especificidad sobre las reglas        */
/* de Divi que usan: input[type=text], select, textarea { padding: 2px; }     */
body .wcms-modal .wcms-form-input,
body .wcms-modal .wcms-form-select,
body .wcms-modal .wcms-form-textarea,
body .wcms-modal input[type="text"],
body .wcms-modal input[type="tel"],
body .wcms-modal input[type="email"],
body .wcms-modal select,
body .wcms-modal textarea,
.wcms-form-input,
.wcms-form-select,
.wcms-form-textarea {
  display: block !important;
  width: 100% !important;
  padding: .7rem 1rem !important;
  border: 1.5px solid var(--wcms-gray-200) !important;
  border-radius: var(--rodio-radius, 8px) !important;
  font-size: .9rem !important;
  font-family: inherit !important;
  color: var(--wcms-gray-800) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color var(--wcms-transition), box-shadow var(--wcms-transition) !important;
  line-height: 1.5 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body .wcms-modal .wcms-form-input:hover,
body .wcms-modal .wcms-form-select:hover,
body .wcms-modal .wcms-form-textarea:hover,
body .wcms-modal input[type="text"]:hover,
body .wcms-modal input[type="tel"]:hover,
body .wcms-modal select:hover,
body .wcms-modal textarea:hover,
.wcms-form-input:hover,
.wcms-form-select:hover,
.wcms-form-textarea:hover {
  border-color: var(--wcms-gray-400) !important;
}

.wcms-modal .wcms-form-input:focus,
body .wcms-modal .wcms-form-input:focus,
body .wcms-modal .wcms-form-select:focus,
body .wcms-modal .wcms-form-textarea:focus,
body .wcms-modal input[type="text"]:focus,
body .wcms-modal input[type="tel"]:focus,
body .wcms-modal select:focus,
body .wcms-modal textarea:focus,
.wcms-modal .wcms-form-input:focus,
.wcms-modal .wcms-form-select:focus,
.wcms-modal .wcms-form-textarea:focus,
.wcms-form-input:focus,
.wcms-form-select:focus,
.wcms-form-textarea:focus {
  outline: none !important;
  border-color: var(--wcms-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,179,166,.15) !important;
}

.wcms-modal .wcms-form-input.wcms-input--error,
.wcms-form-input.wcms-input--error {
  border-color: var(--wcms-danger) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important;
}

/* Restaurar flecha del select */
body .wcms-modal .wcms-form-select,
body .wcms-modal select,
.wcms-modal .wcms-form-select,
.wcms-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .85rem center !important;
  background-size: 14px !important;
  padding-right: 2.5rem !important;
  cursor: pointer !important;
}

.wcms-modal .wcms-form-textarea,
.wcms-form-textarea {
  resize: vertical !important;
  min-height: 72px !important;
}

/* Placeholder */
.wcms-form-input::placeholder,
.wcms-form-textarea::placeholder {
  color: var(--wcms-gray-400) !important;
  opacity: 1 !important;
}

/* Mensaje de error */
.wcms-modal .wcms-form-error,
.wcms-form-error {
  display: block;
  font-size: .75rem;
  color: var(--wcms-danger);
  min-height: 1em;
  line-height: 1.4;
}

/* Checkbox "predeterminar" */
.wcms-modal .wcms-form-checkbox,
.wcms-form-checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .875rem;
  color: var(--wcms-gray-600);
  line-height: 1.4;
  user-select: none;
}

.wcms-modal .wcms-form-checkbox input[type="checkbox"],
.wcms-form-checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  accent-color: var(--wcms-primary) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Checkout: selector de dirección ────────────────────────────────────── */
.wcms-checkout-selector {
  background: #fff;
  border: var(--wcms-border);
  border-radius: var(--wcms-radius);
  box-shadow: var(--wcms-shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.wcms-checkout-selector__header {
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: var(--wcms-border);
}

.wcms-checkout-selector__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wcms-gray-800);
  margin: 0;
}

.wcms-checkout-selector__title svg {
  color: var(--wcms-primary);
}

/* Scroll horizontal en pantallas pequeñas */
.wcms-checkout-cards {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}

.wcms-checkout-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 2px solid var(--wcms-gray-200);
  border-radius: var(--wcms-radius);
  cursor: pointer;
  transition: border-color var(--wcms-transition), box-shadow var(--wcms-transition),
              background var(--wcms-transition);
  background: var(--wcms-gray-50);
  min-width: 200px;
  flex: 1 1 200px;
  max-width: 280px;
}

.wcms-checkout-card:hover {
  border-color: var(--wcms-primary);
  background: var(--wcms-primary-light);
  box-shadow: 0 0 0 3px rgba(0,179,166,.12);
}

.wcms-checkout-card--selected {
  border-color: var(--wcms-primary);
  background: var(--wcms-primary-light);
  box-shadow: 0 0 0 3px rgba(0,179,166,.15);
}

.wcms-checkout-card__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.wcms-checkout-card__content {
  flex: 1;
  min-width: 0;
}

.wcms-checkout-card__top {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}

.wcms-checkout-card__alias {
  font-weight: 700;
  font-size: .9rem;
  color: var(--wcms-gray-800);
}

.wcms-checkout-card__address {
  font-style: normal;
  font-size: .8rem;
  color: var(--wcms-gray-600);
  line-height: 1.55;
  margin-top: .2rem;
  display: block;
}

.wcms-checkout-card__check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 2px solid var(--wcms-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--wcms-transition), background var(--wcms-transition);
  color: #fff;
  margin-top: .1rem;
}

.wcms-checkout-card--selected .wcms-checkout-card__check {
  background: var(--wcms-primary);
  border-color: var(--wcms-primary);
}

.wcms-checkout-card__edit-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wcms-gray-400);
  padding: .25rem;
  border-radius: var(--wcms-radius-sm);
  line-height: 0;
  transition: color var(--wcms-transition), background var(--wcms-transition);
}

.wcms-checkout-card__edit-btn:hover {
  color: var(--wcms-primary);
  background: rgba(0,179,166,.1);
}

.wcms-checkout-card__notes {
  display: flex;
  align-items: flex-start;
  gap: .3rem;
  font-size: .75rem;
  color: var(--wcms-gray-400);
  margin: .35rem 0 0;
  font-style: normal;
  line-height: 1.4;
}

.wcms-checkout-card__notes svg {
  flex-shrink: 0;
  margin-top: .1rem;
}

.wcms-checkout-selector__empty {
  padding: .75rem 0;
  color: var(--wcms-gray-400);
  font-size: .9rem;
}

.wcms-checkout-selector__footer {
  margin-bottom: .75rem;
}

.wcms-checkout-selector__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: .75rem 0 0;
  color: var(--wcms-gray-400);
  font-size: .82rem;
}

.wcms-checkout-selector__divider::before,
.wcms-checkout-selector__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wcms-gray-200);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.wcms-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100000;
  background: var(--wcms-gray-800);
  color: #fff;
  padding: .85rem 1.25rem;
  border-radius: var(--wcms-radius);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--wcms-shadow-md);
  max-width: 340px;
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.wcms-toast--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wcms-toast--success { background: var(--wcms-success); }
.wcms-toast--error   { background: var(--wcms-danger);  }
.wcms-toast--info    { background: var(--wcms-primary); }

/* ── Skeleton loader ────────────────────────────────────────────────────── */
@keyframes wcms-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

.wcms-skeleton {
  border-radius: var(--wcms-radius-sm);
  background: var(--wcms-gray-100);
  animation: wcms-skeleton-pulse 1.4s ease infinite;
}

.wcms-skeleton--form {
  height: 360px;
  width: 100%;
}

/* ── Admin: pedido ──────────────────────────────────────────────────────── */
.wcms-order-address-meta {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: var(--wcms-gray-50);
  border: var(--wcms-border);
  border-radius: var(--wcms-radius-sm);
}

.wcms-order-address-meta h4 {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wcms-gray-600);
  margin: 0 0 .5rem;
}

.wcms-order-address-meta p {
  margin: 0 0 .35rem;
  font-size: .875rem;
}

/* ── Checkout Blocks: ajuste de contexto ────────────────────────────────── */
/* El selector se inyecta como hijo directo de .wc-block-checkout__main.    */
.wc-block-checkout__main .wcms-checkout-selector {
  margin-bottom: 1.5rem;
}

/* Cuando el usuario eligió una dirección guardada, el bloque nativo se       */
/* colapsa para evitar duplicar la información. El divider lo expande.        */
.wp-block-woocommerce-checkout-shipping-address-block.wcms-native-collapsed,
.wp-block-woocommerce-checkout-billing-address-block.wcms-native-collapsed {
  display: none !important;
}

/* ── Overlay de carga al cambiar dirección ───────────────────────────────── */
.wcms-update-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba( 255, 255, 255, 0.55 );
  backdrop-filter: blur( 6px );
  -webkit-backdrop-filter: blur( 6px );
  z-index: 99999;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}
.wcms-update-overlay--visible {
  display: flex;
}
.wcms-update-overlay__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba( 0, 179, 166, 0.2 );
  border-top-color: var( --wcms-primary, #00B3A6 );
  border-radius: 50%;
  animation: wcms-spin 0.65s linear infinite;
}
@keyframes wcms-spin {
  to { transform: rotate( 360deg ); }
}

/* Indicador visual: el divider se vuelve interactivo cuando hay colapso.    */
.wcms-checkout-selector__divider:hover {
  color: var(--wcms-primary);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
  .wcms-form-row--half,
  .wcms-form-row--thirds {
    grid-template-columns: 1fr;
  }

  .wcms-modal .wcms-form-row--half,
  .wcms-modal .wcms-form-row--thirds {
    grid-template-columns: 1fr;
  }

  .wcms-modal__container {
    max-height: 100vh;
    border-radius: var(--wcms-radius) var(--wcms-radius) 0 0;
    align-self: flex-end;
  }

  .wcms-checkout-cards {
    flex-direction: column;
  }

  .wcms-checkout-card {
    max-width: 100%;
  }

  .wcms-addresses-grid {
    grid-template-columns: 1fr;
  }

  .wcms-form-row--actions {
    flex-direction: column-reverse;
  }

  .wcms-form-row--actions .wcms-btn {
    width: 100%;
  }

  .wcms-toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
  }
}