html, body {
    max-width: 100%;
    overflow-x: clip;
}

.booking-shell,
.wizard-progress,
.wizard-viewport,
.wizard-layer,
.barber-section,
.preference-date,
.service-grid,
.barber-grid,
.slots,
.field-grid {
    min-width: 0;
    max-width: 100%;
}

.booking-shell { overflow-x: clip; }
.booking-shell .button { padding-top: 12px; padding-bottom: 12px; }
.wizard-layer > *, .barber-choice, .choice { min-width: 0; }
.service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.barber-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.slots { grid-template-columns: repeat(5,minmax(0,1fr)); }
.barber-choice b, .barber-choice small, .choice b, .choice small { overflow-wrap: anywhere; }

@media(max-width:700px) {
    .wizard-layer { transform: none; }
    .wizard-layer.past { transform: none; }
    .service-grid { grid-template-columns: minmax(0,1fr); }
    .barber-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .slots { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media(max-width:390px) {
    .container { width: min(100% - 24px,1140px); }
    .wizard-layer { padding: 20px 14px; }
    .wizard-progress { padding: 14px 10px; }
    .barber-grid { grid-template-columns: minmax(0,1fr); }
    .barber-any { grid-column: auto; }
    .slots { grid-template-columns: repeat(2,minmax(0,1fr)); }
}