/* Shared interactions, limited to the three fictional salon showcases. */
#site_header.showcase-header {
    --sh-ink: #f2ecdf;
    --sh-accent: #bda463;
    position: sticky !important;
    top: 0;
    z-index: 1000;
    background: #191c1ae8 !important;
    color: var(--sh-ink);
    border-bottom: 1px solid #bda46330;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
#site_header.showcase-header--luma { --sh-ink: #352c40; --sh-accent: #776084; background: #f4f0f5e8 !important; border-color: #77608426; }
#site_header.showcase-header--nela { --sh-ink: #263b30; --sh-accent: #63735e; background: #f6f3eee8 !important; border-color: #63735e26; }
#site_header.showcase-header .site-header__inner { background: transparent !important; }
#site_header.showcase-header .wp-header-nav a {
    position: relative;
    color: var(--sh-ink) !important;
    padding-block: 9px;
    background: linear-gradient(var(--sh-accent), var(--sh-accent)) left bottom / 0 1px no-repeat;
    transition: background-size .22s ease, color .22s ease;
}
#site_header.showcase-header .wp-header-nav a:is(:hover, :focus-visible, [aria-current="page"]) { color: var(--sh-accent) !important; background-size: 100% 1px; }
#site_header.showcase-header a:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 5px; }
#site_header.showcase-header .showcase-wordmark { font: 500 clamp(23px, 2.4vw, 32px)/1.1 var(--smplsFontFamilyHeading), serif; color: var(--sh-ink); white-space: nowrap; }
.showcase-dialog { --sd-bg: #f2ecdf; --sd-ink: #272d26; --sd-accent: #796535; width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 50px; border: 0; border-radius: 4px; color: var(--sd-ink); background: var(--sd-bg); box-shadow: 0 25px 90px #0006; overflow: auto; }
.showcase-dialog::backdrop { background: #111a16b8; backdrop-filter: blur(9px); }
.showcase-dialog--booking { width: min(1140px, calc(100% - 32px)); background: #191c1a; --sd-ink: #f2ecdf; --sd-accent: #bda463; }
.showcase-dialog .sd-close { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--sd-ink); cursor: pointer; }
.showcase-dialog .sd-close svg { width: 18px; height: 18px; }
.showcase-dialog .sd-eyebrow { margin: 0 0 18px; color: var(--sd-accent); font: 600 10px/1.7 var(--smplsFontFamilyParagraph), sans-serif; letter-spacing: .14em; }
.showcase-dialog h2 { margin: 0 0 18px; color: var(--sd-ink); font: 400 clamp(36px, 4vw, 54px)/1.1 var(--smplsFontFamilyHeading), serif; letter-spacing: 0; }
.showcase-dialog .sd-intro { margin: 0 0 26px; color: var(--sd-ink); font: 400 14px/1.8 var(--smplsFontFamilyParagraph), sans-serif; }
.showcase-dialog [data-showcase-message-form] { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.showcase-dialog [data-showcase-message-form] label { display: grid; gap: 9px; color: var(--sd-ink); font: 500 13px/1.5 var(--smplsFontFamilyParagraph), sans-serif; }
.showcase-dialog [data-showcase-message-form] label.sd-wide, .showcase-dialog .sd-status, .showcase-dialog .sd-submit { grid-column: 1 / -1; }
.showcase-dialog [data-showcase-message-form] :is(input,textarea,select) { width: 100%; min-width: 0; padding: 13px 15px; background: #fff9; border: 1px solid #272d2640; border-radius: 0; color: var(--sd-ink); font: inherit; }
.showcase-dialog [data-showcase-message-form] textarea { min-height: 115px; resize: vertical; }
.showcase-dialog :is(input,textarea,select,button):focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 3px; }
.showcase-dialog .sd-submit { justify-self: start; padding: 17px 24px; background: #293328; color: #f2ecdf; font: 500 14px/1.6 var(--smplsFontFamilyParagraph), sans-serif; cursor: pointer; border: 0; }
.showcase-dialog .sd-status { margin: 0; font: 400 13px/1.7 var(--smplsFontFamilyParagraph), sans-serif; }
.showcase-dialog [hidden] { display: none !important; }
html.showcase-dialog-open { overflow: hidden; }
@media(max-width: 767px) {
    .showcase-dialog { padding: 52px 22px 28px; max-height: calc(100dvh - 24px); }
    .showcase-dialog [data-showcase-message-form] { grid-template-columns: 1fr; gap: 18px; }
    #site_header.showcase-header .showcase-wordmark { max-width: 155px; white-space: normal; }
}
@media(prefers-reduced-motion: reduce) { #site_header.showcase-header .wp-header-nav a { transition: none; } }
/* Overflow clipping must not create an intermediate scroll container above sticky headers. */
body:has(.showcase-header) { overflow-x: clip; overflow-y: visible; }
.site:has(> .showcase-header) { overflow: clip; }