/*
 * Studio navigation bar for every public studio page (customer area, shop,
 * schedule, booking, privates). Namespaced .zdn-* so it can sit on top of the
 * older pages, which bring their own resets. Accent colour comes from the
 * studio (inline --zdn-accent on .zdn).
 */
.zdn {
    --zdn-accent:#533afd; --zdn-on-accent:#fff;
    --zdn-ink:#0d253d; --zdn-mute:#64748d; --zdn-line:#e3e8ee;
    position:relative; z-index:20;
    font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
    font-weight:400; color:var(--zdn-ink); -webkit-font-smoothing:antialiased;
}
.zdn *, .zdn *::before, .zdn *::after { box-sizing:border-box; }
:where(.zdn) a { color:inherit; text-decoration:none; }
.zdn-banner {
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    padding:7px 16px; font-size:13px; line-height:1.35; text-align:center;
    background:#fff7e6; color:#7a4b00; border-bottom:1px solid #f3dfb3;
}
.zdn-banner.viewas { background:#1c1e54; color:#fff; border-bottom:0; }
.zdn-banner a, .zdn-banner button {
    font:inherit; font-weight:500; color:inherit; text-decoration:underline; background:none; border:0; padding:0; cursor:pointer;
}
.zdn-bar {
    background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--zdn-line);
}
.zdn-in {
    max-width:1080px; margin:0 auto; padding:0 16px; min-height:60px;
    display:flex; align-items:center; gap:14px;
}
.zdn-brand { display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto; }
.zdn-brand img { height:34px; width:auto; max-width:120px; object-fit:contain; display:block; }
.zdn-mark {
    width:34px; height:34px; border-radius:10px; flex:0 0 34px;
    display:grid; place-items:center; font-size:14px; font-weight:600; letter-spacing:.02em;
    background:var(--zdn-accent); color:var(--zdn-on-accent);
}
.zdn-name { font-size:16px; font-weight:500; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zdn-links { display:flex; align-items:center; gap:4px; margin-left:12px; }
.zdn-link {
    display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:9999px;
    font-size:14px; color:#273951; transition:background .12s, color .12s;
}
.zdn-link:hover { background:#f2f4f8; }
.zdn-link[aria-current="page"] { background:var(--zdn-ink); color:#fff; }
.zdn-link svg { width:16px; height:16px; flex:0 0 16px; }
.zdn-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
.zdn-icon {
    position:relative; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:9999px; color:#273951;
}
.zdn-icon:hover { background:#f2f4f8; }
.zdn-icon svg { width:19px; height:19px; }
.zdn-count {
    position:absolute; top:3px; right:2px; min-width:17px; height:17px; padding:0 5px; border-radius:9999px;
    background:var(--zdn-accent); color:var(--zdn-on-accent); font-size:11px; font-weight:600; line-height:17px; text-align:center;
}
.zdn-lang { position:relative; }
.zdn-lang summary {
    list-style:none; cursor:pointer; height:40px; min-width:40px; padding:0 10px; border-radius:9999px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:500; color:#273951; letter-spacing:.04em;
}
.zdn-lang summary::-webkit-details-marker { display:none; }
.zdn-lang summary:hover, .zdn-lang[open] summary { background:#f2f4f8; }
.zdn-lang-menu {
    position:absolute; right:0; top:46px; min-width:150px; padding:6px; border-radius:12px; background:#fff;
    border:1px solid var(--zdn-line); box-shadow:rgba(0,55,112,.12) 0 12px 32px;
}
.zdn-lang-menu a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:14px; }
.zdn-flag { width:22px; height:22px; flex:none; object-fit:contain; display:block; }
.zdn-lang-menu a:hover { background:#f2f4f8; }
.zdn-lang-menu a[aria-current="true"] { font-weight:600; }
.zdn-account {
    display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 14px; border-radius:9999px;
    font-size:14px; font-weight:500; background:var(--zdn-accent); color:var(--zdn-on-accent);
}
.zdn-account.in { background:#f2f4f8; color:var(--zdn-ink); padding:0 12px 0 4px; }
.zdn-account.in:hover { background:#e9ecf2; }
.zdn-avatar {
    width:32px; height:32px; border-radius:9999px; display:grid; place-items:center;
    background:var(--zdn-accent); color:var(--zdn-on-accent); font-size:12px; font-weight:600;
}
.zdn-account .zdn-who { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Phones: section links move to a second row that scrolls sideways. */
.zdn-row2 { display:none; }
@media (max-width:760px) {
    .zdn-in { min-height:56px; gap:8px; }
    .zdn-links { display:none; }
    .zdn-name { font-size:15px; }
    .zdn-account .zdn-who { display:none; }
    .zdn-account.in { padding:0 4px; }
    .zdn-account:not(.in) { padding:0 14px; }
    .zdn-row2 {
        display:flex; gap:6px; overflow-x:auto; padding:0 16px 10px; scrollbar-width:none;
    }
    .zdn-row2::-webkit-scrollbar { display:none; }
    .zdn-row2 .zdn-link { flex:0 0 auto; background:#f2f4f8; }
    .zdn-row2 .zdn-link[aria-current="page"] { background:var(--zdn-ink); color:#fff; }
}
@media (max-width:380px) { .zdn-name { display:none; } }
/* The older shop/schedule pages bring their own Schedule/Cart buttons; the
   bar above already has both, so theirs step aside while it is shown. */
.zdn ~ .wrap header.top .cart-link { display:none !important; }
.zdn-count[hidden] { display:none; }