/* LOCKED — Component: SalonPage -------------------------------------------
   Page-level state hooks only. All geometry lives in SalonHero / SalonZoom.
   ------------------------------------------------------------------------- */
@layer components {
  .tp-salon {
    position: relative;
    width: 100%;
    background: #FAF8F3;
  }

  /* The salon header fades while a spot is zoomed (desktop/tablet). This is
     the one documented coupling between the Salon and the global header: a
     body class set by SalonZoom.js. */
  @media (min-width: 700px) {
    body.tp-salon-zoomed .tp-header--salon {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.45s ease;
    }
  }
}