/* 36px flex gap + 28px menu spacing = 64px to page content. */
.hero__content > .hero-actions { margin-bottom: 28px; }
.hero__content > .hero-actions + * { margin-top: 0; }
.hero__content--prices > .hero-actions + .receipt-carousel,
.hero__content--booking2 > .hero-actions + .b2,
.hero__content--booking > .hero-actions + .booking-inline { margin-top: 0; }
.hero--video-home .home-presentation { margin-bottom: 28px; }
.hero--video-home #home-booking { margin-top: 0; }

.hero__content--prices > .hero-actions { margin-bottom: 44px; }

/* Mobile: 64px between the icon row, logo, menu and page content. */
@media (max-width: 760px) {
  .contact-tabs { padding-bottom: 0; }
  .hero__content { padding-top: 64px; gap: 64px; }
  .hero__content > .hero-actions { margin-top: 0; margin-bottom: 0; }
  .hero__content--prices > .hero-actions { margin-bottom: 0; }
  .home-presentation { gap: 64px; }
  .home-presentation .hero-actions { margin-top: 0; }
  .hero--video-home .home-presentation { margin-bottom: 0; }
}

@media (max-width: 760px) {
  .contact-tabs .contact-tab { box-shadow: 0 3px 12px rgba(0, 20, 70, .05); color: var(--blue); }
  .contact-tabs .contact-tab img { filter: none; }
}

@media (max-width: 760px) {
  /* Keep the following page background from painting over the icon shadows. */
  .contact-tabs { position: relative; left: auto; bottom: auto; z-index: 5; overflow: visible; }
}

@media (max-width: 760px) {
  .hero__content .brand-logo { transform: translateX(1px); margin-inline: auto; }
}

/* A tighter mobile header above the logo. */
@media (max-width: 760px) {
  .hero__content { padding-top: 48px; }
  .contact-tabs .contact-tab { height: 36px; padding-inline: 10px; border-radius: 14px; }
  .contact-tabs .contact-tab img, .contact-tabs .contact-tab svg { width: 16px; height: 16px; }
}


/* Corner shortcuts expand within each horizontal row. */
@media (min-width: 761px) {
  .contact-tabs, .social-tabs { position: fixed; top: 20px; bottom: auto; display: flex; flex-direction: row; align-items: center; gap: 8px; z-index: 10; }
  .contact-tabs { left: 20px; }
  .social-tabs { right: 20px; }
  .contact-tabs .contact-tab, .social-tabs .contact-tab { height: 36px; padding: 0 10px; border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); border: .5px solid rgba(255, 255, 255, .2); color: var(--blue); font: 500 12px Inter, sans-serif; box-shadow: 0 3px 12px #0014460d; backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); cursor: pointer; }
  .contact-tabs .contact-tab img { filter: none; }
  .contact-tabs .contact-tab img, .contact-tabs .contact-tab svg, .social-tabs .contact-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
  .social-tabs .contact-tab svg { fill: none; }
  .contact-tabs .contact-tab span, .social-tabs .contact-tab span { display: block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0; transition: max-width 240ms ease, opacity 240ms ease, margin-left 240ms ease; }
  .contact-tabs .contact-tab:hover span, .contact-tabs .contact-tab:focus-visible span,
  .social-tabs .contact-tab:hover span, .social-tabs .contact-tab:focus-visible span { max-width: 260px; opacity: 1; margin-left: 8px; }
  html:not(.home-video-revealed) body:has(.hero--video-home) .social-tabs { visibility: hidden; }
}
@media (max-width: 760px) { .social-tabs { display: none; } }

/* Footer belongs to the hero gradient, rather than a separate background. */
.site-footer { position: relative; display: flex; justify-content: center; padding: 32px 16px; background: transparent; z-index: 1; }
.footer-icons { display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer-icons .contact-tab { height: 36px; padding: 0 10px; border-radius: 14px; border: .5px solid rgba(255,255,255,.2); color: #fff; background: linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06)); box-shadow: 0 3px 12px rgba(0,20,70,.05); }
.footer-icons .contact-tab img, .footer-icons .contact-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer-icons .contact-tab img { filter: brightness(0) invert(1); }
.footer-icons .contact-tab span { display: none; }
html:not(.home-video-revealed) body:has(.hero--video-home) .site-footer { visibility: hidden; }

/* Keep Instagram's camera outline unfilled in every shortcut row. */
.social-tabs .contact-tab[aria-label="Instagram"] svg { fill: none; stroke: currentColor; }
.footer-icons .contact-tab[aria-label="Instagram"] svg { fill: currentColor; stroke: none; }

.contact-tabs .contact-tab .shortcut-outline, .social-tabs .contact-tab .shortcut-outline { fill: none; stroke: currentColor; }

@media (min-width: 761px) {
  .contact-tabs, .social-tabs { position: absolute; }
}
.contact-tabs .contact-tab > span, .social-tabs .contact-tab > span { font-family: "Barlow", Arial, sans-serif; font-weight: 600; }

.contact-tabs .contact-tab > span, .social-tabs .contact-tab > span, .footer-icons .contact-tab > span { text-transform: uppercase; }

/* 16px after booking + 32px footer inset = 48px to the footer icons. */
.hero--video-home > .hero__content--home { min-height: 0; padding-bottom: 16px; }

/* Last content group to footer icons: 16px + 32px = 48px. */
.hero > .hero__content { min-height: 0; padding-bottom: 16px; }
.site-footer { padding-top: 32px; }

/* Remove legacy contact spacing, including the expanded form state. */
.hero > .hero__content--contact,
.hero > .hero__content--contact.contact-expanded { min-height: 0; padding-bottom: 16px; }
.hero__content--contact .native-contact { margin-bottom: 0; }

/* Extended gradient previously added 360px of empty space after the footer. */
.hero.hero--extended-gray { --extra-gray: 0px; padding-bottom: 0; background-size: 100% 100%; }

.contact-tabs .contact-tab > span,
.social-tabs .contact-tab > span { color: #111; }

/* Keep the gradient on the document and match Safari's overscroll canvas
   to the nearest gradient edge without changing the layout. */
html {
  background: var(--scroll-edge-color, var(--paper));
  /* Prevent rubber-band scrolling from exposing the browser's white canvas. */
  overscroll-behavior-y: none;
}
body {
  background: var(--page-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.hero, .hero.hero--extended-gray { background: transparent; }
body { min-height: 100dvh; isolation: isolate; }
.hero { min-height: 100dvh; }
.site-footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

.home-video-background { height: 100lvh; bottom: auto; }
.home-video-background video { display: block; }

.b2-photo-add, .contact-photo-add { display: grid; place-items: center; padding: 0; }
.b2-photo-add svg, .contact-photo-add svg { width: 24px; height: 24px; display: block; }
.b2-photo-remove { display: grid; place-items: center; }
.photo-feedback { width: min(400px, calc(100% - 40px)); padding: 24px; border: 1px solid #dbe0ec; border-radius: 20px; color: #171a24; background: #fff; font: 16px/1.5 Inter, Arial, sans-serif; }
.photo-feedback::backdrop { background: #10183066; }
.photo-feedback h2 { margin: 0 0 12px; font-size: 20px; }
.photo-feedback button { display: block; margin: 20px 0 0 auto; padding: 12px 24px; border: 0; border-radius: 999px; background: #173cff; color: #fff; font: inherit; }
.photo-upload-help { color: #737989; font: 12px/1.6 Inter, Arial, sans-serif; margin: 12px 0; }

/* Desktop arrow with white outline and blue glow, matching the reference. */
@media (hover: hover) and (pointer: fine) {
  html, body, body * { cursor: url('../assets/icons/desktop-cursor.svg') 12 10, auto !important; }
  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"] { cursor: text !important; }
  button:disabled, input:disabled { cursor: not-allowed !important; }
}

/* Constrain only the layout width; retain existing form typography and spacing. */
.b2, .b2-layout, .b2-catalog, .b2 [data-panel], .b2-fields, .contact-inputs, .contact-message-field { min-width: 0; }
.b2-photo-previews, .contact-photo-previews { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.b2-photo-previews::-webkit-scrollbar, .contact-photo-previews::-webkit-scrollbar { display: none; }
.b2-photo-previews.has-more-right, .contact-photo-previews.has-more-right { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.photo-preview-open { display: block; width: 84px; height: 64px; padding: 0; border: 0; border-radius: 12px; background: transparent; }
.photo-viewer { position: fixed; inset: 0; margin: 0; box-sizing: border-box; overflow: hidden; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 24px 16px; border: 0; background: transparent; color: #fff; }
.photo-viewer::backdrop { background: rgba(235, 240, 255, .28); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); }
.photo-viewer[open] { display: flex; align-items: center; justify-content: center; }
.photo-viewer-picture { position: relative; display: inline-flex; max-width: 100%; }
.photo-viewer img { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); object-fit: contain; }
.photo-viewer-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; padding: 6px; z-index: 1; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px #0004; color: #737989; font: 16px Arial, sans-serif; }

.photo-viewer-close svg { display: block; width: 24px; height: 24px; }

/* Shared light shortcut style for image close/remove controls. */
.photo-viewer-close, .b2-photo-remove, .contact-photo-remove {
  display: grid; place-items: center; color: var(--blue);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,245,243,.90));
  border: .5px solid rgba(255,255,255,.8);
  box-shadow: 0 3px 12px rgba(0,20,70,.05);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.photo-viewer-close { width: 36px; height: 36px; border-radius: 50%; padding: 8px; }
.photo-viewer-close svg { width: 20px; height: 20px; }
.b2-photo-remove, .contact-photo-remove { width: 24px; height: 24px; border-radius: 50%; padding: 5px; }
.b2-photo-remove svg, .contact-photo-remove svg { display: block; width: 14px; height: 14px; }
.b2-field input::placeholder { color: #757575; opacity: 1; }
.b2-field input[name="phone"][data-prefix-only="true"] { color: #757575; }
.photo-viewer-picture > img { border-radius: 24px; }
.b2 .b2-booking-note { color: #000; font-size: 14px; }
.b2 .b2-catalog { padding: 36px; }
.contact-details { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: min(720px, calc(100% - 32px)); margin: 0; color: var(--blue); font: 400 14px/1.6 Barlow, Arial, sans-serif; text-align: center; }
.contact-details a { color: inherit; text-decoration: none; white-space: nowrap; }
.contact-details span { white-space: nowrap; }
.contact-details img { flex: 0 0 14px; }
.contact-header-details { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: min(720px, calc(100% - 32px)); margin: 0; color: #000; font: 400 14px/1.6 Barlow, Arial, sans-serif; text-align: center; }
.contact-header-details a { color: inherit; text-decoration: none; white-space: nowrap; }
.contact-header-details img { flex: 0 0 14px; }
@media (max-width: 760px) {
  .contact-header-details { display: none; }
}
.site-footer:has(.footer-contact-details) { flex-direction: column; align-items: center; gap: 16px; }
.footer-contact-details { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; color: #fff; font: 400 12px/1.6 Barlow, Arial, sans-serif; text-align: center; }
.footer-contact-details a { color: inherit; text-decoration: none; white-space: nowrap; }
.footer-contact-details span { white-space: nowrap; }
.footer-contact-details img { width: 10px; height: 10px; flex-shrink: 0; filter: brightness(0) invert(1); }
@media (max-width: 760px) {
  .contact-details { display: none; }
  .footer-contact-details { flex-direction: column; gap: 4px; }
  .footer-contact-details img { display: none; }
  .contact-page .contact-tabs { position: static; transform: none; gap: 8px; padding: 0; margin: 0; background: transparent; }
  .contact-page .contact-tabs + .native-contact { margin-top: -40px; }
  body:not(.contact-page) > .contact-tabs { display: none; }
  .contact-page .contact-tabs .contact-tab { flex-shrink: 0; background: var(--blue); color: #fff; border-color: var(--blue); }
  .contact-page .contact-tabs .contact-tab { height: 44px; padding-inline: 12px; border-radius: 16px; }
  .contact-page .contact-tabs .contact-tab svg { width: 20px; height: 20px; }
  .contact-page .contact-tabs .contact-tab .shortcut-outline { stroke: #fff; }
  .contact-page .contact-tabs .contact-tab span { display: inline; max-width: 0; opacity: 0; margin-left: 0; color: #fff; font-size: 12px; }
  .contact-page .contact-tabs .contact-tab.is-expanded span { max-width: 260px; opacity: 1; margin-left: 8px; }
}
.b2-note-break { display: initial; }
@media (max-width: 760px) {
  .b2-note-break { display: none; }
}
.photo-upload-info { display: inline-block; width: 1.35em; height: 1.35em; margin-right: .25em; vertical-align: middle; }
.photo-upload-help { display: flex; align-items: center; justify-content: flex-start; gap: .4em; text-align: left; }
.photo-upload-help .photo-upload-info { flex-shrink: 0; margin-right: 0; }
