/* Approved mobile refinements 1, 2, 3, 6, 8, 9.
   Presentation only. No changes to the homepage hero, reviews, menu or sticky CTAs. */
.wizard-checkout-recap,
.wizard-voucher-toggle { display: none; }

@media (max-width: 680px) {
  /* Full payment/address copy remains available, in two compact icon rows. */
  body.mocha-theme .booking-assurance-grid { padding: 0 12px; }
  body.mocha-theme .booking-assurance-item {
    position: relative; grid-template-columns: 18px minmax(0, 1fr);
    padding: 10px 0; column-gap: 10px; row-gap: 0;
  }
  body.mocha-theme .booking-assurance-item::before { width: 18px; height: 18px; }
  body.mocha-theme .booking-assurance-item > span {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body.mocha-theme .booking-assurance-item > strong { font-size: .9rem; line-height: 1.4; }

  /* The same compact card rhythm on Home, Massages and offer catalogues.
     No clipping, duration tabs, image substitutions or hidden prices. */
  body.catalog-theme :is(.massage-photo, .offer-photo),
  .home-page .home-photo { margin: 10px 10px 0; }
  body.catalog-theme :is(.massage-photo, .offer-photo) { width: calc(100% - 20px); aspect-ratio: 2.35; }
  .home-page .home-photo img { aspect-ratio: 2.35; }
  body.catalog-theme :is(.massage-content, .offer-content),
  .home-page .home-massage-body { padding: 12px; }
  body.catalog-theme :is(.massage-content h3, .offer-name),
  .home-page .home-massage h3 { margin-bottom: 8px; font-size: 1.4rem; line-height: 1.25; }
  body.catalog-theme :is(.massage-content > p, .offer-description),
  .home-page .home-massage-body > p { margin-bottom: 8px; font-size: .96rem; line-height: 1.45; }
  body.catalog-theme :is(.massage-badge, .offer-family-label),
  .home-page .home-badge {
    padding: 3px 6px; margin-bottom: 6px; font-size: .78rem; line-height: 1.35;
    letter-spacing: .02em; text-transform: none; color: #efd09a;
  }
  body.catalog-theme .massage-badges { margin-bottom: 6px; }
  body.catalog-theme .massage-content .catalog-price-options,
  body.catalog-theme .offer-variants,
  .home-page .home-prices { padding-top: 4px; margin-bottom: 10px; }
  body.catalog-theme .catalog-price-option,
  .home-page .home-duration { min-height: 64px; padding: 8px 4px; gap: 4px; }
  body.catalog-theme .offer-package-price { padding: 10px 12px; gap: 4px; }
  body.catalog-theme :is(.massage-grid, .offers-grid),
  .home-page .home-service-grid { gap: 16px; }

  /* Short mobile checkout recap, backed by the original booking state.
     Additional charges, voucher coverage and tips remain in the original list. */
  .booking-wizard-ready[data-wizard-step="3"] .wizard-checkout-recap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px;
    padding: 14px; margin: 0 0 16px; border: 1px solid var(--mocha-line, #806549);
    border-radius: 8px; background: var(--mocha-field, #3e2d23);
  }
  .wizard-checkout-service { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
  .wizard-checkout-time { margin: 0; color: #e6d8c2; font-size: .94rem; line-height: 1.4; }
  .wizard-checkout-total { grid-column: 1; color: #f3e8d5; font-size: 1.12rem; line-height: 1.4; }
  .wizard-checkout-payment { grid-column: 1; margin: 0; color: #e6d8c2; font-size: .88rem; line-height: 1.4; }
  .wizard-checkout-change {
    grid-column: 2; grid-row: 1 / span 4; align-self: center; min-height: 44px;
    padding: 8px 0 8px 8px; border: 0; background: transparent; color: #efd09a;
    font: 500 .94rem/1.4 var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
  }
  .wizard-checkout-change:disabled { opacity: .55; cursor: default; }
  .booking-wizard-ready[data-wizard-step="3"] .booking-summary > :is(.eyebrow, h2, .wizard-back) { display: none; }
  .booking-wizard-ready[data-wizard-step="3"] .booking-summary-list > [data-mobile-summary-basic] { display: none; }
  .booking-wizard-ready[data-wizard-step="3"] .booking-summary-list { margin: 0 0 14px; }
  .booking-wizard-ready[data-wizard-step="3"] .booking-summary-list:not(:has(> div:not([hidden]):not([data-mobile-summary-basic]))) { display: none; }
  .booking-wizard-ready .wizard-voucher-toggle:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--mocha-line, #806549);
    border-radius: 8px; background: transparent; color: #efd09a;
    font: 500 1rem/1.4 var(--sans); text-align: left; cursor: pointer;
  }
  .wizard-voucher-toggle::after { content: '+'; font-size: 1.3rem; }
  .wizard-voucher-toggle[aria-expanded="true"]::after { content: '−'; }
  .wizard-voucher-toggle:disabled { opacity: .55; cursor: default; }
  .booking-wizard-ready .booking-voucher[data-mobile-collapsed="true"] { display: none; }
  .booking-wizard-ready .booking-voucher[data-mobile-collapsed="false"] { margin-top: -8px; }

  /* Voucher page: one visible form heading, a smaller unchanged preview,
     concise spacing and a two-column language choice. All terms remain visible. */
  body.mocha-theme.voucher-page .voucher-hero { padding: 20px 0; }
  .voucher-page .voucher-hero .voucher-hero-content { gap: 18px; }
  .voucher-page .voucher-hero-copy > p:last-of-type { margin: 12px 0 16px; font-size: 1rem; line-height: 1.5; }
  .voucher-page .voucher-gift-preview .voucher-gift-art-real { max-width: 260px; padding-bottom: 28px; }
  .voucher-page .voucher-gift-preview figcaption { font-size: .88rem; line-height: 1.4; }
  body.mocha-theme .voucher-facts-grid { padding: 0 12px; }
  body.mocha-theme .voucher-fact { padding: 10px 0; row-gap: 2px; column-gap: 10px; }
  body.mocha-theme .voucher-fact > span { font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
  body.mocha-theme .voucher-fact > strong { font-size: .88rem; line-height: 1.4; }
  .voucher-page .voucher-main { padding: 22px 0 32px; }
  .voucher-page .voucher-heading { margin-bottom: 14px; }
  .voucher-page .voucher-heading > div { display: none; }
  .voucher-page .voucher-heading > p { font-size: .9rem; line-height: 1.45; }
  .voucher-page .voucher-form-panel { padding: 18px 14px; }
  .voucher-page .voucher-form-panel h2 { font-size: 1.7rem; margin-bottom: 18px; }
  .voucher-page .voucher-form { gap: 16px; }
  .voucher-page .voucher-options:has(input[name="voucher_language"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voucher-page .voucher-options label { min-height: 48px; padding: 11px 12px; }

  /* Readable helper text, without changing the hero, reviews or dropdown design. */
  body.mocha-theme main :is(.eyebrow, .massage-results, .offer-results) { color: #efd09a; font-size: .8rem; letter-spacing: .08em; }
  body.mocha-theme :is(.voucher-field > span, .voucher-field legend, .voucher-price > span) { font-size: .9rem; letter-spacing: 0; text-transform: none; }
  .home-page .home-after-services .home-text-link { font-size: .86rem; letter-spacing: .08em; }

  /* In-flow footer: no sticky button, preserved destinations and cookie controls. */
  body:is(.home-page, .mocha-theme) .site-footer { padding: 24px 0 max(24px, env(safe-area-inset-bottom)); }
  body:is(.home-page, .mocha-theme) .site-footer .footer-compact { gap: 12px; }
  body:is(.home-page, .mocha-theme) .site-footer .footer-brand img { width: 48px; height: 48px; object-fit: contain; }
  body:is(.home-page, .mocha-theme) .site-footer .footer-nav { gap: 0 16px; }
  body:is(.home-page, .mocha-theme) .site-footer .footer-nav a { font-size: .86rem; letter-spacing: .04em; min-height: 44px; }
  body:is(.home-page, .mocha-theme) .site-footer .footer-meta { padding-top: 12px; gap: 4px; font-size: .85rem; line-height: 1.45; }
  body:is(.home-page, .mocha-theme) .site-footer .whatsapp-float.whatsapp-inline {
    width: fit-content; height: auto; min-height: 48px; margin: 4px 0 0; padding: 10px 12px; gap: 12px;
    background: #48362b; color: #f3e8d5; border: 1px solid #806549; border-radius: 8px;
  }
  body:is(.home-page, .mocha-theme) .site-footer .whatsapp-copy { gap: 3px; }
  body:is(.home-page, .mocha-theme) .site-footer .whatsapp-copy strong { font-size: .88rem; }
  body:is(.home-page, .mocha-theme) .site-footer .whatsapp-copy > span { font-size: .85rem; color: #e6d8c2; }
  body:is(.home-page, .mocha-theme) .site-footer .whatsapp-icon { width: 26px; height: 26px; flex-basis: 26px; background: transparent; color: #68df94; }
  body:is(.home-page, .mocha-theme) .site-footer .whatsapp-icon svg { width: 26px; height: 26px; }
}