/* Демо за козметика: посоката „Докоснете кожата“.
   Сайтът показва какво прави студиото: големи меки снимки (лице, ръце, студиото) с точки за докосване.
   Всяка точка отваря процедурата за тази зона (.bloom): на десктоп до текста, на телефон отдолу като лист.
   Цветовете и шрифтовете идват от settings.py като CSS променливи (--bg, --lilac, --blush, --ink, --accent, --display, --text ...).
   Без JS всички описания се виждат под снимките, точките не се показват. */

/* ------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + var(--bar-gap) * 2); }
:root { --bar-gap: 10px; --head: 56px; --r: 8px; --soft: 26px; --pad: clamp(18px, 4.5vw, 64px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 300 17px/1.6 var(--text), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }   /* the colour clouds and the zoomed photo must not widen the page */
img { display: block; max-width: 100%; }
a { color: inherit; }
/* Typography (build skill, 2026-10-04; Emanuil chose variant 3 for the beauty demos): names and headings in an elegant serif
   (--display, Playfair Display), everything else in one sans (--text, Onest): light text, medium numbers and buttons.
   The beauty trade is the reason for the second family. Each level differs from its neighbour in family, size or colour. */
h1, h2, h3, h4 { font-family: var(--display), Georgia, serif; font-weight: 400; line-height: 1.1; letter-spacing: 0; margin: 0; }
h1 { font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: clamp(34px, 3.8vw, 54px); }
h3 { font-size: 26px; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r); }
.skip:focus { left: 8px; }
.lead { color: var(--muted); font-size: 18px; max-width: 30em; margin-top: 18px; }

/* ------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px;
  border-radius: 999px; background: var(--accent); color: #fff; font-weight: 500; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: background .25s, transform .25s;
}
.btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 12px; }
.btn-light { background: #FBF8F3; color: var(--ink); box-shadow: none; }
.btn-light:hover { background: #fff; }
.btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.btn-line:hover { background: rgba(255, 255, 255, .12); }
.btn-soft { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 32, 38, .14); }
.btn-soft:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(42, 32, 38, .3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.phone-link, .text-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(42, 32, 38, .22); padding-bottom: 2px; }
.phone-link:hover, .text-link:hover { border-color: var(--ink); }

/* ------------------------------------------------ header: one rounded bar, inset from the edges, sticky (Starlink layout) */
.site-head {
  position: sticky; top: var(--bar-gap); z-index: 30; height: var(--head); margin: var(--bar-gap) var(--bar-gap) 0;
  border-radius: 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.head-in { height: 100%; display: flex; align-items: center; gap: 28px; padding: 0 10px 0 20px; }
.logo { font-family: var(--display), Georgia, serif; font-weight: 500; font-size: 22px; text-decoration: none; margin-right: auto; }
.nav { display: flex; gap: 28px; font-size: 15px; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--accent); }
.menu-btn { display: none; }
@media (max-width: 899px) {
  .head-in { gap: 10px; }
  .menu-btn { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--ink); }
  .menu-btn span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s; }
  .menu-open .menu-btn span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-open .menu-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); padding: 6px 20px 14px; font-size: 18px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -28px rgba(42, 32, 38, .4); }
  .nav a { padding: 12px 0; font-weight: 500; }
  .menu-open .nav { display: flex; }
}

/* ------------------------------------------------ bar over the video: no bar at all (just name and menu), the cream bar appears once the video is passed */
.home .site-head { position: fixed; left: 0; right: 0; top: var(--bar-gap); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff;
  transition: background .35s, color .35s, box-shadow .35s; }
.home .site-head .menu-btn { color: inherit; }
.home .site-head.solid { background: color-mix(in srgb, var(--bg) 94%, transparent); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -22px rgba(42, 32, 38, .35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.home .hero { min-height: 100svh; min-height: calc(100lvh + env(safe-area-inset-top, 0px)); }
/* lvh reaches behind the phone browser's bars; + the top safe area, because iPhone Safari lays its status band over the page.
   On phones the new iPhone Safari ends lvh above its floating bottom bar, so the video gets that bar's height on top (--under-bar). */
@media (max-width: 767px) and (pointer: coarse) {
  .home .hero { --under-bar: 84px; min-height: calc(100lvh + var(--under-bar)); }
}
/* on iPhone Safari tints the status bar and the area behind its bottom bar from the page background: dark like the video and the footer */
html:has(body.home), body.home { background: var(--deep); }
.home main { background: var(--bg); }
.home .site-head { margin: 0 var(--bar-gap); }
@media (max-width: 899px) { .home .site-head .nav { color: var(--ink); } }

/* ------------------------------------------------ first screen: video across the whole screen */
.hero { position: relative; display: flex; align-items: flex-end; min-height: calc(100svh - var(--head)); overflow: hidden; background: #2a2026; color: #fff; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 18, .35) 0%, rgba(20, 14, 18, .5) 40%, rgba(20, 14, 18, .84) 100%); }
.hero-text { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad) clamp(48px, 10vh, 120px); }
.hero-kind { margin-top: 16px; color: #fff; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; }
.hero h1, .hero .lead, .hero-kind { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero h1 { font-size: clamp(56px, 9vw, 150px); line-height: .9; max-width: 9em; }
.hero .lead { color: rgba(255, 255, 255, .82); font-weight: 300; font-size: clamp(17px, 1.6vw, 21px); margin-top: 4px; max-width: 26em; }
.hero .actions { margin-top: 34px; }
.hero .stock-tag { left: auto; right: 14px; top: auto; bottom: 14px; z-index: 3; background: rgba(255, 255, 255, .18); color: #fff; }

/* ------------------------------------------------ sections (as in the reference: cream and beige, large rounded photos) */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: clamp(64px, 9vw, 128px) 0; }
.sec-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .lead { margin-top: 16px; }

/* photo slider with the procedure's name over it */
.slider { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 24px; list-style: none; margin: 0; padding: 0; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 7.5; }
.slide-ph { position: absolute; inset: 0; margin: 0; }
.slide-ph img { width: 100%; height: 100%; object-fit: cover; }
.slide-ph::after { content: ""; position: absolute; inset: 0; background: rgba(30, 22, 18, .38); }
.slide-title {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0 24px; text-align: center; text-decoration: none;
  color: #fff; font: 500 clamp(34px, 5.4vw, 76px)/1.05 var(--display), Georgia, serif; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}
.slide .stock-tag { left: auto; right: 14px; top: auto; bottom: 14px; z-index: 3; }
.dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: 0; }
/* the dot is drawn small, but the button around it is a 44 px finger target */
.dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .55);
  transform: translate(-50%, -50%); transition: width .3s, background .3s; }
.dot.on::before { width: 26px; background: #fff; }

/* procedures: rows of photo and text, then small cards */
.services { background: var(--blush); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-bottom: clamp(56px, 8vw, 112px); }
.row-flip .row-media { order: 2; }
.row h3 { font: 400 clamp(34px, 3.6vw, 54px)/1.08 var(--display), Georgia, serif; }
.row-line { margin-top: 10px; color: var(--muted); font-size: 17px; font-weight: 300; }
.row-ph { aspect-ratio: 4 / 4.2; margin: 0; overflow: hidden; border-radius: 24px; }
.row-ph img { width: 100%; height: 100%; object-fit: cover; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.card { padding: 26px 26px 28px; border-radius: 16px; background: var(--card); transition: transform .3s, box-shadow .3s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(59, 47, 41, .45); }
.card h4 { margin: 0; font: 400 21px/1.25 var(--display), Georgia, serif; }
.card p { margin-top: 6px; color: var(--muted); font-size: 15px; font-weight: 300; }

/* the studio: a row of photos */
.studio h2 { font-size: clamp(32px, 3.8vw, 54px); }
.big-line { margin-top: 10px; font-size: clamp(21px, 2vw, 27px); font-weight: 500; line-height: 1.3; }
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.g-ph { aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: 18px; }
.g-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.g-ph:hover img { transform: scale(1.04); }
.has-cap { position: relative; }
.ph-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; font: 500 18px/1.25 var(--display), Georgia, serif; text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.ph-cap small { display: block; margin-top: 4px; font: 500 11px/1.3 var(--text), sans-serif; letter-spacing: .16em; text-transform: uppercase; }



/* the photo with its touch points */
.touch { position: relative; z-index: 1; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.touch img {
  width: 100%; height: auto; object-fit: cover; border-radius: 24px;
}
.touch.zoom { transform: scale(1.1); }
.touch .stock-tag { left: auto; right: 16px; bottom: 16px; top: auto; }
.stock-tag {
  position: absolute; z-index: 3; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); color: var(--ink); font-size: 12px; line-height: 1.4;
}

.spot {
  position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: none; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.js .spot { display: grid; }
/* a soft light over the zone when it is chosen */
.spot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 246, .5), rgba(255, 250, 246, 0)); opacity: 0; transform: scale(.6);
  transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
.spot.hl::before, .spot[aria-expanded="true"]::before { opacity: 1; transform: none; }
.spot-dot {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 252, 249, .94); color: var(--accent); font: 600 14px/1 var(--text), sans-serif;
  box-shadow: 0 6px 18px -6px rgba(42, 32, 38, .5); transition: background .3s, color .3s, transform .3s;
}
.spot-dot::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9);
  animation: breathe 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .45s);
}
@keyframes breathe { 0% { transform: scale(.7); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.spot-label {
  position: absolute; left: 44px; top: 50%; white-space: nowrap; pointer-events: none;
  padding: 7px 12px; border-radius: var(--r); background: rgba(255, 252, 249, .94); color: var(--ink);
  font: 400 16px/1.1 var(--display), Georgia, serif; box-shadow: 0 10px 24px -14px rgba(42, 32, 38, .5);
  opacity: 0; transform: translate(-6px, -50%); transition: opacity .3s, transform .3s;
}
.spot.lw .spot-label { left: auto; right: 44px; transform: translate(6px, -50%); }
.spot:hover .spot-label, .spot.hl .spot-label, .spot[aria-expanded="true"] .spot-label, .spot:focus-visible .spot-label { opacity: 1; transform: translate(0, -50%); }
.spot:hover .spot-dot, .spot.hl .spot-dot { transform: scale(1.12); }
.spot[aria-expanded="true"] .spot-dot { background: var(--accent); color: #fff; }
.touch.has-open .spot:not([aria-expanded="true"]) { opacity: .5; }

/* the bar's button appears only once the first screen's button has left the screen */
.head-cta { transition: opacity .3s, transform .3s; }
.head-cta.is-hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* points appear one by one when the scene comes into view */
.js .row .spot { opacity: 0; transform: scale(.6); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i) * .14s + .2s); }
.js .row.seen .spot { opacity: 1; transform: none; }
.js .row.seen .touch.has-open .spot:not([aria-expanded="true"]) { opacity: .55; }

/* ------------------------------------------------ the opened procedure */
.blooms { margin-top: 18px; display: grid; gap: 14px; }
.bloom {
  position: relative; padding: 24px 26px 26px; border-radius: 22px; background: rgba(255, 255, 255, .72);
  box-shadow: 0 24px 50px -30px rgba(42, 32, 38, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bloom h3 { padding-right: 40px; }
.bloom p { margin-top: 10px; color: var(--muted); }
.bloom .actions { margin-top: 20px; }
.bloom-close { display: none; }
.js .bloom[hidden] { display: none; }
.js .bloom { animation: bloom .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes bloom { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.js .bloom-close {
  display: grid; place-items: center; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(42, 32, 38, .06); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.facts { margin: 16px 0 0; }
.facts div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 6px 0; }
.facts dd { font-weight: 500; }
.facts dt { color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; }
.facts dd a { text-decoration-color: rgba(42, 32, 38, .25); text-underline-offset: 3px; }
.label { margin: 12px 0 0; }
.label div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: baseline; padding: 8px 0; }
.label dt { color: var(--muted); font-size: 15px; }
.label dd { margin: 0; font-size: 15px; }
.label .big { font-weight: 500; font-size: 24px; margin-right: 4px; }
.brand-list { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; font-family: var(--display), Georgia, serif; font-size: 20px; }

/* ------------------------------------------------ studio photos that slide */
.strip { grid-column: 1 / -1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 8px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip-ph { flex: 0 0 min(300px, 72vw); aspect-ratio: 4 / 3.4; margin: 0; overflow: hidden; border-radius: 18px; scroll-snap-align: start; }
.strip-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.strip-ph:hover img { transform: scale(1.04); }

/* ------------------------------------------------ contact */
.contact { position: relative; padding: clamp(48px, 7vw, 104px) var(--pad); background: var(--blush); }
.contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); max-width: 1440px; margin: 0 auto; align-items: stretch; }
.big-phone { display: inline-block; margin: 22px 0 0; font-family: var(--text), sans-serif; font-weight: 500; letter-spacing: -.01em; font-size: clamp(38px, 4.2vw, 58px); line-height: 1; color: var(--ink); text-decoration: none; }
.big-phone:hover { color: var(--gold); }
.contact .actions { margin-top: 26px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 36, 32, .35); }
.btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
/* a quiet list: small gold capitals, serif values */
.contact-list { margin: 40px 0 0; display: grid; gap: 22px; }
.contact-list dt { color: var(--muted); font-size: 14px; font-weight: 300; }
.contact-list dd { margin: 2px 0 0; font-size: 20px; font-weight: 500; line-height: 1.35; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-list a:hover { border-color: var(--ink); }
/* booking request form (optional, settings "request_form"): a light card above the contacts */
.request { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); max-width: 1440px; margin: 0 auto clamp(48px, 7vw, 96px);
  padding: clamp(24px, 4vw, 56px); border-radius: 24px; background: var(--card); }
.request h2 { font-size: clamp(34px, 4vw, 52px); }
.request-form { display: grid; gap: 16px; align-content: start; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f { display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.f input, .f select { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  color: var(--ink); font: 400 16px/1.2 var(--text), sans-serif; }   /* 16 px: iPhone does not zoom into the field */
.f select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23776' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; }
.f input:focus, .f select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.request-form .btn { justify-self: start; margin-top: 6px; }
.request-form .btn:disabled { opacity: .6; cursor: wait; transform: none; }
.f-note { color: var(--muted); font-size: 13px; }
.f-status:empty { display: none; }
.f-status { padding: 14px 16px; border-radius: 12px; background: var(--blush); font-weight: 400; }
.f-status a { font-weight: 500; }
.hp { position: absolute; left: -9999px; }
.map { width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: 24px; background: var(--line); filter: grayscale(.85) sepia(.18) contrast(.95); }   /* muted, so the map matches the page */

/* ------------------------------------------------ home below the video, Nikolay Barber order (settings "home_layout": "porem") */
.p-sec { padding: clamp(56px, 8vw, 112px) 0; }
.p-head { margin-bottom: clamp(28px, 4vw, 48px); }
.p-head h2, .p-reviews h2, .p-master h2 { font-size: clamp(38px, 4.4vw, 60px); }
.p-head-center { text-align: center; }
.p-head-center .lead { margin-left: auto; margin-right: auto; }
.p-head-center .text-link { display: inline-block; margin-top: 14px; }
/* ratings: centered title, two big scores */
.p-reviews { text-align: center; padding-bottom: clamp(40px, 6vw, 80px); }
.p-ratings { display: flex; justify-content: center; gap: clamp(16px, 4vw, 48px); margin-top: 32px; }
.p-ratings li { display: grid; justify-items: center; gap: 4px; min-width: 200px; padding: 28px 32px; border-radius: 20px; background: var(--card); }
.p-score { font: 500 clamp(52px, 6vw, 76px)/1 var(--text), sans-serif; letter-spacing: -.02em; }
.p-stars { color: var(--gold); letter-spacing: .18em; font-size: 18px; }
.p-src { font-size: 17px; font-weight: 500; }
.p-count { color: var(--muted); font-size: 15px; }
/* procedures: photo cards with the starting price, a slider on phones */
.p-services { background: var(--blush); }
.p-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.p-card { position: relative; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 3 / 4; color: #fff; text-decoration: none; isolation: isolate; }
.p-card-ph { position: absolute; inset: 0; margin: 0; }
.p-card-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.p-card:hover .p-card-ph img { transform: scale(1.06); }
.p-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(20, 14, 10, .78) 100%); }
.p-card-text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: grid; gap: 6px; }
.p-card-title { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--display), Georgia, serif; }
.p-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.p-card-meta b { font-weight: 500; font-size: 17px; color: #fff; white-space: nowrap; }
.p-more { margin-top: 32px; text-align: center; }
/* the studio: one big photo and smaller ones around it */
.p-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.p-tile { margin: 0; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 3; }
.p-tile-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.p-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s, filter .7s; }
.p-tile:hover img { transform: scale(1.03); filter: brightness(1.06); }
/* the cosmetician: photo + text + her motto */
.p-master { background: var(--blush); }
.p-master-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.p-master-ph { margin: 0; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5; }
.p-master-ph img { width: 100%; height: 100%; object-fit: cover; }
.p-master p { margin-top: 14px; color: var(--muted); font-size: 18px; max-width: 32em; }
.p-quote { margin: 32px 0 0; }
.p-quote p { margin: 0; color: var(--ink); font: italic 400 clamp(28px, 3vw, 38px)/1.25 var(--display), Georgia, serif; }
.p-quote footer { margin-top: 10px; color: var(--gold); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.porem .contact { background: var(--bg); }
@media (max-width: 899px) {
  .p-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
  .p-cards::-webkit-scrollbar { display: none; }
  .p-cards li { flex: 0 0 78%; scroll-snap-align: start; }
  .p-master-in { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .p-ratings { gap: 10px; }
  .p-ratings li { min-width: 0; flex: 1; padding: 22px 12px; }
  .p-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .p-tile-big { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .p-tile:nth-child(6) { display: none; }   /* an even 2-column grid under the big photo */
  .p-master-ph { aspect-ratio: 4 / 4.4; }
}

/* ------------------------------------------------ procedure page */
.page { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; max-width: 1440px; margin: 0 auto; padding: clamp(24px, 5vw, 72px) var(--pad); }
.page-photos { position: relative; padding-bottom: 48px; }
.page-ph { aspect-ratio: 4 / 4.2; margin: 0; overflow: hidden; border-radius: var(--soft); }
.page-ph img, .page-ph2 img { width: 100%; height: 100%; object-fit: cover; }
.page-ph2 { position: absolute; right: -12px; bottom: 0; width: 40%; aspect-ratio: 3 / 3.8; margin: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0 6px var(--bg); }
.page h1 { font-size: clamp(40px, 5vw, 68px); }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.feature { margin-top: 40px; padding: 26px; border-radius: 22px; background: rgba(255, 255, 255, .6); }
.feature h2 { font-size: 34px; }
.feature p { margin-top: 8px; color: var(--muted); }
.others { margin-top: 40px; }
.others h2 { font-size: 26px; }
.others ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-family: var(--display), Georgia, serif; font-size: 21px; }
.others a { text-decoration: none; }
.others a:hover { color: var(--accent); }

/* ------------------------------------------------ footer */
.site-foot { background: var(--ink); color: rgba(255, 255, 255, .72); font-size: 15px; padding: 52px var(--pad) 26px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; max-width: 1440px; margin: 0 auto; }
.foot-in li + li { margin-top: 2px; }
.foot-in li a, .foot-base a { display: inline-block; padding: 12px 0; }   /* 44 px finger targets */
.site-foot .logo { color: #fff; display: inline-block; margin-bottom: 6px; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1440px; margin: 32px auto 0; font-size: 14px; }
.vitrina-credit a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.vitrina-credit img { border-radius: 50%; flex: none; }
.vitrina-credit span { text-decoration: underline; text-underline-offset: 3px; }
.coltcode-credit a { color: inherit; text-decoration: none; }
.coltcode-credit span { text-decoration: underline; text-underline-offset: 3px; }
.nf { padding: 120px var(--pad); max-width: 1440px; margin: 0 auto; }
.nf h1 { font-size: clamp(36px, 5vw, 56px); }

/* ------------------------------------------------ phone */
@media (max-width: 899px) {
  .row, .contact-in, .page, .request { grid-template-columns: 1fr; }
  .row-flip .row-media { order: 0; }
  .cards { grid-template-columns: 1fr 1fr; }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
  .gallery::-webkit-scrollbar { display: none; }
  .g-ph { flex: 0 0 70%; scroll-snap-align: start; }
  .slide { aspect-ratio: 4 / 4.4; }
}
@media (max-width: 767px) {
  .lead { font-size: 16px; margin-top: 12px; }
  .cards { grid-template-columns: 1fr; }
  .contact .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact .actions .btn { padding: 0 12px; }
  .f-row { grid-template-columns: 1fr; }
  .request-form .btn { justify-self: stretch; }
  .row { gap: 22px; }
  .actions { margin-top: 20px; }
  .hero h1 { font-size: min(clamp(60px, 18vw, 84px), 140vw / var(--h1-len, 1)); }   /* the longest word fits the screen */
  /* keep the buttons above Safari's bottom bar, which floats over the video */
  .home .hero-text { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  @media (pointer: coarse) { .home .hero-text { padding-bottom: calc(var(--under-bar, 0px) + 50px + env(safe-area-inset-bottom)); } }
  .hero .actions .btn { width: 100%; }
  .touch img { border-radius: 24px; }
  .spot { left: var(--mx); top: var(--my); }
  .spot.lw .spot-label { left: 44px; right: auto; transform: translate(-6px, -50%); }
  .spot.lm .spot-label { left: auto; right: 44px; transform: translate(6px, -50%); }
  /* the opened procedure comes up from the bottom as a sheet */
  .js .blooms { margin: 0; }
  .js .bloom {
    position: fixed; z-index: 50; left: 8px; right: 8px; bottom: 8px; max-height: 72svh; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(255, 255, 255, .94); box-shadow: 0 -10px 60px -20px rgba(42, 32, 38, .5); animation: sheet .45s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .facts div, .label div { grid-template-columns: 1fr; gap: 2px; }
  .page-ph2 { right: 8px; }
  .map { min-height: 300px; }
  .foot-in { grid-template-columns: 1fr; gap: 24px; }
  .foot-base { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spot-dot::after, .js .bloom { animation: none; }
  .touch, .js .row .spot, .btn { transition: none; }
  .touch.zoom { transform: none; }
}

/* ------------------------------------------------ booking panel (only with "booking_panel" in settings)
   A <dialog>: on wide screens a panel from the right, on phones a sheet from the bottom.
   Four short steps (procedure, day, hour, name and phone) with large chips, a summary and one button that stays in view. */
html.book-open { overflow: hidden; }
.book {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(500px, 100vw); height: 100dvh; max-width: none; max-height: none;
  padding: 0; border: 0; background: var(--bg); color: var(--ink); box-shadow: -24px 0 60px rgba(30, 20, 16, .18);
}
.book[open] { display: flex; flex-direction: column; animation: book-in .38s cubic-bezier(.2, .7, .2, 1); }
.book::backdrop { background: rgba(30, 20, 16, .5); animation: book-fade .3s ease; }
@keyframes book-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes book-up { from { transform: translateY(60px); opacity: 0; } }
@keyframes book-fade { from { opacity: 0; } }
.book-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.book-form[hidden], .book-done[hidden] { display: none; }
.book-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 16px 14px 28px; }
.book-head h2 { font-size: 34px; }
.book-head h2:focus { outline: none; }   /* the panel opens with the focus on its title, not on the close button */
.book-close { width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 300 30px/1 var(--text), sans-serif; cursor: pointer; }
.book-close:hover { background: var(--blush); }
.book-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 24px; }
.book-lead { color: var(--muted); font-size: 16px; }
.book-step { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
.book-step legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 12px; font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.book-step legend span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blush); color: var(--gold); font-size: 12px; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 400; font-size: 15px; line-height: 1.2; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.chips-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.chips-days .chip span { min-height: 58px; padding: 0 4px; border-radius: 14px; font-weight: 500; }
.chips-days .chip small { color: var(--muted); font-weight: 300; font-size: 12px; transition: color .2s; }
.chips-days .chip input:checked + span small { color: rgba(255, 255, 255, .8); }
.chips-times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.chips-times .chip span { padding: 0 6px; border-radius: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.book-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.book-foot { display: grid; gap: 12px; padding: 16px 28px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.book-sum { min-height: 1.5em; font-size: 15px; font-weight: 400; }
.book-sum:empty::before { content: attr(data-empty); color: var(--muted); font-weight: 300; }
.book-foot .btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.book-foot .btn:disabled { opacity: .6; cursor: wait; transform: none; }
.book-done { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 28px; }
.book-done h2 { font-size: 38px; }
.book-done-sum { margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: var(--blush); font-weight: 400; }
.book-done .btn { margin-top: 30px; border: 0; cursor: pointer; font-family: inherit; }
@media (max-width: 767px) {
  .book { inset: auto 0 0 0; width: 100%; height: auto; max-height: 94dvh; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px rgba(30, 20, 16, .2); }
  .book[open] { animation-name: book-up; }
  .book-head { padding: 18px 8px 10px 20px; }
  .book-head h2 { font-size: 30px; }
  .book-body { padding: 0 20px 20px; }
  .book-step { margin-top: 22px; }
  .chips-days { gap: 5px; }
  .chips-days .chip span { min-height: 56px; padding: 0; border-radius: 12px; }
  .book-fields { grid-template-columns: 1fr; }
  .book-foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }
  .book-done { padding: 34px 20px calc(28px + env(safe-area-inset-bottom)); }
  .book-done .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .book[open], .book::backdrop { animation: none; } }