/* Touch layouts. Keep the photographic stage; improve the controls around it. */
:root {
  --ilimar-safe-top: env(safe-area-inset-top, 0px);
  --ilimar-safe-right: env(safe-area-inset-right, 0px);
  --ilimar-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ilimar-safe-left: env(safe-area-inset-left, 0px);
}

/* Keep hash-linked sections below the fixed header on a fresh page load. */
.page-section { scroll-margin-top: 74px; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-width: 0; }
  .header, .header.scrolled {
    height: calc(66px + var(--ilimar-safe-top));
    padding: var(--ilimar-safe-top) max(14px, var(--ilimar-safe-right)) 0 max(14px, var(--ilimar-safe-left));
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 4px;
  }
  .header .nav-left, .header .nav-right { min-width: 0; gap: 4px; }
  .header .nav-left > a, .header .desktop-link, .header #account-open { display: none; }
  .header .menu-trigger { display: flex; width: 44px; height: 44px; align-items: flex-start; flex-shrink: 0; }
  .header .wordmark { --brand-width: 104px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .header .book-link { min-width: 44px; min-height: 44px; max-width: 68px; padding: 5px 2px; font-size: 9px; line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .header .language { min-width: 44px; min-height: 44px; padding: 8px 2px; font-size: 10px; }
  .page-section { margin-top: calc(66px + var(--ilimar-safe-top)); scroll-margin-top: calc(66px + var(--ilimar-safe-top)); min-height: calc(100svh - 66px - var(--ilimar-safe-top)); }
  body.home-view, .stage { height: 100svh; height: 100dvh; }
  .stage { width: 100%; }
  .scene-caption { left: max(18px, var(--ilimar-safe-left)); right: max(18px, var(--ilimar-safe-right)); bottom: calc(104px + var(--ilimar-safe-bottom)); }
  .scene-caption h2 { overflow-wrap: anywhere; }
  .scene-caption a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 8px; }
  .next-scene { width: 44px; height: 44px; left: calc(50% - 22px); bottom: calc(58px + var(--ilimar-safe-bottom)); }
  .media-toggle { width: 44px; height: 44px; right: calc(166px + var(--ilimar-safe-right)); bottom: calc(14px + var(--ilimar-safe-bottom)); }
  .motion-toggle { left: max(14px, var(--ilimar-safe-left)); bottom: calc(14px + var(--ilimar-safe-bottom)); min-height: 44px; max-width: 130px; padding: 7px 0; line-height: 1.4; text-align: left; }
  .scene-pair { padding-top: calc(92px + var(--ilimar-safe-top)); padding-bottom: calc(106px + var(--ilimar-safe-bottom)); }
  .scene-pair > div > img { height: calc(100% - 70px); }
  .scene-pair .scene-caption { margin-top: 10px; }
  .scene-pair .scene-caption a { padding: 8px 0; }
  .final-contact { max-width: calc(100% - 32px); padding-top: calc(66px + var(--ilimar-safe-top)); padding-bottom: calc(78px + var(--ilimar-safe-bottom)); gap: 9px; }
  .final-contact .wordmark { --brand-width: 200px; }
  .final-contact p { margin: 0 0 9px; }
  .final-contact > a, .final-contact > button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; overflow-wrap: anywhere; }
  .final-contact .back-start { margin-top: 9px; }

  /* Native dialogs scroll independently; a nonmodal concierge never locks the page. */
  dialog { max-width: calc(100% - 20px); max-height: calc(100svh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-padding-block: 60px 24px; }
  dialog .dialog-close, .language-dialog .language-close, .ilimar-helper .ilimar-helper-close { width: 44px; height: 44px; right: 10px; top: 10px; z-index: 2; }
  .dialog-top > button, .gallery-top > button, .account-tabs > button, .menu-account { min-width: 44px; min-height: 44px; }
  .booking-dialog > h2, .account-dialog > h2, .folder-dialog > h2, .contact-dialog > h2, .chat-dialog > h2 { padding-right: 30px; overflow-wrap: anywhere; }
  .menu-dialog, .gallery-dialog, .milestone-dialog { width: 100%; max-width: 100%; height: 100svh; height: 100dvh; max-height: 100dvh; margin: 0; padding-top: calc(18px + var(--ilimar-safe-top)); padding-right: max(16px, var(--ilimar-safe-right)); padding-bottom: calc(24px + var(--ilimar-safe-bottom)); padding-left: max(16px, var(--ilimar-safe-left)); }
  .menu-dialog .dialog-top { min-height: 44px; }
  .menu-dialog nav { margin: 24px 0; gap: 4px; }
  .menu-dialog nav a { min-height: 44px; display: inline-flex; align-items: center; margin: 0; padding: 7px 0; line-height: 1.4; overflow-wrap: anywhere; }
  .language-dialog { padding-top: 54px; }
  .language-dialog > button:not(.language-close) { min-height: 44px; }
  .form-grid, .form-grid > *, .meeting-format > *, .gallery-top > *, .card-info > *, .service-photo-name, .cat-category-copy > * { min-width: 0; }
  .form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .form-grid select, .form-grid textarea,
  dialog textarea, dialog input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .ilimar-helper .ilimar-helper-form input, .cat-basket-controls input, .ilimar-language-picker { font-size: 16px; min-height: 44px; max-width: 100%; }
  .form-grid input, .form-grid select, .form-grid textarea { min-width: 0; }
  dialog textarea { resize: vertical; }
  .meeting-format { flex-wrap: wrap; }
  .meeting-format > label { min-width: 130px; min-height: 54px; line-height: 1.5; }
  .solid-button, .text-link, .photo-save, .folder-board button, .chat-whatsapp, .account-tabs button, #password-reset, .appointment-options button { min-width: 44px; min-height: 44px; line-height: 1.5; }
  .text-link, .photo-save, .folder-board button, .appointment-options button { padding-block: 12px; }
  .solid-button { white-space: normal; overflow-wrap: anywhere; }
  .account-tabs { gap: 12px; flex-wrap: wrap; }
  .saved-collection { min-width: 0; overflow-wrap: anywhere; }
  .saved-collection img { flex: 0 0 70px; width: 70px; }
  .account-identity, .account-request, .proposal-block, .selection-summary, .form-status { overflow-wrap: anywhere; }
  .gallery-images figcaption { flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
  .gallery-images .photo-save { white-space: normal; text-align: left; }
  .gallery-top { gap: 12px; }
  .gallery-top h2, .milestone-gallery-top h2 { overflow-wrap: anywhere; }
  .milestone-full-image { height: min(61svh, 650px); height: min(61dvh, 650px); }
  .gallery-actions { padding-bottom: var(--ilimar-safe-bottom); }

  .collections .section-heading { display: block; }
  .collections .section-heading h2 { font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
  .filters { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 10px; }
  .filters button, .milestone-chips button { min-width: 44px; min-height: 44px; padding-block: 12px; line-height: 1.5; }
  .collection-card, .collection-card figure { min-width: 0; }
  .collection-card h3, .collection-card h4, .collection-card p, .service-photo-name h2 { overflow-wrap: anywhere; }
  .collection-card img { max-width: 100%; }
  .design-progress { gap: 10px 20px; flex-wrap: wrap; line-height: 1.5; }
  .design-progress li { min-width: 0; }
  .occasion-grid, .choice-grid { gap: 8px; }
  .occasion-grid img, .choice-grid img { height: auto; aspect-ratio: .9; }
  .occasion-grid label > span, .choice-grid label > span { min-height: 44px; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
  .design-actions { flex-wrap: wrap; }
  #design-finish { margin-left: 0; }
  .palette-options label { min-width: 52px; line-height: 1.4; }
  .palette-options i { width: 44px; height: 44px; }
  .service-photo-action { flex-shrink: 0; }
  .services-editorial-heading h1 { font-size: clamp(34px, 10vw, 46px); overflow-wrap: anywhere; }
  .services-booking-link { min-height: 44px; }
  .feature-nav { gap: 4px 20px; }
  .feature-nav a, .feature-nav button, .footer-top a:not(.footer-brand), .footer-bottom a, .footer-bottom button { min-height: 44px; display: inline-flex; align-items: center; line-height: 1.5; }
  #maison .appointment-options { gap: 12px 20px; flex-wrap: wrap; }
  #maison > .maison-owner { padding-left: max(24px, var(--ilimar-safe-left)); padding-right: max(24px, var(--ilimar-safe-right)); }
  .footer-top > *, .footer-bottom > * { min-width: 0; overflow-wrap: anywhere; }
  footer { padding-bottom: calc(80px + var(--ilimar-safe-bottom)); }

  .ilimar-helper-launcher, .concierge-launch[data-helper-open] { min-height: 44px; right: max(14px, var(--ilimar-safe-right)); bottom: calc(14px + var(--ilimar-safe-bottom)); }
  dialog.ilimar-helper { width: min(380px, calc(100% - 24px)); right: max(12px, var(--ilimar-safe-right)); bottom: calc(70px + var(--ilimar-safe-bottom)); left: auto; top: auto; margin: 0; padding-top: 26px; }
  dialog.ilimar-helper[open] { max-height: min(540px, calc(100dvh - 160px - var(--ilimar-safe-bottom))); overflow-y: auto; }
  .ilimar-helper-heading { padding-right: 36px; }
  .ilimar-helper-tabs > button, .ilimar-helper-chip, .ilimar-helper-send, .ilimar-helper-action, .ilimar-helper-human { min-height: 44px; }
  .ilimar-helper .ilimar-helper-chip { padding: 10px 12px; }
  .ilimar-helper-action, .ilimar-helper-human { padding-block: 12px; }
  .ilimar-helper .ilimar-helper-send { white-space: normal; max-width: 110px; line-height: 1.4; }
  body:has(dialog:modal) .ilimar-helper:not(:modal), body:has(dialog:modal) .concierge-launch, body:has(dialog:modal) .ilimar-helper-launcher { visibility: hidden; }

  /* The separate catalogue and destination pages use their own header styles. */
  .destination-header { padding: var(--ilimar-safe-top) max(14px, var(--ilimar-safe-right)) 0 max(14px, var(--ilimar-safe-left)); height: calc(70px + var(--ilimar-safe-top)); grid-template-columns: minmax(0,1fr) 110px minmax(0,1fr); gap: 4px; }
  .destination-header .destination-home { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
  .destination-header .ilimar-language-picker { justify-self: end; width: 100%; max-width: 110px; padding-inline: 0; }
  .destination-brand { justify-self: center; }
  .destination-link, .destination-other a, .destination-footer a, .atelier-film summary { min-height: 44px; padding-block: 12px; }
  .destination-hero-copy { bottom: calc(65px + var(--ilimar-safe-bottom)); }
  .destination-breadcrumbs, .destination-actions, .destination-other { flex-wrap: wrap; }
  .destination-story > *, .atelier-film { min-width: 0; overflow-wrap: anywhere; }
  .destination-footer { padding-bottom: calc(85px + var(--ilimar-safe-bottom)); }
  .cat-header { height: auto; min-height: calc(76px + var(--ilimar-safe-top)); padding: calc(10px + var(--ilimar-safe-top)) max(14px, var(--ilimar-safe-right)) 10px max(14px, var(--ilimar-safe-left)); gap: 12px; }
  .cat-header .cat-brand { width: 132px; height: 32px; }
  .cat-header nav { gap: 8px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; font-size: 9px; letter-spacing: .03em; }
  .cat-header nav > a:first-child { display: none; }
  .cat-header nav a, .cat-header .cat-home { min-height: 44px; display: inline-flex; align-items: center; }
  .cat-header .ilimar-language-picker { max-width: 108px; padding-inline: 0; }
  .cat-filter button, .cat-add, .cat-basket-controls button, #cat-basket-clear, .cat-product summary { min-width: 44px; min-height: 44px; }
  .cat-basket-controls { flex-wrap: wrap; }
  .cat-category-grid, .cat-product-grid { min-width: 0; }
  .cat-category, .cat-product, .cat-basket > div { min-width: 0; overflow-wrap: anywhere; }
  .cat-sticky { padding-bottom: calc(12px + var(--ilimar-safe-bottom)); padding-left: max(18px, var(--ilimar-safe-left)); padding-right: max(18px, var(--ilimar-safe-right)); }
  .cat-sticky > button { min-height: 44px; overflow-wrap: anywhere; }
  .cat-footer { padding-bottom: calc(146px + var(--ilimar-safe-bottom)); }
  .cat-status { bottom: calc(140px + var(--ilimar-safe-bottom)); }
  .ilimar-catalogue .ilimar-helper-launcher { bottom: calc(100px + var(--ilimar-safe-bottom)); }
  .ilimar-catalogue dialog.ilimar-helper { bottom: calc(155px + var(--ilimar-safe-bottom)); }
  .ilimar-catalogue dialog.ilimar-helper[open] { max-height: min(440px, calc(100dvh - 230px - var(--ilimar-safe-bottom))); }
}

@media (max-width: 360px) {
  .header, .header.scrolled { padding-inline: 12px; gap: 0; }
  .header .wordmark { --brand-width: 90px; }
  .header .book-link { max-width: 56px; font-size: 8px; }
  .header .nav-right { gap: 0; }
  .header .language { min-width: 44px; }
  .services-photo-grid { grid-template-columns: 1fr; }
  .cat-header .cat-brand { width: 112px; height: 28px; }
}

@media (max-height: 500px) and (max-width: 1000px) {
  .scene-pair { padding-top: calc(76px + var(--ilimar-safe-top)); padding-bottom: calc(98px + var(--ilimar-safe-bottom)); }
  .scene-caption { bottom: calc(95px + var(--ilimar-safe-bottom)); }
  .final-contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2px 24px; width: min(540px, calc(100% - 48px)); padding-top: calc(66px + var(--ilimar-safe-top)); padding-bottom: calc(64px + var(--ilimar-safe-bottom)); text-align: center; }
  .final-contact .wordmark, .final-contact > p { grid-column: 1/-1; margin: 0; justify-self: center; }
  .final-contact .wordmark { --brand-width: 130px; min-height: 34px; }
  .final-contact > p { font-size: 8px; }
  .final-contact .back-start { margin: 0; }
  .milestone-full-image { height: 50dvh; }
  .destination-hero { height: 100dvh; min-height: 0; }
  .destination-hero-copy { bottom: calc(25px + var(--ilimar-safe-bottom)); }
  dialog.ilimar-helper, .ilimar-catalogue dialog.ilimar-helper { bottom: calc(8px + var(--ilimar-safe-bottom)); }
  dialog.ilimar-helper[open], .ilimar-catalogue dialog.ilimar-helper[open] { max-height: calc(100dvh - 16px - var(--ilimar-safe-top) - var(--ilimar-safe-bottom)); overflow-y: auto; }
  .ilimar-helper > .ilimar-helper-intro, .ilimar-helper > .ilimar-helper-chips { display: none; }
}

/* These variables are set only for an actual editable focus + reduced visual viewport. */
body.ilimar-keyboard-open dialog:modal {
  position: fixed; top: calc(var(--ilimar-visual-top, 0px) + 8px); bottom: auto; left: 0; right: 0; margin: 0 auto;
  height: auto; max-height: calc(var(--ilimar-visual-height, 100dvh) - 16px); overflow-y: auto;
}
body.ilimar-keyboard-open dialog.ilimar-helper[open] {
  top: calc(var(--ilimar-visual-top, 0px) + 8px); bottom: auto;
  max-height: calc(var(--ilimar-visual-height, 100dvh) - 16px);
}
body.ilimar-keyboard-open .ilimar-helper > .ilimar-helper-intro,
body.ilimar-keyboard-open .ilimar-helper > .ilimar-helper-chips,
body.ilimar-keyboard-open .ilimar-helper-subtitle,
body.ilimar-keyboard-open .ilimar-helper-privacy { display: none; }
body.ilimar-keyboard-open .ilimar-helper-tabs { margin-block: 8px; }
body.ilimar-keyboard-open .ilimar-helper-form { margin-top: 8px; }
body.ilimar-keyboard-open .concierge-launch,
body.ilimar-keyboard-open .ilimar-helper-launcher { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .stage, dialog, .ilimar-helper-log, .chat-messages { scroll-behavior: auto; }
}