/* ECO2nd 2026-11-06: iOS 26 Safari upper-toolbar colour fix + stable mobile hero.
   Keep the floating rounded header and its visible side/top background margins.
   Unlike theme-color alone, the browser can sample this opaque fixed full-width strip.
   No backdrop-filter, clipping, transform, or transparency on the sampling strip.
*/
@media (max-width:700px) {
  :root { --eco-safari-top-inset:22px; }
  html, body.eco-home { background-color:#f8f7ef; }
  .eco-safari-top-tint {
    position:fixed;
    inset:0 0 auto 0;
    height:12px;
    width:100%;
    background-color:#f8f7ef;
    opacity:1;
    pointer-events:none;
    z-index:10001;
    transform:none;
    -webkit-transform:none;
    filter:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  /* First 12px tint the browser UI, the remaining 10px reveal the scrolling hero
     between the edge and the inset header. Side gaps remain uncovered. */
  body.eco-home { padding-top:calc(var(--header-height,80px) + var(--eco-safari-top-inset)) !important; }
  body.eco-home > .site-header {
    top:var(--eco-safari-top-inset) !important;
    left:10px !important;
    right:10px !important;
    width:calc(100% - 20px) !important;
    background:#f8fbfa !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transform:none !important;
  }
  /* Preserve the original portrait ratio independently of browser chrome height.
     No svh/dvh-based sizing, so Safari's toolbar transition does not scale it. */
  .hero-restored .hero-natural-person {
    width:min(56vw,225px) !important;
    max-width:62% !important;
    height:auto !important;
    align-self:auto !important;
  }
  .hero-restored .hero-natural-person .portrait-faithful {
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:1122/1402 !important;
  }
  .hero-restored .hero-natural-person .portrait-faithful img {
    width:100% !important;
    height:100% !important;
  }
  html { scroll-padding-top:calc(var(--header-height,80px) + var(--eco-safari-top-inset) + 10px) !important; }
  [id] { scroll-margin-top:calc(var(--header-height,80px) + var(--eco-safari-top-inset) + 10px); }
  #booking { scroll-margin-top:calc(var(--header-height,80px) + var(--eco-safari-top-inset) + 12px) !important; }
}
@media (min-width:701px) { .eco-safari-top-tint {display:none !important;} }