/* Shared logo framing: artwork is contained, never recolored or stretched. */
.shop-brand-content{--shop-logo-size:56px;--shop-wordmark-width:180px;display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;font:inherit;letter-spacing:normal;line-height:1.15;text-align:left;color:inherit;margin:0;text-transform:none}
.shop-brand-content>.shop-logo-mark{display:block;flex:0 0 auto;width:calc(var(--shop-logo-size)*var(--logo-scale,1));height:calc(var(--shop-logo-size)*var(--logo-scale,1));max-width:100%;overflow:hidden;filter:none;mix-blend-mode:normal;border:0;border-radius:0;margin:0}
.shop-brand-content .shop-brand-copy{display:flex;flex-direction:column;gap:7px;min-width:0;font:inherit;letter-spacing:normal;line-height:1.15;color:inherit;margin:0}
.shop-brand-content .shop-brand-business{display:block;min-width:0;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.1;letter-spacing:normal;white-space:normal;overflow-wrap:anywhere;margin:0;color:inherit}
.shop-brand-content .shop-brand-subtitle{display:block;font-family:Arial,sans-serif;font-size:8px;font-weight:400;line-height:1.5;letter-spacing:.12em;white-space:normal;margin:0;color:inherit;opacity:.72}
.shop-brand-content[data-logo-layout=wordmark]{flex-direction:column;align-items:flex-start;gap:5px}
.shop-brand-content[data-logo-layout=wordmark]>.shop-logo-mark{width:calc(var(--shop-wordmark-width)*var(--logo-scale,1));height:calc(var(--shop-logo-size)*var(--logo-scale,1))}
.shop-brand-content .shop-brand-sr-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.shop-navbar .shop-wordmark,.shop-navbar .shop-wordmark.has-brand-logo{display:block;flex:0 1 220px;min-width:0;max-width:220px;white-space:normal}
.shop-navbar .shop-wordmark>.shop-brand-content{display:flex;align-items:center;gap:12px;margin:0;font-family:'Archivo Black',Arial,sans-serif;font-size:20px;color:inherit;letter-spacing:normal;line-height:1.15;text-transform:none}
.shop-navbar .shop-brand-content>.shop-logo-mark{max-height:60px}
.shop-navbar .shop-brand-content[data-logo-layout=wordmark]>.shop-logo-mark{max-height:48px}
.shop-navbar .shop-brand-business{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.2em}
.shop-navbar .shop-brand-content .shop-brand-subtitle{font-size:7px}
.booking-topbar>div,.customer-topbar>div{min-width:0;max-width:min(65%,480px)}
.booking-topbar>.shop-brand-lockup,.customer-topbar>.shop-brand-lockup{display:block}
.booking-topbar .shop-brand-content,.customer-topbar .shop-brand-content{font-size:25px}
.club-experience .club-brand{display:block;width:auto;height:auto;min-height:56px;max-width:220px;min-width:0;flex:0 1 auto;background:none;border:0;border-radius:0}
.club-experience :is(.club-brand,.booking-topbar,.customer-topbar) .shop-brand-content{color:var(--club-cream);font-family:'Club Display','Arial Narrow',sans-serif;font-size:24px;font-weight:400}
.club-experience :is(.club-brand,.booking-topbar,.customer-topbar) .shop-brand-business{font:inherit;line-height:1.1;letter-spacing:normal;color:inherit;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.2em}
/* Account and booking keep the same Green header lockup as the homepage. */
.club-experience :is(.booking-topbar,.customer-topbar)>.shop-brand-lockup{max-width:220px}
.club-experience :is(.booking-topbar,.customer-topbar) .shop-brand-subtitle{display:none}
.club-experience .club-header .club-account{flex:0 0 auto}
.club-experience .club-menu-toggle{flex:0 0 44px}
.club-experience .club-contact-emblem{display:block;place-items:start;width:auto;height:auto;max-width:280px;min-height:70px;border:0;border-radius:0;background:none}
.club-contact-emblem .shop-brand-content{--shop-logo-size:76px;--shop-wordmark-width:230px;font-family:'Club Display','Arial Narrow',sans-serif;font-size:32px}
@media(min-width:1101px) and (max-width:1250px){.shop-navbar .shop-wordmark,.shop-navbar .shop-wordmark.has-brand-logo{max-width:190px}.shop-navbar .shop-wordmark>.shop-brand-content{--shop-logo-size:48px;--shop-wordmark-width:155px;font-size:16px}}
@media(max-width:1100px){.shop-navbar .shop-brand-content>.shop-logo-mark{max-height:46px}.shop-navbar .shop-brand-content[data-logo-layout=wordmark]>.shop-logo-mark{max-height:42px}.shop-navbar .shop-brand-content .shop-brand-copy{gap:4px}.shop-navbar .shop-brand-content .shop-brand-business{font-size:16px}}
@media(max-width:800px){
 .shop-brand-content{--shop-logo-size:44px;--shop-wordmark-width:155px;gap:9px}
 .shop-navbar .shop-wordmark,.shop-navbar .shop-wordmark.has-brand-logo{max-width:calc(100% - 145px)}
 .fade-template .shop-navbar .shop-wordmark,.fade-template .shop-navbar .shop-wordmark.has-brand-logo{max-width:calc(100% - 62px)}
 .shop-navbar .shop-wordmark>.shop-brand-content{--shop-logo-size:40px;font-size:17px}
 .club-experience .club-brand{min-height:44px;max-width:calc(100% - 145px)}
 .club-experience :is(.booking-topbar,.customer-topbar)>.shop-brand-lockup{max-width:calc(100% - 145px)}
 .club-experience :is(.club-brand,.booking-topbar,.customer-topbar) .shop-brand-content{font-size:19px}
 .booking-topbar .shop-brand-content,.customer-topbar .shop-brand-content{font-size:22px}
 .shop-brand-content .shop-brand-subtitle{font-size:7px;letter-spacing:.08em}
 .club-contact-emblem .shop-brand-content{--shop-logo-size:65px;font-size:30px}
}
@media(max-width:380px){.shop-brand-content{gap:7px}.shop-navbar .shop-wordmark>.shop-brand-content{font-size:15px}.club-experience :is(.club-brand,.booking-topbar,.customer-topbar) .shop-brand-content{font-size:17px}.booking-topbar .shop-brand-content,.customer-topbar .shop-brand-content{font-size:20px}}

/* Black and Editorial retain their navbar identity when a customer flow opens. */
.fade-experience :is(.booking-topbar,.customer-topbar)>.shop-brand-lockup{max-width:220px}
.fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-content{font-family:'Archivo Black',Arial,sans-serif;font-size:20px;font-weight:400}
.fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-business{font:inherit;line-height:1.1;letter-spacing:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.2em}
.fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-subtitle{font-size:7px}
.fade-experience :is(.booking-topbar,.customer-topbar) .shop-logo-mark{max-height:60px}
.fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-content[data-logo-layout=wordmark]>.shop-logo-mark{max-height:48px}
@media(min-width:1101px) and (max-width:1250px){
 .fade-experience :is(.booking-topbar,.customer-topbar)>.shop-brand-lockup{max-width:190px}
 .fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-content{--shop-logo-size:48px;--shop-wordmark-width:155px;font-size:16px}
}
@media(max-width:1100px){
 .fade-experience :is(.booking-topbar,.customer-topbar) .shop-logo-mark{max-height:46px}
 .fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-content[data-logo-layout=wordmark]>.shop-logo-mark{max-height:42px}
 .fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-copy{gap:4px}
 .fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-business{font-size:16px}
}
@media(max-width:800px){
 .fade-experience :is(.booking-topbar,.customer-topbar)>.shop-brand-lockup{max-width:calc(100% - 145px)}
 .fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-content{--shop-logo-size:40px;font-size:17px}
}
@media(max-width:380px){.fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-content,.fade-experience :is(.booking-topbar,.customer-topbar) .shop-brand-business{font-size:15px}}

/* Keep Green's brand in the same screen position when a flow opens. The form
   retains its narrower reading width; only the header uses the hero's gutter. */
.club-experience{--club-header-gutter:6%;--club-header-height:85px}
.club-experience .club-hero{padding-inline:var(--club-header-gutter)}
.club-experience .club-header{min-height:var(--club-header-height)}
.club-experience :is(.booking-overlay,.customer-overlay){scrollbar-gutter:stable}
.club-experience .club-flow-header-shell .shop-brand-content{width:fit-content}
.club-experience .club-flow-header-shell{position:relative;width:100%;padding-inline:var(--club-header-gutter);margin:0}
.club-experience .club-flow-header-shell :is(.booking-topbar,.customer-topbar){min-height:var(--club-header-height);padding-block:0}
.club-experience .club-flow-header-shell+:is(.booking-shell,.customer-shell){min-height:calc(100dvh - var(--club-header-height))}
@media(min-width:801px){.club-experience{--club-header-gutter:max(5%,calc((100% - 1440px)/2));--club-header-height:clamp(72px,10svh,92px)}}

/* Black and Editorial keep the navbar's brand geometry and cream color in
   customer flows. Form widths and each presentation's hero stay independent. */
.fade-experience{--fade-flow-header-gutter:5%;--fade-flow-header-height:76px}
/* Editorial keeps a fixed viewport stage; its navbar has no page scrollbar. */
.fade-experience.editorial-experience{--fade-flow-header-gutter:5vw}
.fade-experience.editorial-experience .fade-flow-header-shell :is(.booking-topbar,.customer-topbar){width:calc(100vw - var(--fade-flow-header-gutter) - var(--fade-flow-header-gutter))}
.fade-experience :is(.booking-overlay,.customer-overlay){scrollbar-gutter:stable}
.fade-experience .fade-flow-header-shell{position:relative;width:100%;padding-inline:var(--fade-flow-header-gutter);margin:0}
.fade-experience .fade-flow-header-shell :is(.booking-topbar,.customer-topbar){height:var(--fade-flow-header-height);min-height:var(--fade-flow-header-height);padding-block:0}
.fade-experience .fade-flow-header-shell+:is(.booking-shell,.customer-shell){min-height:calc(100dvh - var(--fade-flow-header-height))}
.fade-experience .fade-flow-header-shell .shop-brand-lockup{width:220px;flex:0 1 220px}
.fade-experience .fade-flow-header-shell .shop-brand-content{gap:12px;color:var(--paper,#e9e1d2)}
.fade-experience .fade-flow-header-shell .shop-brand-business{color:inherit}
@media(max-width:1100px){
 .fade-experience{--fade-flow-header-gutter:6%;--fade-flow-header-height:64px}
 .fade-experience.editorial-experience{--fade-flow-header-gutter:6vw}
 .fade-experience .fade-flow-header-shell .shop-brand-business{font-size:16px}
}