/* LALLA Beauty House — public site. Soft, alive, petal-light: pastel tints, arches and pills, gentle motion. */
@property --pp { syntax: '<number>'; inherits: true; initial-value: 0; }
:root {
  --ivory: #fdf6f1; --blush: #f9e7e4; --plum: #3b1d2e; --plum-2: #55293f; --ink: #2a1620;
  --rose: #b0516f; --rose-2: #e79bb0; --gold: #b88a44; --sage: #6f9a8a;
  --peach: #fde4d4; --lilac: #eadff5; --mint: #dcefe6; --butter: #fbf0cf; --pink: #fbdde6; --sky: #e0ebf5;
  --ok: #2f8a62; --warn: #c27a14; --bad: #c0392b;
  --bg: var(--ivory); --fg: var(--ink); --muted: #7b6670; --card: #fffaf7; --line: rgba(59, 29, 46, 0.13);
  --display: 'Fraunces', 'Noto Kufi Arabic', Georgia, serif;
  --body: 'Manrope', 'Noto Kufi Arabic', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --pad: clamp(16px, 4vw, 40px); --r: 28px; --r-sm: 16px;
  --spring: cubic-bezier(.2, .9, .25, 1.15);
  --tabbar: 0px;
}
/* category tints */
.c-hair { --tint: var(--peach); --deep: #d17b52; }
.c-nails { --tint: var(--lilac); --deep: #8f67b4; }
.c-skin { --tint: var(--mint); --deep: #4f8f78; }
.c-spa { --tint: var(--butter); --deep: #b8902c; }
.c-makeup { --tint: var(--pink); --deep: #c0527a; }
.c-brows { --tint: var(--sky); --deep: #4f7fae; }
.c-all { --tint: var(--blush); --deep: var(--rose); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 500 16px/1.55 var(--body); overflow-x: clip; padding-bottom: var(--tabbar); -webkit-font-smoothing: antialiased; }
[dir='rtl'] body { font-family: 'Noto Kufi Arabic', var(--body); }
img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 300; background: var(--rose); color: #fff; padding: 8px 12px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--pad); }
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; }
[dir='rtl'] .ic.flip { transform: scaleX(-1); }
[hidden] { display: none !important; }

/* scroll progress + fx layer */
.sprog { position: fixed; z-index: 120; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--rose-2), var(--rose), var(--gold)); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); pointer-events: none; }
[dir='rtl'] .sprog { transform-origin: 100% 50%; }
#fxLayer { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.trail { position: absolute; width: 11px; height: 11px; border-radius: 80% 0 80% 0; background: var(--c, var(--rose-2)); opacity: 0.9; translate: -50% -50%; animation: trail 0.95s ease-out forwards; }
@keyframes trail { to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.2); } }

/* ── buttons & pills ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 800; font-size: 15px; white-space: nowrap; transition: transform 0.2s var(--spring), background 0.2s, border-color 0.2s, box-shadow 0.25s; }
.btn:active { transform: scale(0.96); }
.btn.rose { background: linear-gradient(135deg, #c25a7b, var(--rose)); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(176, 81, 111, 0.28); }
.btn.rose:hover { background: linear-gradient(135deg, var(--plum-2), var(--plum)); box-shadow: 0 10px 24px rgba(59, 29, 46, 0.3); }
.btn.glow { position: relative; overflow: hidden; }
.btn.glow::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 55%, 100% { transform: translateX(120%); } }
.btn.ghost:hover { border-color: var(--rose); color: var(--rose); }
.btn.danger { border-color: rgba(192, 57, 43, 0.5); color: var(--bad); }
.btn.sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.pill { white-space: nowrap; flex-shrink: 0; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, 0.7); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s var(--spring); }
.pill:hover { border-color: var(--rose); transform: translateY(-1px); }
.pill.on { background: var(--plum); border-color: var(--plum); color: #fff; }
.iconbtn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; background: rgba(255, 255, 255, 0.75); transition: transform 0.2s var(--spring); }
.iconbtn:hover { transform: scale(1.06); }
.iconbtn .ic { width: 20px; height: 20px; }
.dotn { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rose); color: #fff; font: 700 11px/18px var(--mono); text-align: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 700; box-shadow: 0 8px 22px rgba(59, 29, 46, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; }
.chip i, .status i, .open-now i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(47, 138, 98, 0.5); animation: pulse 1.8s infinite; }
.chip i.closed, .status i.closed, .open-now i.closed { background: var(--bad); animation: none; }
.chip i.soon, .status i.soon, .open-now i.soon { background: var(--warn); }
.chip .ic { color: var(--rose); }
.link-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 800; color: var(--plum); padding: 8px 4px; border-bottom: 2px solid transparent; transition: 0.2s; }
.link-btn:hover { color: var(--rose); border-bottom-color: var(--rose-2); gap: 12px; }
.link-btn .ic { color: var(--rose); }

/* ── notice bars & floating nav ──────────────────────────────────── */
.demobar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 44px 8px 16px; background: var(--plum); color: #f4e6e2; font-size: 13px; text-align: center; flex-wrap: wrap; position: relative; }
.demobar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose-2); }
.demobar a { color: #ffd9e1; font-weight: 700; }
.demobar .x { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; opacity: 0.7; color: #fff; }
.announce { background: var(--blush); color: var(--plum); text-align: center; padding: 9px var(--pad); font-weight: 700; font-size: 14px; }
.nav { position: sticky; top: 10px; z-index: 60; width: min(1240px, calc(100% - 20px)); margin: 10px auto 0; display: flex; align-items: center; gap: 18px; padding: 8px 10px 8px 18px; border-radius: 999px; background: rgba(255, 250, 247, 0.72); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 8px 30px rgba(59, 29, 46, 0.08); transition: box-shadow 0.3s, background 0.3s; }
.nav.scrolled { background: rgba(255, 250, 247, 0.9); box-shadow: 0 14px 36px rgba(59, 29, 46, 0.16); }
[dir='rtl'] .nav { padding: 8px 18px 8px 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 40px; height: 40px; transition: transform 0.6s var(--spring); }
.brand:hover svg { transform: rotate(72deg); }
.brand span { font: 600 24px/1 var(--display); letter-spacing: 0.14em; display: grid; }
.brand small { white-space: nowrap; font: 500 9px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.links { display: none; gap: 2px; margin-inline: auto; }
.links a { white-space: nowrap; padding: 9px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; color: #5c4452; transition: 0.2s; }
.links a:hover { background: var(--blush); color: var(--plum); }
.nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.status { display: none; align-items: center; gap: 8px; font-size: 13px; color: #5c4452; white-space: nowrap; }
@media (min-width: 900px) { .links { display: flex; } }
@media (min-width: 1280px) { .status { display: inline-flex; } }
@media (max-width: 899px) { .hide-s { display: none; } }

/* ── dropdown (language) ─────────────────────────────────────────── */
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.75); font: 700 12px/1 var(--mono); }
.dd-btn .ic { width: 16px; height: 16px; }
.dd-chev { transition: transform 0.2s; }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd-menu { display: none; position: absolute; z-index: 80; top: calc(100% + 8px); inset-inline-end: 0; min-width: 168px; padding: 6px; border: 1.5px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 18px 40px rgba(59, 29, 46, 0.18); }
.dd.open .dd-menu { display: grid; gap: 2px; animation: rise 0.2s var(--spring); }
.dd-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 14px; font-weight: 700; font-size: 15px; text-align: start; }
.dd-menu button:hover, .dd-menu button[aria-selected='true'] { background: var(--blush); }
.dd-menu button .ic { color: var(--rose); }

/* ── hero ────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 84px); overflow: hidden; background: linear-gradient(180deg, #fff2ec 0%, var(--ivory) 100%); }
.bg-blobs i { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.7; animation: drift 22s ease-in-out infinite alternate; }
.bg-blobs i:nth-child(1) { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: #f7bfd0; inset-block-start: -14%; inset-inline-end: -8%; }
.bg-blobs i:nth-child(2) { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; background: #fbe0b8; inset-block-end: -12%; inset-inline-start: -8%; animation-duration: 28s; animation-delay: -6s; }
.bg-blobs i:nth-child(3) { width: 26vw; height: 26vw; max-width: 340px; max-height: 340px; background: #d9c8f0; inset-block-start: 38%; inset-inline-start: 36%; opacity: 0.5; animation-duration: 25s; animation-delay: -12s; }
@keyframes drift { to { transform: translate(5vw, -4vw) scale(1.15); } }
.petal-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.petal-field i { position: absolute; top: -40px; left: var(--x); width: var(--s); height: var(--s); border-radius: 80% 0 80% 0; background: var(--c); opacity: 0; animation: fall var(--t) linear var(--d) infinite; }
@keyframes fall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 8% { opacity: 0.75; } 50% { transform: translate3d(var(--sw), 50vh, 0) rotate(180deg); } 92% { opacity: 0.6; } 100% { transform: translate3d(calc(var(--sw) * -0.6), 105vh, 0) rotate(380deg); opacity: 0; } }
.hero-grid { display: grid; gap: 34px; align-items: center; }
.eyebrow { font: 600 12px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }
.tagline { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 6px 18px rgba(59, 29, 46, 0.08); }
.spark { width: 9px; height: 9px; background: var(--rose); border-radius: 80% 0 80% 0; animation: twirl 5s linear infinite; }
@keyframes twirl { to { transform: rotate(360deg); } }
.hero h1 { font: 500 clamp(46px, 8.6vw, 98px)/1.02 var(--display); letter-spacing: -0.015em; margin: 18px 0 18px; color: var(--plum); }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(4deg); filter: blur(6px); animation: wordIn 0.9s var(--spring) forwards; animation-delay: calc(var(--i) * 95ms + 120ms); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: none; } }
.hero h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--rose); }
.hero h1 em .w { background: linear-gradient(100deg, var(--rose) 15%, #e9a15d 42%, var(--rose-2) 60%, var(--rose) 85%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wordIn 0.9s var(--spring) forwards, shimmer 7s linear infinite; animation-delay: calc(var(--i) * 95ms + 120ms), 0s; }
@keyframes shimmer { to { background-position: -250% 0; } }
[dir='rtl'] .hero h1, [dir='rtl'] h2 { font-family: 'Noto Kufi Arabic', var(--display); line-height: 1.3; letter-spacing: 0; font-weight: 600; }
[dir='rtl'] .hero h1 em, [dir='rtl'] h2 em { font-style: normal; font-weight: 700; }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: #5c4452; max-width: 50ch; }
.quick { display: flex; align-items: stretch; gap: 8px; margin-top: 26px; padding: 8px; max-width: 560px; background: #fff; border-radius: 999px; border: 1px solid rgba(59, 29, 46, 0.08); box-shadow: 0 18px 44px rgba(176, 81, 111, 0.18); }
.quick-field { position: relative; flex: 1 1 auto; min-width: 0; display: grid; align-content: center; padding: 4px 18px; border-radius: 999px; }
.quick-field small { font: 600 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); margin-bottom: 3px; }
.quick-field select { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; border: 0; background: transparent; font-weight: 800; font-size: 16px; padding: 0 22px 0 0; color: var(--plum); cursor: pointer; text-overflow: ellipsis; }
[dir='rtl'] .quick-field select { padding: 0 0 0 22px; }
.quick-field::after { content: ''; position: absolute; inset-inline-end: 18px; top: 50%; width: 8px; height: 8px; border: solid var(--rose); border-width: 0 2px 2px 0; translate: 0 -70%; rotate: 45deg; pointer-events: none; }
.quick-field select:focus-visible { outline: 0; }
.quick-field:focus-within { background: var(--blush); }
.quick .btn { min-height: 56px; padding: 0 26px; }
.collage { position: relative; width: min(560px, 100%); aspect-ratio: 1 / 1.06; margin-inline: auto; --mx: 0; --my: 0; }
.shape { position: absolute; overflow: hidden; background: var(--blush); box-shadow: 0 28px 60px rgba(59, 29, 46, 0.2); border: 6px solid #fff; transition: translate 0.4s ease-out; }
.shape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.3s ease, transform 6s ease-out; }
.shape img.on { opacity: 1; transform: scale(1); }
.arch { inset-inline-start: 22%; top: 0; width: 66%; height: 84%; border-radius: 999px 999px 32px 32px; translate: calc(var(--mx) * 10px) calc(var(--my) * 8px); }
.orb { inset-inline-start: 0; bottom: 4%; width: 38%; aspect-ratio: 1; border-radius: 50%; translate: calc(var(--mx) * -18px) calc(var(--my) * -12px); }
.bean { inset-inline-end: 0; bottom: 14%; width: 38%; height: 26%; border-radius: 999px; rotate: -7deg; translate: calc(var(--mx) * 24px) calc(var(--my) * 14px); }
[dir='rtl'] .bean { rotate: 7deg; }
.collage.nophoto .orb, .collage.nophoto .bean { display: none; }
.collage.nophoto .arch { border: 0; background: transparent; box-shadow: none; inset-inline-start: 8%; width: 84%; height: 100%; border-radius: 0; }
.hero-svg { width: 100%; height: 100%; overflow: visible; }
.ring-text { font: 600 14px var(--mono); letter-spacing: 0.34em; animation: spin 70s linear infinite; transform-origin: 200px 230px; }
@keyframes spin { to { transform: rotate(360deg); } }
.petals { transform-origin: center; animation: bloom 6s ease-in-out infinite alternate; }
@keyframes bloom { from { transform: scale(0.96) rotate(-3deg); } to { transform: scale(1.04) rotate(3deg); } }
.stamp { position: absolute; z-index: 3; inset-inline-start: 2%; top: 7%; width: 27%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 14px 34px rgba(59, 29, 46, 0.18); display: grid; place-items: center; }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 24s linear infinite; }
.stamp text { font: 600 11px var(--mono); fill: var(--plum); }
.stamp i { width: 26%; aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, var(--gold) 0 18%, transparent 19%), conic-gradient(from 0deg, #fff 0 10%, var(--rose-2) 0 20%, #fff 0 30%, var(--rose-2) 0 40%, #fff 0 50%, var(--rose-2) 0 60%, #fff 0 70%, var(--rose-2) 0 80%, #fff 0 90%, var(--rose-2) 0); border-radius: 50%; animation: bloom 5s ease-in-out infinite alternate; }
.float { position: absolute; z-index: 4; animation: bob 6s ease-in-out infinite; }
.float.f1 { inset-inline-end: 2%; top: 5%; }
.float.f2 { inset-inline-start: 26%; bottom: 1%; animation-delay: -2s; }
.float.f3 { inset-inline-start: 0; top: 46%; animation-delay: -4s; }
.float.f3 b { font-weight: 800; }
.f3 .ic { color: var(--gold); }
@keyframes bob { 50% { transform: translateY(-9px); } }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } }

/* "right now" bubbles */
.nowbar { position: relative; z-index: 2; margin-top: -26px; padding-bottom: 10px; }
.live { display: grid; gap: 14px; padding: 18px 20px 16px; border-radius: var(--r); background: rgba(255, 255, 255, 0.92); border: 1px solid #fff; box-shadow: 0 20px 50px rgba(59, 29, 46, 0.12); backdrop-filter: blur(12px); }
.live header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live header b { font: 600 20px var(--display); }
.live header small { margin-inline-start: auto; color: var(--rose); font-weight: 800; font-size: 13px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(47, 138, 98, 0.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(47, 138, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 138, 98, 0); } }
.bubbles { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding: 6px 20px 4px; scroll-snap-type: x proximity; }
.bubbles::-webkit-scrollbar { display: none; }
.bubbles li { flex: 0 0 auto; scroll-snap-align: start; }
.bubble { display: grid; justify-items: center; gap: 2px; width: 92px; padding: 4px 0 6px; border-radius: 22px; transition: transform 0.25s var(--spring), background 0.2s; }
.bubble:hover:not([disabled]) { transform: translateY(-4px); background: var(--blush); }
.bubble[disabled] { opacity: 0.45; cursor: default; }
.ring-av { position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--st, #cdbbc4), var(--st, #cdbbc4)); display: grid; place-items: center; }
.bubble.free .ring-av { --st: var(--ok); animation: ringpulse 2.4s infinite; }
.bubble.busy .ring-av { --st: var(--rose-2); }
@keyframes ringpulse { 70% { box-shadow: 0 0 0 9px rgba(47, 138, 98, 0); } 0% { box-shadow: 0 0 0 0 rgba(47, 138, 98, 0.45); } }
.ring-av .avatar { width: 100%; height: 100%; border: 3px solid #fff; }
.bubble b { font-size: 14px; }
.bubble small { font-size: 11.5px; color: var(--muted); font-weight: 600; line-height: 1.25; text-align: center; }
.bubble.free small { color: var(--ok); font-weight: 800; }
.dotc { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--rose)); }

/* ── ribbon marquee ──────────────────────────────────────────────── */
.marquee { overflow: hidden; margin: 34px -3% 8px; padding: 2px 0; transform: rotate(-1.4deg); background: linear-gradient(90deg, var(--plum), #6b2f4d 50%, var(--plum)); color: #fbe9ee; box-shadow: 0 14px 30px rgba(59, 29, 46, 0.2); }
.marquee .track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
[dir='rtl'] .marquee .track { animation-name: marquee-rtl; }
.marquee span { font: 400 clamp(17px, 2.2vw, 24px)/1 var(--display); font-style: italic; padding: 18px 22px; white-space: nowrap; display: inline-flex; align-items: center; gap: 22px; }
.marquee span::after { content: ''; width: 9px; height: 9px; background: var(--rose-2); border-radius: 80% 0 80% 0; rotate: 45deg; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* ── sections ────────────────────────────────────────────────────── */
.sec { --sec-bg: var(--bg); position: relative; padding: clamp(64px, 9vw, 120px) 0; background: var(--sec-bg); }
.sec::before { content: ''; position: absolute; inset-inline: 0; bottom: calc(100% - 1px); height: clamp(22px, 4vw, 54px); background: var(--sec-bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C150 0 300 62 450 34S750 0 900 34s225 20 300-6V60H0Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C150 0 300 62 450 34S750 0 900 34s225 20 300-6V60H0Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; pointer-events: none; }
#book { --sec-bg: #fffaf6; margin-top: 30px; }
.sec.blush { --sec-bg: var(--blush); }
#ritual { --sec-bg: #f3ecf8; }
#shop { --sec-bg: #fff0e3; }
#reviews { --sec-bg: #fdf0f3; }
.moments { --sec-bg: #fffaf6; }
.sec.plum { --fg: #f6e9e6; --muted: #cfb3bf; --card: rgba(255, 255, 255, 0.07); --line: rgba(255, 255, 255, 0.18); --sec-bg: var(--plum); color: var(--fg); overflow: hidden; }
.sec.plum .eyebrow { color: var(--rose-2); }
.sec.plum h2 em { color: var(--rose-2); }
.sec-head { margin-bottom: clamp(26px, 4vw, 48px); max-width: 760px; }
.sec-head h2 { font: 500 clamp(36px, 6vw, 70px)/1.06 var(--display); margin: 12px 0 14px; letter-spacing: -0.012em; }
h2 em { padding-bottom: 0.08em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4q6-6 12 0t12 0' fill='none' stroke='%23e79bb0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 24px 8px; }
.sec.plum h2 em { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4q6-6 12 0t12 0' fill='none' stroke='%23b88a44' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sub { color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); max-width: 56ch; }
.rv { opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.7s ease, transform 0.8s var(--spring); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .marquee .track, .ring-text, .pulse, .petals, .bg-blobs i, .petal-field i, .float, .stamp svg, .stamp i, .spark, .btn.glow::after, .bubble.free .ring-av, .chip i { animation: none; }
  .hero h1 .w { opacity: 1; transform: none; filter: none; animation: none; }
  .hero h1 em .w { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── treatments ──────────────────────────────────────────────────── */
.filters { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1) 26px; padding: 6px var(--pad) 10px; scroll-snap-type: x proximity; }
.filters::-webkit-scrollbar { display: none; }
.bub { flex: 0 0 auto; display: grid; justify-items: center; gap: 8px; width: 92px; scroll-snap-align: start; }
.bub-ic { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--deep); border: 3px solid #fff; box-shadow: 0 8px 20px rgba(59, 29, 46, 0.1); transition: transform 0.3s var(--spring), box-shadow 0.3s; }
.bub-ic .ic { width: 28px; height: 28px; }
.bub small { font-weight: 800; font-size: 13px; text-align: center; line-height: 1.2; color: #5c4452; }
.bub:hover .bub-ic { transform: translateY(-3px) scale(1.05); }
.bub.on .bub-ic { background: var(--deep); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 4px var(--tint), 0 12px 26px rgba(59, 29, 46, 0.2); }
.bub.on small { color: var(--plum); }
.svc-grid { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.svc { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 14px 14px 16px; border-radius: var(--r); background: #fff; border: 1px solid rgba(59, 29, 46, 0.07); box-shadow: 0 10px 28px rgba(59, 29, 46, 0.07); transition: transform 0.35s var(--spring), box-shadow 0.3s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.svc:nth-child(even) { margin-top: 18px; }
.svc:hover { box-shadow: 0 22px 44px rgba(59, 29, 46, 0.15); }
.svc-art { position: relative; border-radius: 999px 999px 22px 22px; background: var(--tint); aspect-ratio: 1 / 0.86; display: grid; place-items: center; overflow: hidden; }
.svc-art::before { content: ''; position: absolute; inset: auto -20% -40% -20%; height: 70%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.svc-art .art { position: relative; width: 62%; height: auto; transition: transform 0.5s var(--spring); }
.svc:hover .svc-art .art { transform: scale(1.1) rotate(-3deg); }
.svc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.svc:hover .svc-photo { transform: scale(1.07); }
.badge { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-start: 50%; translate: -50% 0; padding: 4px 11px; border-radius: 999px; background: var(--plum); color: #fff; font: 700 10px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 14px rgba(59, 29, 46, 0.25); }
[dir='rtl'] .badge { translate: 50% 0; }
.badge.warn { background: var(--warn); }
.svc-body { min-width: 0; padding-inline: 4px; }
.svc h3 { font: 600 20px/1.2 var(--display); margin-bottom: 6px; }
[dir='rtl'] .svc h3 { font-family: 'Noto Kufi Arabic', var(--display); font-size: 17px; }
.svc p { color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.svc footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.meta { display: grid; }
.meta b { font: 600 24px/1.1 var(--display); color: var(--deep); }
.meta small { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.meta small .ic { width: 14px; height: 14px; }
.svc .btn.rose { background: var(--deep); box-shadow: 0 8px 18px rgba(59, 29, 46, 0.18); }

/* ── team ────────────────────────────────────────────────────────── */
.team-grid { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding: 10px var(--pad) 24px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); }
.team-grid::-webkit-scrollbar { display: none; }
.member { --c: var(--rose); flex: 0 0 min(300px, 78vw); scroll-snap-align: start; display: grid; gap: 12px; align-content: start; padding: 14px 14px 18px; border-radius: 34px; background: #fff; border: 1px solid rgba(59, 29, 46, 0.07); box-shadow: 0 14px 34px rgba(59, 29, 46, 0.1); transition: transform 0.35s var(--spring), box-shadow 0.3s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.member:hover { box-shadow: 0 26px 50px rgba(59, 29, 46, 0.18); }
.portrait { position: relative; aspect-ratio: 1 / 1.08; border-radius: 999px 999px 24px 24px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 26%, #fff), color-mix(in srgb, var(--c) 55%, #fff)); display: grid; place-items: center; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.member:hover .portrait img { transform: scale(1.06); }
.portrait b { font: 400 120px/1 var(--display); font-style: italic; color: rgba(255, 255, 255, 0.92); text-shadow: 0 10px 30px rgba(59, 29, 46, 0.18); }
.portrait::after { content: ''; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28)); }
.state { position: absolute; z-index: 2; inset-block-end: 14px; inset-inline-start: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--muted); white-space: nowrap; box-shadow: 0 6px 16px rgba(59, 29, 46, 0.14); }
[dir='rtl'] .state { translate: 50% 0; }
.state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.state.free { color: var(--ok); }
.state.free::before { animation: pulse 1.8s infinite; }
.state.busy { color: var(--warn); }
.m-info { text-align: center; }
.member h3 { font: 600 28px/1.15 var(--display); }
.member .role { color: var(--muted); font-size: 14px; }
.rate-row { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font-size: 13px; }
.rate-row b { margin-inline-start: 4px; }
.rate-row small { color: var(--muted); }
.star { width: 15px; height: 15px; fill: rgba(59, 29, 46, 0.14); }
.star.on { fill: var(--gold); }
.bio { color: #5c4452; font-size: 14.5px; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.skills span { padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 80%, #3b1d2e); font-size: 12.5px; font-weight: 800; }
.member footer { display: grid; gap: 10px; justify-items: center; padding-top: 4px; }
.next { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; text-align: center; }
.next b { color: var(--fg); }
@media (min-width: 960px) { .team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 10px 0 0; } .member { flex: none; } .member:nth-child(4n+2), .member:nth-child(4n+4) { margin-top: 26px; } }

/* ── moments mosaic ──────────────────────────────────────────────── */
.mosaic { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
.mosaic figure { position: relative; overflow: hidden; border-radius: 28px; background: var(--blush); box-shadow: 0 14px 30px rgba(59, 29, 46, 0.12); }
.mosaic figure:nth-child(1) { grid-row: span 2; border-radius: 999px 999px 28px 28px; }
.mosaic figure:nth-child(4) { grid-row: span 2; }
.mosaic figure:nth-child(6) { border-radius: 999px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.mosaic figure:hover img { transform: scale(1.08); }
@media (min-width: 800px) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; } }

/* ── ritual finder ───────────────────────────────────────────────── */
.finder { display: grid; gap: 26px; }
.questions { display: grid; gap: 22px; align-content: start; }
.q h4 { font: 700 13px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.tile { display: grid; justify-items: start; gap: 10px; padding: 14px; border-radius: 22px; background: var(--tint); border: 2px solid transparent; text-align: start; font-weight: 800; font-size: 15px; line-height: 1.2; transition: transform 0.3s var(--spring), border-color 0.2s, box-shadow 0.3s; }
.tile .ti { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--deep); }
.tile:hover { transform: translateY(-3px) rotate(-1deg); }
.tile.on { border-color: var(--deep); box-shadow: 0 12px 26px rgba(59, 29, 46, 0.16); transform: translateY(-3px); }
.tile.on .ti { background: var(--deep); color: #fff; }
.result { position: relative; display: grid; gap: 20px; padding: 24px; border-radius: 34px; background: linear-gradient(150deg, var(--plum), #5b2a45); color: #f6e9e6; overflow: hidden; box-shadow: 0 26px 56px rgba(59, 29, 46, 0.28); }
.result::after { content: ''; position: absolute; width: 240px; height: 240px; inset-block-start: -90px; inset-inline-end: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(231, 155, 176, 0.45), transparent 70%); animation: bloom 6s ease-in-out infinite alternate; }
.r-art { position: relative; z-index: 1; }
.r-art .art, .r-art img { width: 100%; max-width: 230px; margin-inline: auto; }
.r-art .art { background: var(--pink); border-radius: 999px 999px 24px 24px; padding: 22px; }
.r-art img { aspect-ratio: 1 / 1.1; object-fit: cover; border-radius: 999px 999px 24px 24px; }
.r-body { position: relative; z-index: 1; }
.r-body small { font: 600 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-2); }
.r-body h3 { font: 500 clamp(28px, 4vw, 42px)/1.1 var(--display); margin: 6px 0 10px; }
[dir='rtl'] .r-body h3 { font-family: 'Noto Kufi Arabic', var(--display); font-weight: 700; }
.r-body p { color: #dfc9d1; margin-bottom: 14px; }
.r-body ul { display: grid; gap: 8px; margin-bottom: 18px; font-size: 14px; color: #f0dde2; }
.r-body li { display: flex; align-items: center; gap: 8px; }
.r-body li .ic { color: var(--rose-2); }
@media (min-width: 900px) { .finder { grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; } .result { grid-template-columns: 220px 1fr; align-items: center; } }

/* ── bridal & events ─────────────────────────────────────────────── */
.sec.plum::after { content: ''; position: absolute; width: 520px; height: 520px; inset-block-start: -180px; inset-inline-end: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(231, 155, 176, 0.28), transparent 68%); pointer-events: none; animation: drift 20s ease-in-out infinite alternate; }
.sec.plum > .wrap { position: relative; z-index: 1; }
.bridal-top { display: grid; gap: 24px; align-items: center; margin-bottom: clamp(26px, 4vw, 44px); }
.bridal-top .sec-head { margin: 0; }
.bridal-pic { position: relative; width: min(280px, 70%); aspect-ratio: 4 / 5; justify-self: center; }
.bridal-pic .shape { inset: 0; border-radius: 999px 999px 28px 28px; border-color: rgba(255, 255, 255, 0.9); }
.bridal-pic .chip { position: absolute; inset-inline-start: -14%; bottom: 12%; color: var(--plum); z-index: 3; white-space: normal; max-width: 72%; padding: 9px 16px; line-height: 1.25; flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 20px; animation: bob 6s ease-in-out infinite; }
.bridal-pic .chip small { font-weight: 600; color: var(--muted); font-size: 12px; }
.bridal-pic.nophoto { display: none; }
@media (min-width: 900px) { .bridal-top { grid-template-columns: 1fr auto; gap: 56px; } .bridal-pic { width: 300px; } }
.packs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: 34px; }
.pack { position: relative; padding: 28px 24px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--card); backdrop-filter: blur(8px); display: grid; gap: 14px; align-content: start; transition: transform 0.35s var(--spring), border-color 0.2s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.pack:hover { border-color: var(--rose-2); }
.pack.best { border-color: var(--rose-2); background: linear-gradient(180deg, rgba(231, 155, 176, 0.24), var(--card) 60%); }
.pack .badge { inset-block-start: -12px; inset-inline-start: 50%; background: var(--gold); }
.pack h4 { font: 600 26px var(--display); }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font: 500 42px/1 var(--display); }
.price small { color: var(--muted); font-size: 13px; }
.pack ul { display: grid; gap: 9px; font-size: 14.5px; }
.pack li { display: flex; gap: 8px; align-items: flex-start; }
.pack li .ic { color: var(--rose-2); margin-top: 3px; }
.quote-box { padding: clamp(22px, 3vw, 36px); border-radius: 34px; background: #fff; color: var(--ink); --muted: #7b6670; --line: rgba(59, 29, 46, 0.14); max-width: 800px; margin-inline: auto; display: grid; gap: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3); }
.quote-box h3 { font: 600 30px var(--display); }
.quote-box .pill { background: #fff; }
.quote-box .pill.on { background: var(--plum); }
.quote-box .tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.tile.ev-wedding { --tint: var(--pink); --deep: #c0527a; } .tile.ev-engagement { --tint: var(--lilac); --deep: #8f67b4; } .tile.ev-henna { --tint: var(--peach); --deep: #d17b52; } .tile.ev-party { --tint: var(--butter); --deep: #b8902c; }

/* ── club ────────────────────────────────────────────────────────── */
.club-top { display: grid; gap: 22px; margin-bottom: 40px; grid-template-columns: minmax(0, 1fr); }
.club-top > * { min-width: 0; }
.points-card { position: relative; overflow: hidden; padding: 24px; border-radius: 34px; background: linear-gradient(145deg, var(--plum), var(--plum-2)); color: #f6e9e6; display: grid; gap: 14px; align-content: start; justify-items: center; text-align: center; box-shadow: 0 26px 56px rgba(59, 29, 46, 0.26); }
.points-card::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(231, 155, 176, 0.38), transparent 70%); animation: drift 14s ease-in-out infinite alternate; }
.points-card > * { position: relative; }
.sc-top { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 500 22px var(--display); }
.sc-top small { font: 600 12px var(--mono); color: var(--rose-2); letter-spacing: 0.06em; }
.ring { --p: 50; --pp: 0; width: 164px; height: 164px; border-radius: 50%; background: conic-gradient(var(--rose-2) calc(var(--pp) * 1%), rgba(255, 255, 255, 0.14) 0); display: grid; place-items: center; position: relative; transition: --pp 1.8s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 14px rgba(231, 155, 176, 0.4)); }
.points-card.in .ring { --pp: var(--p); }
.ring::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: var(--plum-2); }
.ring > div { position: relative; display: grid; }
.ring b { font: 500 48px/1 var(--display); }
.ring small { font: 600 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-2); }
.sc-msg { font-weight: 700; }
.sc-msg b { display: inline-flex; align-items: center; gap: 8px; color: #ffd9e1; }
.lookup { display: flex; gap: 8px; width: 100%; }
.lookup .btn.ghost { color: #f6e9e6; border-color: rgba(255, 255, 255, 0.3); }
.lookup input, .form input, .form textarea, .find input, .form select { width: 100%; min-width: 0; min-height: 48px; padding: 10px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.points-card .lookup input { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.points-card .lookup input::placeholder { color: rgba(255, 255, 255, 0.5); }
.form textarea { resize: vertical; }
.lookup input:focus, .form input:focus, .form textarea:focus, .find input:focus { outline: 0; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(231, 155, 176, 0.3); }
.tiny { color: var(--muted); font-size: 12.5px; }
.points-card .tiny { color: #cfb3bf; }
.gift-box { padding: 24px; border-radius: 34px; border: 1px solid rgba(59, 29, 46, 0.07); background: #fff; box-shadow: 0 18px 44px rgba(59, 29, 46, 0.1); display: grid; gap: 14px; align-content: start; }
.gift-box h3, .mini-h { font: 600 26px var(--display); }
.mini-h { margin-bottom: 18px; }
.gcard { position: relative; min-height: 172px; max-width: 350px; border-radius: 22px; padding: 18px 20px; display: grid; gap: 8px; align-content: space-between; background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; overflow: hidden; box-shadow: 0 18px 36px rgba(59, 29, 46, 0.3); rotate: -2deg; transition: rotate 0.4s var(--spring); }
.gcard:hover { rotate: 1deg; }
.gcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.35) 50%, transparent 62%); transform: translateX(-130%); animation: sheen 5s ease-in-out infinite; }
.gcard > * { position: relative; z-index: 1; }
.gc-brand { font: 500 18px var(--display); letter-spacing: 0.3em; }
.gcard b { font: 500 38px/1 var(--display); }
.gcard small { opacity: 0.92; font-size: 13px; }
.gcard code { font: 600 14px var(--mono); letter-spacing: 0.1em; background: rgba(0, 0, 0, 0.22); padding: 4px 9px; border-radius: 8px; justify-self: start; direction: ltr; unicode-bidi: isolate; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.two { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.plan { position: relative; padding: 28px 24px; border-radius: var(--r); border: 1px solid rgba(59, 29, 46, 0.07); background: #fff; box-shadow: 0 12px 30px rgba(59, 29, 46, 0.08); display: grid; gap: 14px; align-content: start; transition: transform 0.35s var(--spring); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.plan:nth-child(1) { background: linear-gradient(180deg, var(--lilac), #fff 55%); }
.plan:nth-child(3) { background: linear-gradient(180deg, var(--butter), #fff 55%); }
.plan.best { background: linear-gradient(180deg, var(--pink), #fff 55%); box-shadow: 0 0 0 2px var(--rose-2), 0 22px 46px rgba(176, 81, 111, 0.22); }
.plan .badge { inset-block-start: -12px; inset-inline-start: 50%; }
.plan h4 { font: 600 26px var(--display); }
.plan ul { display: grid; gap: 9px; font-size: 14.5px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .ic { color: var(--rose); margin-top: 3px; }
@media (min-width: 900px) { .club-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── shop ────────────────────────────────────────────────────────── */
.prod-grid { display: grid; gap: 18px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.shop-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); font-weight: 700; font-size: 14px; }
.shop-bar span { display: inline-flex; align-items: center; gap: 8px; }
#bagBtn.bump { animation: bump 0.5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.18) rotate(-4deg); } }
.prod { --tint: #f3dfd9; padding: 12px 12px 16px; border-radius: var(--r); background: #fff; border: 1px solid rgba(59, 29, 46, 0.07); box-shadow: 0 10px 26px rgba(59, 29, 46, 0.07); display: grid; gap: 8px; align-content: start; transition: transform 0.35s var(--spring), box-shadow 0.3s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.prod:hover { box-shadow: 0 20px 40px rgba(59, 29, 46, 0.14); }
.prod.out { opacity: 0.6; }
.p-art { position: relative; aspect-ratio: 1; border-radius: 22px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tint) 12%, #fff), color-mix(in srgb, var(--tint) 38%, #fff)); overflow: hidden; display: grid; place-items: center; }
.p-art .art { width: 74%; transition: transform 0.5s var(--spring); }
.prod:hover .p-art .art { transform: scale(1.1) rotate(-4deg); }
.p-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.prod:hover .p-art img { transform: scale(1.07); }
.prod h3 { font: 700 15px/1.3 var(--body); padding-inline: 4px; }
.prod p { color: var(--muted); font-size: 13px; padding-inline: 4px; }
.prod footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding-inline: 4px; }
.prod footer b { font: 600 22px var(--display); white-space: nowrap; }

/* ── reviews ─────────────────────────────────────────────────────── */
.rev-top { margin-bottom: 26px; }
.big-rate { display: flex; align-items: center; gap: 16px; }
.big-rate b { font: 500 78px/1 var(--display); color: var(--rose); }
.big-rate small { display: block; color: var(--muted); margin-top: 4px; }
.big-rate .star { width: 20px; height: 20px; }
.rev-marquee { overflow: hidden; margin-inline: calc(var(--pad) * -1); padding: 14px 0 22px; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rev-marquee .track { display: flex; gap: 16px; width: max-content; animation: marquee 80s linear infinite; padding-inline: 8px; }
[dir='rtl'] .rev-marquee .track { animation-name: marquee-rtl; }
.rev-marquee:hover .track { animation-play-state: paused; }
.rev { flex: 0 0 min(340px, 80vw); padding: 24px 22px; border-radius: 28px; background: #fff; border: 1px solid rgba(59, 29, 46, 0.07); box-shadow: 0 12px 30px rgba(59, 29, 46, 0.08); display: grid; gap: 12px; align-content: start; position: relative; }
.rev:nth-child(3n+1) { background: var(--pink); }
.rev:nth-child(3n+2) { background: #fff; rotate: 0.8deg; }
.rev:nth-child(3n) { background: var(--lilac); }
.rev::before { content: '“'; position: absolute; inset-block-start: 6px; inset-inline-end: 18px; font: 400 80px/1 var(--display); color: rgba(176, 81, 111, 0.22); }
.rev blockquote { font-size: 15.5px; position: relative; }
.rev figcaption { font: 600 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rev div { display: flex; gap: 2px; }
@media (prefers-reduced-motion: reduce) { .rev-marquee { overflow-x: auto; } .rev-marquee .track { animation: none; } }

/* ── visit ───────────────────────────────────────────────────────── */
.visit-grid { display: grid; gap: 18px; margin-bottom: 30px; }
.visit-card { padding: 24px; border-radius: var(--r); border: 1px solid rgba(59, 29, 46, 0.07); background: #fff; box-shadow: 0 12px 30px rgba(59, 29, 46, 0.07); display: grid; gap: 14px; align-content: start; }
.visit-card h3 { font: 600 24px var(--display); }
.addr { display: flex; gap: 8px; align-items: flex-start; }
.map { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.map svg { width: 100%; height: auto; }
.amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 14px; color: #5c4452; }
.amen li { display: flex; align-items: center; gap: 8px; }
.amen .ic { color: var(--rose); }
.open-now { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.hours { display: grid; gap: 4px; }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-radius: 14px; font-size: 15px; }
.hours li.today { background: var(--blush); color: var(--rose); font-weight: 800; }
.hours b { font: 600 14px var(--mono); }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:first-of-type { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform 0.25s var(--spring); color: var(--rose); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { color: var(--muted); font-size: 14.5px; padding-bottom: 12px; }
.news { display: grid; gap: 14px; padding: 28px; border-radius: 34px; background: linear-gradient(135deg, var(--plum), #6b2f4d); color: #f6e9e6; box-shadow: 0 24px 54px rgba(59, 29, 46, 0.25); }
.news h3 { font: 500 28px var(--display); }
.news p { color: #dfc9d1; }
.news-row { display: flex; gap: 8px; flex-wrap: wrap; }
.news-row input { flex: 1 1 220px; min-width: 0; min-height: 50px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #fff; }
.news-row input::placeholder { color: rgba(255, 255, 255, 0.55); }
@media (min-width: 900px) { .visit-grid { grid-template-columns: repeat(3, 1fr); } .news { grid-template-columns: 1fr 1fr; align-items: center; } }
.foot { padding: 40px 0 calc(44px + var(--tabbar)); text-align: center; background: var(--ivory); }
.foot-row { display: flex; justify-content: center; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.foot-row b { font: 600 28px var(--display); letter-spacing: 0.3em; }
.foot-row span { color: var(--muted); font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.fine { color: var(--muted); font-size: 13px; max-width: 70ch; margin: 6px auto; }
.fine a { color: var(--rose); }

/* ── mobile app shell ────────────────────────────────────────────── */
.tabbar { display: none; }
@media (max-width: 719px) {
  :root { --tabbar: calc(82px + env(safe-area-inset-bottom)); --r: 24px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; z-index: 70; inset-inline: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 8px 6px; border-radius: 30px; background: rgba(255, 250, 247, 0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid #fff; box-shadow: 0 16px 40px rgba(59, 29, 46, 0.24); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; text-decoration: none; color: var(--muted); font-weight: 700; transition: transform 0.25s var(--spring); }
  .tabbar a .ic { width: 22px; height: 22px; }
  .tabbar small { font-size: 10.5px; }
  .tabbar a.on { color: var(--rose); transform: translateY(-3px); }
  .tab-book { justify-self: center; width: 60px; height: 60px; margin-top: -28px; border-radius: 50%; background: linear-gradient(135deg, #cf6a8a, var(--rose)); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(176, 81, 111, 0.5), 0 0 0 6px var(--ivory); animation: tabpulse 3s ease-in-out infinite; }
  .tab-book .ic { width: 26px; height: 26px; }
  @keyframes tabpulse { 50% { transform: scale(1.07); } }
  .demobar { font-size: 11.5px; padding: 6px 38px 6px 12px; gap: 4px 8px; line-height: 1.35; }
  .demobar .dot { display: none; }
  .announce { font-size: 12.5px; padding-block: 7px; }
  .nav { top: 6px; margin-top: 8px; padding: 6px 8px 6px 14px; gap: 8px; }
  [dir='rtl'] .nav { padding: 6px 14px 6px 8px; }
  .brand svg { width: 34px; height: 34px; }
  .brand span { font-size: 21px; }
  .quick { flex-direction: column; border-radius: 30px; padding: 8px; }
  .quick-field { padding: 8px 18px 8px; }
  .quick .btn { width: 100%; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .svc:nth-child(even) { margin-top: 16px; }
  .svc { padding: 10px 10px 12px; border-radius: 22px; }
  .svc h3 { font-size: 16.5px; }
  .svc p { display: none; }
  .svc footer { flex-wrap: wrap; gap: 8px; }
  .svc footer .btn { flex: 1 1 100%; min-height: 40px; padding: 0 10px; }
  .meta b { font-size: 20px; }
  .badge { font-size: 9px; padding: 3px 8px; }
  .two { grid-template-columns: 1fr; }
  .toast { bottom: calc(var(--tabbar) + 10px) !important; }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .prod { padding: 8px 8px 12px; border-radius: 22px; }
  .prod p { display: none; }
  .prod footer b { font-size: 18px; }
  .prod footer { flex-wrap: wrap; }
  .tagline { font-size: 10.5px; letter-spacing: 0.1em; padding: 6px 12px; }
  .hero h1 { margin: 14px 0 12px; }
  .lead { font-size: 16px; line-height: 1.5; }
  .quick { margin-top: 18px; }
  .link-btn { margin-top: 10px; }
  .hero { padding-top: 18px; }
  .hero-grid { gap: 22px; }
  .prod footer .btn { padding: 0 12px; min-height: 38px; }
  .collage { aspect-ratio: 1 / 1.1; }
  .chip { font-size: 12px; min-height: 34px; padding: 0 12px; }
  .float.f3 { top: 52%; }
}
@media (max-width: 400px) { .bubble { width: 84px; } .quick-field select { font-size: 15px; } }

/* ── sheets ──────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(42, 22, 32, 0.55); backdrop-filter: blur(3px); animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 100; background: var(--ivory); color: var(--ink); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; animation: rise 0.28s cubic-bezier(.2, .9, .3, 1); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.sheet.modal, .sheet.drawer { inset-inline: 0; bottom: 0; max-height: 94svh; border-radius: 26px 26px 0 0; }
@media (min-width: 720px) {
  .sheet.modal { inset: 50% auto auto 50%; translate: -50% -50%; width: min(600px, 94vw); max-height: 90svh; border-radius: 26px; }
  .sheet.drawer { inset: 0 0 0 auto; width: min(460px, 100vw); max-height: none; border-radius: 26px 0 0 26px; animation-name: slide; }
  [dir='rtl'] .sheet.drawer { inset: 0 auto 0 0; border-radius: 0 26px 26px 0; }
}
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 10px; }
.sheet-head h3 { font: 600 26px/1.15 var(--display); }
.sheet-head p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.xbtn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex-shrink: 0; background: #fff; }
.sheet-body { padding: 8px 20px 20px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.sheet-foot .btn { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; }
.sheet-foot .foot-sum { flex: 1 0 100%; }
@media (min-width: 480px) { .sheet-foot .foot-sum { flex: 1 1 auto; } .sheet-foot .btn { flex: 0 1 auto; } }
.wrap-foot .btn { flex: 1 1 auto; }
.wrap-foot .btn.rose { flex-basis: 100%; }
.foot-sum { margin-inline-end: auto; display: grid; font-size: 14px; min-width: 0; }
.foot-sum span { color: var(--muted); font-size: 13px; }
.steps { display: flex; gap: 6px; padding: 4px 20px 6px; }
.steps li { flex: 1; display: flex; align-items: center; gap: 8px; font: 700 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.steps li span { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex-shrink: 0; font-size: 11px; background: #fff; }
.steps li span .ic { width: 13px; height: 13px; }
.steps li em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps li.on { color: var(--rose); }
.steps li.on span { background: var(--rose); border-color: var(--rose); color: #fff; }
.steps li.ok span { background: rgba(47, 138, 98, 0.15); border-color: var(--ok); color: var(--ok); }
@media (max-width: 480px) { .steps li { flex: 0 0 auto; } .steps li.on { flex: 1 1 auto; } .steps li em { display: none; } .steps li.on em { display: block; } }
.chips-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px -20px 12px; padding: 2px 20px; }
.chips-row::-webkit-scrollbar { display: none; }
.mixed { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #fdecd0; color: #7a4a0b; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; text-align: start; transition: 0.15s; }
.row:hover { border-color: var(--rose-2); }
.row.on { border-color: var(--rose); background: rgba(217, 140, 161, 0.14); }
.row[disabled] { opacity: 0.4; cursor: not-allowed; }
.row.who { grid-template-columns: auto minmax(0, 1fr) 24px; }
.row .avatar { width: 48px; height: 48px; font-size: 20px; border-width: 1.5px; }
.tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex-shrink: 0; }
.row.on .tick { background: var(--rose); border-color: var(--rose); color: #fff; }
.tick .ic { width: 14px; height: 14px; }
.row-main { display: grid; min-width: 0; }
.row-main b { font-size: 15px; }
.row-main small { color: var(--muted); font-size: 13px; }
.row-main .next { color: var(--rose); }
.row-price { font: 600 17px var(--display); white-space: nowrap; }
.strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px -20px 12px; padding: 4px 20px; scroll-snap-type: x proximity; scroll-padding-inline: 20px; }
.strip::-webkit-scrollbar { display: none; }
.day { position: relative; flex: 0 0 62px; display: grid; justify-items: center; gap: 2px; padding: 10px 0 8px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; scroll-snap-align: start; }
.day small { font: 600 10.5px var(--mono); text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; }
.day b { font: 600 24px/1 var(--display); }
.day i { font: normal 700 9px var(--mono); color: var(--rose); text-transform: uppercase; }
.day.on { background: var(--rose); border-color: var(--rose); color: #fff; }
.day.on small, .day.on i { color: #fff; }
.day[disabled] { opacity: 0.32; text-decoration: line-through; cursor: not-allowed; }
.sel-date { font-weight: 800; margin: 4px 0 12px; }
.slot-group { margin-bottom: 14px; }
.slot-group h4 { font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.slot { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font: 700 15px var(--mono); }
.slot:hover { border-color: var(--rose); }
.slot.on { background: var(--rose); border-color: var(--rose); color: #fff; }
.empty { color: var(--muted); text-align: center; padding: 22px 8px; }
.form { display: grid; gap: 12px; }
.form label, .find { display: grid; gap: 6px; font-weight: 700; font-size: 13.5px; color: #4a3441; }
.recap { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 14px; border-radius: 14px; background: var(--blush); border: 1px solid rgba(176, 81, 111, 0.25); font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.recap span { display: inline-flex; align-items: center; gap: 6px; }
.recap .ic { color: var(--rose); }
.reward { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(184, 138, 68, 0.14); border: 1.5px dashed var(--gold); font-weight: 700; margin-top: 12px; }
.reward input { width: 20px; height: 20px; accent-color: var(--rose); }
.sum { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sum .disc { color: var(--ok); }
.sum .disc span { display: inline-flex; align-items: center; gap: 6px; }
.sum .tot { padding-top: 10px; border-top: 1px dashed var(--line); font-weight: 800; }
.sum .tot b { font: 600 24px var(--display); }
.msgs { display: grid; gap: 4px; margin-top: 8px; }
.msgs .bad, .err { color: var(--bad); font-size: 13px; }
.msgs .good { color: var(--ok); font-size: 13px; }
.err { margin-top: 8px; min-height: 1em; }
.pay-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-top: 10px; }
.hint { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.hint.top { margin: 0 0 10px; }
.done { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 8px 0; }
.done h3 { font: 600 22px var(--display); }
.done-ic { width: 72px; height: 72px; border-radius: 50%; background: rgba(47, 138, 98, 0.14); border: 2px solid var(--ok); color: var(--ok); display: grid; place-items: center; animation: pop 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.done-ic .ic { width: 34px; height: 34px; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
.code { font: 600 28px var(--display); letter-spacing: 0.14em; color: var(--rose); direction: ltr; unicode-bidi: isolate; }
.ticket { width: 100%; display: grid; gap: 12px; text-align: start; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--line); background: #fff; }
.ticket div { display: grid; gap: 2px; }
.ticket small { font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mini { font: 700 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.bk-card { display: grid; gap: 6px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; margin-bottom: 10px; }
.bk-card.past { opacity: 0.7; }
.bk-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-card small { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.bk-actions > span { font-weight: 700; margin-inline-end: auto; }
.st { padding: 4px 10px; border-radius: 999px; font: 700 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--line); white-space: nowrap; }
.st-pending { color: var(--warn); border-color: rgba(194, 122, 20, 0.5); }
.st-confirmed, .st-arrived { color: var(--rose); border-color: rgba(176, 81, 111, 0.5); }
.st-inchair { color: #1d6fa8; border-color: rgba(29, 111, 168, 0.5); }
.st-done { color: var(--ok); border-color: rgba(47, 138, 98, 0.5); }
.st-noshow, .st-cancelled { color: var(--bad); border-color: rgba(192, 57, 43, 0.5); }
.perks { display: grid; gap: 8px; font-size: 14.5px; }
.perks li { display: flex; gap: 8px; }
.perks .ic { color: var(--rose); margin-top: 3px; }
.bag-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bl-art { width: 52px; height: 52px; border-radius: 12px; background: var(--blush); display: grid; place-items: center; overflow: hidden; }
.bl-art .art { width: 80%; }
.bl-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.bag-line small { display: block; color: var(--muted); }
.qty { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.qty button { width: 34px; height: 34px; display: grid; place-items: center; }
.qty span { min-width: 20px; text-align: center; font-weight: 800; }
#bagForm { margin-top: 16px; }
.toast { position: fixed; z-index: 200; inset-inline: 16px; bottom: 24px; margin-inline: auto; width: fit-content; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 14px; background: var(--plum); color: #fff; font-weight: 700; font-size: 14px; text-align: center; opacity: 0; translate: 0 20px; pointer-events: none; transition: 0.25s; box-shadow: 0 12px 30px rgba(59, 29, 46, 0.4); }
.toast.on { opacity: 1; translate: 0 0; }
.demo-off { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--ivory); }
.demo-off > div { display: grid; gap: 14px; max-width: 420px; justify-items: center; }
.demo-off b { font: 600 30px var(--display); letter-spacing: 0.3em; }
.demo-off h1 { font: 500 clamp(26px, 6vw, 38px)/1.15 var(--display); }
.demo-off p { color: var(--muted); }

/* phone numbers keep their digit order in right-to-left pages */
input[inputmode='tel'] { direction: ltr; }
[dir='rtl'] input[inputmode='tel'] { text-align: right; }
.dd-btn, .code { direction: ltr; }


/* sheets, softened */
.scrim { background: rgba(59, 29, 46, 0.5); }
.sheet { background: #fffaf7; border: 0; box-shadow: 0 30px 80px rgba(59, 29, 46, 0.35); }
.sheet.modal, .sheet.drawer { border-radius: 34px 34px 0 0; }
@media (min-width: 720px) { .sheet.modal { border-radius: 34px; } .sheet.drawer { border-radius: 34px 0 0 34px; } [dir='rtl'] .sheet.drawer { border-radius: 0 34px 34px 0; } }
.sheet-head h3 { font-size: 28px; }
.steps li span { box-shadow: 0 2px 8px rgba(59, 29, 46, 0.08); }
.steps li.on span { box-shadow: 0 0 0 4px rgba(231, 155, 176, 0.35); }
.row { border-radius: 22px; border-width: 1.5px; padding: 12px 16px; }
.row:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(59, 29, 46, 0.08); }
.row.on { background: color-mix(in srgb, var(--tint, #fbdde6) 60%, #fff); border-color: var(--deep, var(--rose)); }
.row.on .tick { background: var(--deep, var(--rose)); border-color: var(--deep, var(--rose)); }
.row[data-bksvc]::before { content: ''; display: none; }
.row .tick { border-color: color-mix(in srgb, var(--deep, var(--rose)) 45%, #fff); }
.row-price { color: var(--deep, var(--plum)); }
.day { border-radius: 22px; }
.slot { border-radius: 999px; transition: transform 0.2s var(--spring), background 0.2s; }
.slot:hover { transform: translateY(-2px); }
.slot.on { box-shadow: 0 8px 18px rgba(176, 81, 111, 0.35); transform: translateY(-2px); }
.recap { border-radius: 20px; background: linear-gradient(135deg, var(--pink), var(--peach)); border: 0; }
.sum, .ticket, .bk-card { border-radius: 22px; }
.done-ic { position: relative; }
.burst { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.burst i { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-radius: 80% 0 80% 0; background: var(--c); animation: burst 1.3s cubic-bezier(.15, .8, .3, 1) forwards; animation-delay: var(--dl, 0ms); opacity: 0; }
@keyframes burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); } }
.toast { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .burst { display: none; } .tab-book, .gcard::after { animation: none; } }

/* avatars (booking sheet, live bubbles) */
.avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rose-2); background: #fff; }
.avatar.mono { display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--rose)) 22%, #fff); font: 600 28px var(--display); color: var(--c, var(--rose)); }
.avatar.any { background: var(--blush); color: var(--rose); --c: var(--rose); }
.avatar.any .ic { width: 28px; height: 28px; }
.bridal-pic .chip small { color: #7b6670; }
.ring-av .avatar.mono { font-size: 26px; }

/* layout polish found by the audit */
.portrait b { margin-bottom: 44px; }
.svc h3 { overflow-wrap: break-word; hyphens: auto; }
.collage .chip { white-space: normal; max-width: 72%; line-height: 1.2; padding-block: 8px; border-radius: 20px; }
.collage .chip.f1 { max-width: 60%; }
.stamp text { direction: ltr; }
[dir='rtl'] .stamp text { font-family: 'Noto Kufi Arabic', var(--mono); font-size: 10px; }
.hero h1 em .w { padding: 0.04em 0.06em 0.16em; margin: -0.04em -0.06em -0.16em; }
.portrait img { object-position: 50% 22%; }
.avatar { object-position: 50% 25%; }
.svc-photo { object-position: 50% 35%; }
.more-row { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 10px; }
.more-row .btn .ic { transition: transform 0.25s; }

/* ── softer photo shapes (replaces the arch frames) ──────────────── */
:root { --flower-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath fill='%23f6c9d6' d='M0.9750 0.5000 L0.9733 0.5124 L0.9683 0.5245 L0.9604 0.5362 L0.9500 0.5473 L0.9379 0.5576 L0.9247 0.5673 L0.9113 0.5762 L0.8986 0.5847 L0.8872 0.5930 L0.8777 0.6012 L0.8706 0.6098 L0.8662 0.6190 L0.8644 0.6290 L0.8651 0.6401 L0.8679 0.6524 L0.8723 0.6657 L0.8776 0.6801 L0.8831 0.6952 L0.8881 0.7107 L0.8919 0.7262 L0.8938 0.7413 L0.8933 0.7554 L0.8902 0.7682 L0.8843 0.7792 L0.8756 0.7882 L0.8645 0.7951 L0.8512 0.7999 L0.8363 0.8028 L0.8204 0.8040 L0.8041 0.8041 L0.7880 0.8035 L0.7727 0.8028 L0.7586 0.8028 L0.7461 0.8039 L0.7353 0.8067 L0.7263 0.8115 L0.7189 0.8186 L0.7130 0.8279 L0.7080 0.8395 L0.7037 0.8529 L0.6996 0.8677 L0.6952 0.8831 L0.6901 0.8986 L0.6840 0.9134 L0.6767 0.9267 L0.6681 0.9378 L0.6580 0.9463 L0.6468 0.9518 L0.6345 0.9540 L0.6214 0.9530 L0.6078 0.9491 L0.5941 0.9426 L0.5805 0.9343 L0.5673 0.9247 L0.5546 0.9148 L0.5426 0.9053 L0.5312 0.8970 L0.5205 0.8905 L0.5101 0.8864 L0.5000 0.8850 L0.4899 0.8864 L0.4795 0.8905 L0.4688 0.8970 L0.4574 0.9053 L0.4454 0.9148 L0.4327 0.9247 L0.4195 0.9343 L0.4059 0.9426 L0.3922 0.9491 L0.3786 0.9530 L0.3655 0.9540 L0.3532 0.9518 L0.3420 0.9463 L0.3319 0.9378 L0.3233 0.9267 L0.3160 0.9134 L0.3099 0.8986 L0.3048 0.8831 L0.3004 0.8677 L0.2963 0.8529 L0.2920 0.8395 L0.2870 0.8279 L0.2811 0.8186 L0.2737 0.8115 L0.2647 0.8067 L0.2539 0.8039 L0.2414 0.8028 L0.2273 0.8028 L0.2120 0.8035 L0.1959 0.8041 L0.1796 0.8040 L0.1637 0.8028 L0.1488 0.7999 L0.1355 0.7951 L0.1244 0.7882 L0.1157 0.7792 L0.1098 0.7682 L0.1067 0.7554 L0.1062 0.7413 L0.1081 0.7262 L0.1119 0.7107 L0.1169 0.6952 L0.1224 0.6801 L0.1277 0.6657 L0.1321 0.6524 L0.1349 0.6401 L0.1356 0.6290 L0.1338 0.6190 L0.1294 0.6098 L0.1223 0.6012 L0.1128 0.5930 L0.1014 0.5847 L0.0887 0.5762 L0.0753 0.5673 L0.0621 0.5576 L0.0500 0.5473 L0.0396 0.5362 L0.0317 0.5245 L0.0267 0.5124 L0.0250 0.5000 L0.0267 0.4876 L0.0317 0.4755 L0.0396 0.4638 L0.0500 0.4527 L0.0621 0.4424 L0.0753 0.4327 L0.0887 0.4238 L0.1014 0.4153 L0.1128 0.4070 L0.1223 0.3988 L0.1294 0.3902 L0.1338 0.3810 L0.1356 0.3710 L0.1349 0.3599 L0.1321 0.3476 L0.1277 0.3343 L0.1224 0.3199 L0.1169 0.3048 L0.1119 0.2893 L0.1081 0.2738 L0.1062 0.2587 L0.1067 0.2446 L0.1098 0.2318 L0.1157 0.2208 L0.1244 0.2118 L0.1355 0.2049 L0.1488 0.2001 L0.1637 0.1972 L0.1796 0.1960 L0.1959 0.1959 L0.2120 0.1965 L0.2273 0.1972 L0.2414 0.1972 L0.2539 0.1961 L0.2647 0.1933 L0.2737 0.1885 L0.2811 0.1814 L0.2870 0.1721 L0.2920 0.1605 L0.2962 0.1471 L0.3004 0.1323 L0.3048 0.1169 L0.3099 0.1014 L0.3160 0.0866 L0.3233 0.0733 L0.3319 0.0622 L0.3420 0.0537 L0.3532 0.0482 L0.3655 0.0460 L0.3786 0.0470 L0.3922 0.0509 L0.4059 0.0574 L0.4195 0.0657 L0.4327 0.0753 L0.4454 0.0852 L0.4574 0.0947 L0.4688 0.1030 L0.4795 0.1095 L0.4899 0.1136 L0.5000 0.1150 L0.5101 0.1136 L0.5205 0.1095 L0.5312 0.1030 L0.5426 0.0947 L0.5546 0.0852 L0.5673 0.0753 L0.5805 0.0657 L0.5941 0.0574 L0.6078 0.0509 L0.6214 0.0470 L0.6345 0.0460 L0.6468 0.0482 L0.6580 0.0537 L0.6681 0.0622 L0.6767 0.0733 L0.6840 0.0866 L0.6901 0.1014 L0.6952 0.1169 L0.6996 0.1323 L0.7037 0.1471 L0.7080 0.1605 L0.7130 0.1721 L0.7189 0.1814 L0.7263 0.1885 L0.7353 0.1933 L0.7461 0.1961 L0.7586 0.1972 L0.7727 0.1972 L0.7880 0.1965 L0.8041 0.1959 L0.8204 0.1960 L0.8363 0.1972 L0.8512 0.2001 L0.8645 0.2049 L0.8756 0.2118 L0.8843 0.2208 L0.8902 0.2318 L0.8933 0.2446 L0.8938 0.2587 L0.8919 0.2738 L0.8881 0.2893 L0.8831 0.3048 L0.8776 0.3199 L0.8723 0.3343 L0.8679 0.3476 L0.8651 0.3599 L0.8644 0.3710 L0.8662 0.3810 L0.8706 0.3902 L0.8777 0.3988 L0.8872 0.4070 L0.8986 0.4153 L0.9113 0.4238 L0.9247 0.4327 L0.9379 0.4424 L0.9500 0.4527 L0.9604 0.4638 L0.9683 0.4755 L0.9733 0.4876Z'/%3E%3C/svg%3E"); --flower-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath fill='%23ffffff' d='M0.9750 0.5000 L0.9733 0.5124 L0.9683 0.5245 L0.9604 0.5362 L0.9500 0.5473 L0.9379 0.5576 L0.9247 0.5673 L0.9113 0.5762 L0.8986 0.5847 L0.8872 0.5930 L0.8777 0.6012 L0.8706 0.6098 L0.8662 0.6190 L0.8644 0.6290 L0.8651 0.6401 L0.8679 0.6524 L0.8723 0.6657 L0.8776 0.6801 L0.8831 0.6952 L0.8881 0.7107 L0.8919 0.7262 L0.8938 0.7413 L0.8933 0.7554 L0.8902 0.7682 L0.8843 0.7792 L0.8756 0.7882 L0.8645 0.7951 L0.8512 0.7999 L0.8363 0.8028 L0.8204 0.8040 L0.8041 0.8041 L0.7880 0.8035 L0.7727 0.8028 L0.7586 0.8028 L0.7461 0.8039 L0.7353 0.8067 L0.7263 0.8115 L0.7189 0.8186 L0.7130 0.8279 L0.7080 0.8395 L0.7037 0.8529 L0.6996 0.8677 L0.6952 0.8831 L0.6901 0.8986 L0.6840 0.9134 L0.6767 0.9267 L0.6681 0.9378 L0.6580 0.9463 L0.6468 0.9518 L0.6345 0.9540 L0.6214 0.9530 L0.6078 0.9491 L0.5941 0.9426 L0.5805 0.9343 L0.5673 0.9247 L0.5546 0.9148 L0.5426 0.9053 L0.5312 0.8970 L0.5205 0.8905 L0.5101 0.8864 L0.5000 0.8850 L0.4899 0.8864 L0.4795 0.8905 L0.4688 0.8970 L0.4574 0.9053 L0.4454 0.9148 L0.4327 0.9247 L0.4195 0.9343 L0.4059 0.9426 L0.3922 0.9491 L0.3786 0.9530 L0.3655 0.9540 L0.3532 0.9518 L0.3420 0.9463 L0.3319 0.9378 L0.3233 0.9267 L0.3160 0.9134 L0.3099 0.8986 L0.3048 0.8831 L0.3004 0.8677 L0.2963 0.8529 L0.2920 0.8395 L0.2870 0.8279 L0.2811 0.8186 L0.2737 0.8115 L0.2647 0.8067 L0.2539 0.8039 L0.2414 0.8028 L0.2273 0.8028 L0.2120 0.8035 L0.1959 0.8041 L0.1796 0.8040 L0.1637 0.8028 L0.1488 0.7999 L0.1355 0.7951 L0.1244 0.7882 L0.1157 0.7792 L0.1098 0.7682 L0.1067 0.7554 L0.1062 0.7413 L0.1081 0.7262 L0.1119 0.7107 L0.1169 0.6952 L0.1224 0.6801 L0.1277 0.6657 L0.1321 0.6524 L0.1349 0.6401 L0.1356 0.6290 L0.1338 0.6190 L0.1294 0.6098 L0.1223 0.6012 L0.1128 0.5930 L0.1014 0.5847 L0.0887 0.5762 L0.0753 0.5673 L0.0621 0.5576 L0.0500 0.5473 L0.0396 0.5362 L0.0317 0.5245 L0.0267 0.5124 L0.0250 0.5000 L0.0267 0.4876 L0.0317 0.4755 L0.0396 0.4638 L0.0500 0.4527 L0.0621 0.4424 L0.0753 0.4327 L0.0887 0.4238 L0.1014 0.4153 L0.1128 0.4070 L0.1223 0.3988 L0.1294 0.3902 L0.1338 0.3810 L0.1356 0.3710 L0.1349 0.3599 L0.1321 0.3476 L0.1277 0.3343 L0.1224 0.3199 L0.1169 0.3048 L0.1119 0.2893 L0.1081 0.2738 L0.1062 0.2587 L0.1067 0.2446 L0.1098 0.2318 L0.1157 0.2208 L0.1244 0.2118 L0.1355 0.2049 L0.1488 0.2001 L0.1637 0.1972 L0.1796 0.1960 L0.1959 0.1959 L0.2120 0.1965 L0.2273 0.1972 L0.2414 0.1972 L0.2539 0.1961 L0.2647 0.1933 L0.2737 0.1885 L0.2811 0.1814 L0.2870 0.1721 L0.2920 0.1605 L0.2962 0.1471 L0.3004 0.1323 L0.3048 0.1169 L0.3099 0.1014 L0.3160 0.0866 L0.3233 0.0733 L0.3319 0.0622 L0.3420 0.0537 L0.3532 0.0482 L0.3655 0.0460 L0.3786 0.0470 L0.3922 0.0509 L0.4059 0.0574 L0.4195 0.0657 L0.4327 0.0753 L0.4454 0.0852 L0.4574 0.0947 L0.4688 0.1030 L0.4795 0.1095 L0.4899 0.1136 L0.5000 0.1150 L0.5101 0.1136 L0.5205 0.1095 L0.5312 0.1030 L0.5426 0.0947 L0.5546 0.0852 L0.5673 0.0753 L0.5805 0.0657 L0.5941 0.0574 L0.6078 0.0509 L0.6214 0.0470 L0.6345 0.0460 L0.6468 0.0482 L0.6580 0.0537 L0.6681 0.0622 L0.6767 0.0733 L0.6840 0.0866 L0.6901 0.1014 L0.6952 0.1169 L0.6996 0.1323 L0.7037 0.1471 L0.7080 0.1605 L0.7130 0.1721 L0.7189 0.1814 L0.7263 0.1885 L0.7353 0.1933 L0.7461 0.1961 L0.7586 0.1972 L0.7727 0.1972 L0.7880 0.1965 L0.8041 0.1959 L0.8204 0.1960 L0.8363 0.1972 L0.8512 0.2001 L0.8645 0.2049 L0.8756 0.2118 L0.8843 0.2208 L0.8902 0.2318 L0.8933 0.2446 L0.8938 0.2587 L0.8919 0.2738 L0.8881 0.2893 L0.8831 0.3048 L0.8776 0.3199 L0.8723 0.3343 L0.8679 0.3476 L0.8651 0.3599 L0.8644 0.3710 L0.8662 0.3810 L0.8706 0.3902 L0.8777 0.3988 L0.8872 0.4070 L0.8986 0.4153 L0.9113 0.4238 L0.9247 0.4327 L0.9379 0.4424 L0.9500 0.4527 L0.9604 0.4638 L0.9683 0.4755 L0.9733 0.4876Z'/%3E%3C/svg%3E"); --flower-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath fill='%23e6c98f' d='M0.9750 0.5000 L0.9733 0.5124 L0.9683 0.5245 L0.9604 0.5362 L0.9500 0.5473 L0.9379 0.5576 L0.9247 0.5673 L0.9113 0.5762 L0.8986 0.5847 L0.8872 0.5930 L0.8777 0.6012 L0.8706 0.6098 L0.8662 0.6190 L0.8644 0.6290 L0.8651 0.6401 L0.8679 0.6524 L0.8723 0.6657 L0.8776 0.6801 L0.8831 0.6952 L0.8881 0.7107 L0.8919 0.7262 L0.8938 0.7413 L0.8933 0.7554 L0.8902 0.7682 L0.8843 0.7792 L0.8756 0.7882 L0.8645 0.7951 L0.8512 0.7999 L0.8363 0.8028 L0.8204 0.8040 L0.8041 0.8041 L0.7880 0.8035 L0.7727 0.8028 L0.7586 0.8028 L0.7461 0.8039 L0.7353 0.8067 L0.7263 0.8115 L0.7189 0.8186 L0.7130 0.8279 L0.7080 0.8395 L0.7037 0.8529 L0.6996 0.8677 L0.6952 0.8831 L0.6901 0.8986 L0.6840 0.9134 L0.6767 0.9267 L0.6681 0.9378 L0.6580 0.9463 L0.6468 0.9518 L0.6345 0.9540 L0.6214 0.9530 L0.6078 0.9491 L0.5941 0.9426 L0.5805 0.9343 L0.5673 0.9247 L0.5546 0.9148 L0.5426 0.9053 L0.5312 0.8970 L0.5205 0.8905 L0.5101 0.8864 L0.5000 0.8850 L0.4899 0.8864 L0.4795 0.8905 L0.4688 0.8970 L0.4574 0.9053 L0.4454 0.9148 L0.4327 0.9247 L0.4195 0.9343 L0.4059 0.9426 L0.3922 0.9491 L0.3786 0.9530 L0.3655 0.9540 L0.3532 0.9518 L0.3420 0.9463 L0.3319 0.9378 L0.3233 0.9267 L0.3160 0.9134 L0.3099 0.8986 L0.3048 0.8831 L0.3004 0.8677 L0.2963 0.8529 L0.2920 0.8395 L0.2870 0.8279 L0.2811 0.8186 L0.2737 0.8115 L0.2647 0.8067 L0.2539 0.8039 L0.2414 0.8028 L0.2273 0.8028 L0.2120 0.8035 L0.1959 0.8041 L0.1796 0.8040 L0.1637 0.8028 L0.1488 0.7999 L0.1355 0.7951 L0.1244 0.7882 L0.1157 0.7792 L0.1098 0.7682 L0.1067 0.7554 L0.1062 0.7413 L0.1081 0.7262 L0.1119 0.7107 L0.1169 0.6952 L0.1224 0.6801 L0.1277 0.6657 L0.1321 0.6524 L0.1349 0.6401 L0.1356 0.6290 L0.1338 0.6190 L0.1294 0.6098 L0.1223 0.6012 L0.1128 0.5930 L0.1014 0.5847 L0.0887 0.5762 L0.0753 0.5673 L0.0621 0.5576 L0.0500 0.5473 L0.0396 0.5362 L0.0317 0.5245 L0.0267 0.5124 L0.0250 0.5000 L0.0267 0.4876 L0.0317 0.4755 L0.0396 0.4638 L0.0500 0.4527 L0.0621 0.4424 L0.0753 0.4327 L0.0887 0.4238 L0.1014 0.4153 L0.1128 0.4070 L0.1223 0.3988 L0.1294 0.3902 L0.1338 0.3810 L0.1356 0.3710 L0.1349 0.3599 L0.1321 0.3476 L0.1277 0.3343 L0.1224 0.3199 L0.1169 0.3048 L0.1119 0.2893 L0.1081 0.2738 L0.1062 0.2587 L0.1067 0.2446 L0.1098 0.2318 L0.1157 0.2208 L0.1244 0.2118 L0.1355 0.2049 L0.1488 0.2001 L0.1637 0.1972 L0.1796 0.1960 L0.1959 0.1959 L0.2120 0.1965 L0.2273 0.1972 L0.2414 0.1972 L0.2539 0.1961 L0.2647 0.1933 L0.2737 0.1885 L0.2811 0.1814 L0.2870 0.1721 L0.2920 0.1605 L0.2962 0.1471 L0.3004 0.1323 L0.3048 0.1169 L0.3099 0.1014 L0.3160 0.0866 L0.3233 0.0733 L0.3319 0.0622 L0.3420 0.0537 L0.3532 0.0482 L0.3655 0.0460 L0.3786 0.0470 L0.3922 0.0509 L0.4059 0.0574 L0.4195 0.0657 L0.4327 0.0753 L0.4454 0.0852 L0.4574 0.0947 L0.4688 0.1030 L0.4795 0.1095 L0.4899 0.1136 L0.5000 0.1150 L0.5101 0.1136 L0.5205 0.1095 L0.5312 0.1030 L0.5426 0.0947 L0.5546 0.0852 L0.5673 0.0753 L0.5805 0.0657 L0.5941 0.0574 L0.6078 0.0509 L0.6214 0.0470 L0.6345 0.0460 L0.6468 0.0482 L0.6580 0.0537 L0.6681 0.0622 L0.6767 0.0733 L0.6840 0.0866 L0.6901 0.1014 L0.6952 0.1169 L0.6996 0.1323 L0.7037 0.1471 L0.7080 0.1605 L0.7130 0.1721 L0.7189 0.1814 L0.7263 0.1885 L0.7353 0.1933 L0.7461 0.1961 L0.7586 0.1972 L0.7727 0.1972 L0.7880 0.1965 L0.8041 0.1959 L0.8204 0.1960 L0.8363 0.1972 L0.8512 0.2001 L0.8645 0.2049 L0.8756 0.2118 L0.8843 0.2208 L0.8902 0.2318 L0.8933 0.2446 L0.8938 0.2587 L0.8919 0.2738 L0.8881 0.2893 L0.8831 0.3048 L0.8776 0.3199 L0.8723 0.3343 L0.8679 0.3476 L0.8651 0.3599 L0.8644 0.3710 L0.8662 0.3810 L0.8706 0.3902 L0.8777 0.3988 L0.8872 0.4070 L0.8986 0.4153 L0.9113 0.4238 L0.9247 0.4327 L0.9379 0.4424 L0.9500 0.4527 L0.9604 0.4638 L0.9683 0.4755 L0.9733 0.4876Z'/%3E%3C/svg%3E"); }
.flower { display: block; width: 100%; height: 100%; fill: currentColor; }
/* hero collage: organic blob, scalloped "flower" photo and a petal, floating on a slowly turning bloom */
.collage { aspect-ratio: 1 / 1.04; }
.bloom-bg { position: absolute; z-index: 0; inset-inline-start: 6%; top: -2%; width: 90%; aspect-ratio: 1; color: #fbd5e0; opacity: 0.9; animation: spin 90s linear infinite; }
.shape { position: absolute; overflow: visible; background: none; border: 0; box-shadow: none; filter: drop-shadow(0 22px 30px rgba(176, 81, 111, 0.3)); transition: translate 0.4s ease-out; z-index: 1; }
.shape .m { position: absolute; inset: 0; overflow: hidden; background: var(--blush); }
.shape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.3s ease, transform 6s ease-out; }
.shape img.on { opacity: 1; transform: scale(1); }
.shape.main { inset-inline-start: 22%; top: 4%; width: 62%; height: 80%; border-radius: 0; translate: calc(var(--mx) * 10px) calc(var(--my) * 8px); }
.shape.main .m { clip-path: url(#cpBlob); border-radius: 0; }
.shape.fpic { inset-inline-start: 0; bottom: 5%; width: 40%; height: auto; aspect-ratio: 1; border-radius: 0; translate: calc(var(--mx) * -18px) calc(var(--my) * -12px); rotate: 0deg; }
.shape.fpic .m { clip-path: url(#cpFlower); border-radius: 0; }
.shape.petal { inset-inline-end: 0; bottom: 15%; width: 36%; height: auto; aspect-ratio: 1; rotate: 0deg; translate: calc(var(--mx) * 24px) calc(var(--my) * 14px); }
.shape.petal .m { border-radius: 0 64% 0 64%; }
[dir='rtl'] .shape.petal .m { border-radius: 64% 0 64% 0; }
.collage.nophoto .shape.fpic, .collage.nophoto .shape.petal { display: none; }
.collage.nophoto .shape.main { inset-inline-start: 8%; width: 84%; height: 100%; filter: none; }
.collage.nophoto .shape.main .m { clip-path: none; background: transparent; }
.stamp { z-index: 4; }
.float { z-index: 5; }
.sprk { position: absolute; z-index: 3; width: 22px; height: 22px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 3.2s ease-in-out infinite; }
.sprk.s1 { inset-inline-end: 8%; top: 30%; }
.sprk.s2 { inset-inline-start: 38%; top: -1%; width: 16px; height: 16px; animation-delay: -1.2s; background: var(--rose-2); }
.sprk.s3 { inset-inline-end: 34%; bottom: 2%; width: 18px; height: 18px; animation-delay: -2.1s; }
@keyframes twinkle { 50% { transform: scale(0.45) rotate(45deg); opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .bloom-bg, .sprk, .portrait .flower, .bridal-pic .flower { animation: none; } }

/* team: round portrait on a scalloped flower, tinted to each specialist */
.member { border-radius: 40px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 11%, #fff), #fff 58%); }
.portrait { aspect-ratio: 1; border-radius: 0; overflow: visible; background: none; width: 92%; margin: 4px auto 2px; display: block; color: color-mix(in srgb, var(--c) 30%, #fff); }
.portrait::after { display: none; }
.portrait .flower { position: absolute; inset: 0; animation: spin 70s linear infinite; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--c) 35%, transparent)); }
.portrait .ph { position: absolute; inset: 10%; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 60%, #fff)); border: 5px solid #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(59, 29, 46, 0.18); }
.portrait .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.portrait .ph b { margin: 0; font: 400 84px/1 var(--display); font-style: italic; color: #fff; }
.member:hover .portrait .ph img { transform: scale(1.06); }
.portrait .state { inset-block-end: 2%; z-index: 2; }

/* treatments: soft rounded tile with a faint bloom, no arch */
.svc-art { border-radius: 28px; aspect-ratio: 1 / 0.82; background: var(--tint); }
.svc-art::before { inset: auto; inset-block-start: -22%; inset-inline-end: -14%; width: 62%; height: auto; aspect-ratio: 1; border-radius: 0; background: var(--flower-white); background-size: contain; opacity: 0.55; animation: spin 80s linear infinite; }
.svc-art .art { width: 56%; }
.svc-photo { border-radius: 0; }

/* ritual result + bridal + mosaic */
.r-art .art { border-radius: 30px; }
.r-art img { aspect-ratio: 1 / 1.05; border-radius: 34px; }
.bridal-pic { width: min(300px, 74%); aspect-ratio: 1 / 1.12; position: relative; }
.bridal-pic .flower { position: absolute; inset: -8% -10% auto -10%; width: 120%; height: auto; aspect-ratio: 1; color: rgba(231, 155, 176, 0.3); animation: spin 90s linear infinite; }
.bridal-pic .shape { position: absolute; inset: 4% 6%; border: 0; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.4)); border-radius: 0; }
.bridal-pic .shape .m { clip-path: url(#cpBlob2); }
.mosaic figure { border-radius: 36px; }
.mosaic figure:nth-child(1) { border-radius: 36px 130px 36px 130px; }
.mosaic figure:nth-child(3) { border-radius: 130px 36px 130px 36px; }
.mosaic figure:nth-child(4) { border-radius: 36px; }
.mosaic figure:nth-child(6) { border-radius: 36px 130px 36px 130px; }
/* faint blooms drifting in the section corners */
.sec { overflow-x: clip; }
.sec > .wrap { position: relative; z-index: 1; }
.sec:not(.plum)::after { content: ''; position: absolute; z-index: 0; width: clamp(220px, 30vw, 420px); aspect-ratio: 1; inset-block-start: 40px; inset-inline-end: -110px; background: var(--flower-pink); background-size: contain; opacity: 0.22; animation: spin 140s linear infinite; pointer-events: none; }
#team::after, #shop::after, #visit::after { inset-inline-end: auto; inset-inline-start: -130px; inset-block-start: auto; inset-block-end: 40px; }
.hero h1 + .lead { position: relative; }

/* white keyline around every photo shape so they sit apart, like cut-out stickers */
.shape::before { content: ''; position: absolute; inset: -2.6%; background: #fff; z-index: 0; }
.shape .m { z-index: 1; }
.shape.main::before { clip-path: url(#cpBlob); }
.shape.fpic::before { clip-path: url(#cpFlower); inset: -3%; }
.shape.petal::before { border-radius: 0 64% 0 64%; inset: -3.5%; }
[dir='rtl'] .shape.petal::before { border-radius: 64% 0 64% 0; }
.collage.nophoto .shape::before { display: none; }
.shape.main { inset-inline-start: 24%; top: 5%; width: 58%; height: 78%; }
.shape.petal { width: 33%; bottom: 14%; }
.shape.fpic { width: 38%; bottom: 4%; }
.bridal-pic .shape::before { display: none; }
.portrait { color: color-mix(in srgb, var(--c) 40%, #fff); }
.portrait .ph { inset: 15%; }
.portrait .ph b { font-size: 72px; }
@media (min-width: 900px) { .bridal-pic { width: 300px; } }
@media (min-width: 900px) { .bridal-pic { width: 340px; } }
.bridal-pic .shape { inset: 0 2%; }
.svc-photo { object-position: 50% 24%; }

/* ═══ Declutter pass: fewer sections, one rhythm, no decoration that competes with the content ═══ */
.sec::before, .sec:not(.plum)::after { display: none !important; }              /* wave dividers and floating blobs */
.sec { padding: clamp(52px, 7vw, 96px) 0; }
.svc:nth-child(even) { margin-top: 0 !important; }                              /* straight grid, no staggered cards */
/* one accent for every treatment card (the category colour stays on the filter bubbles) */
.svc .btn.rose, .svc[class*='c-'] .btn.rose { background: linear-gradient(135deg, #c25a7b, var(--rose)) !important; }
.svc .meta b, .svc[class*='c-'] .meta b { color: var(--plum) !important; }
.svc .meta small { color: var(--muted); }

/* "Find your ritual" lives under the treatments instead of being a section of its own */
.ritual { margin-top: 34px; border: 1.5px dashed rgba(59, 29, 46, 0.22); border-radius: 28px; background: rgba(255, 255, 255, 0.6); }
.ritual > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 22px; font-weight: 800; color: var(--plum); }
.ritual > summary::-webkit-details-marker { display: none; }
.ritual > summary .ic { width: 20px; height: 20px; color: var(--rose); }
.ritual > summary .chev { margin-inline-start: auto; transition: transform 0.25s; }
.ritual[open] > summary .chev { transform: rotate(180deg); }
.ritual[open] { border-style: solid; background: #fff; }
.ritual .finder { padding: 8px 22px 26px; }

/* Glow Club and the shelf share one section behind two tabs */
.tabs2 { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 30px; border-radius: 999px; background: rgba(59, 29, 46, 0.07); }
.tab2 { min-height: 44px; padding: 0 26px; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--plum); transition: background 0.2s, color 0.2s; }
.tab2.on { background: var(--plum); color: #fff; box-shadow: 0 8px 18px rgba(59, 29, 46, 0.2); }
.pane[hidden] { display: none !important; }

/* "A day at LALLA": one calm row of photos instead of a collage section */
.moments { padding: clamp(36px, 5vw, 64px) 0; }
.moments .sec-head { display: none; }
.mosaic { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none; }
.mosaic::-webkit-scrollbar { display: none; }
.mosaic figure, .mosaic figure:nth-child(n) { flex: 0 0 clamp(150px, 22vw, 230px); height: clamp(190px, 26vw, 280px); grid-row: auto; border-radius: 26px; scroll-snap-align: start; }
@media (min-width: 1100px) { .mosaic { overflow: visible; } .mosaic figure, .mosaic figure:nth-child(n) { flex: 1 1 0; } }


/* reviews: a calm grid instead of a moving strip */
.rev-marquee { overflow: visible; -webkit-mask: none; mask: none; }
.rev-marquee .track { animation: none !important; display: grid; width: auto; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.rev-marquee .rev { transform: none !important; flex: none; width: auto; }
.rev, .rev:nth-child(n) { rotate: 0deg; background: #fff; }
.rev:nth-child(3n+1) { background: var(--pink); }
.rev:nth-child(3n) { background: #fff; }

.rev-marquee { margin-inline: 0; padding: 4px 0 0; }
.rev-marquee .track { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); padding-inline: 0; }
@media (min-width: 1100px) { #chipOpen { display: none; } } /* the open/closed state is already in the header */

/* ═══ The treatment menu — a refined "carte des soins": categories on the left, a quiet price list on the right ═══ */
.menu { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.menu-side { min-width: 0; }
.menu-cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.menu-cats::-webkit-scrollbar { display: none; }
.mcat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(59, 29, 46, 0.18); background: transparent; color: var(--plum); font-weight: 700; font-size: 14.5px; scroll-snap-align: start; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.mcat small { font: 600 11px var(--mono); opacity: 0.55; }
.mcat.on { background: var(--plum); border-color: var(--plum); color: #fff; }
.mcat:hover:not(.on) { border-color: var(--plum); }
.menu-cover { position: relative; display: none; margin: 18px 0 0; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 7; background: var(--blush); }
.menu-cover img { width: 100%; height: 100%; object-fit: cover; }
.menu-cover::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 20px; pointer-events: none; }
.menu-cover figcaption { position: absolute; inset-inline-start: 22px; inset-block-end: 16px; z-index: 1; color: #fff; font: italic 500 22px/1 var(--display); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
.menu-cover:not([hidden]) { display: block; }
.menu-main { min-width: 0; }
.menu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(59, 29, 46, 0.28); }
.menu-head h3 { font: 500 clamp(28px, 3.4vw, 40px)/1.05 var(--display); color: var(--plum); }
.menu-search { width: min(100%, 260px); min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(59, 29, 46, 0.2); background: rgba(255, 255, 255, 0.7); font-size: 15px; }
.menu-search:focus { outline: 0; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(176, 81, 111, 0.15); }
.mrow { display: grid; gap: 4px 20px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 22px 4px; border-bottom: 1px solid rgba(59, 29, 46, 0.12); }
.mrow-main { grid-column: 1 / -1; min-width: 0; }
.mrow-main h4 { font: 500 clamp(20px, 2.2vw, 24px)/1.2 var(--display); color: var(--plum); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mrow-main .hot { font: 700 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 3px 9px; }
.mrow-main p { margin-top: 6px; max-width: 62ch; color: var(--muted); font-size: 14.5px; }
.mrow-side { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
.mrow-side b { font: 500 24px/1 var(--display); color: var(--plum); font-variant-numeric: lining-nums; }
.mrow-side small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.mrow-book { margin-top: 8px; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--plum); color: var(--plum); font-weight: 800; font-size: 14px; transition: background 0.2s, color 0.2s; }
.mrow-book .ic { width: 16px; height: 16px; }
.mrow-book:hover { background: var(--plum); color: #fff; }
.menu-empty { padding: 36px 4px; color: var(--muted); }
[dir='rtl'] .mrow-main h4 { font-family: 'Noto Kufi Arabic', var(--display); font-size: 18px; }
@media (min-width: 760px) {
  .mrow { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 36px; padding: 26px 8px; }
  .mrow-main { grid-column: 1; }
  .mrow-side, .mrow-book { margin-top: 0; }
  .mrow-side { justify-content: flex-end; min-width: 150px; }
  .mrow:hover { background: rgba(255, 255, 255, 0.6); }
}
@media (min-width: 1000px) {
  .menu { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: start; }
  .menu-side { position: sticky; top: 110px; }
  .menu-cats { flex-direction: column; overflow: visible; gap: 0; padding: 0; border-top: 1px solid rgba(59, 29, 46, 0.28); }
  .mcat { justify-content: space-between; min-height: 58px; padding: 0 6px; border: 0; border-bottom: 1px solid rgba(59, 29, 46, 0.12); border-radius: 0; font: 500 22px var(--display); }
  [dir='rtl'] .mcat { font-family: 'Noto Kufi Arabic', var(--display); font-size: 17px; }
  .mcat small { font-size: 12px; }
  .mcat.on { background: transparent; color: var(--rose); padding-inline-start: 16px; box-shadow: inset 3px 0 0 var(--gold); }
  [dir='rtl'] .mcat.on { box-shadow: inset -3px 0 0 var(--gold); }
  .menu-cover { aspect-ratio: 4 / 5; margin-top: 26px; }
}

/* ═══ Containment: nothing may hang outside the card or frame it belongs to ═══ */
.pack.best, .plan.best { padding-top: 52px; }
.pack .badge, .plan .badge { inset-block-start: 14px; }
.bridal-pic .chip { inset-inline-start: 12px; inset-inline-end: auto; bottom: 14px; max-width: calc(100% - 24px); }
.shape, .shape.main, .shape.fpic, .shape.petal { translate: none !important; } /* no parallax: each frame stays inside the collage */
.gift-box { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.gift-box > *, .gift-box .form > * { min-width: 0; }
.gcard { width: 100%; max-width: min(350px, 100%); }
/* header: between 900 and 1180px there is room for the links or for the CTA, not both */
@media (min-width: 900px) and (max-width: 1179px) { .nav-end .hide-s { display: none; } .links a { padding: 9px 10px; } .nav { gap: 10px; } }
/* result card and shop cards: grid items may shrink instead of pushing their neighbours out */
.finder, .result { min-width: 0; }
.finder > * { min-width: 0; }
@media (min-width: 900px) { .finder { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .result { grid-template-columns: 220px minmax(0, 1fr); } }
.r-art, .r-body { min-width: 0; }
.prod > * { min-width: 0; }
.prod footer { flex-wrap: wrap; row-gap: 8px; }
.prod footer .btn { flex: 1 1 auto; min-width: 0; }
.prod h3, .prod p, .r-body h3, .r-body p, .r-body li { overflow-wrap: anywhere; }
.btn { max-width: 100%; }
.r-body .btn { white-space: normal; text-align: center; }
@media (min-width: 900px) and (max-width: 1100px) { .quick .btn { padding-inline: 16px; } }
.portrait .state { max-width: calc(100% - 20px); white-space: normal; text-align: center; line-height: 1.15; justify-content: center; }
.quick .btn { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
.dotn { top: 2px; inset-inline-end: 2px; }