/* cosmetic-nearme.com — Velvet Atelier / "The Tactile Muse" design system.
   Tokens lifted verbatim from the Israeli platform's Tailwind config
   (apps/client-shell/index.html) so the international site matches the
   Israeli salon-card anatomy 1:1. Mobile-first; RTL comes free via logical
   properties only (no `left`/`right`, no border-based dividers — see the
   "No-Line" rule in DESIGN.md: structure comes from tonal shifts, not lines). */

:root {
  /* ── surfaces (physical layers of vellum paper — lighter always floats on darker) ── */
  --background: #fdf8f5;
  --surface-container-low: #f8f3ef;
  --surface-container: #f2ede9;
  --surface-container-high: #ece7e3;
  --surface-container-lowest: #ffffff;

  /* ── ink & outline (never pure black) ── */
  --on-surface: #34322f;
  --on-surface-variant: #615f5b;
  --outline: #7d7a76;
  --outline-variant: #b5b1ad;

  /* ── brand: skin & precious metal ── */
  --primary: #855332;
  --primary-container: #dc9d77;
  --on-primary: #fff7f5;
  --on-primary-container: #492205;
  --secondary-container: #ffdbcd;
  --on-secondary-container: #684b3f;

  --silk-gradient: linear-gradient(45deg, var(--primary) 0%, var(--primary-container) 100%);

  /* ── shape & elevation ── */
  --radius-sm: 0.75rem;
  --radius-lg: 2rem;
  --radius-full: 9999px;
  --soft-shadow: 0 40px 40px -20px rgba(52, 50, 47, 0.06);
  --soft-shadow-sm: 0 4px 40px rgba(52, 50, 47, 0.04);

  /* ── typography ── */
  --font-serif: 'Noto Serif', 'Noto Serif Hebrew', serif;
  --font-sans: 'Plus Jakarta Sans', 'Assistant', sans-serif;

  /* ── layout ── */
  --container-narrow: 28rem;   /* Israeli money-page column: max-w-md */
  --container-wide: 72rem;     /* index-page city grid only */
}

/* Hebrew pages: swap in the Hebrew-native cuts as the primary family
   (Noto Serif Hebrew / Assistant), matching the Israeli platform exactly. */
html[lang="he"] {
  --font-serif: 'Noto Serif Hebrew', 'Noto Serif', serif;
  --font-sans: 'Assistant', 'Plus Jakarta Sans', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--on-surface);
  background: var(--background);
  line-height: 1.65;
  text-align: start;
  letter-spacing: 0.01em;
}

.container { max-width: var(--container-narrow); margin-inline: auto; padding-inline: 1.5rem; min-width: 0; }
.container--wide { max-width: var(--container-narrow); } /* app column everywhere (Nir 03/07): the site behaves like the Israeli mobile app on every page */

img { max-width: 100%; height: auto; }
html, body { overflow-x: clip; }
body { overflow-wrap: break-word; }
.facts li { min-width: 0; }
a { color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: 2.25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.75rem; margin-block-end: 0.5rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 0.75rem; }
.muted { color: var(--outline); font-size: 0.9em; }

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }

/* ── language bar (no divider line — a whisper of space is enough) ── */
.langbar {
  display: flex; gap: 1rem; justify-content: flex-end;
  padding: 1rem 1.5rem 0; font-size: 0.8rem; color: var(--outline);
}
.langbar a { text-decoration: none; color: var(--outline); }
.langbar a:hover { color: var(--primary); }
.langbar__current { font-weight: 700; color: var(--on-surface); }

/* ── hero / header ── */
.hero { padding-block-end: 1rem; }
.hero .container { padding-block-start: 1.5rem; }
.breadcrumb { font-size: 0.8rem; color: var(--outline); margin-block-end: 1rem; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.eyebrow {
  display: block;
  text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 0.7rem; font-weight: 700; color: var(--primary); margin: 0 0 0.5rem;
  font-family: var(--font-sans);
}
h1.eyebrow, .direct-answer.eyebrow { letter-spacing: 0.15em; }
.direct-answer { font-size: 1.05rem; color: var(--on-surface-variant); margin-block-start: 0.75rem; }

/* ── headline facts strip — tonal segments, "ghost border" divider only (15% opacity, per DESIGN.md fallback) ── */
.facts { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.fact {
  padding-inline-start: 1.5rem; border-inline-start: 1px solid rgb(181 177 173 / 15%);
  min-width: 6rem;
}
.fact:first-child { padding-inline-start: 0; border-inline-start: none; }
.fact dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--outline); margin: 0 0 0.15rem; }
.fact dd { margin: 0; font-weight: 700; font-size: 1.05rem; font-family: var(--font-serif); color: var(--on-surface); }

/* ── sections — tonal sculpting, never a line ── */
.section { padding-block: 2.5rem; }
.section-sub { color: var(--outline); margin-block-start: -0.25rem; }
.scene p { color: var(--on-surface-variant); }
.booking-culture {
  background: var(--surface-container-low); border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem; margin-block-start: 1.5rem;
}
.booking-culture strong { color: var(--primary); }

/* ── salon cards — "The Tactile Muse": white card floating on ivory, no lines, soft glow ── */
.salon-list { display: grid; gap: 3rem; margin-block-start: 2rem; }
.salon-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--soft-shadow-sm);
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.salon-card:hover { box-shadow: var(--soft-shadow); transform: translateY(-2px); }

.salon-card__image {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--surface-container) 0%, rgb(220 157 119 / 30%) 100%);
}
.salon-card__initial {
  font-family: var(--font-serif); font-size: 4rem; color: rgb(133 83 50 / 50%);
}
.salon-card__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.salon-card__attribution {
  position: absolute; inset-block-end: 0.4rem; inset-inline-end: 0.6rem;
  font-size: 0.6rem; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}
.salon-card__verified {
  position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem;
  display: flex; align-items: center; gap: 0.4rem;
  background: rgb(253 248 245 / 90%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-full); padding: 0.35rem 0.75rem;
  box-shadow: var(--soft-shadow-sm);
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-surface);
}
.salon-card__verified .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #10b981; flex-shrink: 0; }

.salon-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.salon-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.salon-card__rank { color: var(--primary); font-weight: 800; font-family: var(--font-sans); font-size: 0.85rem; }
.salon-card__body h3 { font-size: 1.4rem; }
.salon-card__area {
  display: flex; align-items: center; gap: 0.3rem;
  color: var(--outline); font-size: 0.8rem; margin-block-start: 0.35rem;
}
.salon-card__area .icon { color: var(--outline); }
.salon-card__rating {
  display: flex; align-items: center; gap: 0.3rem; margin-block-start: 0.4rem;
  color: var(--primary); font-weight: 600; font-size: 0.9rem;
}
.salon-card__rating .icon--star { color: var(--primary); }
.salon-card__second { margin-block-start: 0.25rem; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.tags li {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: var(--radius-full); padding: 0.35rem 0.85rem;
  background: var(--surface-container); color: var(--on-surface-variant);
}
.tags li:first-child { background: var(--secondary-container); color: var(--on-secondary-container); }

.salon-card__price { font-size: 0.9rem; color: var(--on-surface-variant); }
.salon-card__price strong { color: var(--on-surface); }
.salon-card__editorial { color: var(--on-surface-variant); font-size: 0.92rem; }
.salon-card__meta { font-size: 0.8rem; }
.salon-card__actions { display: flex; flex-direction: column; gap: 0.6rem; }

.btn {
  display: block; text-align: center; text-decoration: none;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  border-radius: var(--radius-full); padding: 1rem 1.25rem;
}
.btn--primary { background: var(--silk-gradient); color: var(--on-primary); box-shadow: var(--soft-shadow-sm); }
.btn--primary:active { transform: scale(0.98); }
.btn--ghost { color: var(--primary); background: transparent; letter-spacing: 0.1em; padding-block: 0.25rem; }
.btn--ghost:hover { text-decoration: underline; }

/* ── clusters — tonal grouping, no borders ── */
.cluster { margin-block-start: 2.5rem; }
.cluster-grid { display: grid; gap: 1rem; margin-block-start: 1rem; }
.cluster-card { background: var(--surface-container-low); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; }
.cluster-card h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.cluster-card p { margin: 0; color: var(--on-surface-variant); }

/* ── practical ── */
.practical { display: grid; gap: 0.75rem; margin: 1rem 0 0; }
.practical-row { background: var(--surface-container-low); border-radius: var(--radius-lg); padding: 1rem 1.5rem; }
.practical-row dt { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); }
.practical-row dd { margin: 0.25rem 0 0; color: var(--on-surface-variant); }

/* ── faq ── */
.faq-item {
  background: var(--surface-container-low); border-radius: var(--radius-lg);
  padding: 1rem 1.5rem; margin-block-end: 0.75rem;
}
.faq-item summary { font-weight: 600; font-family: var(--font-serif); font-size: 1.05rem; cursor: pointer; }
.faq-item p { margin-block: 0.75rem 0.25rem; color: var(--on-surface-variant); }

/* ── insights / sources ── */
.insights li, .sources li { margin-block-end: 0.6rem; color: var(--on-surface-variant); }
.insights, .sources { padding-inline-start: 1.25rem; margin-block-start: 1rem; }
.sources a { text-decoration: none; }
.sources a:hover { text-decoration: underline; }

/* ── index page ── */
.country-group { margin-block-start: 2.5rem; }
.country-group__title { padding-block-end: 0.75rem; font-size: 1.3rem; }
.city-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.city-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface-container-lowest); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--soft-shadow-sm);
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.city-card:hover { box-shadow: var(--soft-shadow); transform: translateY(-2px); }
.city-card h3 { font-size: 1.3rem; }
.city-card p { margin: 0.4rem 0 0; }
.city-card__cta { color: var(--primary); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.badge {
  font-size: 0.6rem; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--secondary-container); color: var(--on-secondary-container);
  border-radius: var(--radius-full); padding: 0.15rem 0.55rem; margin-inline-start: 0.4rem;
}

/* ── footer ── */
.footer { padding-block: 2rem 3rem; }
.footer .container { color: var(--outline); }
.footer strong { color: var(--on-surface); font-family: var(--font-serif); }

/* ── family-of-sites strip (Booking-group-style, matched to the carrental-kujastay reference) ── */
.family-strip { background: #f8fafc; border-top: 1px solid #e2e8f0; }
.family-strip__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px; padding: 28px 0 24px; text-align: center;
}
.family-strip__label { font-size: .8rem; letter-spacing: .02em; color: #475569; opacity: 1; }
.family-strip__logos { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; justify-content: center; }
.family-strip__item { display: inline-flex; align-items: center; opacity: 1; transition: transform .15s ease; }
.family-strip__item:hover { transform: translateY(-1px); }
.family-strip__item img { height: 30px; width: auto; display: block; }
.family-strip__copy { font-size: .75rem; color: #94a3b8; margin: 0; }
[dir="rtl"] .family-strip__inner,
[dir="rtl"] .family-strip__logos { direction: rtl; }

/* ── tablet+ (content column stays narrow by design — mobile-first, the desktop
   gets the same editorial column; only the index city grid widens) ── */
@media (min-width: 640px) { /* app column: no multi-col grids */
  h1 { font-size: 2.75rem; }
}

/* ── FLIP CARDS — cosmetician cards (Velvet Atelier, prototype-approved by Nir 08/07/2026:
   ~/dev/cosmetic-flip-lab/index.html). Shared by BOTH engines: the Israeli /city/{slug}
   pages (gen_il_cities.mjs) and the international /he//en/ pages (cityPage.js).
   Front = clean invitation + immediate booking CTA; back = rich, scrollable content that
   stays crawlable for Google. Every selector is scoped under .salon-flip so nothing leaks
   into the rest of the design system, and the play-card ratio (290×430, ~0.67) is preserved. */
.salon-list { justify-items: center; }
.salon-flip {
  --brown:#9c6b3f; --brown-d:#7d5330; --cream:#f6efe7; --cream2:#efe5d9;
  --ink:#2b2622; --mut:#7d7166; --gold:#ffcc00; --flip-line:#e3d6c6;
  --emerald:#1f8a5b; --emerald-d:#166844;
  --card-w:290px; --card-h:430px;
  width:var(--card-w); max-width:100%; height:var(--card-h);
  perspective:1600px; cursor:pointer;
}
.salon-flip .flip-inner {
  position:relative; width:100%; height:100%;
  transition:transform .7s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;
}
.salon-flip.is-flipped .flip-inner { transform:rotateY(180deg); }
.salon-flip .face {
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:22px; overflow:hidden; background:#fff;
  box-shadow:0 18px 40px -20px rgba(90,60,30,.4),0 2px 8px -3px rgba(90,60,30,.2);
}
/* front — Stitch "Glow Near You" aesthetic */
.salon-flip .front { display:flex; flex-direction:column; background:#fff; }
.salon-flip .front__img {
  height:236px; background:linear-gradient(150deg,#c79a6d,#9c6b3f 70%,#7d5330);
  position:relative; display:grid; place-items:center; overflow:hidden;
}
.salon-flip .front__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; }
.salon-flip .front__initial {
  font-family:var(--font-serif); font-size:78px; color:#fff8ef; opacity:.9;
  text-shadow:0 2px 20px rgba(0,0,0,.25);
}
.salon-flip .front__avail {
  position:absolute; top:12px; inset-inline-end:12px; background:rgba(255,248,240,.94);
  color:#2b7a4b; font-weight:800; font-size:10.5px; letter-spacing:.3px; padding:5px 11px; border-radius:999px;
  display:flex; align-items:center; gap:5px; box-shadow:0 2px 8px -3px rgba(0,0,0,.3);
}
.salon-flip .front__avail::before { content:""; width:6px; height:6px; border-radius:50%; background:#2b7a4b; }
.salon-flip .front__rank {
  position:absolute; top:12px; inset-inline-start:12px; background:var(--brown-d); color:#fff8f0;
  font-weight:800; font-size:11px; padding:4px 10px; border-radius:999px;
}
.salon-flip .front__body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.salon-flip .front__row { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.salon-flip .front__name { font-family:var(--font-serif); font-size:22px; line-height:1.05; color:var(--ink); }
.salon-flip .front__dist { flex:0 0 auto; font-size:11.5px; color:var(--mut); display:flex; align-items:center; gap:3px; margin-top:4px; }
.salon-flip .front__rating { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--mut); }
.salon-flip .front__rating b { color:var(--ink); }
.salon-flip .star { color:var(--gold); text-shadow:0 0 6px rgba(255,204,0,.55); letter-spacing:1px; }
.salon-flip .tags { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.salon-flip .tags li {
  background:#f3e3da; color:var(--brown-d); font-size:10.5px; font-weight:700; letter-spacing:.2px;
  padding:5px 10px; border-radius:999px; text-transform:uppercase;
}
.salon-flip .front__foot { margin-top:auto; display:flex; gap:8px; align-items:center; }
.salon-flip .btn-wa {
  flex:1; background:linear-gradient(180deg,#f6b06b,#ee9a49); color:#fff; text-decoration:none; text-align:center;
  font-weight:800; font-size:13.5px; letter-spacing:.4px; padding:13px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; gap:7px; box-shadow:0 6px 16px -8px rgba(238,154,73,.6);
  transition:background .25s ease,box-shadow .25s ease;
}
.salon-flip .btn-wa:hover {
  background:linear-gradient(180deg,var(--emerald),var(--emerald-d));
  box-shadow:0 6px 18px -7px rgba(22,104,68,.7);
}
.salon-flip .btn-more {
  flex:0 0 auto; background:var(--cream2); color:var(--brown-d); border:none; font-weight:800; font-size:16px;
  width:46px; height:46px; border-radius:14px; cursor:pointer;
}
/* back — rich, scrollable */
.salon-flip .back { transform:rotateY(180deg); background:var(--cream); display:flex; flex-direction:column; }
.salon-flip .back__top {
  padding:16px 18px 12px; border-bottom:1px solid var(--flip-line);
  display:flex; justify-content:space-between; align-items:flex-start;
}
.salon-flip .back__name { font-family:var(--font-serif); font-size:20px; color:var(--ink); }
.salon-flip .back__role { font-size:12px; color:var(--brown); margin-top:2px; }
.salon-flip .back__rate { text-align:center; flex:0 0 auto; }
.salon-flip .back__rate b { font-size:17px; display:block; }
.salon-flip .back__rate span { font-size:9px; color:var(--mut); letter-spacing:.5px; }
.salon-flip .back__scroll { flex:1; overflow-y:auto; padding:14px 18px 16px; display:flex; flex-direction:column; gap:16px; }
.salon-flip .back__scroll::-webkit-scrollbar { width:5px; }
.salon-flip .back__scroll::-webkit-scrollbar-thumb { background:var(--flip-line); border-radius:3px; }
.salon-flip .quote {
  font-family:var(--font-serif); font-style:italic; font-size:14px; line-height:1.5; color:#4a4038;
  border-inline-start:3px solid var(--brown); padding-inline-start:12px;
}
.salon-flip .sec-h { font-family:var(--font-serif); font-size:14px; color:var(--brown-d); margin-bottom:7px; }
.salon-flip .svc { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.salon-flip .svc li { background:#fff; border:1px solid var(--flip-line); color:#544a40; font-size:11.5px; padding:5px 10px; border-radius:8px; }
.salon-flip .info-row { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#544a40; padding:6px 0; border-bottom:1px dashed var(--flip-line); }
.salon-flip .src { font-size:11px; color:var(--mut); background:#fff; border:1px solid var(--flip-line); border-radius:10px; padding:9px 11px; line-height:1.5; }
.salon-flip .src b { color:var(--brown-d); }
.salon-flip .back__foot { padding:12px 18px; border-top:1px solid var(--flip-line); display:flex; gap:8px; background:var(--cream2); }
.salon-flip .flip-back {
  background:transparent; border:1px solid var(--brown); color:var(--brown-d); border-radius:12px;
  font-weight:700; font-size:13px; padding:11px 14px; cursor:pointer;
}
@media (max-width:340px){ .salon-flip{ --card-w:264px; --card-h:392px; } }