/* Calmia website mock v2 — phone first (390 px), desktop from 1024 px. Fonts of the site today, rounded-square buttons,
   no horizontal scrolling anywhere, names under images, Hannah widget like today's. No inline style. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-body)/var(--lh-body) var(--font-body); padding-bottom: calc(var(--tabs-h) + var(--safe-b)); overflow-x: hidden; }
h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); }
h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700; margin: 0; }
h1 em, h2 em { font-style: italic; color: var(--brand); }
p { margin: 0 0 .75em; } a { color: var(--brand); }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
.wrap { padding: 0 var(--gutter); max-width: 1180px; margin: 0 auto; }
.eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; }
.muted { color: var(--muted); } .small { font-size: var(--fs-small); } .fine { font-size: .8rem; color: var(--muted); }
.textlink { background: 0; border: 0; padding: 0; color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- header ---------- */
.head { position: sticky; top: 0; z-index: 30; height: var(--head-h); background: rgba(248, 245, 239, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.head .wrap { height: 100%; display: flex; align-items: center; gap: 12px; }
.wordmark { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); text-decoration: none; line-height: 1; display: flex; flex-direction: column; gap: 2px; }
.wordmark span { font-family: var(--font-body); font-size: .56rem; font-weight: 600; letter-spacing: .2em; color: var(--muted); }
.nav { display: none; margin-left: 28px; gap: 2px; }
.nav a { padding: 10px 14px; border-radius: var(--radius-btn); text-decoration: none; color: var(--ink); font-weight: 600; }
.nav a[aria-current] { background: var(--brand-soft); color: var(--brand-ink); }
.head-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.head-open { font-size: .72rem; padding: 4px 9px 4px 7px; margin-left: 2px; white-space: nowrap; }
.head-open .dot { width: 8px; height: 8px; }
@media (max-width: 479px) { #head-book { display: none; } }
@media (min-width: 1024px) { .head-open { font-size: .82rem; margin-left: 10px; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-btn); border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), background var(--t-fast); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); }
.btn-ghost { background: var(--card-2); border-color: var(--line-strong); color: var(--brand); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: .92rem; }
.avatar { width: 40px; height: 40px; border-radius: var(--radius-btn); display: grid; place-items: center; font-weight: 700; background: var(--p-peach); color: var(--p-peach-ink); border: 0; cursor: pointer; font-family: var(--font-display); font-size: 1.1rem; }
.avatar.signed-out { background: var(--off); color: var(--muted); }
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- bottom tabs (phones) ---------- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tabs-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--card-2); border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: repeat(5, 1fr); }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 600; position: relative; }
.tabs a .ico { width: 24px; height: 24px; transition: transform var(--t) var(--ease); }
.tabs a[aria-current] { color: var(--brand); }
.tabs a[aria-current] .ico { transform: translateY(-2px); }
.tabs a[aria-current]::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
.tabs .badge { position: absolute; top: 8px; right: calc(50% - 22px); min-width: 18px; height: 18px; border-radius: 6px; background: var(--pop, var(--p-coral-dot)); color: #fff; font-size: .68rem; display: grid; place-items: center; padding: 0 5px; }
.tabs .badge:empty { display: none; }

/* ---------- Hannah widget (like today's: avatar + "Ask Hannah ↗") + to-top ---------- */
.hannah-btn { position: fixed; right: 12px; bottom: calc(var(--tabs-h) + var(--safe-b) + 12px); z-index: 31; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 6px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: var(--card-2); color: var(--brand); font-weight: 600; font-size: .95rem; box-shadow: var(--shadow); cursor: pointer; transition: transform var(--t) var(--ease), bottom var(--t) var(--ease); }
.hannah-btn:active { transform: scale(.97); }
.hannah-btn .av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mint); }
.hannah-btn .hint { position: absolute; right: 0; bottom: calc(100% + 8px); max-width: 240px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-size: .82rem; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t) var(--ease); pointer-events: none; }
.hannah-btn.show-hint .hint { opacity: 1; transform: none; }
.totop { position: fixed; left: 12px; bottom: calc(var(--tabs-h) + var(--safe-b) + 12px); z-index: 31; width: 44px; height: 44px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: var(--card-2); color: var(--brand); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--t); }
.totop.on { opacity: 1; pointer-events: auto; }

/* ---------- pages ---------- */
.page { display: none; animation: fadeup var(--t-slow) var(--ease); }
.page.on { display: block; }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section { padding: 28px 0; }
.section + .section { border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head a, .sec-head .textlink { font-weight: 600; white-space: nowrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card.lift { transition: transform var(--t) var(--ease), box-shadow var(--t); }
.card.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* hero (today's copy, today's layout) */
.hero { padding: 26px 0 10px; }
.hero h1 { margin: 6px 0 14px; }
.hero .lead { font-size: 1.05rem; color: var(--muted); max-width: 40ch; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 12px; }
.hero .textlink { display: inline-block; margin-bottom: 10px; }
.hero-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.hero-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; }
.hero-steps .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.05rem; }
.hero-steps .n { background: var(--brand-soft); color: var(--brand-ink); }
.hero-steps strong { display: block; font-size: .95rem; } .hero-steps li span:not(.n) { font-size: .84rem; color: var(--muted); }
.open-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: .85rem; }
.open-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 107, 58, .35); } 60% { box-shadow: 0 0 0 7px rgba(47, 107, 58, 0); } }

/* showcase = today's slideshow: image, then the caption OUTSIDE the image on a thin strip */
.show { margin-top: 18px; padding: 8px; border-radius: var(--radius); background: var(--mint-soft); }
.show .frame { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--mint); }
.show .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 800ms ease; }
.show .frame img.on { opacity: 1; }
.show .cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 12px 10px; background: var(--card-2); border-radius: 10px; margin-top: 8px; }
.show .cap h2 { font-size: 1.35rem; }
.show .cap .cnt { font-size: .82rem; color: var(--muted); white-space: nowrap; padding-top: 4px; }
.show .ctl { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 8px 6px 2px; font-size: .85rem; color: var(--muted); }
.show .ctl button { background: 0; border: 0; color: var(--ink); font: inherit; cursor: pointer; min-width: 36px; min-height: 32px; }

/* Meet Hannah */
.meet { position: relative; overflow: hidden; border: 0; background: var(--meet-bg, linear-gradient(135deg, var(--p-sky) 0%, var(--p-lavender) 55%, var(--p-rose) 100%)); padding: 22px 18px; }
.meet-top { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.orbit { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.orbit img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(32, 58, 76, .18); position: relative; z-index: 2; }
.orbit .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(51, 104, 160, .35); animation: ring 2.8s ease-out infinite; }
.orbit .ring:nth-child(2) { animation-delay: 1.4s; }
@keyframes ring { 0% { transform: scale(.72); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
.orbit .spin { position: absolute; inset: 0; animation: spin 9s linear infinite; }
.orbit .spin i { position: absolute; width: 14px; height: 14px; left: calc(50% - 7px); top: -2px; color: var(--brand); }
.orbit .spin i:nth-child(2) { transform: rotate(120deg); transform-origin: 7px 58px; } .orbit .spin i:nth-child(3) { transform: rotate(240deg); transform-origin: 7px 58px; }
.orbit .spin i::before { content: '✦'; font-size: 14px; line-height: 1; display: block; animation: twinkle 1.6s ease-in-out infinite; }
.orbit .spin i:nth-child(2)::before { animation-delay: .5s; } .orbit .spin i:nth-child(3)::before { animation-delay: 1s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.meet h2 { font-size: 1.7rem; }
.meet .tagline { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--brand-ink); margin: 6px 0 8px; }
.meet .lead { margin-top: 0; }
.soft { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 1.02rem; margin: 6px 0 0; }
.favlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.feats { display: grid; gap: 8px; margin: 16px 0; }
.feat { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: rgba(255, 253, 248, .78); border-radius: var(--radius-sm); }
.feat .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--card-2); color: var(--brand); display: grid; place-items: center; }
.feat strong { display: block; font-size: .95rem; } .feat span { font-size: .84rem; color: var(--muted); }
.meet-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* "A look for every mood" (today's grid): name UNDER the image */
.moods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mood { border: 0; background: 0; padding: 0; text-align: left; cursor: pointer; }
.mood .ph { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--mint-soft); }
.mood img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.mood:hover img { transform: scale(1.04); }
.mood .nm { font-family: var(--font-display); font-size: 1.1rem; margin: 10px 0 2px; }
.mood .ct { font-size: .8rem; color: var(--muted); }
.first-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--p-butter); color: var(--p-butter-ink); font-size: .8rem; font-weight: 600; margin-bottom: 10px; }

/* category list (vertical everywhere) */
.catlist { display: grid; gap: 8px; }
.catrow { display: grid; grid-template-columns: 14px 1fr auto 20px; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); text-decoration: none; color: var(--ink); font-weight: 600; cursor: pointer; text-align: left; transition: background var(--t-fast); }
.catrow .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-dot); }
.catrow .cnt { color: var(--muted); font-size: .85rem; font-weight: 500; }
.catrow .chev { color: var(--muted); }
.catrow:hover { background: var(--c-fill); }

.visit-card { display: grid; gap: 10px; }
.visit-card .row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.visit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- services page: vertical accordion on phones, two columns on desktop ---------- */
.svc-top { position: sticky; top: var(--head-h); z-index: 20; background: var(--bg); padding: 10px 0 8px; }
.search { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; border-radius: var(--radius-btn); background: var(--card-2); border: 1px solid var(--line-strong); }
.search input { border: 0; outline: 0; background: transparent; font: inherit; flex: 1; min-width: 0; color: var(--ink); }
.svc-layout { display: block; }
.svc-cats { display: none; }
.svc-sections { display: grid; gap: 8px; }
.svc-sec { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); scroll-margin-top: calc(var(--head-h) + 76px); overflow: hidden; }
.svc-sec .sec-btn { width: 100%; display: grid; grid-template-columns: 14px 1fr auto 20px; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border: 0; background: transparent; font-weight: 600; font-size: 1.05rem; text-align: left; cursor: pointer; }
.svc-sec .sec-btn .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-dot); }
.svc-sec .sec-btn .cnt { color: var(--muted); font-size: .85rem; font-weight: 500; }
.svc-sec .sec-btn .chev { color: var(--muted); transition: transform var(--t); }
.svc-sec.open .sec-btn { background: var(--c-fill); color: var(--c-ink); }
.svc-sec.open .sec-btn .chev { transform: rotate(180deg); }
.svc-list { display: none; padding: 8px; gap: 6px; background: var(--bg); border-top: 1px solid var(--line); }
.svc-sec.open .svc-list { display: grid; }
.svc { display: grid; grid-template-columns: 5px 1fr auto; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 10px 12px 10px 0; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--t-fast), background var(--t-fast); }
.svc::before { content: ''; grid-column: 1; grid-row: 1 / span 3; align-self: stretch; margin: -10px 0; background: var(--c-dot); }
.svc .main { grid-column: 2; grid-row: 1 / span 2; }
.svc .nm { font-weight: 600; }
.svc .meta { color: var(--muted); font-size: .84rem; }
.svc .price { grid-column: 3; grid-row: 1; align-self: end; font-weight: 700; white-space: nowrap; text-align: right; }
.svc .price small { color: var(--muted); font-weight: 500; font-size: .72rem; margin-right: 3px; }
.svc .add { grid-column: 3; grid-row: 2; align-self: start; display: flex; justify-content: flex-end; }
.svc .add .btn { min-height: 36px; padding: 0 12px; font-size: .9rem; }
.svc.in { border-color: var(--c-dot); background: var(--c-fill); }
.svc.in .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.svc .desc { grid-column: 2 / -1; grid-row: 3; color: var(--muted); font-size: .84rem; display: none; }
.svc.open .desc { display: block; }
.addon-hint { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ink); font-size: .86rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; animation: fadeup var(--t) var(--ease); }
.addon-hint .btn { min-height: 32px; padding: 0 10px; font-size: .82rem; background: var(--card-2); color: var(--brand-ink); border-color: transparent; }

/* cart bar */
.cartbar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabs-h) + var(--safe-b) + 12px); z-index: 29; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; box-shadow: 0 12px 32px rgba(32, 58, 76, .35); transform: translateY(120%); opacity: 0; transition: transform var(--t-slow) var(--ease), opacity var(--t); }
.cartbar.on { transform: none; opacity: 1; }
.cartbar strong { font-size: 1.05rem; } .cartbar .sub { font-size: .82rem; opacity: .8; }
.cartbar .btn { background: #fff; color: var(--ink); }
.cartbar .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: var(--pop, var(--p-coral-dot)); font-size: .78rem; margin-right: 6px; }
body.has-cart .hannah-btn, body.has-cart .totop { bottom: calc(var(--tabs-h) + var(--safe-b) + 86px); }
.bump { animation: bump var(--t) var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- studio page (today's intro kept) ---------- */
.studio-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding-top: 22px; margin-bottom: 4px; }
.studio-bar .eyebrow { margin: 0; flex: 1 1 100%; }
@media (min-width: 600px) { .studio-bar .eyebrow { flex: 1 1 auto; } }
.studio-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.studio-links a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 6px; }
.banner { text-align: center; padding: 26px 18px; border-radius: var(--radius); background: var(--banner-bg, linear-gradient(180deg, var(--p-sky), var(--mint-soft))); border: 1px solid var(--line); margin: 18px 0; }
.banner h2 { font-size: 1.9rem; }
.banner .no { display: inline-block; margin: 10px 0; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--card-2); font-weight: 700; }
.steps3 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 6px; margin: 10px 0 22px; }
.step3 { text-align: center; font-size: .82rem; font-weight: 600; }
.step3 .ic { position: relative; width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--brand); }
.step3 .ic.on { background: var(--brand-soft); border-color: var(--brand); }
.step3 .ic b { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .7rem; display: grid; place-items: center; }
.steps3 .arr { color: var(--muted); padding-top: 20px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter button { min-height: 38px; padding: 0 14px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: var(--card-2); font-weight: 600; font-size: .9rem; cursor: pointer; }
.filter button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.looks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.look { position: relative; border: 0; background: 0; padding: 0; text-align: left; cursor: pointer; }
.look .ph { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--mint-soft); }
.look img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.look:hover img { transform: scale(1.04); }
.look .nm { font-family: var(--font-display); font-size: 1.1rem; margin: 10px 0 2px; }
.look .ct { font-size: .8rem; color: var(--muted); }
.look .fav { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255, 253, 248, .92); color: var(--pop, var(--p-rose-dot)); display: grid; place-items: center; cursor: pointer; }
.look .fav.on .ico { fill: var(--pop, var(--p-rose-dot)); }

/* ---------- visit page (today's layout, without the "Before you come in" block; the map as tall as the card) ---------- */
.visit-grid { display: grid; gap: 16px; margin-top: 18px; }
.visit-info { padding: 26px 22px; }
.visit-info h2 { margin: 6px 0 16px; }
.visit-info p { margin-bottom: 12px; }
.visit-info .visit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; }
.visit-info .textlink { font-size: .95rem; }
.map-wrap { display: flex; flex-direction: column; min-height: 320px; border-radius: var(--radius); overflow: hidden; background: var(--mint-soft); border: 1px solid var(--line); }
.map-frame { flex: 1; width: 100%; min-height: 280px; border: 0; display: block; }
.map-link { padding: 12px; text-align: center; }
@media (min-width: 1024px) { .visit-grid { grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; } .map-wrap { min-height: 100%; } }
details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 0 14px; }
details + details { margin-top: 8px; }
summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; list-style: none; }
summary::after { content: '+'; margin-left: auto; font-size: 1.3rem; color: var(--brand); transition: transform var(--t); }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: 12px; }

/* ---------- reviews page ---------- */
.rv-head { display: grid; gap: 14px; }
.rv-score { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rv-score .stars { color: var(--p-amber-dot); letter-spacing: 2px; font-size: 1.1rem; }
.rv-score strong { font-size: 1.2rem; }
.rv-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rv { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rv .ph { aspect-ratio: 4 / 3; background: var(--mint-soft); display: grid; gap: 3px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.rv .ph img { width: 100%; height: 100%; object-fit: cover; }
.rv .ph.n1 img { grid-column: 1 / -1; grid-row: 1 / -1; }
.rv .ph.n2 img { grid-row: 1 / -1; }
.rv .ph.n3 img:first-child { grid-row: 1 / -1; }
.rv .ph .more { position: relative; } .rv .ph .more::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(32, 58, 76, .55); color: #fff; font-weight: 700; font-size: 1.3rem; }
.rv .svcs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chk { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; min-height: 44px; padding: 0 4px; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }
.chk span { font-size: .95rem; } .chk small { display: block; color: var(--muted); }
.rv .body { padding: 14px; }
.rv .who { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.rv .who .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.rv .who strong { display: block; font-size: .95rem; } .rv .who span { font-size: .8rem; color: var(--muted); }
.rv .stars { color: var(--p-amber-dot); letter-spacing: 1px; font-size: .95rem; }
.rv p { font-size: .95rem; margin: 0 0 10px; }
.rv .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rv .like { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--card-2); border-radius: var(--radius-btn); min-height: 34px; padding: 0 10px; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--muted); }
.rv .like.on { color: var(--brand-ink); background: var(--brand-soft); border-color: transparent; } .rv .like.on .ico { fill: var(--brand); stroke: var(--brand); }
.rv .like .ico { width: 16px; height: 16px; }
.upload { width: 100%; min-height: 110px; display: grid; place-items: center; gap: 2px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--card-2); color: var(--brand); font-weight: 600; cursor: pointer; margin-bottom: 10px; }
.sh-thumbs { margin-bottom: 14px; } .sh-thumbs img { cursor: pointer; border: 3px solid transparent; } .sh-thumbs img.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.sh-count { font-size: .85rem; color: var(--muted); margin: -8px 0 10px; }
.rate { display: flex; gap: 4px; } .rate button { border: 0; background: 0; font-size: 1.9rem; color: var(--line-strong); cursor: pointer; padding: 0 2px; line-height: 1; } .rate button.on { color: var(--p-amber-dot); }
.field textarea { border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 10px 14px; font: inherit; background: var(--card-2); resize: vertical; }
.field + .field { margin-top: 12px; }

/* ---------- account page (the shapes of mock v1, as the Owner asked) ---------- */
#page-account .btn { border-radius: 999px; }
#page-account .card { border-radius: 18px; }
#page-account .acct-hero { border-radius: 18px; }
#page-account .acct-hero .big { border-radius: 50%; }
#page-account .appt .date { border-radius: 14px; }
#page-account .swatch { border-radius: 50%; }
#page-account .hist .row { border-radius: 14px; }
#page-account .field input { border-radius: 999px; }
.head .avatar { border-radius: 50%; }
.acct-hero { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: var(--radius); background: var(--acct-bg, var(--p-peach)); color: var(--acct-ink, var(--p-peach-ink)); transition: background var(--t-slow); }
.acct-hero .big { width: 64px; height: 64px; border-radius: 16px; background: var(--card-2); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.8rem; }
.acct-hero h2 { font-size: 1.6rem; }
.theme-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 16px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; transition: transform var(--t-fast) var(--ease); }
.swatch:hover { transform: scale(1.1); } .swatch.on { border-color: var(--card-2); box-shadow: 0 0 0 2px var(--ink); }
.appt { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.appt .date { width: 56px; height: 60px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; text-align: center; line-height: 1.05; font-weight: 600; font-size: .7rem; }
.appt .date b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; display: block; }
.appt-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hist { display: grid; gap: 8px; }
.hist .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.hist .row .ico-btn { color: var(--brand); font-weight: 600; background: 0; border: 0; cursor: pointer; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.thumbs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.toggle { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); gap: 10px; }
.sw { width: 46px; height: 28px; border-radius: 14px; background: var(--line-strong); border: 0; position: relative; cursor: pointer; transition: background var(--t); flex: 0 0 auto; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--t) var(--ease); }
.sw[aria-checked="true"] { background: var(--brand); } .sw[aria-checked="true"]::after { transform: translateX(18px); }
.signin { display: grid; gap: 10px; max-width: 420px; }
.field { display: grid; gap: 6px; } .field label { font-weight: 600; font-size: .9rem; }
.field input { min-height: var(--tap); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 0 14px; font: inherit; background: var(--card-2); }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(32, 58, 76, .45); opacity: 0; pointer-events: none; transition: opacity var(--t); }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 92vh; display: flex; flex-direction: column; background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-up); transform: translateY(100%); transition: transform var(--t-slow) var(--ease); }
.sheet.on { transform: none; }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 10px auto 0; }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter) 8px; }
.sheet-head h2 { font-size: 1.4rem; flex: 1; }
.sheet-head .av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mint); }
.sheet-body { overflow: auto; padding: 0 var(--gutter) 16px; -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: 10px var(--gutter) calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--card-2); display: flex; gap: 10px; align-items: center; }
.sheet-foot .btn-primary { flex: 1; }
.x { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--off); display: grid; place-items: center; cursor: pointer; }

/* book flow */
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; }
.progress i { height: 5px; border-radius: 3px; background: var(--line); transition: background var(--t); }
.progress i.on { background: var(--brand); }
.bk-step { display: none; animation: fadeup var(--t) var(--ease); } .bk-step.on { display: block; }
.pick { display: grid; gap: 8px; }
.pick label { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
.pick input { display: none; }
.pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pick .av { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.day { height: 68px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; line-height: 1.05; font-weight: 600; cursor: pointer; padding: 0; }
.day small { font-weight: 500; color: var(--muted); font-size: .72rem; } .day b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.day.on { background: var(--brand); color: #fff; border-color: var(--brand); } .day.on small { color: #fff; }
.times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.time { min-height: var(--tap); border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: .95rem; white-space: nowrap; cursor: pointer; }
.time.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.summary { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); }
.summary .row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; } .summary .row > :last-child { text-align: right; }
.summary .tot { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 700; }
.code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 320px; }
.code input { min-height: 52px; text-align: center; font-size: 1.4rem; font-weight: 700; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card-2); }
.done { text-align: center; padding: 20px 0 10px; }
.tick { width: 96px; height: 96px; margin: 0 auto 14px; }
.tick circle { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 3; stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 700ms var(--ease) forwards; }
.tick path { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw 500ms 500ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confetti { position: relative; height: 0; }
.confetti i { position: absolute; left: 50%; top: -60px; width: 8px; height: 12px; border-radius: 2px; animation: fall 1100ms var(--ease) forwards; }
@keyframes fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), 120px) rotate(300deg); } }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; font-size: .8rem; }

/* look sheet */
.look-hero { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--mint-soft); }
.look-hero img { width: 100%; height: 100%; object-fit: cover; }

/* hannah sheet */
.chat { display: grid; gap: 10px; padding: 8px 0 14px; }
.bub { max-width: 85%; padding: 10px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); animation: fadeup var(--t) var(--ease); }
.bub.me { margin-left: auto; background: var(--brand); color: #fff; border: 0; border-bottom-right-radius: 4px; }
.bub.h { border-bottom-left-radius: 4px; }
.sugg { display: flex; gap: 8px; flex-wrap: wrap; }
.sugg button { min-height: 38px; padding: 0 12px; border-radius: var(--radius-btn); border: 1px solid var(--brand); background: var(--card-2); color: var(--brand-ink); font-weight: 600; font-size: .88rem; cursor: pointer; text-align: left; }
.composer { display: flex; gap: 8px; align-items: center; flex: 1; }
.composer input { flex: 1; min-height: var(--tap); border-radius: var(--radius-btn); border: 1px solid var(--line-strong); padding: 0 14px; font: inherit; background: var(--card-2); min-width: 0; }
.composer .btn { width: 44px; padding: 0; }
.typing { display: inline-flex; gap: 4px; padding: 10px 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* toast + footer */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + var(--safe-b) + 84px); transform: translate(-50%, 20px); z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; opacity: 0; transition: opacity var(--t), transform var(--t) var(--ease); pointer-events: none; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.foot { padding: 28px 0 20px; color: var(--muted); font-size: .88rem; }
.foot .links { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.foot a { color: var(--muted); font-weight: 600; }

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .tabs { display: none; }
  .nav { display: flex; }
  .hannah-btn, body.has-cart .hannah-btn { bottom: 28px; right: 28px; }
  .totop, body.has-cart .totop { bottom: 28px; left: 28px; }
  .cartbar { left: auto; right: 28px; bottom: 96px; width: 380px; }
  .toast { bottom: 40px; }
  .section { padding: 44px 0; }
  .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 40px 0 16px; }
  .hero h1 { font-size: clamp(2.6rem, 4.2vw, 3.6rem); }
  .hero-steps { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
  .hero-steps li { grid-template-columns: 32px 1fr; align-items: start; }
  .show { margin-top: 0; width: 100%; max-width: 540px; justify-self: end; }
  .show .frame { aspect-ratio: 4 / 4.4; }
  .rv-head { grid-template-columns: 1fr auto; align-items: end; }
  .rv-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .meet { padding: 32px; }
  .meet-top { grid-template-columns: 140px 1fr; gap: 24px; }
  .orbit { width: 140px; height: 140px; } .orbit img { width: 104px; height: 104px; }
  .orbit .spin i:nth-child(2), .orbit .spin i:nth-child(3) { transform-origin: 7px 72px; }
  .feats { grid-template-columns: repeat(3, 1fr); }
  .moods { grid-template-columns: repeat(4, 1fr); }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .catlist { grid-template-columns: repeat(2, 1fr); }
  .svc-top { padding: 14px 0 10px; }
  .svc-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
  .svc-cats { display: block; position: sticky; top: calc(var(--head-h) + 86px); }
  .svc-cats button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent; font-weight: 600; cursor: pointer; text-align: left; transition: background var(--t-fast); }
  .svc-cats button .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c-dot); }
  .svc-cats button .cnt { margin-left: auto; color: var(--muted); font-size: .82rem; font-weight: 500; }
  .svc-cats button:hover { background: var(--card-2); }
  .svc-cats button.on { background: var(--c-fill); color: var(--c-ink); }
  .svc-sections { gap: 22px; }
  .svc-sec { border: 0; background: transparent; overflow: visible; scroll-margin-top: calc(var(--head-h) + 90px); }
  .svc-sec .sec-btn { padding: 0; min-height: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; cursor: default; margin-bottom: 10px; }
  .svc-sec .sec-btn .chev { display: none; }
  .svc-sec.open .sec-btn { background: transparent; color: var(--ink); }
  .svc-list, .svc-sec.open .svc-list { display: grid; padding: 0; border: 0; background: transparent; }
  .svc { grid-template-columns: 5px 1fr auto auto; grid-template-rows: auto auto; } .svc::before { grid-row: 1 / span 2; } .svc .main { grid-row: 1; } .svc .price { grid-column: 3; grid-row: 1; align-self: center; } .svc .add { grid-column: 4; grid-row: 1; align-self: center; } .svc .desc { grid-row: 2; }
  .steps3 { max-width: 560px; }
  .looks { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .sheet { left: auto; right: 0; top: 0; max-height: none; width: 460px; border-radius: 0; transform: translateX(100%); }
  .sheet.on { transform: none; }
  .sheet .grab { display: none; }
  .sheet.book { left: 50%; right: auto; top: 50%; bottom: auto; width: 560px; max-height: 88vh; border-radius: 18px; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: transform var(--t-slow) var(--ease), opacity var(--t); }
  .sheet.book.on { transform: translate(-50%, -50%); opacity: 1; }
  .times { grid-template-columns: repeat(4, 1fr); }
  .acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .thumbs { grid-template-columns: repeat(6, 1fr); }
}

/* ================= BOOKING_WEBSITE_R1: additions over mock v4.4 (server pages) ================= */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card-2); padding: 8px 12px; border-radius: var(--radius-btn); }
.skip:focus { left: 8px; }
main.page { display: block; }
.loading { color: var(--muted); padding: 12px 0; }
.noscript { padding: 12px var(--gutter); background: var(--p-butter); color: var(--p-butter-ink); }
.notice { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ink); font-size: .92rem; }
.notice.err { background: var(--err-soft); color: var(--err); }
.legal h2 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; margin: 22px 0 8px; }
.legal ul { padding-left: 20px; } .legal li { margin-bottom: 6px; }
.avatar { text-decoration: none; }
/* the Studio frame fills the viewport under the header (its own scrolling, modals centre properly) */
.studio-wrap { padding-bottom: 8px; }
.studio-host { position: relative; margin: 0 auto; max-width: 1180px; padding: 0 var(--gutter) 16px; }
.studio-frame { display: block; width: 100%; height: calc(100vh - var(--head-h) - var(--tabs-h) - var(--safe-b) - 8px); height: calc(100dvh - var(--head-h) - var(--tabs-h) - var(--safe-b) - 8px); min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-2); }
.studio-status { padding: 14px; border-radius: var(--radius); background: var(--p-sky); color: var(--p-sky-ink); font-size: .95rem; }
/* the Hannah panel: chips + the widget frame */
.hannah-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 var(--gutter) calc(10px + var(--safe-b)); }
.hannah-body .sugg { padding: 4px 0 10px; }
.hannah-frame-wrap { flex: 1; min-height: 360px; border-radius: var(--radius); overflow: hidden; background: var(--card-2); border: 1px solid var(--line); position: relative; }
.hannah-frame { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.hannah-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; color: var(--muted); background: var(--card-2); }
.sheet#sheet-hannah { height: 86vh; height: 86dvh; }
.sheet#sheet-hannah .hannah-body { height: 100%; }
/* booking flow extras */
.bk-note { font-size: .88rem; color: var(--muted); margin: 8px 0; }
.holdbar { font-size: .88rem; color: var(--brand-ink); background: var(--brand-soft); padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.holdbar.low { background: var(--err-soft); color: var(--err); }
.slotgrp { font-family: var(--font-body); font-size: .9rem; font-weight: 700; margin: 12px 0 6px; color: var(--muted); }
.time.alt { border-color: var(--brand); }
.devhint { font-size: .82rem; color: var(--p-butter-ink); background: var(--p-butter); padding: 6px 10px; border-radius: 8px; }
@media (min-width: 1024px) {
  .studio-frame { height: calc(100vh - var(--head-h) - 24px); height: calc(100dvh - var(--head-h) - 24px); }
  .sheet#sheet-hannah { height: auto; top: 0; bottom: 0; }
}

/* ================= BOOKING_WEBSITE_R1: service groups (variants) + times grid ================= */
.svc-group { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-2); padding: 8px 8px 4px; display: grid; gap: 6px; }
.svc-group-name { font-weight: 600; padding: 2px 4px 4px; }
.svc.variant { background: var(--card); }
.svc-desc-cat { padding: 0 14px 8px; margin: 0; }
.times-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.more-wrap { margin: 8px 0; }
.open-pill.closed { background: var(--off); color: var(--muted); } .open-pill.closed .dot { background: var(--muted); animation: none; }
.verify .field { margin-top: 10px; }
@media (min-width: 1024px) { .times-grid { grid-template-columns: repeat(4, 1fr); } }
/* ---- BOOKING_WEBSITE_R1_1: the maintenance page (the website closed until the Owner opens it) + the Owner's preview bar ---- */
body.maint { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px 40px; }
.maint-wrap { width: 100%; max-width: 560px; text-align: center; }
.maint-wrap .wordmark { display: inline-flex; margin-bottom: 28px; }
.maint-wrap .eyebrow { margin-bottom: 8px; }
.maint-wrap h1 { margin: 0 0 14px; }
.maint-wrap .lead { color: var(--muted); max-width: 44ch; margin: 0 auto 18px; }
.maint-wrap .open-pill { display: inline-flex; }
.maint-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0 22px; }
.maint-actions .btn { min-width: 180px; }
.maint-card { text-align: left; padding: 18px 20px; }
.maint-card h2 { font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.maint-card h2 + p, .maint-hours { margin: 0 0 16px; color: var(--muted); }
.maint-hours { list-style: none; padding: 0; }
.maint-hours li { padding: 2px 0; }
.maint-wrap .fine { margin-top: 18px; }
.preview-bar { position: sticky; top: 0; z-index: 60; background: #fff3c4; color: #5a4300; font-size: 0.85rem; text-align: center; padding: 6px 12px; border-bottom: 1px solid #e8d48a; }
/* ================= BOOKING_REVIEWS_R1: the Reviews page, the "Share your look" sheet, the Report sheet (mock v1 "MOCK OK" 2026-10-23 night) =================
   Phone first (390 px), desktop from 1024 px. No inline style. */

/* ---------- the page head ---------- */
.rv-head { display: grid; gap: 14px; }
.rv-head .btn { justify-self: start; }
.rv-score { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.rv-score .stars { color: var(--p-amber-dot); letter-spacing: 2px; font-size: 1.1rem; }
.rv-score strong { font-size: 1.2rem; }
.rv-empty { padding: 28px 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* ---------- the cards: newest first, photos in ONE frame (1 / 2 / 3 / 4+), the reviewer's colour on the initial ---------- */
.rv-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rv { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; animation: fadeup var(--t-slow) var(--ease); }
.rv.mine { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.rv .ph { aspect-ratio: 4 / 3; background: var(--mint-soft); display: grid; gap: 3px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.rv .ph img { width: 100%; height: 100%; object-fit: cover; }
.rv .ph.n1 img { grid-column: 1 / -1; grid-row: 1 / -1; }
.rv .ph.n2 img { grid-row: 1 / -1; }
.rv .ph.n3 img:first-child { grid-row: 1 / -1; }
.rv .ph .more { position: relative; }
.rv .ph .more::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(32, 58, 76, .55); color: #fff; font-weight: 700; font-size: 1.3rem; }
.rv .body { padding: 14px; }
.rv .who { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.rv .who .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); background: var(--rv-fill, var(--p-sky)); color: var(--rv-ink, var(--p-sky-ink)); }
.rv .who strong { display: block; font-size: .95rem; }
.rv .who .when { font-size: .8rem; color: var(--muted); }
.rv .stars { color: var(--p-amber-dot); letter-spacing: 1px; font-size: .95rem; white-space: nowrap; }
.rv .stars .off { color: var(--line-strong); }
.rv p { font-size: .95rem; margin: 0 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
.rv .svcs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rv .svcs .tag { font-size: .78rem; }
.rv .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rv .foot .fine { margin: 0; }
.rv .mine-tag { font-size: .78rem; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); padding: 3px 8px; border-radius: var(--radius-pill); }
.rv .report { background: 0; border: 0; padding: 6px 0; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rv .report:hover { color: var(--err); }
.rv-more { display: flex; justify-content: center; margin: 18px 0 6px; }
.rv-signin { margin-top: 14px; }

/* ---------- "Share your look" (a signed-in My Calmia customer) ---------- */
.upload { width: 100%; min-height: 110px; display: grid; place-items: center; gap: 2px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--card-2); color: var(--brand); font-weight: 600; cursor: pointer; margin-bottom: 10px; font: inherit; font-weight: 600; }
.upload .small { font-weight: 500; }
.sh-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.sh-thumbs .th { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--mint-soft); }
.sh-thumbs .th img { width: 100%; height: 100%; object-fit: cover; }
.sh-thumbs .th .rm { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 8px; border: 0; background: rgba(32, 58, 76, .7); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.sh-count { font-size: .85rem; color: var(--muted); margin: 0 0 12px; }
.chk { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; min-height: 44px; padding: 0 4px; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }
.chk span { font-size: .95rem; }
.chk small { display: block; color: var(--muted); }
.rate { display: flex; gap: 4px; }
.rate button { border: 0; background: 0; font-size: 1.9rem; color: var(--line-strong); cursor: pointer; padding: 0 2px; line-height: 1; transition: transform var(--t-fast) var(--ease); }
.rate button.on { color: var(--p-amber-dot); }
.rate button:active { transform: scale(1.2); }
.field textarea { border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 10px 14px; font: inherit; background: var(--card-2); resize: vertical; min-height: 88px; }
.field + .field { margin-top: 12px; }
.field .count { font-size: .78rem; color: var(--muted); text-align: right; }
.sh-done { text-align: center; padding: 20px 0 10px; }
.sh-done h2 { margin: 6px 0; }

/* ---------- Report a review (no sign-in needed) ---------- */
.rep-opts { display: grid; gap: 8px; margin: 6px 0 12px; }
.rep-opts label { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
.rep-opts input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }
.rep-opts label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.rep-note { font-size: .85rem; color: var(--muted); }

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .rv-head { grid-template-columns: 1fr auto; align-items: end; }
  .rv-head .btn { justify-self: end; }
  .rv-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .sh-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ================= BOOKING_WEBSITE_HOME_R1: the Home polish (the Owner's list of 2026-10-24, mock v2.1 "MOCK OK") on top of the rules above =================
   New or overriding rules only: the header (maple leaf, language menu, the compact phone header), the Home typography of the old site (thin 11px eyebrows, the big Georgia
   h1 / h2, the 17px lead), the hero (three points, two buttons, the 4:3 picture as tall as the text on desktop, 4:5 on phones, the caption + the controls inside), the two
   teaser cards (shortcuts, points), the salon card, the footer of the old site (brand / Explore Calmia / Plan your visit). Phone first, desktop from 1024 px. No inline style. */

/* ---------- header: maple leaf by the wordmark + the language menu beside Book Now ---------- */
.wordmark { flex-direction: row; align-items: center; gap: 8px; }
.wordmark .wm { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0; color: var(--ink); line-height: 1; }
.wordmark .wm span { font-family: var(--font-body); font-size: .56rem; font-weight: 600; letter-spacing: .2em; color: var(--muted); }
.wordmark .leaf { width: 22px; height: 22px; flex: 0 0 auto; margin-top: -8px; }
.head .wrap { gap: 10px; }
.nav { margin-left: 14px; }
.nav a { white-space: nowrap; padding: 10px 12px; }
#head-book { white-space: nowrap; }
.lang { position: relative; display: inline-flex; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 8px 0 6px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: var(--card-2); color: var(--ink); font-weight: 600; font-size: .85rem; cursor: pointer; }
.lang-btn .flag, .lang-menu .flag { width: 22px; height: 15px; border-radius: 2px; display: block; flex: 0 0 auto; }
.lang-btn .chev { width: 14px; height: 14px; color: var(--muted); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; padding: 6px; border-radius: var(--radius-sm); background: var(--card-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow); display: grid; gap: 2px; z-index: 40; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-weight: 600; font-size: .9rem; text-align: left; cursor: pointer; }
.lang-menu button:hover { background: var(--bg); }
.lang-menu button[aria-checked="true"] { background: var(--brand-soft); color: var(--brand-ink); }
@media (max-width: 479px) { .lang-btn .code, .lang-btn .chev { display: none; } .lang-btn { padding: 0 6px; min-height: 36px; } }
/* phones: the header must fit 360 px — wordmark + short hours pill + flag + account */
@media (max-width: 1023px) { .head .wrap { gap: 8px; } .head-r { gap: 6px; } .head-open { padding: 4px 8px 4px 6px; margin-left: 0; max-width: 150px; overflow: hidden; } .head-open span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wordmark .wm { font-size: 1.45rem; } }
@media (max-width: 359px) { .head-open { display: none; } }

/* ---------- Home typography (the old site's sizes and weights) ---------- */
body[data-route="home"] .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--ink); margin: 0 0 10px; }
body[data-route="home"] h1 { font-size: clamp(40px, 4.7vw, 68px); line-height: 1.1; letter-spacing: -.035em; }
body[data-route="home"] h2 { font-size: clamp(30px, 3.1vw, 45px); line-height: 1.1; letter-spacing: -.035em; }
body[data-route="home"] .lead { font-size: 17px; line-height: 1.7; }
body[data-route="home"] .section .sec-head { margin-bottom: 22px; }

/* ---------- hero: 3 points, 2 buttons, the slideshow on the right as tall as the text ---------- */
.hero .lead { max-width: 46ch; }
.hero-points, .points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.hero-points li, .points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--ink); }
.hero-points .ico, .points .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); stroke-width: 2.4; }
.points { margin: 4px 0 18px; }
.hero-cta { margin: 22px 0 0; }
@media (max-width: 1023px) { .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hero-cta .btn { width: 100%; padding: 0 8px; font-size: .95rem; white-space: nowrap; } }
.hero-cta .btn { min-height: 50px; padding: 0 23px; }
.hero-cta .btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.hero-cta .btn-ghost:hover { background: var(--card-2); }
/* the slideshow: 4:5 frame, the caption and the controls INSIDE the picture, kept small */
.show { padding: 8px; }
.show .frame { aspect-ratio: 4 / 5; border-radius: 12px; }
.show .cap { position: absolute; left: 10px; bottom: 10px; right: auto; max-width: calc(100% - 20px); margin: 0; padding: 5px 10px 6px; border-radius: 8px; background: rgba(255, 253, 248, .9); backdrop-filter: blur(6px); box-shadow: 0 3px 12px rgba(32, 58, 76, .12); display: flex; align-items: center; gap: 10px; }
.show .cap .eyebrow { font-size: 8px; letter-spacing: .14em; margin: 0; color: var(--muted); line-height: 1.2; }
.show .cap h2 { font-size: .95rem; line-height: 1.2; letter-spacing: 0; margin: 1px 0 0; display: inline; }
.show .cap .small { font-size: .7rem; margin: 0; display: inline; }
.show .cap .small::before { content: '· '; color: var(--muted); }
.show .cap .cnt { font-size: .7rem; padding: 0; align-self: center; margin: 0; }
.show .ctl { position: absolute; right: 10px; top: 10px; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 253, 248, .84); backdrop-filter: blur(6px); box-shadow: 0 3px 12px rgba(32, 58, 76, .12); }
.show .ctl button { min-width: 24px; min-height: 24px; width: 24px; height: 24px; padding: 0; border-radius: 6px; display: grid; place-items: center; font-size: .85rem; line-height: 1; }
.show .ctl button:hover { background: var(--card-2); }
.show .ctl .ico { width: 14px; height: 14px; stroke-width: 2.2; }

/* ---------- Meet Hannah (text only; the card as mock v4.4) ---------- */
.meet .eyebrow { color: var(--brand-ink); opacity: .85; }
.meet .lead.small { font-size: 15px; line-height: 1.6; }
.meet .tagline { white-space: nowrap; }
/* phones: the avatar sits high beside the heading; the sentence runs the full width of the card under them */
@media (max-width: 1023px) {
  .meet { padding: 20px 16px; }
  /* row 1: MEET HANNAH at the left edge · row 2: avatar + title · row 3: the tagline on one line · row 4: the sentence, full width */
  .meet-top { grid-template-columns: 88px minmax(0, 1fr); gap: 6px 12px; align-items: center; }
  .meet-top > div:last-child { display: contents; }
  .orbit { width: 88px; height: 88px; grid-row: 2; grid-column: 1; }
  .orbit img { width: 68px; height: 68px; }
  .orbit .spin i:nth-child(2), .orbit .spin i:nth-child(3) { transform-origin: 7px 46px; }
  .meet .eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
  body[data-route="home"] .meet h2 { grid-column: 2; grid-row: 2; font-size: clamp(20px, 5.8vw, 26px); letter-spacing: -.02em; }
  .meet .tagline { grid-column: 1 / -1; grid-row: 3; font-size: clamp(.9rem, 4.6vw, 1.1rem); margin: 8px 0 0; }
  .meet .lead.small { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
}

/* ---------- "A look for every mood" ---------- */
.moods .nm { font-size: 1.15rem; }
body[data-route="home"] .sec-head a { font-weight: 500; }
body[data-route="home"] .sec-head h2 { white-space: nowrap; }
@media (max-width: 1023px) { body[data-route="home"] .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; } body[data-route="home"] .sec-head h2 { font-size: clamp(28px, 8vw, 34px); } }

/* ---------- two teaser cards: Find your service (4 shortcuts) + Your looks (My Calmia) ---------- */
.teaser { padding: 24px 20px; display: flex; flex-direction: column; }
.teaser h2 { margin: 0 0 12px; }
.teaser > p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.teaser .fine { margin: 12px 0 0; }
.shortcuts { display: grid; gap: 0; margin: 14px 0 8px; border-top: 1px solid var(--line); }
.shortcuts a { display: grid; grid-template-columns: 12px 1fr 20px; align-items: center; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.shortcuts a .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c-dot, var(--brand)); }
.shortcuts a .chev { color: var(--muted); width: 18px; height: 18px; }
.shortcuts a:hover { color: var(--brand); }
.teaser .more { font-weight: 600; margin-top: auto; }
.teaser .btn { align-self: flex-start; min-height: 50px; padding: 0 23px; background: transparent; border-color: var(--line-strong); color: var(--ink); margin-top: 6px; }
.teaser .btn:hover { background: var(--card-2); }

/* ---------- "A real salon behind every idea" ---------- */
.salon { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 20px; border-radius: var(--radius); background: var(--mint-soft); }
.salon h2 { margin: 0 0 10px; }
.salon p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.salon .btn { min-height: 50px; padding: 0 23px; background: transparent; border-color: var(--line-strong); color: var(--ink); flex: 0 0 auto; }
.salon .btn:hover { background: var(--card-2); }

/* ---------- footer like the old site: brand + Explore Calmia (Get the App) + Plan your visit ---------- */
.foot { background: var(--off); border-top: 1px solid var(--line); max-width: none; padding: 0; margin-top: 20px; }
.foot .foot-inner { max-width: 1180px; margin: 0 auto; padding: 32px var(--gutter) 24px; display: grid; gap: 26px; }
.foot .wordmark { margin-bottom: 14px; }
.foot .brand p { margin: 0 0 8px; color: var(--ink); font-size: .95rem; }
.foot .brand .fine { max-width: none; white-space: nowrap; }
@media (max-width: 1023px) { .foot .foot-inner { grid-template-columns: 1fr 1fr; gap: 20px 16px; } .foot .brand { grid-column: 1 / -1; } }
.foot .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.foot .col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.foot .col a, .foot .col .textlink { color: var(--ink); font-weight: 400; text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; font-size: .92rem; }
.foot .col a:hover, .foot .col .textlink:hover { color: var(--brand); }
.foot .col .btn { margin: 0 0 8px; min-height: 44px; font-weight: 600; }
.foot .col .btn-primary { color: #fff; }
.foot .col .btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.foot .foot-bottom { max-width: 1180px; margin: 0 auto; padding: 14px var(--gutter) 18px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; }
.foot .foot-bottom a { color: var(--muted); font-weight: 500; }

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  /* the picture is exactly as tall as the text block (4:5, width from the height), both centred on the same band */
  .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: stretch; padding: 44px 0 20px; }
  .hero > div:first-child { display: flex; flex-direction: column; justify-content: center; }
  .hero h1 { font-size: clamp(40px, 4.7vw, 64px); margin: 10px 0 18px; }
  .hero-points { gap: 14px; margin-top: 4px; }
  .hero-cta { margin-top: 28px; }
  .hero-points li { font-size: 16px; }
  .show { position: relative; margin: 0; width: auto; max-width: none; height: auto; align-self: stretch; justify-self: end; aspect-ratio: 4 / 3; min-width: 0; }
  .show .frame { position: absolute; inset: 8px; aspect-ratio: auto; }
  .two { gap: 24px; align-items: stretch; }
  .teaser { padding: 32px; }
  .salon { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; padding: 40px; }
  .foot .foot-inner { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding: 36px var(--gutter) 26px; }
  .foot .col a, .foot .col .textlink { min-height: 30px; }
}

/* ================= BOOKING_WEBSITE_SERVICES_R1: the Services & Prices polish (Owner's list 2026-10-24; mock v2 after the Owner's check) =================
   - a service row reads like Admin › Services: the name, the clock + duration (+ combo parts), the whole description (once); the name / clock line /
     description are grid items of the row (.main is display:contents) so phones and desktop place them differently:
       phones  = name · price / clock + Ask Hannah · + Add / description      (three short lines, mock v2: "ngắn lại một nữa")
       desktop = text block · price · + Add · Ask Hannah                      (mock v2: Ask Hannah on the right with the price and + Add)
   - a variant is ONE compact line: label – clock duration – its own note; the group keeps the main name (+ Ask Hannah) + description above its variants
   - "Often added" chips toggle (tap again = removed); on phones Hannah takes the lower part of the screen (.half) under a soft scrim
   - phones: the open category's title bar stays frozen under the search while its list scrolls; desktop: the category menu is a frozen card
   - the booking popup: 4 rounded corners on desktop, Morning / Afternoon / Evening stacked, the summary aligned, "Comments or Requests" under the total,
     the My Calmia sign-in (number + password; sign-up / forgot password with a text code) */
.svc { grid-template-columns: 5px minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 3px; align-items: center; padding: 8px 10px 8px 0; }
.svc::before { grid-row: 1 / span 3; margin: -8px 0; }
.svc .main { display: contents; cursor: default; }
.svc .nm { grid-column: 2 / span 2; grid-row: 1; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.svc .price { grid-column: 4; grid-row: 1; align-self: center; justify-self: end; padding: 0; }
.svc .meta { grid-column: 2; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: .82rem; }
.svc .meta .clk { width: 13px; height: 13px; flex: none; }
.svc .meta .parts::before { content: '·'; margin: 0 4px 0 1px; }
.svc .ask { grid-column: 3; grid-row: 2; justify-self: start; align-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 2px; border: 0; background: transparent; color: var(--brand-ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.svc .ask .ico { width: 13px; height: 13px; }
.svc .ask:hover { text-decoration: underline; }
.svc .add { grid-column: 4; grid-row: 2; justify-self: end; align-self: center; }
.svc .add .btn { min-height: 32px; padding: 0 10px; font-size: .86rem; }
.svc .desc, .svc.open .desc { grid-column: 2 / -1; grid-row: 3; display: block; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.svc.focus, .svc-group.focus { border-color: var(--c-dot); box-shadow: 0 0 0 2px var(--c-fill); }
/* a variant: one line (label – duration – note); its price and + Add stacked at the right on phones */
.svc.variant { grid-template-rows: auto auto; row-gap: 2px; padding: 8px 10px 8px 0; }
.svc.variant::before { grid-row: 1 / span 2; }
.svc.variant .main { display: block; grid-column: 2 / span 2; grid-row: 1 / span 2; align-self: center; }
.svc.variant .main .line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: .92rem; line-height: 1.35; }
.svc.variant .main .line .nm { font-weight: 600; font-size: .92rem; }
.svc.variant .main .line .sep { color: var(--muted); }
.svc.variant .main .line .meta { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; }
.svc.variant .main .line .note { color: var(--muted); font-size: .82rem; }
.svc.variant .main .line .sep:has(+ .note) { display: none; }      /* phones: the note takes its own line under "label – duration" (no dangling dash) */
.svc.variant .main .line .note { flex-basis: 100%; }
.svc.variant .price { grid-column: 4; grid-row: 1; align-self: center; }
.svc.variant .add { grid-column: 4; grid-row: 2; align-self: center; }
.svc-group { padding: 8px 8px 6px; }
.svc-group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 2px 4px 6px; }
.svc-group-name { padding: 0; font-size: .98rem; }
.svc-group-head .ask { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 2px; border: 0; background: transparent; color: var(--brand-ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; justify-self: end; }
.svc-group-head .ask .ico { width: 13px; height: 13px; }
.svc-group-desc { grid-column: 1 / -1; color: var(--muted); font-size: .82rem; line-height: 1.4; }
/* "Often added" chips: + to add, ✓ (filled) when in the plan; a second tap removes */
.addon-hint .btn { transition: background var(--t-fast), color var(--t-fast); }
.addon-hint .btn.on { background: var(--ink); color: #fff; }
.addon-hint .btn:disabled { opacity: 1; }
/* phones: the open category's title bar freezes under the search bar */
.svc-sec { overflow: visible; }
.svc-sec.open > .sec-btn { position: sticky; top: calc(var(--head-h) + 62px); z-index: 6; border-radius: var(--radius-sm) var(--radius-sm) 0 0; box-shadow: 0 1px 0 var(--line); }
.svc-sec .svc-desc-cat { background: var(--card); }
.svc-sec .svc-list { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
/* Hannah with a service as the subject: the context line + the half-height chat on phones (the row sits just above it) */
.hannah-ctx { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ink); font-size: .88rem; }
.hannah-ctx[hidden] { display: none; }
.hannah-ctx .ico { width: 14px; height: 14px; flex: none; }
.hannah-ctx strong { font-weight: 700; }
.sheet#sheet-hannah.half { height: 62vh; height: 62dvh; }
.sheet#sheet-hannah.half .hannah-frame-wrap, .sheet#sheet-hannah.half .hannah-frame { min-height: 220px; }
.scrim.soft { background: rgba(32, 58, 76, .12); }
/* the booking popup (Book Now = Calmia makes it customer-facing): Morning / Afternoon / Evening stacked (no sideways scroll), compact slots,
   the summary aligned (label left, value right, nothing wraps mid-word), "Comments or Requests" under the total, the sign-in card */
.times { display: block; margin-top: 12px; }
.times-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slotgrp { margin: 10px 0 6px; }
.time { min-height: 40px; }
.summary .row { grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; }
.summary .row > :last-child { text-align: right; max-width: none; }
.bk-comments { margin-top: 12px; }
.bk-comments textarea { min-height: 56px; }
.verify { margin-top: 12px; }
.auth { display: grid; gap: 10px; }
.auth .auth-title { font-weight: 700; margin: 0; }
.auth .auth-links { font-size: .88rem; color: var(--muted); margin: 0; }
.auth .textlink { border: 0; background: none; padding: 0; color: var(--brand-ink); font: inherit; font-size: .88rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.auth .notice.err[hidden] { display: none; }
.signin.card { padding: 16px; }
@media (min-width: 1024px) {
  /* desktop: the category menu is a frozen card beside the list; a row = text block · price · + Add · Ask Hannah */
  .svc-cats { padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); max-height: calc(100vh - var(--head-h) - 110px); overflow: auto; }
  .svc-sec { overflow: visible; }
  .svc-sec.open > .sec-btn { position: static; box-shadow: none; }
  .svc { grid-template-columns: 5px minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; padding: 10px 14px 10px 0; }
  .svc::before { grid-row: 1 / span 3; margin: -10px 0; }
  .svc .nm { grid-column: 2; grid-row: 1; font-size: 1rem; }
  .svc .meta { grid-column: 2; grid-row: 2; font-size: .84rem; }
  .svc .desc, .svc.open .desc { grid-column: 2; grid-row: 3; font-size: .84rem; }
  .svc .price { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .svc .add { grid-column: 4; grid-row: 1 / span 3; align-self: center; }
  .svc .add .btn { min-height: 36px; padding: 0 12px; font-size: .9rem; }
  .svc .ask { grid-column: 5; grid-row: 1 / span 3; align-self: center; justify-self: end; font-size: .84rem; min-height: 36px; }
  .svc .ask .ico { width: 14px; height: 14px; }
  .svc.variant { grid-template-rows: auto; padding: 8px 12px 8px 0; }
  .svc.variant::before { grid-row: 1; }
  .svc.variant .main { grid-column: 2; grid-row: 1; }
  .svc.variant .main .line .sep:has(+ .note) { display: inline; }
  .svc.variant .main .line .note { flex-basis: auto; }
  .svc.variant .price { grid-column: 3; grid-row: 1; }
  .svc.variant .add { grid-column: 4; grid-row: 1; }
  .svc-group-name { font-size: 1rem; }
  .svc-group-head .ask { font-size: .84rem; }
  .sheet#sheet-hannah.half { height: auto; }
  .sheet.book { overflow: hidden; }      /* the footer keeps inside the 4 rounded corners */
  .times-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ===== BOOKING_WEBSITE_SERVICES_R1_1 — the Owner's check of SERVICES_R1 (24/10 after the install): one Hannah header, the resize grip, the chat sized
   under the chosen row, the one-line cart bar with the floating buttons above it (mock = the shots in mock/shots) ===== */
/* the website's own Hannah head hides once the widget frame is live (the widget's header is the one header); the grab bar stays on phones */
.sheet#sheet-hannah.framed .sheet-head { display: none; }
.sheet#sheet-hannah.framed .hannah-body { padding-top: 8px; }
.sheet#sheet-hannah .sugg[hidden] { display: none; }
/* the grip: the frame's left edge over the widget header (beside the avatar, never on it); drag = width on the desk, height on a phone */
.hannah-grip { position: absolute; left: 0; top: 0; width: 20px; height: 64px; z-index: 2; display: grid; place-items: center; cursor: ns-resize; touch-action: none; border-radius: var(--radius) 0 0 0; background: linear-gradient(90deg, var(--card-2) 40%, transparent); }
.hannah-grip::before { content: ""; width: 4px; height: 28px; border-radius: 2px; background: var(--line-strong); }
.hannah-grip:hover::before, .hannah-grip:focus-visible::before { background: var(--brand); }
.hannah-grip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.hannah-frame-wrap.resizing .hannah-frame { pointer-events: none; }
.hannah-frame-wrap.resizing { user-select: none; }
/* the cart bar: the sub line never wraps; the floating Ask Hannah + to-top sit above the bar's real height */
.cartbar > div:first-child { min-width: 0; }
.cartbar .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; letter-spacing: -.01em; }
.cartbar { gap: 6px; padding: 8px 8px 8px 12px; }
body.has-cart .hannah-btn, body.has-cart .totop { bottom: calc(var(--tabs-h) + var(--safe-b) + var(--cart-h, 62px) + 24px); }
@media (min-width: 1024px) {
  .sheet#sheet-hannah { max-width: calc(100vw - 40px); }
  .sheet#sheet-hannah.framed .hannah-body { padding-top: 12px; }
  .hannah-grip { cursor: ew-resize; }
  .hannah-btn, body.has-cart .hannah-btn { bottom: 28px; }
}

/* ===== BOOKING_WEBSITE_SERVICES_R1_2 — the Owner's check of R1_1 (24/10 evening): no thick frame around Hannah (the frame fills the sheet edge to edge; the
   widget's own card margins are removed by hannah-embed.css), the resize handle is a small corner triangle at the top-left, the desk chat is a window over the
   Ask Hannah button (bottom-right, from the button up) that the top-left corner resizes in both directions ===== */
.sheet#sheet-hannah.framed .hannah-body { padding: 6px 0 0; }
.sheet#sheet-hannah.framed .hannah-frame-wrap { border: 0; border-radius: 0; background: transparent; }
.sheet#sheet-hannah.framed .hannah-frame { min-height: 0; }
.sheet#sheet-hannah.half .hannah-frame-wrap, .sheet#sheet-hannah.half .hannah-frame { min-height: 0; }
.hannah-grip { width: 26px; height: 26px; border-radius: 0; background: var(--brand); clip-path: polygon(0 0, 100% 0, 0 100%); opacity: .55; cursor: ns-resize; }
.hannah-grip::before { display: none; }
.hannah-grip:hover, .hannah-grip:focus-visible { opacity: .9; outline: 0; }
@media (min-width: 1024px) {
  .sheet#sheet-hannah.win { left: auto; right: 28px; top: auto; bottom: 28px; width: 460px; height: min(720px, calc(100vh - 120px)); max-width: calc(100vw - 56px); max-height: calc(100vh - 56px); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 48px rgba(32, 58, 76, .32); transform: translateY(24px) scale(.97); opacity: 0; transition: transform var(--t-slow) var(--ease), opacity var(--t); }
  .sheet#sheet-hannah.win.on { transform: none; opacity: 1; }
  .sheet#sheet-hannah.win.framed .hannah-body { padding: 0; }
  .hannah-grip { cursor: nwse-resize; }
  .hannah-btn[hidden] { display: none; }
}

/* ===== BOOKING_WEBSITE_SERVICES_R1_3 — the Owner's check of R1_2 (24/10 evening): on phones the strip at the top of the Hannah sheet (the grab bar + its
   padding) goes too — the chat starts right at the sheet's rounded top edge; the corner triangle stays at the top-left ===== */
.sheet#sheet-hannah.framed .grab { display: none; }
.sheet#sheet-hannah.framed .hannah-body { padding: 0; }
.sheet#sheet-hannah.framed { overflow: hidden; }

/* ===== BOOKING_STUDIO_UI_R1_1 (the Owner's test of STUDIO_UI_R1, 25/10): ONE sign-in popup for the whole site — the centered modal the Studio page carried, now in the
   shell (#sheet-auth) on every page: it opens ABOVE whatever sheet is open (the booking sheet, the Reviews share sheet) with its own scrim, and closes on its own.
   The copy of the Owner: "Sign in to My Calmia" / "One account for booking and try-on" / the lock line with the Calmia Customer perk. Everything above is unchanged. ===== */
.scrim-auth { z-index: 44; }
.sheet.auth-sheet { z-index: 45; }
.auth-sheet .sheet-head { align-items: flex-start; }
.auth-sheet .sheet-head > div { flex: 1; min-width: 0; }
.auth-sheet .sheet-head h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 1.55rem; margin: 0; }
.auth-lead { margin: 2px 0 0; font-size: .9rem; color: #506674; font-style: italic; }
.auth-sheet .notice.soft { display: flex; gap: 10px; align-items: flex-start; background: var(--p-sky); color: var(--p-sky-ink); margin-bottom: 12px; }
.auth-sheet .notice.soft .ico { flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; }
.auth-sheet .signin.card .auth { display: grid; gap: 10px; }
.auth-sheet .sheet-body { padding-bottom: calc(16px + var(--safe-b)); }
.acct-signin-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 12px; }
.acct-signin-row .btn-big { min-height: 48px; font-size: 1rem; padding: 0 18px; }
.verify .notice.soft { display: flex; gap: 10px; align-items: flex-start; background: var(--p-sky); color: var(--p-sky-ink); margin-bottom: 10px; }
.verify .notice.soft .ico { flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .sheet.modal.auth-sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: 480px; max-width: calc(100vw - 48px); max-height: 88vh; border-radius: 18px; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: transform var(--t-slow) var(--ease), opacity var(--t); }
  .sheet.modal.auth-sheet.on { transform: translate(-50%, -50%); opacity: 1; }
  .sheet.modal.auth-sheet .grab { display: none; }
}
/* ===== BOOKING_REVIEWS_R1_1 (the Owner, 25/10 ~15:30 after STUDIO OK): "Post it to Reviews" = AI Try-On vs Real Result — the collage labels each picture of a
   review posted from a Studio preview (the preview first = the before, the real nails = the after), the card names the look with "Try this look", the
   Share-your-look sheet shows the attached preview in its own block and asks for at least one photo of the real nails; the thank-you line of the +5 bonus. ===== */
.rv .ph .pic { position: relative; min-height: 0; }
.rv .ph .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv .ph.n1 .pic { grid-column: 1 / -1; grid-row: 1 / -1; }
.rv .ph.n2 .pic { grid-row: 1 / -1; }
.rv .ph.n3 .pic:first-child { grid-row: 1 / -1; }
.rv .ph .pic.more::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(32, 58, 76, .55); color: #fff; font-weight: 700; font-size: 1.3rem; }
.rv .ph .lbl { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700; letter-spacing: .02em; background: rgba(32, 58, 76, .78); color: #fff; backdrop-filter: blur(4px); pointer-events: none; }
.rv .ph .pic.real .lbl { background: rgba(31, 122, 92, .86); }
.rv .look-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; font-size: .85rem; color: var(--muted); }
.rv .look-row .ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); }
.rv .look-row .look-name { font-weight: 600; color: var(--ink); }
.rv .look-row .look-try { margin-left: auto; font-weight: 700; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sh-preview { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--card-2); }
.sh-preview[hidden] { display: none; }
.sh-preview img { width: 72px; height: 90px; object-fit: cover; border-radius: 10px; background: var(--mint-soft); }
.sh-preview .sh-preview-text { display: grid; gap: 3px; min-width: 0; }
.sh-preview .sh-preview-text strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-preview .lbl { display: inline-flex; align-items: center; gap: 4px; justify-self: start; padding: 2px 8px; border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700; background: rgba(32, 58, 76, .85); color: #fff; }
.sh-preview .lbl .ico { width: 12px; height: 12px; }
.sh-preview .rm { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.sh-preview .rm .ico { width: 16px; height: 16px; }
.sh-count.need { color: var(--err); font-weight: 600; }
.sh-done .bonus-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; font-size: .95rem; }
.sh-done .bonus-line .ico { width: 18px; height: 18px; flex: 0 0 auto; }
/* ===== BOOKING_REVIEWS_R1_2 (the Owner's check of REVIEWS_R1_1, 25/10 ~17:10): "Book this look" next to "Try this look" on a card posted from a Studio preview;
   the Customers-only note in the sheet's preview block for a Guest (the real nails come after a visit). ===== */
.rv .look-row .look-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rv .look-row .look-try { margin-left: 0; }
.rv .look-row .look-book { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--brand); color: #fff; font-weight: 700; font-size: .8rem; text-decoration: none; white-space: nowrap; }
.rv .look-row .look-book:hover { background: var(--brand-ink); }
.sh-preview .cust-note { color: var(--err); font-weight: 600; }
.sh-preview.guest { border-color: var(--err); }
/* ================= BOOKING_REVIEWS_R1_3 (the Owner, 2026-10-25 evening): the language menu in the footer (the logo row), the customer's full
   name in the header instead of the initial, the hours pill fitted to the room left (site.js fitPill picks the longest wording that fits) ================= */
.foot .brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.foot .brand-row .wordmark { margin-bottom: 0; }
.foot .lang-menu { top: auto; bottom: calc(100% + 6px); }
.foot .lang-btn { padding: 0 8px 0 6px; min-height: 38px; }
.foot .lang-btn .code { display: inline; }
.foot .lang-btn .chev { display: block; }
.head .wrap > .head-open { flex: 0 1 auto; min-width: 0; max-width: none; overflow: hidden; }
.head .wrap > .head-open span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head .wordmark, .head .nav, .head .head-r { flex: 0 0 auto; }
.head .avatar.named { width: auto; max-width: 130px; padding: 0 14px; border-radius: var(--radius-pill); display: block; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); font-size: .95rem; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav { margin-left: 6px; } .nav a { padding: 10px 9px; } }

/* ===== BOOKING_HANNAH_LIVE_R1 — Hannah's chat is the site's own (no iframe): the sheet head is Hannah's header again (avatar, name, New chat, close), under it the
   log of bubbles, the 3 chips, the call bar (sound wave, state, volume, End) when a call runs, the photo attached, the composer (photo, text, call, Send).
   Same window / sheet / half sheet / corner grip as the Services polish (R1_1 - R1_3). ===== */
.sheet#sheet-hannah.framed .sheet-head.hn-head { display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter) 8px; border-bottom: 1px solid var(--line); }
.hn-head .av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.hn-head .hn-title { flex: 1; min-width: 0; }
.hn-head .hn-title h2 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.hn-head .hn-sub { margin: 0; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet#sheet-hannah.framed .hannah-frame-wrap { display: flex; flex-direction: column; min-height: 0; }
.hn-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px var(--gutter) 6px; display: flex; flex-direction: column; gap: 8px; }
.hn-msg { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.hn-msg.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; color: var(--ink); }
.hn-msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.hn-msg.err { background: var(--err-soft); color: var(--err); border-color: transparent; }
.hn-msg .hn-img { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; margin-bottom: 6px; }
.hn-msg .hn-book { display: inline-flex; margin: 8px 0 2px; min-height: 40px; padding: 0 14px; font-size: .9rem; max-width: 100%; }
.hn-msg.thinking { display: inline-flex; gap: 5px; padding: 12px 14px; }
.hn-msg.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: hn-blink 1.2s infinite ease-in-out; }
.hn-msg.thinking i:nth-child(2) { animation-delay: .2s; }
.hn-msg.thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes hn-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.hn-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--gutter) 8px; flex: 0 0 auto; }
.hn-chips::-webkit-scrollbar { display: none; }
.hn-chips[hidden] { display: none; }
.hn-chip { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--brand); background: var(--card-2); color: var(--brand-ink); font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.hn-chip:hover { background: var(--brand-soft); }
.sheet#sheet-hannah .hannah-status { position: static; inset: auto; display: block; padding: 10px var(--gutter); font-size: .88rem; background: transparent; }
.sheet#sheet-hannah .hannah-status[hidden] { display: none; }
.hn-composer { display: flex; align-items: center; gap: 6px; padding: 8px var(--gutter) calc(8px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--card); flex: 0 0 auto; }
.hn-composer[hidden] { display: none; }
.hn-composer input[type="text"] { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--card-2); font: inherit; font-size: 16px; color: var(--ink); }
.hn-composer input[type="text"]:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.hn-composer input[type="text"]:disabled { opacity: .6; }
.hn-ib { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--card-2); color: var(--brand-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.hn-ib .ico { width: 20px; height: 20px; }
.hn-ib:hover { background: var(--brand-soft); }
.hn-ib.on { background: var(--err); border-color: var(--err); color: #fff; }
.hn-ib[hidden] { display: none; }
.hn-send { min-height: 40px; padding: 0 12px; border-radius: var(--radius-pill); gap: 4px; }
.hn-send span { display: none; }
@media (min-width: 480px) { .hn-send span { display: inline; } }
.hn-attach { display: flex; align-items: center; gap: 8px; padding: 6px var(--gutter); border-top: 1px solid var(--line); background: var(--card-2); font-size: .86rem; color: var(--muted); flex: 0 0 auto; }
.hn-attach[hidden] { display: none; }
.hn-attach img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.hn-attach span { flex: 1; }
.hn-attach .x { width: 32px; height: 32px; }
/* the call: the notice panel (once per device), then the bar with the sound wave, the state, the volume button + its slider, End */
.hn-call { padding: 0 var(--gutter); flex: 0 0 auto; }
.hn-call[hidden] { display: none; }
.hn-call-panel { padding: 12px 14px; margin: 4px 0 8px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-ink); }
.hn-call-panel[hidden] { display: none; }
.hn-call-panel h3 { margin: 0 0 6px; font-size: 1rem; }
.hn-call-panel p { margin: 0 0 10px; font-size: .84rem; line-height: 1.4; }
.hn-call-panel > div { display: flex; align-items: center; gap: 12px; }
.hn-call-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0 8px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--brand); position: relative; }
.hn-call-bar[hidden] { display: none; }
.hn-call-bar canvas { width: 96px; height: 34px; flex: 0 0 auto; }
.hn-call-state { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.hn-call-state strong { font-size: .9rem; }
.hn-call-state span { font-size: .76rem; color: var(--muted); }
.hn-vol, .hn-end { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--card-2); display: grid; place-items: center; cursor: pointer; color: var(--brand-ink); padding: 0; }
.hn-vol .ico, .hn-end .ico { width: 20px; height: 20px; }
.hn-vol[data-level="0"] { color: var(--err); }
.hn-end { background: var(--err); border-color: var(--err); color: #fff; }
.hn-end .ico { transform: rotate(135deg); }
.hn-volpop { position: absolute; right: 52px; bottom: calc(100% + 6px); display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(32, 58, 76, .18); z-index: 2; }
.hn-volpop[hidden] { display: none; }
.hn-volpop input { width: 140px; accent-color: var(--brand); }
.hn-volpop output { min-width: 2.2em; text-align: right; font-size: .84rem; font-variant-numeric: tabular-nums; }
.hn-call-msg { margin: 0 0 8px; font-size: .84rem; color: var(--muted); }
.hn-call-msg[hidden] { display: none; }
@media (min-width: 1024px) {
  .sheet#sheet-hannah.win.framed .sheet-head.hn-head { padding: 12px 16px 10px; }
  .hn-log, .hn-chips, .hn-composer, .hn-attach, .hn-call { padding-left: 14px; padding-right: 14px; }
  .hn-composer { padding-bottom: 10px; }
}

/* ===== BOOKING_HANNAH_LIVE_R2 — booking in chat (the Owner's 3 rules, 26/10): the Confirm card Hannah's read-back ends with ([[CONFIRM|book|…]] / change / cancel):
   the summary + Confirm / Not yet; the tap sends [[CONFIRMED|…]] shown as "✓ Confirmed · …" in the customer's bubble; an answered card folds its buttons. ===== */
.hn-msg .hn-card { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); max-width: 100%; }
.hn-msg .hn-card .hn-card-title { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hn-msg .hn-card .hn-card-sum { font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.hn-msg .hn-card .hn-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.hn-msg .hn-card .hn-card-acts .btn { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.hn-msg .hn-card .hn-card-acts .btn .ico { width: 18px; height: 18px; margin-right: 6px; }
.hn-msg .hn-card.done .hn-card-acts { display: none; }
.hn-msg .hn-card.done { opacity: .72; }
.hn-msg.user .hn-confirmed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.hn-msg.user .hn-confirmed .ico { width: 18px; height: 18px; }

/* ================= BOOKING_VISIT_R1 (the Owner's answers of 2026-10-26): the Visit page — the open / closed line in Opening hours (the header pill's wording),
   the Holiday hours, Instagram / Facebook / Google on the card and in the footer, the Good to know block. The layout above is unchanged. ================= */
.visit-hours .visit-status { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-weight: 700; color: var(--ok); }
.visit-hours .visit-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; animation: pulse 1.8s infinite; }
.visit-hours .visit-status.closed { color: var(--muted); }
.visit-hours .visit-status.closed .dot { background: var(--muted); animation: none; }
.visit-holidays { margin-top: -4px; }
.social { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.social a { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); color: var(--ink); text-decoration: none; font-size: .86rem; font-weight: 600; background: var(--card-2); }
.social a .ico { width: 17px; height: 17px; }
.social a:hover { border-color: var(--brand); color: var(--brand); }
.foot .social.foot-social { margin: 10px 0 0; gap: 6px; }
.foot .social.foot-social a { width: 38px; height: 38px; min-height: 0; padding: 0; justify-content: center; color: var(--muted); }
.foot .social.foot-social a:hover { color: var(--brand); }
.good-to-know { margin-top: 28px; }
.good-to-know .gtk-grid { display: grid; gap: 12px; }
.good-to-know .gtk { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.good-to-know .gtk .ico { width: 26px; height: 26px; color: var(--brand); margin-top: 2px; }
.good-to-know .gtk strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.good-to-know .gtk p { margin: 0; line-height: 1.5; }
@media (min-width: 700px) { .good-to-know .gtk-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .good-to-know .gtk-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
/* ===== BOOKING_POLISH_R1 — the Owner's polish round of 2026-10-26 (before the website opens) ===== */
/* Ask Hannah: a small "Online" line with a pulsing dot under the label (the button keeps its 52 px height; shown while the lane is up) */
.hannah-btn .hb-txt { display: grid; gap: 1px; line-height: 1.15; text-align: left; }
.hannah-btn .hb-online { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; color: var(--ok); letter-spacing: .01em; }
.hannah-btn .hb-online[hidden] { display: none; }
.hannah-btn .hb-online .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s infinite; flex: 0 0 auto; }
/* the chat header avatar: Meet Hannah's orbit, small (two rings + three twinkling sparkles) */
.hn-orbit { position: relative; width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; }
.hn-head .hn-orbit .av { position: relative; z-index: 2; width: 38px; height: 38px; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(32, 58, 76, .16); }
.hn-orbit .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(51, 104, 160, .35); animation: ring 2.8s ease-out infinite; }
.hn-orbit .ring:nth-of-type(2) { animation-delay: 1.4s; }
.hn-orbit .spin { position: absolute; inset: 0; z-index: 3; animation: spin 9s linear infinite; pointer-events: none; }
.hn-orbit .spin i { position: absolute; width: 8px; height: 8px; left: calc(50% - 4px); top: -3px; color: var(--brand); transform-origin: 4px 26px; }
.hn-orbit .spin i:nth-child(2) { transform: rotate(120deg); } .hn-orbit .spin i:nth-child(3) { transform: rotate(240deg); }
.hn-orbit .spin i::before { content: '\2726'; font-size: 9px; line-height: 1; display: block; font-style: normal; animation: twinkle 1.6s ease-in-out infinite; }
.hn-orbit .spin i:nth-child(2)::before { animation-delay: .5s; } .hn-orbit .spin i:nth-child(3)::before { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) { .hn-orbit .ring, .hn-orbit .spin, .hn-orbit .spin i::before, .hannah-btn .hb-online .dot { animation: none; } .hn-orbit .ring { opacity: .5; } }
/* Hannah's quick questions: phones keep the swipe; the desktop chat window shows them whole, wrapped (no sideways scroll for a mouse) */
@media (min-width: 1024px) {
  .hn-chips { flex-wrap: wrap; overflow-x: visible; }
  .hn-chip { flex: 0 1 auto; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; text-align: left; line-height: 1.3; padding: 7px 12px; }
}
/* Reviews: "Your looks, your words." on one line on phones */
@media (max-width: 599px) { .rv-head h1.rv-title { white-space: nowrap; font-size: clamp(1.5rem, 7.4vw, 2.2rem); } }
/* the language menu: words, no flags (the button names the language on every width) */
.lang-btn { padding: 0 10px; } .lang-btn .code { display: inline; }
@media (max-width: 479px) { .lang-btn .code { display: inline; } .lang-btn .chev { display: block; } .lang-btn { padding: 0 10px; } }
/* My Calmia: the 20 colours, the text switches, each visit's aftercare */
.theme-row { gap: 8px; }
.theme-row .swatch { width: 32px; height: 32px; }
.toggles-head { margin: 4px 0 0; }
.toggle-note { margin: 2px 0 10px; color: var(--muted); }
.hist details.aftercare { margin: -2px 0 4px; padding: 8px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.hist details.aftercare summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--brand); }
.hist details.aftercare p { margin: 6px 0 0; line-height: 1.5; white-space: pre-line; }

/* ---- BOOKING_POLISH_R1_1 — the Owner's check of POLISH_R1 (2026-10-26): My Calmia's colour tiles = the admin's category tiles (the pastel + its ink check,
   2 rows of 10 on wider screens, 4 rows of 5 on phones); the text-message labels on ONE line (the font follows the card's width); the history names lighter;
   My previews + Favourite designs ONE row each, scrolling sideways with a visible bar; Meet Hannah's lines on ONE line ---- */
.theme-row { display: grid; grid-template-columns: repeat(5, 40px); gap: 8px; margin: 8px 0 4px; }
@container (min-width: 480px) { .theme-row { grid-template-columns: repeat(10, 40px); } }
#acct-in .theme-row .swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(46, 57, 52, .08); display: grid; place-items: center; padding: 0; font: inherit; font-size: 16px; font-weight: 800; line-height: 1; }
#acct-in .theme-row .swatch:hover { transform: none; filter: brightness(.97); }
#acct-in .theme-row .swatch.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px rgba(46, 57, 52, .08); }
.acct-grid > * { min-width: 0; }      /* the one-row scrollers below must not widen their column */
.prefs-card { container-type: inline-size; }
.prefs-card .toggle > span[id^="lbl-"] { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: min(.95rem, calc((100cqi - 56px) / 17.5)); }
#acct-in .hist .row strong { font-weight: 500; font-size: .95rem; }
#acct-in #saved-grid, #acct-in #fav-row { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
#acct-in #saved-grid::-webkit-scrollbar, #acct-in #fav-row::-webkit-scrollbar { display: block; height: 6px; }
#acct-in #saved-grid::-webkit-scrollbar-thumb, #acct-in #fav-row::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
#acct-in #saved-grid .saved { flex: 0 0 calc((100% - 20px) / 3); scroll-snap-align: start; }
#acct-in #fav-row .look { scroll-snap-align: start; }
#acct-in #saved-grid .empty, #acct-in #fav-row .empty { flex: 1 1 100%; }
@media (min-width: 768px) { #acct-in #saved-grid .saved { flex-basis: calc((100% - 30px) / 4); } }
.feat > div:last-child { min-width: 0; container-type: inline-size; }
.feat span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: min(.84rem, calc(100cqi / 18.6)); }

/* ---- BOOKING_POLISH_R1_2 — the Owner's check of POLISH_R1_1 (2026-10-26): the text switches slimmer, sized to their one-line labels (the tap area kept);
   her own photo on My Calmia's hero tile (the camera button, the Choose / Remove menu); My reviews under Service history (the Reviews page's cards) ---- */
.prefs-card .sw { width: 38px; height: 22px; border-radius: 11px; }
.prefs-card .sw::after { top: 3px; left: 3px; width: 16px; height: 16px; }
.prefs-card .sw[aria-checked="true"]::after { transform: translateX(16px); }
.prefs-card .sw::before { content: ''; position: absolute; inset: -11px -6px; }
.acct-av { position: relative; width: 64px; height: 64px; }
.acct-hero .big.photo { overflow: hidden; }
.acct-hero .big.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-edit { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--card); background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(31, 29, 34, .18); }
.av-edit svg { width: 15px; height: 15px; }
.av-menu { position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; display: grid; gap: 6px; min-width: 170px; padding: 8px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(31, 29, 34, .14); }
.av-menu[hidden] { display: none; }
.av-menu .btn { justify-content: flex-start; white-space: nowrap; }
#acct-in .acct-reviews { gap: 12px; }
#acct-in .acct-reviews .empty a { font-weight: 600; }

/* BOOKING_WEBSITE_TEAM_R1 — Our team on Visit us (mock CALMIA_WEBSITE_TEAM_DESIGN_R0 v3): the cards, the member's popup (Profile · Portfolio · Reviews), the old Fresha reviews on the Reviews page. Phone first; ≥ 720px the popup is a centred window. */
.ot { margin: 26px 0 8px; }
.ot-top { display: grid; gap: 2px; }
.ot-top h2 { margin: 2px 0 4px; }
.ot-top .small { margin: 0; }
.ot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ot-card { appearance: none; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 16px 8px 14px; display: grid; justify-items: center; gap: 2px; cursor: pointer; text-align: center; color: var(--ink); font: inherit; min-width: 0; transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); }
.ot-card:hover, .ot-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); outline: none; border-color: var(--line-strong); }
.ot-av { --c: var(--p-stone); --ci: var(--p-stone-ink); position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--ci); font-family: var(--font-display); font-size: 2rem; line-height: 1; margin-bottom: 14px; flex: none; }
.ot-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ot-rate { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font: 700 .78rem/1.5 var(--font-body); color: var(--ink); white-space: nowrap; box-shadow: 0 1px 3px rgba(32, 58, 76, .08); }
.ot-rate b { color: var(--p-amber-dot); font-weight: 700; }
.ot-rate.new { color: var(--muted); font-weight: 600; }
.ot-card strong { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.ot-card .ot-hl { font-size: .82rem; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(32, 58, 76, .42); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); }
.tp-scrim.on { opacity: 1; pointer-events: auto; }
.tp-scrim[hidden], .tp[hidden] { display: none; }
.tp { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 94vh; display: flex; flex-direction: column; background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-up); transform: translateY(102%); transition: transform var(--t-slow) var(--ease); }
.tp.on { transform: none; }
.tp .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 10px auto 0; flex: none; }
.tp-x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--off); display: grid; place-items: center; cursor: pointer; font: inherit; font-size: 1.3rem; line-height: 1; color: var(--ink); }
.tp-scroll { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tp-loading { padding: 40px var(--gutter); text-align: center; color: var(--muted); }
.tp-top { display: grid; justify-items: center; text-align: center; padding: 14px var(--gutter) 6px; gap: 2px; }
.tp-top .ot-av { width: 112px; height: 112px; font-size: 2.6rem; margin-bottom: 8px; }
.tp-top h2 { font-size: 1.7rem; }
.tp-top .hl { color: var(--ink); margin: 0; }
.tp-top .rate { margin: 4px 0 0; font-weight: 700; }
.tp-top .rate b { color: var(--p-amber-dot); }
.tp-top .rate span { color: var(--muted); font-weight: 400; }
.tp-top .small { margin: 0; }
.tp-tabs { display: flex; gap: 8px; padding: 12px var(--gutter) 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.tp-tabs button { border: 1px solid var(--line-strong); background: var(--card-2); color: var(--ink); border-radius: var(--radius-btn); padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; min-height: 40px; }
.tp-tabs button small { color: var(--muted); font-weight: 600; margin-left: 4px; font-size: .82em; }
.tp-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tp-tabs button.on small { color: #d8e3ea; }
.tp-body { padding: 16px var(--gutter) calc(18px + var(--safe-b)); }
.tp-stats { margin: 0 0 16px; display: grid; gap: 0; }
.tp-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tp-stats dt { color: var(--ink); }
.tp-stats dd { margin: 0; font-weight: 700; }
.tp-body h3 { margin: 6px 0 6px; }
.tp-body .about { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.tp-port { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tp-port figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--mint-soft); position: relative; aspect-ratio: 4 / 5; }
.tp-port figure.real { aspect-ratio: 1; }
.tp-port img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-port figcaption { position: absolute; left: 6px; bottom: 6px; right: 6px; background: rgba(255, 253, 248, .92); border-radius: 8px; padding: 2px 8px; font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-port figcaption.real { background: var(--p-mint); color: var(--p-mint-ink); }
.tp-portnote { margin: 10px 0 0; }
.tp-rvs { display: grid; gap: 12px; }
.tp-rvsum { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tp-rvsum strong { font-size: 1.6rem; font-family: var(--font-display); font-weight: 400; line-height: 1; }
.tp-rvsum strong.new { font-size: 1.2rem; font-family: var(--font-body); font-weight: 700; color: var(--muted); }
.tp-rvsum .stars { color: var(--p-amber-dot); letter-spacing: 2px; }
.tp-rvsum .stars .off, .tp-rv .stars .off { color: var(--line-strong); }
.tp-rvsum .small { margin: 0; }
.tp-rv { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.tp-rv .who { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; margin-bottom: 6px; }
.tp-rv .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); background: var(--p-sky); color: var(--p-sky-ink); }
.tp-rv .who strong { display: block; font-size: .95rem; }
.tp-rv .who span { font-size: .8rem; color: var(--muted); }
.tp-rv .who .stars { color: var(--p-amber-dot); letter-spacing: 1px; font-size: .95rem; white-space: nowrap; }
.tp-rv .tp-svc { font-size: .84rem; color: var(--muted); margin: 0 0 6px; }
.tp-rv p.txt { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.tp-rv .pics { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tp-rv .pics img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.tp-rv .reply, .rv .reply { margin-top: 10px; border-left: 3px solid var(--line-strong); padding: 6px 10px; background: var(--card-2); border-radius: 0 8px 8px 0; font-size: .9rem; }
.tp-rv .reply b, .rv .reply b { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 2px; }
.tp-rv .reply p, .rv .reply p { margin: 0; white-space: pre-line; }
.rv.fresha .body { padding-bottom: 14px; }
.rv.fresha .who .when { overflow-wrap: anywhere; }
.tp-more { margin-top: 14px; width: 100%; justify-content: center; }
@media (max-width: 719px) { body.tp-open .hannah-btn, body.tp-open .totop, body.tp-open .cartbar { visibility: hidden; } }
@media (min-width: 720px) {
  .ot-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 230px)); gap: 16px; }
  .ot-av { width: 112px; height: 112px; font-size: 2.6rem; }
  .tp { left: 50%; right: auto; top: 50%; bottom: auto; width: min(720px, calc(100vw - 48px)); max-height: min(860px, calc(100vh - 48px)); border-radius: 18px; transform: translate(-50%, -46%) scale(.98); opacity: 0; pointer-events: none; transition: transform var(--t) var(--ease), opacity var(--t); }
  .tp.on { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  .tp .grab { display: none; }
  .tp-scroll { border-radius: 18px; }
  .tp-body { padding-bottom: 18px; }
  .tp-port { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* BOOKING_MY_CALMIA_PROFILE_R1 — My Calmia › Profile (the card + its popup), My reviews compact (3 rows + Show all), the Edited marks (mock CALMIA_MY_CALMIA_DESIGN_R0, MOCK OK 2026-10-31). Phone first. */
.acct-profile { padding: 2px 16px; }
.acct-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); min-height: var(--tap); }
.acct-row:last-child { border-bottom: 0; }
.acct-row .k { font-size: .82rem; color: var(--muted); }
.acct-row .v strong { display: block; font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.acct-row .v strong.muted-v { color: var(--muted); font-weight: 500; }
.acct-row .v .sub { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.acct-row .textlink { font-size: .95rem; min-height: 34px; }
.acct-row.sw-row { padding-top: 0; margin-top: -6px; }
.acct-row .sw[disabled] { opacity: .45; cursor: not-allowed; }
.acct-count { font-size: .78rem; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
#acct-in .acct-reviews { display: grid; gap: 12px; }
.acct-rv { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; }
.acct-rv .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.acct-rv .top .stars { color: var(--p-amber-dot); letter-spacing: 1px; font-size: .95rem; } .acct-rv .top .stars .off { color: var(--line-strong); }
.acct-rv .edited { font-size: .72rem; font-weight: 700; color: var(--p-lavender-ink); background: var(--p-lavender); padding: 2px 7px; border-radius: var(--radius-pill); }
.acct-rv .svc { font-weight: 600; font-size: .92rem; }
.acct-rv .txt { margin: 0; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acct-rv .pics { display: flex; gap: 8px; }
.acct-rv .pics img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; }
.acct-rv .acts { display: flex; justify-content: flex-end; gap: 14px; }
.acct-rv .acts .textlink { font-size: .9rem; min-height: 32px; }
.acct-reviews-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.acct-reviews-foot a { font-weight: 600; font-size: .92rem; }
.acct-form { display: grid; gap: 12px; }
.acct-form .field select { min-height: var(--tap); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 0 12px; font: inherit; background: var(--card-2); }
#page-account .acct-form .field select { border-radius: 999px; }
.acct-form .now { min-height: var(--tap); display: flex; align-items: center; padding: 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.acct-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-form .row3 { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; }
.acct-form .actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-form .actions .btn { margin-left: auto; }
.acct-form .done { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 10px 0; }
.acct-form .small.muted { margin: 0; }
.acct-steps { display: flex; gap: 6px; margin: 2px 0 12px; } .acct-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); } .acct-steps i.on { background: var(--brand); }
.acct-sheet .sheet-head h2 { font-size: 1.45rem; }
.sh-thumbs .th.kept img { border-color: var(--line); }
@media (min-width: 720px) {
  .acct-row { grid-template-columns: 100px minmax(0, 1fr) auto; }
  .acct-rv .pics img { width: 64px; height: 64px; }
}

/* BOOKING_MY_CALMIA_PROFILE_R1_1 — the Owner's look check of R1 (2026-10-31 ~13:30): the Profile popup's fields inside their card (the rows on minmax(0, 1fr) tracks: an input's intrinsic width no longer widens the row past the card; the fields fill their cells; the card as wide as the popup), the Email messages row even with the others, the phone's section order kept while the desk regroups (website_ui.py: My previews + My favourite designs under My reviews, Make it yours under My Studio) */
.acct-sheet .acct-form { max-width: none; }
.acct-form .field { min-width: 0; }
.acct-form .field input, .acct-form .field select { width: 100%; min-width: 0; }
.acct-form .row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.acct-form .row3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.acct-row.sw-row { padding-top: 10px; margin-top: 0; }
.acct-row.sw-row .v strong { font-size: .95rem; }
@media (max-width: 1023px) {
  .acct-grid { display: grid; }
  .acct-grid > div { display: contents; }
  .acct-grid > div > .section { order: 1; min-width: 0; }
  #acct-in #profile { order: 4; } #acct-in #studio { order: 5; } #acct-in #previews { order: 6; } #acct-in #favourites { order: 7; } #acct-in #prefs { order: 8; } #acct-in #signout { order: 9; }
}

/* BOOKING_MY_CALMIA_PROFILE_R1_2 — the Owner's check of R1_1 (2026-10-31 ~15:25): the popup's side-by-side fields level — the stacked-fields rule `.field + .field { margin-top: 12px }` pushed the second / third field of a row 12 px down (its label and input lower, the input shorter); the row2 / row3 grids cancel it */
.acct-form .row2 > .field + .field, .acct-form .row3 > .field + .field { margin-top: 0; }

/* BOOKING_PROMO_CODES_R1 — My Calmia › Codes & credit (the tickets, Past codes, the gift-card place) + the Confirm step's "Your codes" / "Have a code?" + the code on Booked! (mock CALMIA_MY_CALMIA_DESIGN_R0, MOCK OK 2026-10-31; decisions 9-12). Phone first; the pc- prefix. */
.pc-tk.t-rose { --tk: var(--p-rose); --tk-ink: var(--p-rose-ink); } .pc-tk.t-lavender, .pc-chip.t-lavender { --tk: var(--p-lavender); --tk-ink: var(--p-lavender-ink); }
.pc-tk.t-mint, .pc-chip.t-mint { --tk: var(--p-mint); --tk-ink: var(--p-mint-ink); } .pc-tk.t-sky, .pc-chip.t-sky { --tk: var(--p-sky); --tk-ink: var(--p-sky-ink); }
.pc-tk.t-peach, .pc-chip.t-peach { --tk: var(--p-peach); --tk-ink: var(--p-peach-ink); } .pc-tk.t-butter, .pc-chip.t-butter { --tk: var(--p-butter); --tk-ink: var(--p-butter-ink); } .pc-chip.t-rose { --tk: var(--p-rose); --tk-ink: var(--p-rose-ink); }
.pc-tickets { display: grid; gap: 10px; }
.pc-tk { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; column-gap: 12px; padding-right: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pc-tk::before, .pc-tk::after { content: ''; position: absolute; left: 58px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); z-index: 1; }
.pc-tk::before { top: -9px; } .pc-tk::after { bottom: -9px; }
.pc-stub { grid-row: 1 / span 2; align-self: stretch; display: grid; place-content: center; justify-items: center; background: var(--tk); color: var(--tk-ink); border-right: 2px dashed var(--card); text-align: center; padding: 10px 0; }
.pc-stub b { font: 400 1.4rem/1 var(--font-display); }
.pc-stub span { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.pc-body { min-width: 0; padding: 10px 0 0; }
.pc-body p { margin: 0; }
.pc-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 1rem/1.3 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .06em; color: var(--ink); overflow-wrap: anywhere; }
.pc-who { font: 700 .66rem/1.5 var(--font-body); letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; background: var(--off); color: var(--muted); }
.pc-tk.t-lavender .pc-who { background: var(--p-lavender); color: var(--p-lavender-ink); }
.pc-terms { font-size: .86rem; color: var(--muted); margin-top: 3px !important; }
.pc-hint { display: flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--brand); margin-top: 5px !important; }
.pc-hint .ico { width: 14px; height: 14px; }
.pc-copy { grid-column: 2; justify-self: start; margin: 6px 0 10px; min-height: 30px; padding: 0 10px; font-size: .82rem; }
.pc-past { margin-top: 12px; padding: 0 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pc-past summary { display: flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: .92rem; color: var(--brand); cursor: pointer; list-style: none; }
.pc-past summary::-webkit-details-marker, .pc-have summary::-webkit-details-marker { display: none; }
.pc-prow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.pc-prow b { font: 700 .86rem ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .05em; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.pc-pst { font-weight: 600; white-space: nowrap; }
.pc-pst.used { color: var(--ok); }
.pc-soon { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: .9rem; }
.pc-soon .ico { width: 20px; height: 20px; }
.pc-soon strong { color: var(--muted); font-weight: 600; }
.pc-fine { margin: 10px 0 0; }
.pc-bk { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pc-bkh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pc-bkh .fine, .pc-bk > .fine { margin: 0; }
.pc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.pc-row .pc-chip { grid-column: 1; grid-row: 1; } .pc-row .pc-d { grid-column: 1; grid-row: 2; } .pc-row .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 34px; padding: 0 14px; }
.pc-row.off .pc-chip, .pc-row.off .pc-d { opacity: .55; }
.pc-chip { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 4px 9px; border-radius: 8px; background: var(--tk, var(--brand-soft)); color: var(--tk-ink, var(--brand-ink)); font: 700 .8rem/1.3 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .04em; white-space: nowrap; }
.pc-chip .ico { width: 14px; height: 14px; }
.pc-chip.on { background: var(--ok-soft); color: var(--ok); }
.pc-x { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 0; border-radius: 6px; background: rgba(32, 58, 76, .1); color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.pc-d { font-size: .88rem; font-weight: 600; min-width: 0; }
.pc-d small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.pc-row.off .pc-d small { color: var(--err); opacity: 1; }
.pc-have { padding: 0 12px; background: var(--card-2); border-radius: var(--radius-sm); }
.pc-have summary { display: flex; align-items: center; min-height: 40px; font-weight: 600; font-size: .9rem; color: var(--brand); cursor: pointer; list-style: none; }
.pc-have[open] { padding-bottom: 10px; }
.pc-haverow { display: flex; gap: 8px; margin: 6px 0 2px; }
.pc-haverow input { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 0 12px; font: 700 .95rem ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; background: var(--card-2); color: var(--ink); }
.pc-err .notice, .pc-bk > .notice { margin: 0; }
.summary .pc-subt { color: var(--muted); }
.summary .pc-disc { color: var(--ok); font-weight: 600; }
.summary .pc-disc .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.summary .row.tot s { color: var(--muted); font-weight: 400; margin-right: 2px; }
.pc-done { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: .92rem; }
.pc-done .pc-chip.on { background: var(--card-2); }
.pc-donefine { margin: 12px 0 0; }
@media (min-width: 480px) {
  .pc-tk { grid-template-columns: 78px minmax(0, 1fr) auto; column-gap: 14px; min-height: 98px; padding-right: 14px; }
  .pc-tk::before, .pc-tk::after { left: 70px; }
  .pc-stub { grid-row: auto; }
  .pc-stub b { font-size: 1.65rem; }
  .pc-body { padding: 10px 0; }
  .pc-copy { grid-column: 3; justify-self: end; margin: 0; min-height: 34px; padding: 0 12px; font-size: .86rem; }
  .pc-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pc-row .pc-chip { grid-column: 1; grid-row: 1; } .pc-row .pc-d { grid-column: 2; grid-row: 1; } .pc-row .btn { grid-column: 3; grid-row: 1; }
}

/* ---- BOOKING_PUSH_R2 — the reminders card of My Calmia ("Appointment reminders on this phone": the Owner's MOCK OK of CALMIA_PUSH_DESIGN_R0, 2026-11-01, section 3),
   between the hero and the grid; site.js shows it inside the installed website app only (Turn on; On ✓ · Send a test · Turn off); the note under the 24 h / 3 h switches ---- */
.push-sec { padding: 14px 0 0; }
.push-card { display: grid; gap: 6px; }
.push-card > strong { font-size: 1rem; }
.push-card .small { margin: 0; }
.push-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.push-acts:empty { display: none; }
.push-on { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: var(--radius-btn); background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: .92rem; }
.push-msg { margin: 2px 0 0; }
#push-note { margin: -4px 0 4px; }
/* BOOKING_GIFT_CARDS_R1: the Home banner (the page itself = gift.css) and My Calmia › Gift cards & credit */
.gc-banner { display: grid; gap: 14px; align-items: center; padding: 18px; border-radius: var(--radius); background: linear-gradient(135deg, var(--p-sky) 0%, var(--mint-soft) 60%, var(--p-rose) 100%); }
.gc-banner h2 { font-size: 1.5rem; } .gc-banner p { margin: 4px 0 10px; color: var(--ink); }
.gc-banner img { width: 100%; max-width: 300px; border-radius: 12px; display: block; justify-self: center; }
@media (min-width: 760px) { .gc-banner { grid-template-columns: 1fr 300px; padding: 24px; } }
.pc-gift { display: grid; gap: 8px; margin-top: 12px; }
.pc-gift .pc-gh { display: flex; align-items: center; gap: 8px; font-weight: 700; } .pc-gift .pc-gh .ico { width: 20px; height: 20px; color: var(--brand); }
.pc-gcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); color: inherit; text-decoration: none; }
.pc-gcard b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; display: block; } .pc-gcard small { color: var(--muted); display: block; }
.pc-gcard code { background: var(--off); padding: 1px 6px; border-radius: 6px; font-size: .82rem; } .pc-gcard.used { opacity: .7; }
/* BOOKING_GIFT_CARDS_R1_6: the Home banner's sentence lighter (two lines on a phone) */
.gc-banner p { font-size: .9rem; font-weight: 400; max-width: 46ch; }