@media (max-width: 620px) {
  .homepage-services-booking:has(.homepage-booking-details.is-availability-step) .homepage-booking-head > div > strong {
    display: none !important;
  }

  .homepage-booking-details.is-availability-step .homepage-date-check.is-compact {
    display: none !important;
  }

  .homepage-booking-details.is-availability-step .homepage-booking-calendar {
    gap: 6px !important;
    padding: 8px !important;
  }

  .homepage-booking-details.is-availability-step .homepage-booking-weekdays,
  .homepage-booking-details.is-availability-step .homepage-booking-calendar-grid {
    gap: 4px !important;
  }

  .homepage-booking-details.is-availability-step .homepage-booking-calendar-grid button {
    min-height: 38px !important;
    padding: 3px 2px !important;
  }

  .homepage-booking-details.is-availability-step .homepage-booking-calendar-grid button em {
    display: none !important;
  }

  .homepage-booking-details:has(.homepage-subservice-list) .homepage-selected-date.has-action {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }

  .homepage-booking-details:has(.homepage-subservice-list) .homepage-selected-date.has-action > button:last-child {
    display: flex !important;
    visibility: hidden !important;
    pointer-events: none !important;
    justify-self: end !important;
  }

  .homepage-booking-details:has(.homepage-subservice-list) .homepage-selected-date.has-action > strong {
    justify-self: center !important;
    min-width: 0;
    text-align: center;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-selected-date.has-action {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-selected-date.has-action > button:last-child {
    display: flex !important;
    visibility: hidden !important;
    pointer-events: none !important;
    justify-self: end !important;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-selected-date.has-action > strong {
    justify-self: center !important;
    text-align: center;
  }

  .homepage-booking-details:has(.homepage-hours-card) > section {
    gap: 12px !important;
    padding: 12px !important;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-hours-card {
    gap: 0 !important;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-hours-card > span,
  .homepage-booking-details:has(.homepage-hours-card) .homepage-hours-card > strong,
  .homepage-booking-details:has(.homepage-hours-card) .homepage-hours-card > small,
  .homepage-booking-details:has(.homepage-hours-card) .homepage-time-slot-picker > span {
    display: none !important;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-hours-picker {
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    width: 100%;
    gap: 8px !important;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-hours-picker label {
    gap: 0 !important;
    font-size: 0 !important;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-hours-picker input {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 1rem !important;
  }

  .homepage-booking-details:has(.homepage-hours-card) .homepage-time-slot-picker,
  .homepage-booking-details:has(.homepage-hours-card) .homepage-time-picker-choices {
    width: 100%;
    gap: 8px !important;
  }

  .homepage-services-booking .homepage-booking-details.is-single-step:not(.is-availability-step) .homepage-selected-date.has-action {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 10px !important;
    width: 100%;
    min-height: 62px;
    padding: 8px 10px !important;
    border: 1px solid color-mix(in srgb, var(--site-link) 34%, transparent) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--site-link) 10%, var(--site-booking-card-bg, #ffffff)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--site-link) 12%, transparent);
  }

  .homepage-services-booking .homepage-booking-details.is-single-step:not(.is-availability-step) .homepage-selected-date.has-action .summary-back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    justify-self: start !important;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    border-radius: 50% !important;
    color: var(--site-button-text) !important;
    background: var(--site-button) !important;
    font-size: 0 !important;
  }

  .homepage-services-booking .homepage-booking-details.is-single-step:not(.is-availability-step) .homepage-selected-date.has-action .summary-back svg {
    width: 18px;
    height: 18px;
  }

  .homepage-services-booking .homepage-booking-details.is-single-step:not(.is-availability-step) .homepage-selected-date.has-action > strong {
    display: grid;
    gap: 2px;
    justify-items: center;
    justify-self: stretch !important;
    min-width: 0;
    color: var(--site-text);
    font-size: 0.9rem !important;
    line-height: 1.15;
    text-align: center;
  }

  .homepage-services-booking .homepage-booking-details.is-single-step:not(.is-availability-step) .homepage-selected-date.has-action > strong::before {
    content: "Selected date";
    color: color-mix(in srgb, var(--site-text) 58%, transparent);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  .homepage-services-booking .homepage-booking-details.is-single-step:not(.is-availability-step) .homepage-selected-date.has-action > button:last-child {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
  }

  .homepage-services-booking .homepage-booking-details.is-availability-step .homepage-selected-date.has-action {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 10px !important;
    width: 100%;
    min-height: 62px;
    padding: 8px 10px !important;
    border: 1px solid color-mix(in srgb, var(--site-link) 34%, transparent) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--site-link) 10%, var(--site-booking-card-bg, #ffffff)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--site-link) 12%, transparent);
  }

  .homepage-services-booking .homepage-booking-details.is-availability-step .homepage-selected-date.has-action .summary-back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    justify-self: start !important;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    border-radius: 50% !important;
    color: var(--site-button-text) !important;
    background: var(--site-button) !important;
    font-size: 0 !important;
  }

  .homepage-services-booking .homepage-booking-details.is-availability-step .homepage-selected-date.has-action .summary-back svg {
    width: 18px;
    height: 18px;
  }

  .homepage-services-booking .homepage-booking-details.is-availability-step .homepage-selected-date.has-action > strong {
    display: grid;
    gap: 2px;
    justify-items: center;
    justify-self: stretch !important;
    min-width: 0;
    color: var(--site-text);
    font-size: 0.9rem !important;
    line-height: 1.15;
    text-align: center;
  }

  .homepage-services-booking .homepage-booking-details.is-availability-step .homepage-selected-date.has-action > strong::before {
    content: "Selected service";
    color: color-mix(in srgb, var(--site-text) 58%, transparent);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  .homepage-services-booking .homepage-booking-details.is-availability-step .homepage-selected-date.has-action .summary-spacer {
    display: block;
    width: 42px;
    min-width: 42px;
  }

  .homepage-services-booking .homepage-booking-system > .booking-mobile-context-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    order: -1;
    width: 100%;
    min-height: 62px;
    margin-bottom: 22px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--site-link) 34%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--site-link) 10%, var(--site-booking-card-bg, #ffffff));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--site-link) 12%, transparent);
  }

  .homepage-services-booking .homepage-booking-system > .booking-mobile-context-top .summary-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    color: var(--site-button-text);
    background: var(--site-button);
    font-size: 0;
  }

  .homepage-services-booking .homepage-booking-system > .booking-mobile-context-top .summary-back svg {
    width: 18px;
    height: 18px;
  }

  .homepage-services-booking .homepage-booking-system > .booking-mobile-context-top > strong {
    display: grid;
    gap: 2px;
    justify-items: center;
    min-width: 0;
    color: var(--site-text);
    font-size: 0.9rem;
    line-height: 1.15;
    text-align: center;
  }

  .homepage-services-booking .homepage-booking-system > .booking-mobile-context-top > strong::before {
    content: attr(data-label);
    color: color-mix(in srgb, var(--site-text) 58%, transparent);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  .homepage-services-booking .homepage-booking-system > .booking-mobile-context-top .summary-spacer {
    width: 42px;
    min-width: 42px;
  }

  .homepage-services-booking .homepage-booking-system:has(> .booking-mobile-context-top) > .homepage-booking-details .homepage-selected-date.has-action {
    display: none !important;
  }

  .homepage-services-booking .booking-service-grid > .booking-service-card[hidden],
  .homepage-services-booking .booking-service-grid > .booking-service-card:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(6)) {
    display: none !important;
  }

  .homepage-services-booking {
    padding-inline: 18px !important;
  }

  .homepage-services-booking .homepage-booking-head {
    gap: 4px;
    margin-bottom: 18px;
  }

  .homepage-services-booking .homepage-booking-head > div {
    gap: 4px;
  }

  .homepage-services-booking .homepage-booking-head h2 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
    line-height: 0.98 !important;
  }

  .homepage-services-booking .homepage-service-grid.booking-service-grid,
  .homepage-services-booking .homepage-service-grid.booking-service-grid.grouped {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .homepage-services-booking .booking-service-card {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr auto !important;
    column-gap: 14px !important;
    row-gap: 5px !important;
    min-height: 132px !important;
    padding: 11px !important;
    align-items: start !important;
  }

  .homepage-services-booking .booking-service-card > .homepage-service-thumb,
  .homepage-services-booking .booking-service-card > .homepage-service-thumb.show-full-photo {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    width: 108px !important;
    height: 108px !important;
    min-height: 108px !important;
    align-self: center !important;
    justify-self: stretch !important;
    border-radius: 7px !important;
  }

  .homepage-services-booking .booking-service-card > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end;
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
  }

  .homepage-services-booking .booking-service-card > small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.82rem !important;
    line-height: 1.32 !important;
  }

  .homepage-services-booking .booking-service-card > b {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 380px) {
  .homepage-services-booking {
    padding-inline: 14px !important;
  }

  .homepage-services-booking .booking-service-card {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    min-height: 116px !important;
  }

  .homepage-services-booking .booking-service-card > .homepage-service-thumb,
  .homepage-services-booking .booking-service-card > .homepage-service-thumb.show-full-photo {
    width: 92px !important;
    height: 92px !important;
    min-height: 92px !important;
  }
}