/* ==========================================================================
   Ela Cosmetics — EA Beautician Design System
   Tokens, type and components follow the EA Beautician Brand Book v1.0.
   Mega menu + mobile menu markup/behaviour are unchanged; they inherit the
   brand palette through the remapped tokens below.
   ========================================================================== */

:root{
  /* EA Beautician brand palette (Brand Book v1.0, p.08 / p.17) */
  --ea-pearl:#FBF8F6; --ea-powder:#F5ECEC; --ea-blush:#EAD7D9; --ea-rose:#BA9098;
  --ea-mauve:#A27480; --ea-plum:#6B4650; --ea-plum-deep:#563842; --ea-ink:#1C1A1B;
  --ea-taupe:#75686A; --ea-champagne:#C9AE94; --ea-body:#3A3335;

  /* Legacy token names, remapped to the brand — every existing rule
     (incl. mega menu + mobile menu) keeps working unchanged */
  --ink:        var(--ea-ink);
  --ink-2:      var(--ea-body);
  --muted:      var(--ea-taupe);
  --rose-deep:  var(--ea-plum);       /* action / primary — 7.6:1 on pearl */
  --rose-deep-hover: var(--ea-plum-deep);
  --rose:       var(--ea-rose);       /* decorative only, never for text */
  --rose-light: var(--ea-blush);
  --blush:      var(--ea-powder);
  --cream:      var(--ea-pearl);
  --white:      #FFFFFF;
  --error:      #9B2C3C;
  --success-bg: #EAF3EC;
  --success-fg: #1F4A2C;
  --whatsapp:   #1F7A4A;
  --whatsapp-hover: #16603A;
  --hairline:   rgba(107,70,80,.18);
  --hairline-dark: rgba(251,248,246,.28);

  /* Type — Brand Book p.10 */
  --font-display: 'Frank Ruhl Libre', 'Times New Roman', serif;   /* Hebrew headings */
  --font-ui:      'Assistant', Arial, sans-serif;                 /* body + UI */
  --font-latin:   'Cormorant Garamond', 'Frank Ruhl Libre', serif;/* Latin display, numbers, eyebrows */
  --font-script:  'Mrs Saint Delafield', cursive;                 /* 1–3 Latin words only */
  --font-menu:    'Assistant', Arial, sans-serif;                 /* mega + mobile menu keep a sans voice */
  --base-size: 1.0625rem; /* 17px */

  /* Spacing / layout */
  --container-max: 78rem;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --section-pad: clamp(3.5rem, 8vw, 7rem);

  /* Radii / shadows — soft, plum-tinted, never black (p.17) */
  --radius-pill: 999px;
  --radius-card: 1.25rem;
  --radius-lg: 1.5rem;
  --radius-input: .75rem;
  --shadow-sm: 0 1px 2px rgba(107,70,80,.08);
  --shadow-md: 0 6px 18px rgba(107,70,80,.10);
  --shadow-card-hover: 0 14px 36px rgba(107,70,80,.16);
  --shadow-float: 0 10px 24px rgba(28,26,27,.2);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* a11y-controlled variables (overridden by a11y.js) */
  --a11y-scale: 1;
  --a11y-word-spacing: normal;
  --a11y-letter-spacing: normal;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html.a11y-still, html.a11y-still *{ scroll-behavior: auto !important; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: calc(var(--base-size) * var(--a11y-scale));
  line-height: 1.65;
  word-spacing: var(--a11y-word-spacing);
  letter-spacing: var(--a11y-letter-spacing);
  direction: rtl;
}
img{ max-width: 100%; display: block; }
a{ color: var(--rose-deep); text-decoration: none; }
a:hover{ color: var(--rose-deep-hover); }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0 0 .6em; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; }

/* Visible focus ring everywhere */
:focus-visible{ outline: 3px solid var(--rose-deep); outline-offset: 3px; border-radius: 4px; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{
  position: absolute; right: 1rem; top: -60px; z-index: 10000;
  background: var(--ink); color: var(--white); padding: .75rem 1.25rem;
  border-radius: var(--radius-input); transition: top .2s;
}
.skip-link:focus{ top: 1rem; }

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section{ padding: var(--section-pad) 0; }
.section--blush{ background: var(--blush); }
.section--ink{ background: var(--ink); color: var(--rose-light); }
.section--ink h1, .section--ink h2, .section--ink h3{ color: var(--white); }

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font: 700 13px/1 var(--font-ui); letter-spacing:.12em; color: var(--rose-deep);
  text-transform: none; margin-bottom: .9rem;
}
.eyebrow::before{ content:''; width:40px; height:1px; background: var(--rose); display:inline-block; }
.section--ink .eyebrow{ color: var(--rose-light); }

h1{ font-weight:300; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height:1.05; }
.h1--hero{ font-size: clamp(2.75rem, 7vw, 5.25rem); }
h2.h2-section{ font-weight:300; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height:1.1; }
h2.h2-content{ font-weight:400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height:1.25; }
.lead{ color: var(--muted); font-size: 1.15rem; max-width: 48rem; }

.grid-auto{ display:grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-auto--wide{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .9rem 1.75rem; border-radius: var(--radius-pill); border: 1px solid transparent;
  font-weight:700; font-size: 1rem; cursor:pointer; transition: .2s; min-height:44px;
  text-align:center;
}
.btn--primary{ background: var(--rose-deep); color: var(--white); }
.btn--primary:hover{ background: var(--rose-deep-hover); color:var(--white); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover{ border-color: var(--rose-deep); color: var(--rose-deep); }
.btn--whatsapp{ background: var(--whatsapp); color: var(--white); }
.btn--whatsapp:hover{ background: var(--whatsapp-hover); color:var(--white); }
.btn--block{ width:100%; }

/* ---------- Header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(251,247,246,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding: .85rem var(--container-pad); max-width: var(--container-max); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:.75rem; color: var(--ink); }
.brand img{ width:56px; height:56px; border-radius:50%; }
.brand__name{ font-family: var(--font-display); font-size:1.15rem; line-height:1.1; }
.brand__tag{ font-size:.8rem; color: var(--muted); }
.nav{ display:none; align-items:center; gap:2rem; }
/* :not(.btn) keeps these link styles from leaking onto the CTA pill button,
   which must keep its own .btn/.btn--primary padding, radius and color. */
.nav a:not(.btn){ color: var(--ink); font-weight:600; padding:.4rem 0; border-bottom: 1px solid transparent; }
.nav a:not(.btn)[aria-current="page"]{ color: var(--rose-deep); border-color: var(--rose-deep); }
.nav a:not(.btn):hover{ color: var(--rose-deep); }
.nav-cta{ margin-inline-start: .5rem; }
/* ---------- Desktop mega menu: "טיפולים ומחירים" ---------- */
.nav-item--mega{ display:inline-flex; align-items:center; gap:.15rem; }
.nav-mega-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; margin:0;
  background:none; border:0; border-radius:50%; color: var(--ink); cursor:pointer;
  transition: background-color .25s ease, color .25s ease;
}
.nav-mega-toggle:hover{ background: var(--blush); color: var(--rose-deep); }
.nav-mega-toggle .icon-svg svg{ width:16px; height:16px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav-mega-toggle[aria-expanded="true"]{ color: var(--rose-deep); }
.nav-mega-toggle[aria-expanded="true"] .icon-svg svg{ transform: rotate(180deg); }
.nav-item--mega.is-open .nav-mega-link{ color: var(--rose-deep); border-color: var(--rose-deep); }

.mega{
  display:none; position:absolute; top:100%; inset-inline:0; z-index:2;
  background: var(--cream); border-bottom:1px solid var(--hairline);
  box-shadow: 0 34px 60px -24px rgba(43,33,36,.28);
  max-height: calc(100vh - 80px); overflow-y:auto; overflow-x:hidden;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s;
}
.mega.is-open{ opacity:1; visibility:visible; transform:none; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.mega__inner{
  display:grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr) minmax(0,.95fr);
  gap:0; padding-top:2rem; padding-bottom:2.25rem;
}
.mega__col{ min-width:0; padding-inline:1.75rem; }
.mega__col:first-child{ padding-inline-start:0; }
.mega__col:last-child{ padding-inline-end:0; }
.mega__col + .mega__col{ border-inline-start:1px solid var(--hairline); }
.mega__title{
  display:flex; align-items:center; gap:.5rem; margin:0 0 1.1rem;
  font-family: var(--font-display); font-size:.95rem; font-weight:700; color: var(--ink); letter-spacing:.01em;
}
.mega__title .icon-svg{ color: var(--rose-deep); }

.mega__cards{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:.85rem; }
.mega-card{
  display:flex; align-items:center; gap:.9rem; padding:.7rem; background: var(--white);
  border:1px solid var(--hairline); border-radius:1rem; color: var(--ink);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .3s ease;
}
.mega-card:hover, .mega-card:focus-visible{ transform: translateY(-3px); border-color: var(--rose-deep); box-shadow: 0 14px 28px -14px rgba(122,75,87,.35); color: var(--ink); }
.mega-card__img{ width:84px; height:84px; flex-shrink:0; object-fit:cover; border-radius:.75rem; background: var(--blush); }
.mega-card__body{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.mega-card__name{ font-weight:700; font-size:1rem; line-height:1.25; }
.mega-card__sub{ font-size:.82rem; color: var(--muted); line-height:1.35; }
.mega-card__price{ font-size:.85rem; font-weight:700; color: var(--rose-deep); }

.mega__list{ list-style:none; margin:0; padding:0; }
.mega-row{
  display:flex; align-items:center; gap:.75rem; padding:.5rem .35rem; border-radius:.75rem; color: var(--ink);
  transition: background-color .25s ease, padding-inline .25s ease;
}
.mega-row:hover, .mega-row:focus-visible{ background: var(--blush); padding-inline:.7rem; color: var(--ink); }
.mega-row__ico{ display:inline-flex; width:2.1rem; height:2.1rem; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; background: var(--blush); color: var(--rose-deep); }
.mega-row:hover .mega-row__ico{ background: var(--white); }
.mega-row__name{ flex:1; font-weight:600; font-size:.97rem; }
.mega-row__price{ font-size:.78rem; font-weight:700; color: var(--rose-deep); border:1px solid var(--rose-deep); border-radius:999px; padding:.1rem .65rem; white-space:nowrap; }
.mega__all{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; font-weight:700; font-size:.92rem; color: var(--rose-deep); }
.mega__all .icon-svg svg{ width:16px; height:16px; transition: transform .3s ease; }
.mega__all:hover{ color: var(--rose-deep-hover); }
.mega__all:hover .icon-svg svg{ transform: translateX(-4px); }

.mega__phone{ display:flex; align-items:center; gap:.6rem; font-family: var(--font-display); font-size:1.65rem; font-weight:800; color: var(--ink); line-height:1; }
.mega__phone .icon-svg{ color: var(--rose-deep); }
.mega__phone:hover{ color: var(--rose-deep); }
.mega__note{ margin:.9rem 0 1.1rem; color: var(--muted); font-size:.88rem; line-height:1.6; }
.mega__cta, .mega__cta2{ width:100%; margin-bottom:.6rem; }
.mega a:focus-visible{ outline:2px solid var(--rose-deep); outline-offset:2px; }

/* staggered reveal of the panel's items */
.mega-card, .mega__list li, .mega__chips li{ opacity:0; transform: translateY(10px); }
.mega.is-open .mega-card, .mega.is-open .mega__list li, .mega.is-open .mega__chips li{
  opacity:1; transform:none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .3s ease;
  transition-delay: calc(.08s + var(--i, 0) * .05s);
}
.mega.is-open .mega-card:hover{ transform: translateY(-3px); transition-delay:0s; }

@media (min-width: 900px){ .mega{ display:block; } }
@media (max-width: 1099px){
  .mega__inner{ grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
  .mega__col--featured{ display:none; }
  .mega .mega__col--all{ padding-inline-start:0; border-inline-start:0; }
  .nav{ gap:1.2rem; }
  .nav a:not(.btn){ white-space:nowrap; }
  .nav-cta{ white-space:nowrap; padding-inline:1.1rem; margin-inline-start:0; }
  .brand__tag{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .mega, .mega.is-open, .mega-card, .mega__list li, .mega__chips li, .nav-mega-toggle .icon-svg svg{ transition-duration:.01s !important; transition-delay:0s !important; }
}

/* ---------- Mobile menu (circular-reveal overlay, katav-style) ---------- */
.hamburger{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  height:44px; padding:0 1rem; border:0; border-radius:999px;
  background: var(--rose-deep); color: var(--white);
  font-family: var(--font-ui); font-size:.95rem; font-weight:700;
  transition: background-color .35s ease, color .35s ease;
}
.hamburger:hover{ background: var(--rose-deep-hover); }
.hamburger__icon{ position:relative; width:18px; height:12px; flex-shrink:0; }
.hamburger__icon i{
  position:absolute; inset-inline-start:0; width:100%; height:2px; border-radius:2px; background: currentColor;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1);
}
.hamburger__icon i:nth-child(1){ top:1px; }
.hamburger__icon i:nth-child(2){ top:9px; }
.hamburger[aria-expanded="true"]{ background: var(--rose-light); color: var(--ink); }
.hamburger[aria-expanded="true"] .hamburger__icon i:nth-child(1){ top:5px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__icon i:nth-child(2){ top:5px; transform: rotate(-45deg); }

/* header turns ink while the menu is open */
.site-header{ transition: background-color .5s ease, border-color .5s ease; }
.site-header.is-menu-open{ background: var(--ink); border-bottom-color: var(--hairline-dark); }
.site-header .brand__name, .site-header .brand__tag{ transition: color .5s ease; }
.site-header.is-menu-open .brand__name{ color: var(--cream); }
.site-header.is-menu-open .brand__tag{ color: var(--rose-light); }

.mnav{
  --mx: 50px; --my: 40px; --hh: 74px;
  position:fixed; inset:0; z-index:490; background: var(--ink); color: var(--cream);
  padding-top: var(--hh); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  visibility:hidden; pointer-events:none;
  clip-path: circle(0 at var(--mx) var(--my));
  transition: clip-path .7s cubic-bezier(.2,.8,.2,1), visibility 0s linear .7s;
}
.mnav.is-open{
  visibility:visible; pointer-events:auto;
  clip-path: circle(150% at var(--mx) var(--my));
  transition: clip-path .7s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
.mnav__inner{ min-height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:1.75rem; padding: 1.25rem var(--container-pad) 6.5rem; max-width:36rem; margin:0 auto; }
.mnav__list{ list-style:none; margin:0; padding:0; }
.mnav__list li{
  border-bottom:1px solid var(--hairline-dark);
  opacity:0; transform: translateY(26px);
  transition: opacity .25s ease, transform .25s ease;
}
.mnav.is-open .mnav__list li, .mnav.is-open .mnav__card{
  opacity:1; transform:none;
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(.18s + var(--i) * .06s);
}
.mnav__link{
  display:flex; align-items:center; gap:1rem; padding: 1rem .25rem;
  color: var(--cream); font-family: var(--font-display); font-size: clamp(1.7rem, 7.4vw, 2.3rem); font-weight:700; line-height:1.15;
}
.mnav__link:hover{ color: var(--rose-light); }
.mnav__num{ font-size:.8rem; font-weight:600; letter-spacing:.08em; color: var(--rose-light); min-width:1.75rem; font-variant-numeric: tabular-nums; }
.mnav__text{ flex:1; }
.mnav__link::after{
  content:""; width:.6rem; height:.6rem; border-radius:50%; background: var(--rose-light);
  transform: scale(0); transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.mnav__link[aria-current="page"]{ color: var(--rose-light); }
.mnav__link[aria-current="page"]::after{ transform: scale(1); }
.mnav__link:focus-visible{ outline:2px solid var(--rose-light); outline-offset:2px; border-radius:6px; }

.mnav__card{
  background: var(--rose-light); color: var(--ink); border-radius: 1.5rem; padding: 1.4rem 1.25rem 1.25rem;
  opacity:0; transform: translateY(26px); transition: opacity .25s ease, transform .25s ease;
}
.mnav__card-title{ margin:0; font-family: var(--font-display); font-size:1.3rem; font-weight:700; line-height:1.25; }
.mnav__card-sub{ margin:.25rem 0 1rem; color: var(--ink-2); font-size:.9rem; }
.mnav__card-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.mnav__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:46px; padding:0 1.15rem;
  border-radius:999px; font-weight:700; font-size:1rem; border:2px solid var(--ink); flex:1 1 auto; white-space:nowrap;
}
.mnav__btn .icon-svg{ margin:0; }
.mnav__btn--solid{ background: var(--ink); color: var(--cream); }
.mnav__btn--solid:hover{ background: var(--ink-2); color: var(--cream); }
.mnav__btn--wa{ background: var(--whatsapp); border-color: var(--whatsapp); color: var(--white); }
.mnav__btn--wa:hover{ background: var(--whatsapp-hover); border-color: var(--whatsapp-hover); color: var(--white); }
.mnav__btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

@media (max-width:380px){ .brand__tag{ display:none; } .hamburger{ padding:0 .85rem; } }

/* lock page scroll + tuck the floating WhatsApp button away while the menu is open */
html.menu-open, html.menu-open body{ overflow:hidden; }
html.menu-open .floating-whatsapp{ opacity:0; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .mnav, .mnav.is-open, .mnav__list li, .mnav__card, .mnav__link::after,
  .hamburger, .hamburger__icon i, .site-header{ transition-duration:.01s !important; transition-delay:0s !important; }
}

@media (min-width: 900px){
  .nav{ display:flex; }
  .hamburger{ display:none; }
  .mnav{ display:none !important; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-size:.9rem; color: var(--muted); padding: 1.25rem 0 0; }
.breadcrumbs a{ color: var(--muted); }
.breadcrumbs a:hover{ color: var(--rose-deep); }
.breadcrumbs [aria-current="page"]{ color: var(--ink); }

/* ---------- Page head pattern ---------- */
.page-head{ padding: 2rem 0 var(--section-pad); }
.page-head .lead{ margin-top: 1rem; }

/* ---------- Home hero — Brand Book p.21: powder stage, brush ring, arch photo ---------- */
.hero-brand{
  position:relative; overflow:hidden; isolation:isolate;
  background: var(--ea-powder);
  padding: clamp(2.5rem,6vw,5rem) 0 clamp(3.5rem,7vw,6rem);
}
.hero-brand__ring{
  position:absolute; z-index:-1; pointer-events:none;
  width: min(62rem, 140vw); aspect-ratio:1; inset-inline-end: -18%; top: -22%;
  background: url(../img/brand-ring.png) center/contain no-repeat; opacity:.22;
}
.hero-brand__inner{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero-brand__text{ display:flex; flex-direction:column; align-items:flex-start; }
.hero-brand__title{
  margin:0; font-family: var(--font-display); font-weight:300; color: var(--ea-plum);
  font-size: clamp(2.75rem, 7vw, 5.25rem); line-height:1.05; letter-spacing:-.01em;
}
.hero-brand__line{ display:block; }
.hero-brand__line--accent{ color: var(--ea-ink); }
.hero-brand__kicker{
  display:block; margin-top:1.25rem; font-family: var(--font-ui); font-weight:600;
  font-size: clamp(1rem,1.6vw,1.125rem); letter-spacing:.02em; line-height:1.4; color: var(--ea-plum);
}
.hero-brand__lead{ margin:1rem 0 0; max-width:34rem; color: var(--ea-body); font-size: clamp(1.0625rem,1.6vw,1.2rem); line-height:1.75; }
.hero-brand__cta{ margin-top:2rem; }
.hero-brand .hero-badges{ justify-content:flex-start; margin-top:2.25rem; }
.hero-brand .hero-badge{ background: var(--white); border-color: var(--hairline); box-shadow: var(--shadow-sm); color: var(--ea-body); font-weight:600; }
.hero-brand .hero-badge__icon, .hero-brand .icon-check{ color: var(--ea-mauve); }

.hero-brand__media{ position:relative; justify-self:center; width:min(100%, 28rem); }
.hero-brand__media::before{
  content:""; position:absolute; inset:-9% -11%; z-index:0;
  background: url(../img/brand-ring.png) center/contain no-repeat;
}
.hero-brand__img{
  position:relative; z-index:1; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius: 999px 999px 1.5rem 1.5rem; background: var(--ea-blush); box-shadow: var(--shadow-card-hover);
}
.hero-brand__seal{
  position:absolute; z-index:2; inset-inline-start:-1.25rem; bottom:1.75rem;
  width: clamp(5.5rem,11vw,7.5rem); aspect-ratio:1; border-radius:50%;
  background: var(--white); padding:.5rem; box-shadow: var(--shadow-card-hover);
}
.hero-brand__seal img{ width:100%; height:100%; object-fit:contain; }

.hero-badges{ list-style:none; margin: 2.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; position:relative; z-index:1; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  background: rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.5);
  padding:.6rem 1.1rem; border-radius: var(--radius-pill);
  font-size:.875rem; font-weight:600; color: var(--ink-2);
}

@media (max-width:899px){
  .hero-brand__inner{ grid-template-columns: minmax(0,1fr); }
  .hero-brand__media{ width:min(80%, 22rem); order:-1; }
  .hero-brand__ring{ width:150vw; inset-inline-end:-60%; top:-10%; }
}
@media (max-width:600px){
  .hero-brand__seal{ inset-inline-start:-.5rem; bottom:1rem; }
  .hero-brand__cta .btn{ flex:1 1 100%; }
  .hero-badge{ font-size:.8125rem; padding:.5rem .9rem; }
}

/* ---------- Cards ---------- */
.card{ background: var(--white); border-radius: var(--radius-card); padding: 1.75rem; border: 1px solid transparent; transition:.2s; }
.card:hover{ box-shadow: var(--shadow-card-hover); border-color: var(--rose-deep); }
.card h3{ font-size: 1.25rem; margin-bottom:.5rem; }
.card .price{ color: var(--rose-deep); font-weight:700; }

.arch-img{ width:100%; height:auto; border-radius: 999px 999px 1.5rem 1.5rem; aspect-ratio: 4/5; object-fit: cover; }
.feature-img{ width:100%; height:auto; border-radius: 1.5rem 1.5rem 999px 1.5rem; object-fit: cover; }

/* ---------- Price list (home/services) ---------- */
.price-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hairline); }
.price-row:last-child{ border-bottom:none; }
.price-row .num{ color: var(--rose); font-family: var(--font-display); font-size:1.5rem; margin-inline-end: .75rem; }
.price-row .name{ font-weight:700; color: var(--ink); }
.price-row .sub{ color: var(--muted); font-size:.92rem; }
.price-row .price{ color: var(--rose-deep); font-weight:700; white-space:nowrap; }

/* ---------- Dedicated pricing page ("מחירון") ---------- */
.stat-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.stat-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  background: var(--white); border:1px solid var(--hairline); color: var(--ink-2);
  padding:.65rem 1.15rem; border-radius: var(--radius-pill);
  font-size:.9rem; font-weight:700; box-shadow: 0 4px 14px rgba(122,75,87,.07);
}
.stat-pill .icon-svg{ color: var(--rose-deep); }

.pricing-list{ display:flex; flex-direction:column; gap:1rem; max-width:56rem; margin:0 auto; }
.pricing-row{
  display:flex; align-items:center; gap:1.5rem; padding:1.5rem 1.75rem;
  background: var(--white); border:1px solid var(--hairline); border-radius: var(--radius-card);
  text-decoration:none; color:inherit; transition:.2s;
}
.pricing-row:hover{ border-color: var(--rose-deep); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.pricing-row__num{ font-family: var(--font-display); font-size:1.6rem; color: var(--rose); flex-shrink:0; width:2.4rem; }
.pricing-row__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.pricing-row__name{ font-weight:700; color: var(--ink); font-size:1.1rem; }
.pricing-row__desc{ color: var(--muted); font-size:.92rem; line-height:1.5; }
.pricing-row__side{ flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; text-align:end; }
.pricing-row__price{ color: var(--rose-deep); font-weight:800; font-size:1.25rem; white-space:nowrap; }
.pricing-row__cta{ color: var(--rose-deep); font-size:.85rem; font-weight:600; white-space:nowrap; }

.trust-item{ text-align:center; padding:1rem; }
.trust-item .icon-svg{ color: var(--rose-deep); width:3rem; height:3rem; margin:0 auto 1rem; background: var(--white); border-radius:50%; box-shadow: 0 4px 14px rgba(122,75,87,.08); }
.trust-item .icon-svg svg{ width:22px; height:22px; }
.trust-item h3{ font-size:1.05rem; margin-bottom:.5rem; }

@media (max-width:640px){
  .pricing-row{ flex-direction:column; align-items:flex-start; gap:.85rem; padding:1.25rem 1.25rem; }
  .pricing-row__num{ width:auto; }
  .pricing-row__side{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; text-align:start; }
}

/* ---------- Service / Post detail ---------- */
.detail-hero{ display:grid; gap: 2.5rem; grid-template-columns: 1.1fr .9fr; align-items:center; }
/* minmax(0,1fr) — not bare "1fr" — is required here: a bare fr track keeps
   an automatic minimum size based on its content's natural size, and a
   replaced element that combines a width/height attribute with an
   aspect-ratio (like .arch-img) still contributes that natural size to the
   track even with min-width:0 on the item itself. minmax(0, ...) clamps the
   track's own minimum directly, which is the spec-correct fix. */
@media (max-width: 899px){ .detail-hero{ grid-template-columns: minmax(0,1fr); } }

/* Several sections (home/about/contact/article+TOC) set their own
   grid-template-columns inline per-page. min-width:0 stops a grid track
   from refusing to shrink below a fixed-width image's intrinsic size (the
   classic CSS Grid "blowout" bug), and the media query collapses every one
   of them to a single column on mobile — !important is required because an
   inline style attribute otherwise outranks any class-based rule. */
.responsive-grid-2 > *{ min-width:0; }
@media (max-width:899px){
  .responsive-grid-2{ grid-template-columns: minmax(0,1fr) !important; }
}
.toc{ position: sticky; top: 90px; align-self:start; background: var(--white); border-radius: var(--radius-card); padding: 1.25rem; border:1px solid var(--hairline); }
.toc h2{ font-family: var(--font-ui); font-weight:700; font-size:.95rem; margin-bottom:.75rem; color: var(--ink); }
.toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.toc a{ color: var(--muted); font-size:.92rem; display:block; padding:.35rem .5rem; border-radius:.5rem; }
.toc a:hover{ background: var(--blush); color: var(--rose-deep); }

.content-section{ max-width: 44rem; padding: 2rem 0; border-bottom: 1px solid var(--hairline); }
.content-section:last-child{ border-bottom:none; }
.content-section .num{ color: var(--rose); font-family: var(--font-display); font-size:1.1rem; }
.article-body{ font-size:18px; line-height:1.85; max-width:44rem; }

/* ---------- FAQ accordion ---------- */
.faq-item{ border-bottom: 1px solid var(--hairline); }
.faq-item:first-child{ border-top: 1px solid var(--hairline); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:none; text-align:start; padding: 1.25rem 0; cursor:pointer;
  font-weight:700; color: var(--ink); font-size:1.05rem;
}
.faq-q .icon{ color: var(--rose-deep); font-size:1.3rem; flex-shrink:0; }
.faq-a{ padding: 0 0 1.25rem; color: var(--ink-2); max-width: 44rem; }
.faq-a[hidden]{ display:none; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ margin-bottom:1rem; }

/* ---------- Contact ---------- */
.form-field{ margin-bottom: 1.25rem; }
.form-field label{ display:block; font-weight:600; margin-bottom:.4rem; color: var(--ink); }
.form-field input, .form-field textarea{
  width:100%; padding:.85rem 1rem; border-radius: var(--radius-input);
  border:1px solid rgba(43,33,36,.35); font: inherit; background: var(--white); color: var(--ink);
}
.form-field input:invalid[aria-invalid="true"], .form-field .is-invalid{ border-color: var(--error); }
.form-error{ color: var(--error); font-size:.85rem; margin-top:.35rem; }
.form-check{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1rem; font-size:.92rem; color: var(--ink-2); }
.form-alert{ padding:1rem 1.25rem; border-radius: var(--radius-input); margin-bottom:1.5rem; }
.form-alert--success{ background: var(--success-bg); color: var(--success-fg); }
.form-alert--error{ background: #FBEAEC; color: var(--error); }
.contact-tile{ display:flex; gap:1rem; align-items:flex-start; }

/* ---------- Inline SVG icon set (no emoji anywhere on the site) ---------- */
.icon-svg{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0; }
.icon-svg svg{ display:block; }
.icon-check{ color: var(--whatsapp); }
.icon-contact{ color: inherit; margin-top:.15rem; }
.map-frame{ border:0; width:100%; height:320px; border-radius: var(--radius-lg); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: var(--rose-light); padding: var(--section-pad) 0 2rem; }
.site-footer a{ color: var(--rose-light); }
.site-footer a:hover{ color: var(--white); }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,14rem),1fr)); margin-bottom: 2.5rem; }
.footer-logo{ width:48px; height:48px; border-radius:50%; margin-bottom:1rem; display:block; }
.footer-grid h3{ color: var(--white); font-family: var(--font-ui); font-size:1rem; margin-bottom:1rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-bottom{ border-top: 1px solid var(--hairline-dark); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; font-size:.85rem; }
.footer-legal-links{ display:flex; flex-wrap:wrap; gap:.4rem; }
@media (max-width:768px){
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* ---------- Floating buttons ---------- */
.floating-btn{
  position:fixed; bottom:20px; width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:9997;
  box-shadow: var(--shadow-float); cursor:pointer; border: 2px solid transparent; transition:.2s;
}
.floating-whatsapp{ inset-inline-end: 20px; background: var(--whatsapp); color:#fff; }
.floating-whatsapp:hover{ background: var(--whatsapp-hover); transform: scale(1.06); }

/* ---------- Blog filters ---------- */
.tag-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin: 1.5rem 0 2.5rem; }
.tag-chip{
  padding:.5rem 1.1rem; border-radius: var(--radius-pill); border:1px solid var(--hairline);
  background: var(--white); color: var(--ink); font-weight:600; font-size:.9rem; cursor:pointer;
}
.tag-chip[aria-pressed="true"]{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* ---------- Utility ---------- */
.visually-hide-mobile{ display:none; }
@media (min-width:900px){ .visually-hide-mobile{ display:initial; } }
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.stack{ display:flex; flex-direction:column; gap:1rem; }
.row-wrap{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ==========================================================================
   Accessibility utility classes (toggled by a11y.js)
   ========================================================================== */
html.a11y-contrast body, html.a11y-contrast body *{ background-color:#000 !important; color:#ffff00 !important; border-color:#ffff00 !important; }
html.a11y-contrast img{ filter: grayscale(100%) contrast(150%); }
html.a11y-links a{ text-decoration:underline !important; text-underline-offset:4px; background:#ffff00 !important; color:#000 !important; font-weight:700 !important; padding:0 4px !important; border-radius:3px; }
html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4{ outline:2px solid var(--rose-deep) !important; background: rgba(255,255,255,.5) !important; padding:2px 6px !important; border-radius:4px; }
html.a11y-hide-images img, html.a11y-hide-images svg, html.a11y-hide-images video{ visibility:hidden !important; }
html.a11y-readable, html.a11y-readable *{ font-family: Arial, Helvetica, sans-serif !important; }
html.a11y-grayscale{ filter: grayscale(100%); }
html.a11y-invert{ filter: invert(100%) hue-rotate(180deg); }
html.a11y-still *, html.a11y-still{ animation:none !important; transition:none !important; }

/* ==========================================================================
   Accessibility widget (adapted from Logicode Accessibility plugin)
   Recolored to the site's rose/ink palette; functionality unchanged.
   ========================================================================== */
#a11y-screen-filter{ display:none; position:fixed; inset:0; pointer-events:none; z-index:99996; }
#a11y-reading-guide-line{ display:none; position:fixed; top:50%; inset-inline-start:0; width:100%; height:6px; background-color:var(--rose-deep); z-index:99999; pointer-events:none; box-shadow:0 0 15px rgba(0,0,0,.5); }

button#a11y-trigger{
  position:fixed !important; bottom:20px !important; inset-inline-start:20px !important;
  width:60px !important; height:60px !important; border-radius:50% !important;
  background-color:var(--ink) !important; color:var(--rose-light) !important;
  border:2px solid var(--rose-light) !important; display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:26px !important; cursor:pointer !important; z-index:9998 !important; box-shadow:var(--shadow-float) !important;
  transition:.3s !important; padding:0 !important;
}
button#a11y-trigger:hover{ transform:scale(1.08) !important; background-color:var(--rose-deep) !important; color:#fff !important; }

#a11y-panel{
  display:none; position:fixed !important; bottom:95px !important; inset-inline-start:20px !important;
  width:380px !important; max-width:calc(100vw - 40px) !important; max-height:80vh !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  background-color:var(--white) !important; border-radius:16px !important; box-shadow:0 10px 40px rgba(0,0,0,.2) !important;
  z-index:9999 !important; border:1px solid var(--hairline) !important; font-family:var(--font-ui) !important; color:var(--ink-2) !important;
}
#a11y-panel *{ box-sizing:border-box; min-width:0; }
#a11y-panel .a11y-header{ background:var(--blush); padding:15px 20px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; border-bottom:1px solid var(--hairline); }
#a11y-panel .a11y-header h3{ margin:0; font-size:1.1rem; display:flex; align-items:center; gap:8px; color:var(--ink); font-family:var(--font-ui); font-weight:700; }
#a11y-panel button.a11y-close{ background:transparent; border:none; color:var(--error); cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:4px; }
#a11y-panel .a11y-body{ padding:20px; }
#a11y-panel .a11y-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
#a11y-panel .a11y-grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
#a11y-panel button.a11y-btn{
  background-color:var(--cream); border:1px solid var(--hairline); padding:14px 5px; border-radius:12px;
  cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:600; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; transition:.2s;
  text-align:center; width:100%; min-height:80px; line-height:1.2;
  overflow-wrap:break-word; word-break:break-word; hyphens:auto;
}
#a11y-panel button.a11y-btn .ic{ color:var(--rose-deep); display:inline-flex; align-items:center; justify-content:center; }
#a11y-panel button.a11y-btn:hover{ background-color:var(--blush); border-color:var(--rose-deep); color:var(--ink); }
#a11y-panel button.a11y-btn.active{ background-color:var(--rose-deep); border-color:var(--rose-deep); color:#fff; }
#a11y-panel button.a11y-btn.active .ic{ color:#fff; }
#a11y-panel button.a11y-reset-btn{ width:100%; flex-direction:row; font-size:1rem; color:var(--error); border-color:rgba(155,44,60,.3); background-color:#FBEAEC; margin-top:6px; padding:14px; min-height:48px; }
#a11y-panel .a11y-sliders{ margin-bottom:20px; }
#a11y-panel .a11y-slider-box{ background:var(--cream); border:1px solid var(--hairline); border-radius:12px; padding:14px; margin-bottom:12px; }
#a11y-panel .slider-header{ display:flex; justify-content:space-between; margin-bottom:8px; color:var(--ink-2); font-size:.9rem; font-weight:600; }
#a11y-panel .slider-value{ color:#fff; font-weight:700; background:var(--rose-deep); padding:2px 8px; border-radius:6px; font-size:.8rem; }
#a11y-panel input[type=range]{ -webkit-appearance:none; width:100%; background:transparent; }
#a11y-panel input[type=range]::-webkit-slider-runnable-track{ width:100%; height:6px; cursor:pointer; background:var(--hairline); border-radius:4px; }
#a11y-panel input[type=range]::-webkit-slider-thumb{ height:18px; width:18px; border-radius:50%; background:var(--rose-deep); cursor:pointer; -webkit-appearance:none; margin-top:-6px; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.2); }
#a11y-panel .a11y-statement-link{ text-align:center; margin-top:16px; font-size:.85rem; }
@media (max-width:480px){
  #a11y-panel{ inset-inline-start:10px !important; inset-inline-end:10px !important; width:auto !important; bottom:80px !important; }
  #a11y-panel .a11y-grid-3{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   Cookie consent (adapted from Logicode Cookie Consent plugin)
   Recolored to the site's cream/ink/rose palette; functionality unchanged
   except that consent is stored client-side only (no WordPress backend on
   a static site) via localStorage, with the same accept/decline/customize
   flow and equal-weight Accept/Reject buttons required by Amendment 13.
   ========================================================================== */
#cookie-banner{
  position:fixed; bottom:100px; inset-inline-end:20px; width:380px; max-width:calc(100vw - 40px);
  background: var(--ink); color: var(--rose-light); border:1px solid var(--hairline-dark);
  border-radius:16px; padding:24px; box-shadow:0 10px 40px rgba(0,0,0,.35);
  z-index:9994; display:none; transform:translateY(20px); opacity:0; transition:all .35s ease;
}
#cookie-banner.show{ display:block; transform:translateY(0); opacity:1; }
#cookie-banner .cb-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
#cookie-banner .cb-head .ic{ font-size:1.3rem; color: var(--rose); }
#cookie-banner .cb-head span.title{ font-size:1.1rem; font-weight:800; color:#fff; }
#cookie-banner p{ color: var(--rose-light); font-size:.92rem; line-height:1.5; margin:0 0 18px; }
#cookie-banner .cb-row{ display:flex; gap:10px; }
.cb-btn{ flex:1; padding:12px; border-radius:8px; font:inherit; font-size:.92rem; font-weight:700; cursor:pointer; border:none; min-height:44px; }
.cb-btn-accept{ background: var(--rose-light); color: var(--ink); }
.cb-btn-accept:hover{ filter:brightness(1.08); }
.cb-btn-decline{ background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); }
.cb-btn-decline:hover{ background: rgba(255,255,255,.16); }
.cb-btn-customize{ background:transparent; color: var(--rose-light); text-decoration:underline; padding:6px; text-underline-offset:4px; width:100%; margin-top:8px; border:none; cursor:pointer; font:inherit; font-size:.88rem; }
.cb-btn-customize:hover{ color:#fff; }

#cookie-modal-overlay{ position:fixed; inset:0; background:rgba(43,33,36,.6); z-index:9999; display:none; align-items:center; justify-content:center; }
#cookie-modal-overlay.show{ display:flex; }
.cookie-modal{ background: var(--white); border-radius:20px; width:92%; max-width:520px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.c-modal-header{ padding:22px 25px; border-bottom:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background: var(--white); }
.c-modal-header h3{ margin:0; font-family:var(--font-ui); color: var(--ink); font-size:1.2rem; font-weight:700; }
.c-modal-close{ background:none; border:none; color: var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:4px; }
.c-modal-body{ padding:22px 25px; }
.c-modal-desc{ color: var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:20px; }
.cookie-option{ background: var(--cream); border:1px solid var(--hairline); border-radius:12px; padding:18px; margin-bottom:14px; }
.c-opt-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:1rem; }
.c-opt-title{ color: var(--ink); font-weight:700; font-size:1rem; }
.c-opt-desc{ color: var(--muted); font-size:.85rem; line-height:1.5; margin:0; }
.toggle-switch{ position:relative; display:inline-block; width:48px; height:26px; flex-shrink:0; }
.toggle-switch input{ opacity:0; width:0; height:0; }
.toggle-slider{ position:absolute; inset:0; background:#D9CDCE; transition:.3s; border-radius:34px; cursor:pointer; }
.toggle-slider::before{ content:''; position:absolute; height:18px; width:18px; left:4px; bottom:4px; background:#fff; transition:.3s; border-radius:50%; }
html[dir="rtl"] .toggle-slider::before{ left:auto; right:4px; }
.toggle-switch input:checked + .toggle-slider{ background: var(--rose-deep); }
.toggle-switch input:checked + .toggle-slider::before{ transform: translateX(-22px); }
html[dir="rtl"] .toggle-switch input:checked + .toggle-slider::before{ transform: translateX(-22px); }
.toggle-switch input:disabled + .toggle-slider{ opacity:.6; cursor:not-allowed; }
.c-modal-footer{ padding:18px 25px 24px; }
#cookie-revoke-btn{
  position:fixed; bottom:92px; inset-inline-end:26px; width:48px; height:48px; border-radius:50%; padding:0;
  background: var(--cream); color: var(--rose-deep); border:1.5px solid var(--rose-deep);
  display:none; align-items:center; justify-content:center; cursor:pointer; z-index:9993;
  box-shadow: 0 0 0 3px rgba(251,248,246,.9), var(--shadow-float);
  transition: background .2s, color .2s, transform .2s;
}
#cookie-revoke-btn svg{ width:24px; height:24px; display:block; }
#cookie-revoke-btn:hover, #cookie-revoke-btn:focus-visible{ background: var(--rose-deep); color:#fff; transform:scale(1.06); }
@media (max-width:768px){
  #cookie-banner{ bottom:95px; inset-inline-end:15px; inset-inline-start:15px; width:auto; }
  #cookie-revoke-btn{ bottom:86px; inset-inline-end:22px; width:44px; height:44px; }
}


/* ==========================================================================
   EA Beautician brand layer (Brand Book v1.0)
   ========================================================================== */

/* Menus keep their original sans voice and behaviour — only colours change */
.mega, .mnav, .hamburger{ --font-display: var(--font-menu); }

body{ font-weight:400; color: var(--ea-body); }
h1,h2,h3,h4{ font-weight:400; color: var(--ea-plum); letter-spacing:-.005em; text-wrap:balance; }
h1{ font-weight:300; }
h2.h2-section{ font-weight:300; color: var(--ea-plum); }
h2.h2-content{ font-weight:400; }
p, li{ text-wrap:pretty; }
strong, b{ font-weight:600; }

/* Eyebrow — thin rule + tracked label (p.11) */
.eyebrow{ font: 600 13px/1.3 var(--font-latin); letter-spacing:.24em; color: var(--ea-plum); }
.eyebrow::before{ background: var(--ea-rose); width:2.5rem; }
.eyebrow--latin{ text-transform:uppercase; letter-spacing:.32em; font-weight:500; font-size:13px; direction:ltr; unicode-bidi:isolate; }
.section--ink .eyebrow, .section--plum .eyebrow{ color: var(--ea-blush); }
.section--ink .eyebrow::before{ background: var(--ea-blush); }

/* Script accent — Mrs Saint Delafield, one Latin word above section titles */
.script-accent{
  display:block; font-family: var(--font-script); font-weight:400; color: var(--ea-ink);
  font-size: clamp(2.5rem, 5.5vw, 3.75rem); line-height:.9; margin: 0 0 -.15em;
  direction:ltr; unicode-bidi:isolate; text-align:right; letter-spacing:0;
  user-select:none; pointer-events:none;
}
.center .script-accent, .cta-band .script-accent, [style*="text-align:center"] > .script-accent{ text-align:center; }
.section--ink .script-accent{ color: var(--ea-blush); }
.page-head .script-accent{ font-size: clamp(2.75rem, 6vw, 4.25rem); }

/* Buttons (p.18) — pill, plum, weight 600, soft motion */
.btn{ font-weight:600; letter-spacing:.01em; transition: background-color .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease); }
.btn--primary{ background: var(--ea-plum); }
.btn--primary:hover{ background: var(--ea-plum-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost{ color: var(--ea-plum); border-color: var(--ea-plum); }
.btn--ghost:hover{ background: var(--ea-plum); color: var(--white); border-color: var(--ea-plum); }
.btn .icon-svg svg{ width:18px; height:18px; }

/* Text links — plum with rose underline */
main p a:not(.btn), .content-section a:not(.btn), .article-body a:not(.btn){ color: var(--ea-plum); text-decoration: underline; text-decoration-color: var(--ea-rose); text-underline-offset: 4px; }
main p a:not(.btn):hover{ text-decoration-color: var(--ea-plum); }

/* Sections */
.section--blush{ background: var(--ea-powder); }
.section--ink{
  position:relative; overflow:hidden; isolation:isolate;
  background: var(--ea-plum); color: var(--ea-blush);
}
.section--ink::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width: min(44rem, 120vw); aspect-ratio:1; inset-inline-start:-14rem; bottom:-18rem;
  background: url(../img/brand-ring-white.png) center/contain no-repeat; opacity:.22;
}
.section--ink p{ color: var(--ea-blush); }
.section--ink .btn--primary{ background: var(--white); color: var(--ea-plum); }
.section--ink .btn--primary:hover{ background: var(--ea-powder); color: var(--ea-plum); }
.section--ink .btn--ghost{ color: var(--white) !important; border-color: rgba(255,255,255,.55) !important; }
.section--ink .btn--ghost:hover{ background: var(--white); color: var(--ea-plum) !important; }
.section--ink .contact-tile{ color: var(--white); }
.section--ink .contact-tile .icon-svg{ color: var(--ea-blush); }

/* Page head */
.page-head{ position:relative; isolation:isolate; }
.page-head h1{ color: var(--ea-plum); }
.breadcrumbs{ font-size:.875rem; }
.breadcrumbs a{ text-decoration:underline; text-decoration-color: var(--ea-rose); text-underline-offset:3px; }

/* Cards (p.18) — white, hairline, plum-tinted lift */
.card{ border:1px solid var(--hairline); box-shadow: var(--shadow-sm); transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease); }
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--ea-mauve); }
.card h3{ font-family: var(--font-display); font-weight:400; color: var(--ea-plum); font-size:1.375rem; line-height:1.3; }
.card .eyebrow{ font-size:12px; }
.card .num, .content-section .num, .price-row .num, .pricing-row__num{
  font-family: var(--font-latin); font-weight:300; color: var(--ea-mauve); line-height:1;
}
.card .num{ display:inline-flex; align-items:center; justify-content:center; width:3.25rem; height:3.25rem; margin-bottom:1rem;
  background: url(../img/brand-ring.png) center/contain no-repeat; font-size:1.5rem !important; }
.card .price, .price-row .price, .pricing-row__price, .mega-card__price{ font-family: var(--font-latin); }
.card .price{ font-size:1.5rem; font-weight:500; color: var(--ea-plum); margin:0; }
.pricing-row__price{ font-weight:500; font-size:1.5rem; color: var(--ea-plum); }
.price{ color: var(--ea-plum); }

/* Images */
.feature-img{ box-shadow: var(--shadow-md); }
.arch-img{ box-shadow: var(--shadow-card-hover); background: var(--ea-blush); }

/* Content / articles */
.content-section{ border-bottom-color: var(--hairline); }
.content-section .num{ font-size:1.5rem; margin:0 0 .25rem; }
.content-section h2{ color: var(--ea-plum); }
.toc{ border-color: var(--hairline); box-shadow: var(--shadow-sm); }
.toc h2{ font-family: var(--font-latin); letter-spacing:.2em; font-weight:600; color: var(--ea-plum); font-size:.875rem; }

/* FAQ */
.faq-q{ font-family: var(--font-display); font-weight:400; font-size:1.2rem; color: var(--ea-plum); }
.faq-q .icon{ color: var(--ea-mauve); }

/* Forms (p.18) */
.form-field label{ color: var(--ea-plum); font-weight:600; }
.form-field input, .form-field textarea{ border-color: rgba(107,70,80,.35); background: var(--white); transition: border-color .24s var(--ease), box-shadow .24s var(--ease); }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--ea-mauve); box-shadow: 0 0 0 3px rgba(186,144,152,.3); }
input[type=checkbox]{ accent-color: var(--ea-plum); }

/* Tag chips */
.tag-chip{ border-color: var(--hairline); color: var(--ea-plum); font-weight:600; min-height:44px; }
.tag-chip:hover{ border-color: var(--ea-plum); }
.tag-chip[aria-pressed="true"]{ background: var(--ea-plum); border-color: var(--ea-plum); }

/* Stat pills / trust */
.stat-pill{ box-shadow: var(--shadow-sm); font-weight:600; }
.stat-pill .icon-svg, .trust-item .icon-svg{ color: var(--ea-mauve); }

/* Footer — ink with brush ring */
.site-footer{ position:relative; overflow:hidden; isolation:isolate; background: var(--ea-ink); color: var(--ea-blush); }
.site-footer::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width: 36rem; aspect-ratio:1; inset-inline-end:-12rem; top:-14rem;
  background: url(../img/brand-ring-white.png) center/contain no-repeat; opacity:.08;
}
.footer-logo{ width:76px; height:76px; background: var(--white); padding:4px; }
.footer-grid h3{ font-family: var(--font-latin); font-weight:500; letter-spacing:.2em; font-size:.9375rem; color: var(--white); }
.site-footer a{ color: var(--ea-blush); }

/* Header — logo per p.06 minimum 64px digital */
.brand img{ width:64px; height:64px; background: var(--white); }
.brand__name{ font-family: var(--font-display); font-weight:400; color: var(--ea-plum); font-size:1.25rem; }
.brand__tag{ color: var(--ea-taupe); }

@media (max-width:600px){
  .brand img{ width:52px; height:52px; }
  .card h3{ font-size:1.25rem; }
  .row-wrap > .btn{ flex:1 1 auto; }
}

/* Reduced motion / a11y-still */
@media (prefers-reduced-motion: reduce){ .btn, .card{ transition:none !important; transform:none !important; } }
html.a11y-still .card:hover, html.a11y-still .btn:hover{ transform:none !important; }
html.a11y-readable .script-accent{ font-family: var(--font-script) !important; }
html.a11y-contrast .section--ink::before, html.a11y-contrast .site-footer::before, html.a11y-contrast .hero-brand__ring, html.a11y-contrast .hero-brand__media::before{ display:none; }

/* Price notes (mesotherapy series vs single) */
.price-note{ margin:.75rem 0 0; font-size:.9375rem; color: var(--ea-taupe); }
.pricing-row__note{ font-size:.8125rem; color: var(--ea-taupe); white-space:nowrap; }
@media (max-width:640px){ .pricing-row__side{ flex-wrap:wrap; } }

.page-head, .breadcrumbs, .container{ padding-inline: var(--container-pad); }

/* ==== SEO/GEO content layer: summary box, figures, author box, area pages ==== */
.byline{ margin:1rem 0 0; font-size:.9375rem; color: var(--ea-taupe); }
.byline a{ color: var(--ea-plum); font-weight:600; text-decoration: underline; text-underline-offset:3px; }
.post-hero, .area-hero-img{ display:block; width:100%; height:auto; border-radius: 1.5rem; box-shadow: var(--shadow-md); background: var(--ea-powder); aspect-ratio:1200/630; object-fit:cover; }
.tldr{ background: var(--ea-powder); border:1px solid var(--ea-blush); border-inline-start:4px solid var(--ea-mauve); border-radius: 1rem; padding: 1.25rem 1.5rem; margin: 0 0 2rem; }
.tldr__title{ font-family: var(--font-display); font-weight:500; font-size:1.25rem; color: var(--ea-plum); margin:0 0 .5rem; }
.tldr p{ margin:0 0 .75rem; }
.tldr p:last-child{ margin-bottom:0; }
.tldr ul{ margin:.5rem 0 0; padding-inline-start:1.25rem; }
.tldr li{ margin:.25rem 0; }
.article-body p{ margin: 0 0 1.1rem; }
.article-body ul, .article-body ol{ margin: 0 0 1.25rem; padding-inline-start:1.4rem; }
.article-body li{ margin:.35rem 0; }
.article-body a:not(.btn){ color: var(--ea-plum); text-decoration: underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.article-body a:not(.btn):hover{ color: var(--ea-plum-deep); text-decoration-thickness:2px; }
.article-figure{ margin: 1.75rem 0 2rem; }
.article-figure img{ display:block; width:100%; height:auto; border-radius:1.25rem; border:1px solid var(--ea-blush); background: var(--ea-powder); }
.article-figure figcaption{ margin-top:.6rem; font-size:.9rem; color: var(--ea-taupe); text-align:center; }
.disclaimer{ margin:2rem 0 0; font-size:.875rem; color: var(--ea-taupe); border-top:1px solid var(--hairline); padding-top:1rem; }
.author-box{ display:flex; gap:1rem; align-items:flex-start; margin-top:2rem; padding:1.25rem; border:1px solid var(--ea-blush); border-radius:1rem; background:#fff; }
.author-box img{ width:72px; height:72px; border-radius:50%; flex:none; background:#fff; }
.author-box p{ margin:0; font-size:.95rem; }
.author-box .author-box__name{ font-family: var(--font-display); font-size:1.15rem; color: var(--ea-plum); margin-bottom:.25rem; }
.card--post img{ display:block; width:100%; height:auto; border-radius:.9rem; margin-bottom:1rem; aspect-ratio:1200/630; object-fit:cover; background: var(--ea-powder); }
.chip-links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.chip-links a{ display:inline-block; padding:.55rem 1rem; border:1px solid var(--ea-blush); border-radius:999px; background:#fff; color: var(--ea-plum); font-weight:600; font-size:.95rem; text-decoration:none; min-height:44px; line-height:1.6; }
.chip-links a:hover, .chip-links a:focus-visible{ border-color: var(--ea-plum); background: var(--ea-plum); color:#fff; }
.area-facts{ position:sticky; top:90px; align-self:start; background:#fff; border:1px solid var(--ea-blush); border-radius:1.25rem; padding:1.4rem; }
.area-facts h2{ font-family: var(--font-latin); letter-spacing:.2em; font-weight:600; color: var(--ea-plum); font-size:.875rem; margin:0 0 .9rem; }
.area-facts dl{ margin:0 0 1.1rem; }
.area-facts dt{ font-size:.8125rem; color: var(--ea-taupe); margin-top:.7rem; }
.area-facts dd{ margin:.1rem 0 0; font-weight:600; color: var(--ea-ink); }
.area-grid{ display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%,17rem),1fr)); }
.area-card h3{ margin-bottom:.25rem; }
.area-card__travel{ margin:0 0 .75rem; font-size:.875rem; color: var(--ea-taupe); }
.area-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem; }
.area-card a{ display:block; padding:.4rem 0; color: var(--ea-plum); text-decoration:none; font-weight:600; }
.area-card a:hover{ text-decoration:underline; }
.chip-inline{ margin:.5rem 0 0; line-height:2; }
.chip-inline a{ color: var(--ea-plum); font-weight:600; }
.nav{ gap: clamp(.9rem, 1.6vw, 1.5rem); }
@media (max-width: 899px){ .area-facts{ position:static; } }
.footer-areas a{ font-size:.9rem; }
.post-head .script-accent, .detail-hero .script-accent{ margin-bottom:.12em; }
.area-card{ text-align:start; }
.area-card a{ font-size:.95rem; }

/* ---- Mega menu: service areas ---- */
.mega--areas .mega__inner{ grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,.95fr); }
.mega__chips{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:.6rem; }
.mega-area{
  display:flex; flex-direction:column; gap:.1rem; padding:.7rem .9rem; border:1px solid var(--hairline); border-radius:.85rem;
  background:#fff; text-decoration:none; color: var(--ink); min-height:44px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease, background-color .25s ease;
}
.mega-area:hover, .mega-area:focus-visible{ border-color: var(--rose-deep); background: var(--blush); color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(122,75,87,.35); }
.mega-area__name{ font-weight:700; font-size:.97rem; line-height:1.25; }
.mega-area__time{ font-size:.78rem; color: var(--ea-taupe); }
.mega--areas .mega__col--links .mega-row__name{ font-size:.93rem; }
@media (max-width: 1099px){
  .mega--areas .mega__inner{ grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
  .mega--areas .mega__col--links{ display:none; }
  .mega--areas .mega__col--help{ padding-inline-end:0; }
  .mega__chips{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* ==========================================================================
   Stream A additions (Laravel port): account icon, booking CTAs, contact honeypot, products.
   Everything above is the approved design and is untouched; new boxes use border-radius <= 8px.
   ========================================================================== */

/* ---- header: account icon next to the primary CTA ---- */
.nav-account{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0;
  border-radius:8px; color: var(--ea-plum); border:1px solid transparent; padding:0 !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nav a.nav-account:not(.btn){ padding:0; border-bottom:1px solid transparent; }
.nav a.nav-account:not(.btn):hover, .nav a.nav-account:not(.btn):focus-visible{ background: var(--ea-powder); border-color: var(--hairline); color: var(--ea-plum); }
.nav-account .icon-svg svg{ width:22px; height:22px; }
.nav-account:focus-visible{ outline:2px solid var(--ea-plum); outline-offset:2px; }
.nav-cta + .nav-account{ margin-inline-start:-.35rem; }

/* tighter header between 900px and 1180px (account icon + optional "products" item must still fit on one line) */
@media (min-width: 900px) and (max-width: 1179px){
  .nav{ gap: clamp(.55rem, 1.1vw, .95rem); }
  .nav a:not(.btn){ font-size:.93rem; }
  .nav-cta{ padding-inline:.95rem; font-size:.93rem; }
  .site-header__inner{ gap:.75rem; }
  .brand img{ width:52px; height:52px; }
  .brand__name{ font-size:1.12rem; }
  .nav-mega-toggle{ width:26px; }
}
@media (min-width: 900px){
  .nav a:not(.btn), .nav-cta, .site-header .brand__name{ white-space:nowrap; }
}
@media (min-width: 1100px) and (max-width: 1279px){
  .site-header:has(.nav--has-products) .brand__tag{ display:none; }
  .nav--has-products{ gap:.9rem; }
}
@media (min-width: 900px) and (max-width: 999px){
  .site-header .brand > span{ display:none; }
  .nav--has-products{ gap:.5rem; }
  .nav--has-products a:not(.btn){ font-size:.88rem; }
  .nav--has-products .nav-cta{ padding-inline:.8rem; font-size:.88rem; }
  .nav--has-products .nav-mega-toggle{ width:22px; }
}

/* mobile menu: booking + account buttons */
.mnav__btn--book{ background: var(--ea-plum); border-color: var(--ea-plum); color:#fff; }
.mnav__btn--book:hover{ background: var(--ea-plum-deep); border-color: var(--ea-plum-deep); color:#fff; }
.mnav__btn--account{ background: transparent; color: var(--ink); }
.mnav__btn--account:hover{ background: rgba(28,26,27,.08); color: var(--ink); }

/* contact form: honeypot (never visible, never focusable) + booking hint */
.hp-field{ position:absolute !important; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.form-book-hint{ margin:1rem 0 0; text-align:center; color: var(--muted); font-size:.95rem; }
.form-book-hint a{ color: var(--ea-plum); font-weight:700; }

/* ---- products ---- */
.product-grid{ display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.product-card{ display:flex; flex-direction:column; padding:0; border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; }
.product-card[hidden]{ display:none; }
.product-card__media{ position:relative; display:block; aspect-ratio:1/1; background: var(--ea-powder); overflow:hidden; }
.product-card__media img{ display:block; width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.product-card:hover .product-card__media img{ transform: scale(1.04); }
.product-card__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: var(--ea-rose); }
.product-card__body{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.25rem 1.3rem; flex:1; }
.product-card__body h3{ margin:0; font-size:1.15rem; }
.product-card .product-card__cat{ margin:0; font-size:11px; }
.product-card__meta{ font-size:.85rem; color: var(--ea-taupe); }
.product-card__desc{ font-size:.92rem; color: var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card__price{ margin-top:auto; padding-top:.5rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.product-card__price .price{ font-size:1.35rem; }
.product-card__was{ color: var(--ea-taupe); font-size:.95rem; }
.product-badge{
  position:absolute; top:.75rem; inset-inline-start:.75rem; padding:.2rem .65rem; border-radius:6px;
  font-size:.78rem; font-weight:700; line-height:1.5; letter-spacing:.02em;
}
.product-badge--sale{ background: var(--ea-plum); color:#fff; }
.product-badge--out{ background: var(--ink); color:#fff; }
.product-card__media .product-badge--out{ inset-inline-start:auto; inset-inline-end:.75rem; }
.product-badge--inline{ position:static; display:inline-block; }
.product-note{
  display:flex; align-items:center; gap:.6rem; margin:0 0 1.5rem; padding:.8rem 1rem; border-radius:8px;
  background: var(--ea-powder); border:1px solid var(--hairline); color: var(--ea-plum); font-weight:600; font-size:.95rem;
}
.product-note .icon-svg{ color: var(--ea-mauve); flex-shrink:0; }
.product-detail{ display:grid; gap:3rem; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:start; }
@media (max-width: 899px){ .product-detail{ grid-template-columns: minmax(0,1fr); gap:1.75rem; } }
.product-gallery__main{ aspect-ratio:1/1; border-radius:8px; overflow:hidden; background: var(--ea-powder); border:1px solid var(--hairline); }
.product-gallery__main img{ display:block; width:100%; height:100%; object-fit:cover; }
.product-gallery__main--empty{ display:flex; align-items:center; justify-content:center; color: var(--ea-rose); }
.product-gallery__thumbs{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.product-gallery__thumb{
  display:block; width:72px; height:72px; padding:0; border-radius:8px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background: var(--ea-powder); min-width:44px; min-height:44px;
}
.product-gallery__thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.product-gallery__thumb[aria-pressed="true"]{ border-color: var(--ea-plum); }
.product-gallery__thumb:focus-visible{ outline:2px solid var(--ea-plum); outline-offset:2px; }
.product-info h1{ font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom:.5rem; }
.product-info__meta{ margin:0 0 .75rem; color: var(--ea-taupe); font-weight:600; }
.product-info__price{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:1rem 0; }
.product-info__price .price{ font-size:1.9rem; font-weight:500; font-family: var(--font-latin); color: var(--ea-plum); }
.product-info__sku{ margin:1.25rem 0 0; color: var(--ea-taupe); font-size:.88rem; }
.product-stock{ margin:0 0 1rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce){ .product-card__media img{ transition:none; } .product-card:hover .product-card__media img{ transform:none; } }
html.a11y-still .product-card:hover .product-card__media img{ transform:none; }

/* brand block never shrinks / wraps (the nav gives way instead) */
.site-header .brand{ flex-shrink:0; }
.site-header .brand__tag{ white-space:nowrap; }
@media (min-width: 1280px) and (max-width: 1399px){
  .nav--has-products{ gap:1rem; }
  .nav--has-products a:not(.btn){ font-size:.97rem; }
}
/* cookie banner: second link row + privacy center link */
.cb-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cb-links .cb-btn-customize{ width:auto; display:inline-block; text-decoration:underline; }
.cb-privacy-link{ display:block; text-align:center; margin-top:14px; font-size:.9rem; color:inherit; text-decoration:underline; text-underline-offset:4px; opacity:.85; }
/* privacy center page */
.pc-grid{ display:grid; gap:20px; max-width:860px; margin:0 auto; }
.pc-card{ background:var(--cream, #fff); border:1px solid var(--hairline, rgba(107,70,80,.18)); border-radius:8px; padding:22px; }
.pc-card h2{ margin:0 0 6px; font-size:1.25rem; }
.pc-card p{ margin:.2em 0 1em; }
.pc-state{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.vid{ display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; letter-spacing:.04em; font-weight:700; background:#EAD7D9; color:#563842; border-radius:6px; padding:2px 8px; direction:ltr; unicode-bidi:isolate; }
.vid--lg{ font-size:1.25rem; padding:6px 14px; }
.pc-id__row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.pc-id__none{ opacity:.8; }
.cb-vid{ margin:0 0 10px; font-size:.9rem; text-align:center; }
.vid-toast{ position:fixed; inset-inline:12px; bottom:12px; z-index:10000; max-width:440px; margin-inline:auto; background:#563842; color:#fff; border-radius:8px; padding:12px 16px; box-shadow:0 6px 24px rgba(0,0,0,.25); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:space-between; font-size:.95rem; }
.vid-toast a{ color:#fff; text-decoration:underline; }
.vid-toast .vid{ background:#fff; color:#563842; }
.pc-pill{ display:inline-block; border:1px solid var(--hairline, rgba(107,70,80,.25)); border-radius:6px; padding:3px 10px; font-size:.9rem; }
.pc-pill.is-on{ background:#EAD7D9; border-color:#EAD7D9; color:#563842; font-weight:700; }
.pc-log{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pc-log li{ border:1px solid var(--hairline, rgba(107,70,80,.18)); border-radius:8px; padding:10px 12px; font-size:.95rem; }
.pc-log .pc-log__meta{ opacity:.75; font-size:.88rem; }
.pc-form .form-field{ margin-bottom:14px; }