/* ============================================================
Zdorovo Dental — Service page kit — self-contained stylesheet
Assembled from the design system: tokens (colors, typography,
spacing, base) + shared/site.css + service-page.css.
Fonts load via the Google Fonts in the page .
Do NOT edit by hand — regenerate from the design-system sources.
============================================================ */
/* ===== source: tokens/colors.css ===== */
/* ============================================================
Zdorovo Dental — Color tokens
Brand: fresh medical emerald green (sampled from the live site)
on a calm slate-ink / white-card / light-gray-page system.
============================================================ */
:root {
/* --- Brand green scale --- */
--green-50: #ebf7f0;
--green-100: #d6efe1;
--green-200: #a9dcc0;
--green-300: #6fc79b;
--green-400: #38ae73;
--green-500: #1bae70; /* primary brand green */
--green-600: #159a61; /* buttons / hover / links */
--green-700: #0f7a4c;
--green-800: #0e5a35;
--green-900: #0b4429;
/* --- Ink / neutral (slate) scale --- */
--ink-900: #0f172a; /* strongest display ink */
--ink-800: #1e293b; /* section headings */
--ink-700: #334155;
--ink-600: #475569; /* body copy */
--ink-500: #64748b; /* muted / captions */
--ink-400: #94a3b8;
--ink-300: #cbd5e1;
--ink-200: #e2e8f0;
--ink-100: #eef1f3;
--ink-50: #f7f8f9; /* page background */
--white: #ffffff;
/* --- Support accents --- */
--blue-500: #2563eb; /* clinic-uniform blue / verified badge */
--blue-600: #1d4ed8;
--gold-400: #f5b400; /* review stars */
--facebook: #1877f2;
/* --- Semantic surfaces --- */
--surface: var(--white); /* cards, sheets */
--surface-page: var(--ink-50); /* page canvas */
--surface-tint: var(--green-50);/* trust strips, icon wells */
--surface-ink: var(--ink-900); /* dark footer / contrast band */
/* --- Semantic text --- */
--text-strong: var(--ink-900);
--text-heading: var(--ink-800);
--text-body: var(--ink-600);
--text-muted: var(--ink-500);
--text-faint: var(--ink-400);
--text-on-brand: var(--white);
--text-on-ink: #e8edf2;
--text-link: var(--green-600);
/* --- Semantic brand --- */
--brand: var(--green-500);
--brand-strong: var(--green-600);
--brand-deep: var(--green-700);
--brand-tint: var(--green-50);
--brand-tint-2: var(--green-100);
/* --- Lines & dividers --- */
--border: #e6eaec;
--border-strong: #d6dcde;
--border-tint: var(--green-100);
/* --- States --- */
--focus-ring: rgba(27, 174, 112, 0.35);
--star: var(--gold-400);
}
/* ===== source: tokens/typography.css ===== */
/* ============================================================
Zdorovo Dental — Typography tokens
Matches the live site: Montserrat for headings/display (heavy,
tight), Noto Sans for body (calm slate, 1.6 line-height).
Eyebrows are uppercase green with wide tracking.
Both families carry full Cyrillic + Latin → UA/EN look identical.
============================================================ */
:root {
/* --- Families ---
--font-heading : Montserrat (H1–H6, display, eyebrows, big numbers)
--font-sans : Noto Sans (body copy, labels, UI text) — the default
--font-mono : Roboto Mono (phone numbers / tabular data) */
--font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-sans: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-body: var(--font-sans);
--font-display: var(--font-heading);
--font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
/* --- Weights --- */
--weight-regular: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* --- Font sizes (px) --- */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 30px;
--text-3xl: 38px;
--text-4xl: 48px;
--text-5xl: 60px;
/* --- Line heights --- */
--leading-tight: 1.12; /* display headings */
--leading-snug: 1.25; /* sub-headings */
--leading-normal: 1.45;
--leading-relaxed: 1.6; /* body copy */
/* --- Letter spacing --- */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.08em;
--tracking-eyebrow:0.14em; /* uppercase section eyebrows */
/* --- Semantic roles --- */
--display: var(--weight-black) var(--text-4xl)/var(--leading-tight) var(--font-heading);
--heading-2: var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-heading);
--heading-3: var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-heading);
--card-title: var(--weight-bold) var(--text-md)/var(--leading-snug) var(--font-heading);
--body: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
--body-sm: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
}
/* ===== source: tokens/spacing.css ===== */
/* ============================================================
Zdorovo Dental — Spacing, radii, shadows, motion
4px base grid. Generous section rhythm ("повітря" — breathing
room between elements is part of the brand). Soft, low-contrast
shadows; rounded-16 cards; fully-round pill controls.
============================================================ */
:root {
/* --- Spacing (4px grid) --- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* --- Layout --- */
--container: 1200px; /* max content width */
--container-narrow: 760px; /* prose / single column */
--gutter: 24px; /* grid gap */
--section-y: 96px; /* vertical section padding (desktop) */
/* --- Radii --- */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 16px; /* default card */
--radius-lg: 24px; /* large panels / trust strip */
--radius-xl: 32px;
--radius-pill: 999px; /* buttons, chips, badges */
/* --- Shadows (soft, slate-tinted) --- */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
--shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.10);
--shadow-brand: 0 14px 30px rgba(27, 174, 112, 0.30); /* lifted green button */
/* --- Motion --- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
--dur-fast: 140ms; /* @kind other */
--dur-base: 220ms; /* @kind other */
--dur-slow: 400ms; /* @kind other */
}
/* ===== source: tokens/base.css ===== */
/* ============================================================
Zdorovo Dental — Base layer
Light element defaults so specimens and components inherit the
brand face and rhythm. Tokens do the heavy lifting.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font: var(--body);
color: var(--text-body);
background: var(--surface-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
color: var(--text-heading);
font-family: var(--font-heading);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}
/* Shared section eyebrow (uppercase green kicker) */
.zd-eyebrow {
font: var(--weight-bold) var(--text-sm)/1.2 var(--font-heading);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--brand);
}
/* ===== source: ui_kits/shared/site.css ===== */
/* ============================================================
Zdorovo Dental — SHARED SITE STYLES
Load this on EVERY page (main, service, doctors, contacts…),
after the design-system tokens (../../styles.css) and before
the page-specific stylesheet.
Contains only cross-page essentials: foundation, site header/
footer, section head, buttons, cards, grid + reusable component
library (tile, link-card, feature, CTA band, advice, doctors,
reviews, FAQ, forms, chips), plus the shared chrome (mobile CTA
bar, scroll-to-top) and the design-aid module toggler.
Page-specific section modules live in each page's own file.
============================================================ */
:root {
/* page-scoped semantic aliases mapped onto brand tokens */
--zd-accent: var(--green-500);
--zd-accent-strong: var(--green-600);
--zd-accent-deep: var(--green-700);
--zd-tint: var(--green-50);
--zd-tint-2: var(--green-100);
--zd-warm: #f0a019; /* warm CTA / promo — sits beside brand gold */
--zd-warm-deep: #d4860a;
--zd-ink: var(--ink-900);
--zd-text: var(--ink-600);
--zd-muted: var(--ink-500);
--zd-line: var(--border);
--zd-ok: var(--green-600);
--zd-no: #d8584e;
--zd-container: 1180px;
--zd-nav-h: 64px; /* sticky sub-nav height for scroll offset */
--zd-header-h: 114px; /* site header height; refined by JS on load/resize */
}
/* ---------- Base ---------- */
.zd-page { background: var(--surface-page); color: var(--zd-text); font-family: var(--font-sans); }
.zd-page *,
.zd-page *::before,
.zd-page *::after { box-sizing: border-box; }
.zd-container { width: 100%; max-width: var(--zd-container); margin: 0 auto; padding: 0 20px; }
/* [zd_blocks] embed: when the wrapper lands inside a constrained container (an Elementor
column, a sidebar…), break it out to full width so section backgrounds (e.g. the green
Final CTA) are full-bleed like on a native service page. Negative side margins — NOT
width:100vw — so a vertical scrollbar can't cause horizontal overflow. The inner
.zd-container still re-centers the content at max-width. */
.zd-page--blocks { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.zd-section { padding: 56px 0; }
.zd-section--tint { background: var(--zd-tint); }
.zd-section--white { background: var(--surface); }
.zd-section--ink { background: var(--zd-ink); color: #e8edf2; }
.zd-page img { max-width: 100%; display: block; }
.zd-page a:hover { text-decoration: none; }
/* anchor scroll offset so the sticky header + sub-nav don't cover headings */
.zd-anchor { scroll-margin-top: calc(var(--zd-header-h, 0px) + var(--zd-nav-h) + 16px); }
/* image placeholder helper (empty image slots) */
.zd-imgph__note { font: 500 10px/1 "Roboto Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
/* ---------- Headings use Montserrat; body inherits Noto Sans ---------- */
.zd-eyebrow, .zd-title, .zd-hero__h1, .zd-hero__eyebrow, .zd-final__title,
.zd-feature__title, .zd-value__title, .zd-stat__num, .zd-stage__num, .zd-stage__title,
.zd-price-row__cost, .zd-reviews__score, .zd-material__brand, .zd-method__title,
.zd-check__title, .zd-doc__name, .zd-faq__q, .zd-badge-promo__big, .zd-hero__float-title {
font-family: var(--font-heading);
}
/* ---------- Reused: section header ---------- */
.zd-head { max-width: 720px; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.zd-head--center { margin-inline: 0; text-align: left; align-items: flex-start; }
.zd-eyebrow { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zd-accent); }
.zd-title { margin: 0; font-weight: 800; font-size: clamp(26px, 4vw, 34px); line-height: 1.18; letter-spacing: -.02em; color: var(--ink-800); text-wrap: balance; }
.zd-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--zd-muted); }
/* section head with an optional action link to the right of the heading */
.zd-secthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.zd-secthead .zd-head { margin-bottom: 0; }
.zd-secthead__action { flex: none; }
/* ---------- Reused: button ---------- */
.zd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border: 1.5px solid transparent; border-radius: var(--radius-pill); font: 700 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform .14s var(--ease-out), box-shadow .22s, background .2s, color .2s, border-color .2s; }
.zd-btn:hover { transform: translateY(-1px); text-decoration: none; }
.zd-btn:active { transform: scale(.98); }
.zd-btn--primary { background: var(--zd-accent); color: #fff; box-shadow: var(--shadow-sm); }
.zd-btn--primary:hover { background: var(--zd-accent-strong); box-shadow: var(--shadow-brand); }
.zd-btn--warm { background: var(--zd-warm); color: #fff; box-shadow: 0 8px 20px rgba(240,160,25,.32); }
.zd-btn--warm:hover { background: var(--zd-warm-deep); }
.zd-btn--secondary { background: var(--surface); color: var(--zd-accent-strong); border-color: var(--zd-accent); }
.zd-btn--secondary:hover { background: var(--zd-tint); }
.zd-btn--ghost { background: transparent; color: var(--zd-accent-strong); }
.zd-btn--ghost:hover { background: var(--zd-tint); }
.zd-btn--lg { padding: 16px 30px; font-size: 16px; }
.zd-btn--sm { padding: 9px 16px; font-size: 13.5px; }
.zd-btn--block { width: 100%; }
/* ---------- Reused: card + icon chip ---------- */
.zd-card { background: var(--surface); border: 1px solid var(--zd-line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 24px; }
.zd-card--hover { transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s; }
.zd-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-tint); }
.zd-ico { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--zd-tint); color: var(--zd-accent-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.zd-ico--round { border-radius: 50%; }
.zd-ico svg { width: 26px; height: 26px; }
/* ---------- Reused: chips ---------- */
.zd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.zd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--zd-tint); color: var(--zd-accent-deep); font-weight: 600; font-size: 13px; }
.zd-chip--metro::before { content: "Ⓜ"; font-weight: 900; }
/* ============================================================
SITE HEADER (utility bar + sticky nav)
============================================================ */
.zd-site-head { position: sticky; top: 0; z-index: 50; }
.zd-util { background: var(--ink-900); color: var(--text-on-ink); }
.zd-util__inner { max-width: var(--zd-container); margin: 0 auto; padding: 0 20px; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.zd-util__group { display: flex; align-items: center; gap: 20px; }
.zd-util__item { display: inline-flex; align-items: center; gap: 7px; }
.zd-util__item svg { color: var(--green-300); flex: none; }
.zd-util__item--dim { opacity: .8; }
.zd-util__social { display: inline-flex; gap: 10px; }
.zd-util__social svg { color: var(--green-300); }
.zd-util__phone { color: #fff; font-weight: 700; text-decoration: none; font-family: var(--font-mono); letter-spacing: .01em; }
.zd-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--zd-line); }
.zd-nav__inner { max-width: var(--zd-container); margin: 0 auto; padding: 0 20px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.zd-nav__logo { height: 32px; width: auto; flex: none; }
.zd-nav__links { display: flex; gap: 28px; }
.zd-nav__link { font-weight: 500; font-size: 15px; color: var(--ink-700); text-decoration: none; white-space: nowrap; transition: color .15s; }
.zd-nav__link:hover, .zd-nav__link.is-current { color: var(--zd-accent-strong); }
.zd-nav__burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--zd-line); border-radius: var(--radius-sm); background: #fff; color: var(--ink-700); cursor: pointer; flex: none; transition: background .15s, color .15s; }
.zd-nav__burger[aria-expanded="true"] { background: var(--zd-accent); color: #fff; border-color: var(--zd-accent); }
/* Mobile drawer (revealed by the burger under 760px) */
.zd-nav__mobile { display: none; flex-direction: column; gap: 2px; padding: 8px 20px 18px; background: #fff; border-top: 1px solid var(--zd-line); box-shadow: var(--shadow-md); }
.zd-nav__mobile[hidden] { display: none; }
.zd-nav__mlink { padding: 13px 4px; font-weight: 600; font-size: 16px; color: var(--ink-700); text-decoration: none; border-bottom: 1px solid var(--zd-line); }
.zd-nav__mlink.is-current, .zd-nav__mlink:active { color: var(--zd-accent-strong); }
.zd-nav__mcta { margin-top: 14px; }
.zd-nav__mphone { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font-weight: 700; font-size: 16px; color: var(--ink-800); text-decoration: none; }
.zd-nav__mphone svg { color: var(--zd-accent-strong); }
/* ============================================================
SITE FOOTER
============================================================ */
.zd-foot { background: var(--ink-900); color: var(--text-on-ink); padding: 56px 0 26px; }
.zd-foot__grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.zd-foot__brand-logo { height: 32px; width: auto; filter: brightness(0) invert(1); }
.zd-foot__brand-text { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: rgba(232,237,242,.65); max-width: 280px; }
.zd-foot__social { display: flex; gap: 10px; margin-top: 18px; }
.zd-foot__social span { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: var(--green-300); }
.zd-foot__col-h { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 14px; }
.zd-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.zd-foot__list a { font-size: 14px; color: rgba(232,237,242,.66); text-decoration: none; }
.zd-foot__list a:hover { color: var(--green-300); }
.zd-foot__bar { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: rgba(232,237,242,.5); }
/* ============================================================
GRID HELPERS (any card grid)
============================================================ */
.zd-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
/* --1 stays single-column at every breakpoint: the wider queries below only
override --2/--3/--4, so it never gets promoted to multi-column. */
.zd-grid--1 { grid-template-columns: 1fr; }
.zd-grid--2 { grid-template-columns: 1fr; }
.zd-grid--3 { grid-template-columns: 1fr; }
.zd-grid--4 { grid-template-columns: 1fr; }
.zd-value__title { margin: 14px 0 6px; font-size: 17px; font-weight: 700; color: var(--ink-800); }
.zd-value__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--zd-muted); }
/* ============================================================
COMPONENT — feature tile (icon + title + text)
============================================================ */
.zd-feature { position: relative; background: var(--surface); border: 1px solid var(--zd-line); border-radius: var(--radius-md); padding: 30px 26px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s; }
.zd-feature::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--zd-accent), var(--green-300)); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease-out); }
.zd-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.zd-feature:hover::after { transform: scaleX(1); }
.zd-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(150deg, var(--green-100), var(--green-50)); color: var(--zd-accent-strong); box-shadow: inset 0 0 0 1px rgba(27,174,112,.14); transition: background .28s, color .28s, box-shadow .28s, transform .28s var(--ease-out); }
.zd-feature__icon svg { width: 28px; height: 28px; }
.zd-feature:hover .zd-feature__icon { background: linear-gradient(150deg, var(--zd-accent), var(--green-600)); color: #fff; box-shadow: 0 10px 22px rgba(27,174,112,.34); transform: translateY(-2px); }
.zd-feature__title { margin: 20px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-900); }
.zd-feature__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--zd-muted); }
/* horizontal-split variant — icon left, accent bar */
.zd-feature--split { display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px 22px 19px; border-radius: 14px; border: 1px solid rgba(15,23,42,.06); border-left: 3px solid var(--zd-accent); box-shadow: var(--shadow-sm); }
.zd-feature--split::after { display: none; }
.zd-feature--split:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(15,23,42,.06); border-left-color: var(--zd-accent); }
.zd-feature--split .zd-feature__icon { width: 46px; height: 46px; border-radius: 12px; }
.zd-feature--split .zd-feature__icon svg { width: 24px; height: 24px; }
.zd-feature--split:hover .zd-feature__icon { transform: none; }
.zd-feature--split .zd-feature__title { margin: 0; font-size: 16px; }
.zd-feature--split .zd-feature__text { margin-top: 5px; font-size: 13.5px; line-height: 1.5; }
.zd-feature--split__body { min-width: 0; }
/* ============================================================
COMPONENT — unified tile (icon · badge · title · meta · text ·
list · "Детальніше" link; every part optional)
============================================================ */
.zd-tile { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--zd-line); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: inherit; transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s; }
.zd-tile::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--zd-accent), var(--green-300)); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease-out); }
.zd-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.zd-tile:hover::after { transform: scaleX(1); }
.zd-tile__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.zd-tile__head:empty { display: none; }
.zd-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(150deg, var(--green-100), var(--green-50)); color: var(--zd-accent-strong); box-shadow: inset 0 0 0 1px rgba(27,174,112,.14); transition: background .28s, color .28s, box-shadow .28s, transform .28s var(--ease-out); }
.zd-tile__icon svg { width: 27px; height: 27px; }
.zd-tile:hover .zd-tile__icon { background: linear-gradient(150deg, var(--zd-accent), var(--green-600)); color: #fff; box-shadow: 0 10px 22px rgba(27,174,112,.34); transform: translateY(-2px); }
.zd-tile__badge { flex: none; margin-left: auto; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--zd-accent); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.zd-tile__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-900); }
.zd-tile__meta { margin-top: 3px; font-size: 12.5px; color: var(--zd-muted); }
.zd-tile__text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--zd-muted); }
.zd-tile__list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--zd-line); display: grid; gap: 9px; }
.zd-tile__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--zd-text); }
.zd-tile__list svg { flex: none; width: 17px; height: 17px; color: var(--zd-accent-strong); margin-top: 1px; }
.zd-tile__more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--zd-accent-strong); }
.zd-tile__more svg { transition: transform .18s var(--ease-out); }
.zd-tile:hover .zd-tile__more svg { transform: translateX(3px); }
.zd-tile__more:hover { color: var(--zd-accent-deep); }
.zd-tile__more:hover svg { transform: translateX(3px); }
/* HOVER TOGGLE — .zd-hover-off disables decorative card/tile hover
(lift, accent bar, icon fill) while leaving link + button affordances intact. */
.zd-hover-off .zd-tile:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--zd-line); }
.zd-hover-off .zd-tile:hover::after { transform: scaleX(0); }
.zd-hover-off .zd-tile:hover .zd-tile__icon { background: linear-gradient(150deg, var(--green-100), var(--green-50)); color: var(--zd-accent-strong); box-shadow: inset 0 0 0 1px rgba(27,174,112,.14); transform: none; }
.zd-hover-off .zd-card--hover:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--zd-line); }
/* ============================================================
COMPONENT — link card (services --row / articles --media)
============================================================ */
.zd-linkcard { display: flex; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--zd-line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s; }
.zd-linkcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-tint); }
.zd-hover-off .zd-linkcard:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--zd-line); }
.zd-linkcard__title { display: block; font-weight: 700; font-size: 15px; color: var(--ink-800); }
.zd-linkcard__desc { display: block; font-size: 12.5px; color: var(--zd-muted); margin-top: 2px; }
.zd-linkcard__arrow { color: var(--zd-accent-strong); flex: none; transition: transform .18s var(--ease-out); }
.zd-linkcard:hover .zd-linkcard__arrow { transform: translateX(4px); }
.zd-linkcard--row { align-items: center; gap: 12px; padding: 16px 18px; }
.zd-linkcard--row .zd-linkcard__icon { flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--zd-tint); color: var(--zd-accent-strong); display: inline-flex; align-items: center; justify-content: center; }
.zd-linkcard__icon img { width: 40px; height: 40px; object-fit: contain; }
.zd-linkcard__icon svg { width: 30px; height: 30px; }
.zd-linkcard--row .zd-linkcard__body { min-width: 0; }
.zd-linkcard--row .zd-linkcard__arrow { margin-left: auto; }
.zd-linkcard--media { flex-direction: column; }
.zd-linkcard__cover { position: relative; aspect-ratio: 16/9; background: linear-gradient(150deg, var(--green-100), var(--green-50)); display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--zd-accent-strong); }
.zd-linkcard__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zd-linkcard__cover-note { font: 500 10px/1 "Roboto Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.zd-linkcard--media .zd-linkcard__body { display: flex; flex-direction: column; gap: 6px; padding: 15px 18px 17px; }
.zd-linkcard--media .zd-linkcard__title { font-size: 16px; line-height: 1.3; }
.zd-linkcard__excerpt { font-size: 13px; line-height: 1.5; color: var(--zd-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.zd-linkcard__foot { margin-top: 2px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zd-linkcard__meta { font-size: 12px; font-weight: 600; color: var(--zd-muted); }
/* ============================================================
COMPONENT — CTA band (inline conversion prompt)
============================================================ */
.zd-ctaband__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding: 34px 40px; border-radius: var(--radius-md); }
.zd-ctaband__copy { flex: 1 1 360px; }
.zd-ctaband__title { margin: 0; font-weight: 800; font-size: clamp(21px, 3vw, 27px); line-height: 1.2; letter-spacing: -.02em; }
.zd-ctaband__text { margin: 8px 0 0; font-size: 15px; line-height: 1.55; opacity: .88; max-width: 560px; }
.zd-ctaband__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.zd-ctaband--accent .zd-ctaband__inner { background: var(--zd-accent); color: #fff; }
.zd-ctaband--accent .zd-ctaband__title { color: #fff; }
.zd-ctaband--ink .zd-ctaband__inner { background: var(--zd-ink); color: #e8edf2; }
.zd-ctaband--ink .zd-ctaband__title { color: #fff; }
/* ============================================================
COMPONENT — doctor advice band ("Порада лікаря")
============================================================ */
.zd-advice__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; background: var(--zd-tint); border: 1px solid var(--zd-tint-2); border-radius: var(--radius-md); padding: 28px 32px; position: relative; }
.zd-advice__photo { position: relative; flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: linear-gradient(150deg, var(--green-100), var(--green-50)); color: var(--zd-accent-strong); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.zd-advice__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zd-advice__body { flex: 1 1 360px; }
.zd-advice__label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--zd-accent-strong); }
.zd-advice__label svg { width: 16px; height: 16px; }
.zd-advice__quote { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--zd-ink); }
.zd-advice__by { margin-top: 12px; font-size: 13px; color: var(--zd-muted); }
.zd-advice__by b { color: var(--ink-800); font-weight: 700; }
/* ============================================================
COMPONENT — doctors grid + card
============================================================ */
.zd-docs { display: grid; grid-template-columns: 1fr; gap: 18px; }
.zd-doc { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.zd-doc__photo { position: relative; aspect-ratio: 1/1.1; background: linear-gradient(150deg, var(--green-100), var(--green-50)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--zd-accent-strong); }
.zd-doc__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zd-doc__photo-note { font: 500 10px/1 "Roboto Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.zd-doc__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* margin:0 — this is an (E-E-A-T), so the theme's heading margins must be reset. */
.zd-doc__name { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink-800); }
.zd-doc__spec { font-size: 13.5px; color: var(--zd-muted); }
.zd-doc__exp { font-size: 13px; font-weight: 700; color: var(--zd-accent-strong); }
.zd-doc__desc { font-size: 13px; line-height: 1.5; color: var(--zd-text); }
.zd-doc__actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.zd-doc__actions .zd-btn { margin-top: 0; }
.zd-docs__all { margin-top: 22px; text-align: center; }
.zd-doc__body .zd-btn { margin-top: auto; }
/* ============================================================
COMPONENT — reviews (aggregate + cards)
============================================================ */
.zd-reviews__layout { display: grid; grid-template-columns: 1fr; gap: 18px; }
.zd-reviews__agg { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.zd-reviews__score { font-weight: 900; font-size: 52px; line-height: 1; color: var(--zd-accent); }
.zd-stars { display: inline-flex; gap: 2px; color: var(--star); }
.zd-stars svg { fill: var(--star); width: 18px; height: 18px; }
.zd-reviews__count { font-size: 13.5px; color: var(--zd-muted); }
.zd-reviews__verified { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 12px; border: 1px solid var(--zd-line); border-radius: var(--radius-pill); background: var(--surface); font-size: 12px; color: var(--zd-muted); }
.zd-reviews__verified svg { color: var(--zd-accent); flex: none; }
.zd-reviews__verified b { color: var(--zd-text); font-weight: 700; }
.zd-gsource { display: block; margin-top: 8px; text-align: center; }
.zd-google-logo { display: block; height: 24px; width: auto; margin: 0 auto; }
.zd-reviews__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.zd-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.zd-review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--zd-accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.zd-review__author { font-weight: 700; font-size: 14px; color: var(--ink-800); }
.zd-review__time { font-size: 12.5px; color: var(--zd-muted); }
.zd-review__text { margin: 10px 0 0; font-size: 14px; line-height: 1.6; }
/* ---- reviews carousel + fixed-height clamped tiles + "read full" modal ----
(markup: .zd-reviews__cards[data-per] > .zd-reviews__grid; paged by main.js) */
.zd-reviews__cards { min-width: 0; }
/* per-view column count follows data-per: 1 = one full-width centred card;
3/6 use the responsive 1→2→3 columns below (6 simply wraps to two rows). */
.zd-reviews__cards[data-per="1"] .zd-reviews__grid { grid-template-columns: 1fr; }
.zd-reviews__cards[data-per="1"] .zd-review { max-width: 640px; width: 100%; margin-inline: auto; }
.zd-review { display: flex; flex-direction: column; height: 300px; position: relative; }
.zd-review .zd-stars { margin-bottom: 2px; }
/* every tile is exactly the same height on every carousel page → no layout shift.
the body is line-clamped and flexes to fill; main.js reveals .zd-review__more
only when the text actually overflows the clamp */
.zd-reviews__grid { grid-auto-rows: 300px; }
@media (max-width: 600px) { .zd-review { height: auto; min-height: 240px; } .zd-reviews__grid { grid-auto-rows: auto; } }
/* carousel page transition — the freshly-shown page slides + fades in */
@keyframes zd-slide-r { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes zd-slide-l { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.zd-reviews__grid.is-slide-r { animation: zd-slide-r .4s cubic-bezier(.22, .61, .36, 1); }
.zd-reviews__grid.is-slide-l { animation: zd-slide-l .4s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
.zd-reviews__grid.is-slide-r, .zd-reviews__grid.is-slide-l { animation: none; }
}
/* clamp the body so every tile is the same height; main.js reveals .zd-review__more
only when the text actually overflows this clamp */
.zd-review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; flex: 1 1 auto; }
.zd-review__more { align-self: flex-start; margin-top: 12px; padding: 0; background: none; border: 0; cursor: pointer; font: 700 13.5px var(--font-sans); color: var(--zd-accent-strong); }
.zd-review__more:hover { color: var(--zd-accent); text-decoration: underline; }
.zd-review__more[hidden] { display: none; }
/* Trustindex composition per tile */
.zd-review__rating { display: flex; align-items: center; gap: 6px; }
.zd-review__gmark { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; cursor: help; z-index: 3; }
.zd-review__gmark img { display: block; width: 22px; height: 22px; }
.zd-review__check { position: relative; display: inline-flex; align-items: center; cursor: help; }
.zd-review__check > svg { width: 16px; height: 16px; display: block; }
.zd-review__tip { position: absolute; top: calc(100% + 9px); left: 50%; transform: translate(-50%, -4px); width: 210px; padding: 11px 13px; border-radius: 12px; background: #1f2430; color: #fff; font: 500 12px/1.5 var(--font-sans); text-align: left; box-shadow: 0 10px 30px rgba(15, 23, 42, .3); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 6; pointer-events: none; }
.zd-review__tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #1f2430; }
.zd-review__tip b { font-weight: 700; }
.zd-review__check:hover .zd-review__tip, .zd-review__check:focus-visible .zd-review__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* the "G" tooltip opens down-and-left so it never runs off the tile's right edge */
.zd-review__tip--g { left: auto; right: 0; width: max-content; max-width: 220px; transform: translate(0, -4px); }
.zd-review__tip--g::before { left: auto; right: 7px; transform: none; }
.zd-review__gmark:hover .zd-review__tip--g, .zd-review__gmark:focus-visible .zd-review__tip--g { opacity: 1; visibility: visible; transform: translate(0, 0); }
/* the reviews carousel nav reuses .zd-ba-nav; the bottom actions row is centred */
.zd-reviews__nav { margin-top: 22px; }
.zd-reviews__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
/* "read full" modal — hidden until main.js adds .is-open */
.zd-review-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .55); }
.zd-review-modal.is-open { display: flex; animation: zd-modal-fade .22s ease; }
@keyframes zd-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zd-modal-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.zd-review-modal.is-open .zd-review-modal__box { animation: zd-modal-rise .28s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
.zd-review-modal.is-open, .zd-review-modal.is-open .zd-review-modal__box { animation: none; }
}
.zd-review-modal__box { position: relative; width: 100%; max-width: 540px; max-height: 85vh; overflow-y: auto; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 30px 30px 32px; }
.zd-review-modal__close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--zd-tint); color: var(--ink-700); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.zd-review-modal__close:hover { background: var(--zd-accent); color: #fff; }
.zd-review-modal__text { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--zd-text); }
body.zd-modal-open { overflow: hidden; }
/* ============================================================
COMPONENT — FAQ accordion
============================================================ */
.zd-faq { display: grid; gap: 12px; }
.zd-faq__item { background: var(--surface); border: 1px solid var(--zd-line); border-radius: var(--radius-sm); overflow: hidden; }
.zd-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: 0; cursor: pointer; font: 700 16px/1.4 var(--font-sans); color: var(--ink-800); text-align: left; }
/* The question is an inside the (document outline), styled to look
identical: no heading margin, inherit the summary's font, take the row's width. */
.zd-faq__qh { margin: 0; font: inherit; color: inherit; flex: 1; min-width: 0; }
.zd-faq__q:hover { color: var(--zd-accent-strong); }
.zd-faq__icon { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--zd-tint); color: var(--zd-accent-strong); display: inline-flex; align-items: center; justify-content: center; transition: transform .22s var(--ease-out), background .2s; }
.zd-faq__item[open] .zd-faq__icon { transform: rotate(45deg); background: var(--zd-accent); color: #fff; }
.zd-faq__a { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: var(--zd-text); }
.zd-faq__q::-webkit-details-marker { display: none; }
/* ============================================================
COMPONENT — form fields (used by any form / CTA)
============================================================ */
.zd-field { display: flex; flex-direction: column; gap: 6px; }
.zd-field label { font-weight: 700; font-size: 13.5px; color: var(--ink-800); }
.zd-input { width: 100%; padding: 12px 14px; font: 400 15px var(--font-sans); color: var(--ink-900); background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; transition: border-color .2s, box-shadow .2s; }
.zd-input:focus { border-color: var(--zd-accent); box-shadow: 0 0 0 4px var(--focus-ring); }
select.zd-input { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.zd-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zd-form-note { font-size: 12px; color: var(--zd-muted); text-align: center; margin: 0; }
/* Contact Form 7 skin — CF7 emits its own markup, so map it onto the field/button
look. Wrap a CF7 shortcode in .zd-final__form (or any .zd-form) and it inherits this. */
.zd-final__form .wpcf7-form-control-wrap { display: block; }
.zd-final__form p { margin: 0 0 14px; }
.zd-final__form input[type="text"],
.zd-final__form input[type="tel"],
.zd-final__form input[type="email"],
.zd-final__form input[type="number"],
.zd-final__form input[type="date"],
.zd-final__form select,
.zd-final__form textarea { width: 100%; padding: 12px 14px; font: 400 15px var(--font-sans); color: var(--ink-900); background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; transition: border-color .2s, box-shadow .2s; }
.zd-final__form input:focus, .zd-final__form select:focus, .zd-final__form textarea:focus { border-color: var(--zd-accent); box-shadow: 0 0 0 4px var(--focus-ring); }
.zd-final__form .wpcf7-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 16px 30px; border: 0; border-radius: var(--radius-pill); background: var(--zd-warm); color: #fff; font: 700 16px/1 var(--font-sans); cursor: pointer; box-shadow: 0 8px 20px rgba(240,160,25,.32); transition: background .2s, transform .14s var(--ease-out); }
.zd-final__form .wpcf7-submit:hover { background: var(--zd-warm-deep); transform: translateY(-1px); }
.zd-final__form .wpcf7-not-valid-tip { color: var(--zd-no); font-size: 12px; margin-top: 4px; }
.zd-final__form .wpcf7-response-output { margin: 8px 0 0 !important; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; border-width: 1px; }
/* ============================================================
CHROME — sticky mobile CTA bar
============================================================ */
.zd-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--zd-line); box-shadow: 0 -6px 20px rgba(15,23,42,.08); }
.zd-mobilebar .zd-btn { flex: 1; }
/* ============================================================
CHROME — scroll-to-top
============================================================ */
.zd-totop { position: fixed; right: 18px; bottom: 18px; z-index: 55; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--zd-accent); color: #fff; box-shadow: var(--shadow-md); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s, background .2s; }
.zd-totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.zd-totop:hover { background: var(--zd-accent-strong); }
/* ============================================================
DESIGN AID — module toggle panel (prototype only; not shipped)
============================================================ */
.zd-toggler { position: fixed; top: 72px; right: 14px; z-index: 70; width: 244px; max-height: 78vh; background: #fff; border: 1px solid var(--zd-line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-sans); overflow: hidden; display: flex; flex-direction: column; }
.zd-toggler.is-collapsed .zd-toggler__body { display: none; }
.zd-toggler__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--ink-900); color: #fff; cursor: pointer; }
.zd-toggler__head b { font-size: 13px; }
.zd-toggler__head span { font-size: 11px; color: rgba(255,255,255,.6); }
.zd-toggler__body { padding: 8px; overflow-y: auto; }
.zd-toggler__row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; color: var(--ink-700); cursor: pointer; }
.zd-toggler__row:hover { background: var(--zd-tint); }
.zd-toggler__row input { accent-color: var(--zd-accent); width: 15px; height: 15px; }
.zd-toggler__hint { padding: 8px 12px 10px; font-size: 11px; line-height: 1.4; color: var(--zd-muted); border-top: 1px solid var(--zd-line); }
.zd-toggler__open { position: fixed; top: 72px; right: 14px; z-index: 70; display: none; padding: 9px 14px; border: 0; border-radius: var(--radius-pill); background: var(--ink-900); color: #fff; font: 700 12px var(--font-sans); cursor: pointer; box-shadow: var(--shadow-md); }
/* hidden module state (module toggler) */
[data-module].is-off { display: none !important; }
/* ============================================================
RESPONSIVE — shared primitives
============================================================ */
@media (min-width: 600px) {
.zd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.zd-grid--3 { grid-template-columns: repeat(2, 1fr); }
.zd-grid--4 { grid-template-columns: repeat(2, 1fr); }
/* systems tiles: share row tracks so title/meta/text/divider line up across the row */
.zd-grid--sys .zd-tile--sys { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
.zd-docs { grid-template-columns: repeat(2, 1fr); }
/* 1-up doctors must not be promoted to 2-up at the tablet breakpoint. */
.zd-docs--1 { grid-template-columns: 1fr; }
.zd-reviews__grid { grid-template-columns: repeat(2, 1fr); }
.zd-field--row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 920px) {
.zd-section { padding: 80px 0; }
.zd-container { padding: 0 24px; }
.zd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.zd-grid--4 { grid-template-columns: repeat(4, 1fr); }
.zd-docs { grid-template-columns: repeat(4, 1fr); }
/* Desktop column count from doctors_columns; the bare .zd-docs above stays the
4-up default, so sections saved before this field keep their old layout. */
.zd-docs--1 { grid-template-columns: 1fr; }
.zd-docs--2 { grid-template-columns: repeat(2, 1fr); }
.zd-docs--3 { grid-template-columns: repeat(3, 1fr); }
.zd-docs--4 { grid-template-columns: repeat(4, 1fr); }
.zd-reviews__layout { grid-template-columns: 280px 1fr; align-items: stretch; }
.zd-reviews__grid { grid-template-columns: repeat(3, 1fr); }
.zd-mobilebar { display: none; }
.zd-foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
}
@media (min-width: 600px) and (max-width: 919px) {
.zd-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.zd-nav__links { display: none; }
.zd-nav__inner > .zd-btn--primary { display: none; }
.zd-nav__burger { display: inline-flex; }
.zd-nav__mobile.is-open { display: flex; }
.zd-util__inner { justify-content: center; }
.zd-util__group--social { display: none; }
}
@media (min-width: 761px) {
.zd-nav__mobile { display: none !important; }
}
@media (max-width: 919px) {
/* leave room for the sticky mobile CTA bar */
.zd-page { padding-bottom: 72px; }
.zd-totop { bottom: 80px; }
.zd-toggler { display: none; }
}
@media (max-width: 919px) {
/* mobile + tablet: icon + title share the top row; text/list/meta span full width below
(systems tiles keep their subgrid row-alignment, so they're excluded) */
.zd-tile:not(.zd-tile--sys) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.zd-tile:not(.zd-tile--sys) .zd-tile__head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.zd-tile:not(.zd-tile--sys) .zd-tile__title { grid-column: 2; grid-row: 1; }
.zd-tile:not(.zd-tile--sys) .zd-tile__meta,
.zd-tile:not(.zd-tile--sys) .zd-tile__text,
.zd-tile:not(.zd-tile--sys) .zd-tile__list,
.zd-tile:not(.zd-tile--sys) .zd-tile__more { grid-column: 1 / -1; }
/* center CTA-band + doctor-card action buttons on mobile */
.zd-ctaband__actions { width: 100%; justify-content: center; }
.zd-doc__actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.zd-page * { transition: none !important; scroll-behavior: auto !important; }
}
/* ===== source: ui_kits/service-page/service-page.css ===== */
/* ============================================================
Zdorovo Dental — SERVICE PAGE (page-specific modules)
Load AFTER the shared stylesheet:
Only styles unique to the service page live here. Foundation,
chrome and the reusable component library (tile, link-card,
feature, CTA band, advice, doctors, reviews, FAQ, forms, chips,
buttons, cards, header, footer…) come from shared/site.css.
============================================================ */
/* ============================================================
1. BREADCRUMBS
============================================================ */
.zd-crumbs { background: var(--surface); border-bottom: 1px solid var(--zd-line); }
.zd-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; margin: 0; list-style: none; font-size: 13px; color: var(--zd-muted); }
.zd-crumbs__list a { color: var(--zd-muted); text-decoration: none; }
.zd-crumbs__list a:hover { color: var(--zd-accent-strong); }
.zd-crumbs__sep { color: var(--ink-300); }
.zd-crumbs__cur { color: var(--ink-700); font-weight: 600; }
/* ============================================================
2. HERO
============================================================ */
.zd-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--zd-tint) 0%, var(--surface-page) 72%); }
.zd-hero__inner { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 44px 0 52px; align-items: center; }
.zd-hero__lead { font-size: 17px; line-height: 1.6; color: var(--zd-text); max-width: 540px; margin: 16px 0 0; }
.zd-hero__h1 { margin: 14px 0 0; font-weight: 900; font-size: clamp(30px, 6vw, 50px); line-height: 1.08; letter-spacing: -.025em; color: var(--zd-ink); }
.zd-hero__h1 span { color: var(--zd-accent); }
.zd-hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 28px 0 0; }
.zd-stat { box-sizing: border-box; min-height: 92px; background: rgba(255,255,255,.7); border: 1px solid var(--zd-line); border-radius: var(--radius-sm); padding: 14px 16px; }
.zd-stat__num { font-weight: 900; font-size: 26px; line-height: 1; color: var(--zd-accent-strong); letter-spacing: -.02em; white-space: nowrap; }
.zd-stat__label { margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--zd-muted); }
.zd-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.zd-hero__media { position: relative; }
.zd-hero__photo { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3.4; background: linear-gradient(150deg, var(--green-100), var(--green-50)); color: var(--zd-accent-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.zd-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% center; }
.zd-hero__photo-ph { position: relative; z-index: 0; }
.zd-badge-promo { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--zd-warm); color: #fff; box-shadow: 0 10px 24px rgba(240,160,25,.4); transform: rotate(6deg); }
.zd-badge-promo__big { font-weight: 900; font-size: 26px; line-height: 1; }
.zd-badge-promo__small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; opacity: .92; }
.zd-hero__float { position: absolute; left: -12px; bottom: -14px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.zd-hero__float .zd-ico { width: 42px; height: 42px; border-radius: 50%; }
/* ---- Hero variant group: only the active variant is shown ---- */
.zd-hero-group { position: relative; }
.zd-hero-group .zd-hero[hidden] { display: none; }
.zd-hero--bg,
.zd-hero--full { display: flex; align-items: center; background: var(--ink-900); }
.zd-hero--bg { min-height: 560px; padding: 0; }
.zd-hero--full { min-height: calc(100vh - var(--zd-header-h, 0px)); }
.zd-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; transform: scaleX(-1); }
.zd-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,26,17,.92) 0%, rgba(9,26,17,.74) 42%, rgba(9,26,17,.42) 100%); }
.zd-hero--bg > .zd-container,
.zd-hero--full > .zd-container { position: relative; z-index: 1; }
.zd-hero__bg-copy { max-width: 620px; padding: 72px 0; }
.zd-hero--full .zd-hero__bg-copy { padding: clamp(80px, 12vh, 120px) 0; }
.zd-eyebrow--light { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.zd-eyebrow--light svg { color: var(--green-300); }
.zd-hero__h1--light { color: #fff; }
.zd-hero__h1--light span { color: var(--green-300); }
.zd-hero__lead--light { color: rgba(255,255,255,.86); }
.zd-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.zd-hero__chip { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: var(--radius-md); background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); }
.zd-hero__chip b { font-weight: 900; font-size: 24px; line-height: 1; color: #fff; letter-spacing: -.02em; }
.zd-hero__chip span { font-size: 13px; color: rgba(255,255,255,.78); }
.zd-btn--on-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.zd-btn--on-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.zd-hero--bg .zd-badge-promo,
.zd-hero--full .zd-badge-promo { z-index: 2; }
.zd-hero__trust { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 12px 16px; border-radius: var(--radius-md); background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); }
.zd-hero__trust .zd-ico { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.zd-hero__trust-name { font-weight: 900; font-size: 18px; line-height: 1; color: #fff; }
.zd-hero__trust-sub { font-size: 12px; color: rgba(255,255,255,.78); margin-top: 2px; }
.zd-hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: rgba(255,255,255,.85); cursor: pointer; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.zd-hero__scroll-ring { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); display: inline-flex; align-items: center; justify-content: center; }
/* ---- Hero checklist (hero_benefits) — sits under the lead; same look as the
intro module's list so the two read as one component ---- */
.zd-hero__benefits { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.zd-hero__benefit { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--zd-text); }
.zd-hero__benefit svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--zd-accent-strong); }
.zd-hero__benefits--light .zd-hero__benefit { color: rgba(255,255,255,.9); }
.zd-hero__benefits--light .zd-hero__benefit svg { color: var(--green-300); }
/* ---- Hero stats as a full-width band (hero_stats_pos = band). Breaks out of the
copy column and spans the whole hero, pinned to its bottom edge ---- */
.zd-hero__band { position: relative; z-index: 2; width: 100%; border-top: 1px solid var(--zd-line); background: rgba(255,255,255,.7); }
.zd-hero__band-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 18px 0; }
.zd-hero__band-item { display: flex; flex-direction: column; gap: 4px; }
.zd-hero__band-item b { font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: -.02em; color: var(--zd-accent-strong); }
.zd-hero__band-item span { font-size: 13px; line-height: 1.35; color: var(--zd-muted); }
/* On the dark variants the band overlays the photo, so it carries its own surface. */
.zd-hero__band--light { border-top-color: rgba(255,255,255,.18); background: rgba(9,26,17,.55); backdrop-filter: blur(8px); }
.zd-hero__band--light .zd-hero__band-item b { color: #fff; }
.zd-hero__band--light .zd-hero__band-item span { color: rgba(255,255,255,.78); }
/* v2/v3 centre their copy with `display:flex`, so a band appended as a sibling of
.zd-container would land BESIDE it — stack them instead when a band is present. */
.zd-hero--bg.zd-hero--hasband,
.zd-hero--full.zd-hero--hasband { flex-direction: column; justify-content: center; }
.zd-hero--bg.zd-hero--hasband > .zd-container,
.zd-hero--full.zd-hero--hasband > .zd-container { width: 100%; }
.zd-hero--hasband .zd-hero__inner { padding-bottom: 36px; }
/* The v3 scroll cue is pinned to the same bottom edge the band now occupies. */
.zd-hero--hasband .zd-hero__scroll { display: none; }
@media (min-width: 920px) {
.zd-hero--bg { min-height: 640px; }
.zd-hero__chip b { font-size: 26px; }
.zd-hero--bg .zd-badge-promo,
.zd-hero--full .zd-badge-promo { top: auto; bottom: 48px; right: 6%; }
/* 2–4 stats: one row that fits however many rows the editor added. */
.zd-hero__band-items { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; padding: 22px 0; }
.zd-hero__band-item b { font-size: 26px; }
}
/* ============================================================
3. STICKY ANCHOR SUB-NAV
============================================================ */
.zd-subnav { position: sticky; top: var(--zd-header-h, 0px); z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--zd-line); }
.zd-subnav__scroll { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; height: var(--zd-nav-h); align-items: center; justify-content: safe center; }
.zd-subnav__scroll::-webkit-scrollbar { display: none; }
.zd-subnav__link { flex: none; padding: 9px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; color: var(--ink-600); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.zd-subnav__link:hover { background: var(--zd-tint); color: var(--zd-accent-strong); }
.zd-subnav__link.is-active { background: var(--zd-accent); color: #fff; }
/* ============================================================
4. INTRO / "Що собою являє"
============================================================ */
.zd-intro__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.zd-prose { font-size: 16px; line-height: 1.7; color: var(--zd-text); }
.zd-prose > * + * { margin-top: 14px; }
.zd-prose p { margin: 0; }
.zd-prose ul { margin: 24px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.zd-prose li { display: flex; gap: 10px; align-items: flex-start; }
/* Sized here, not on the SVG: markers come from the icon library (zd_sp_icon),
whose SVGs carry a viewBox but no width/height attributes. */
.zd-prose li svg { flex: none; width: 18px; height: 18px; color: var(--zd-accent); margin-top: 3px; }
.zd-intro__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 16/11; background: linear-gradient(150deg, var(--green-100), var(--green-50)); color: var(--zd-accent-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.zd-intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ============================================================
6. INDICATIONS / CONTRAINDICATIONS
============================================================ */
.zd-checks { display: grid; grid-template-columns: 1fr; gap: 18px; }
.zd-check { padding: 24px; }
.zd-check__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.zd-check__badge { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.zd-check--ok .zd-check__badge { background: var(--zd-tint-2); color: var(--zd-ok); }
.zd-check--no .zd-check__badge { background: #fdeceb; color: var(--zd-no); }
.zd-check__title { font-weight: 700; font-size: 17px; color: var(--ink-800); }
.zd-check__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.zd-check__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--zd-text); }
.zd-check__list li svg { flex: none; margin-top: 2px; }
.zd-check--ok .zd-check__list li svg { color: var(--zd-ok); }
.zd-check--no .zd-check__list li svg { color: var(--zd-no); }
/* ============================================================
10. PRICING TABLE
============================================================ */
.zd-pricing { background: var(--surface); border: 1px solid var(--zd-line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.zd-price-row { display: grid; grid-template-columns: 1fr auto; column-gap: 18px; row-gap: 2px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--zd-line); }
.zd-price-row:last-child { border-bottom: 0; }
.zd-price-row__name { grid-column: 1; grid-row: 1; align-self: end; font-weight: 600; font-size: 15.5px; color: var(--ink-800); }
.zd-price-row__note { grid-column: 1; grid-row: 2; align-self: start; font-size: 13px; color: var(--zd-muted); }
.zd-price-row__cost { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 800; font-size: 18px; color: var(--zd-accent-strong); white-space: nowrap; text-align: right; }
.zd-price-row__cost small { display: block; font-weight: 600; font-size: 11px; color: var(--zd-muted); }
.zd-price-row--feature { background: var(--zd-tint); }
.zd-price-row--feature .zd-price-row__name::before { content: "Популярне"; display: inline-block; margin-right: 9px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--zd-accent); color: #fff; font: 800 10px/1.7 var(--font-heading); letter-spacing: .09em; text-transform: uppercase; vertical-align: middle; }
.zd-pricing__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; background: var(--ink-50); }
.zd-pricing__cta-note { font-size: 13.5px; color: var(--zd-muted); }
/* ============================================================
11. STAGES
============================================================ */
.zd-stages { display: grid; grid-template-columns: 1fr; gap: 16px; counter-reset: stage; }
.zd-stage { position: relative; padding: 24px; }
.zd-stage__num { width: 40px; height: 40px; border-radius: 50%; background: var(--zd-accent); color: #fff; font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.zd-stage__title { margin: 14px 0 6px; font-size: 16px; font-weight: 700; color: var(--ink-800); }
.zd-stage__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--zd-muted); }
.zd-stage__time { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--zd-tint); color: var(--zd-accent-deep); font-weight: 700; font-size: 12px; }
/* ============================================================
12. PRACTICE CASE
============================================================ */
.zd-case { display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden; padding: 0; }
.zd-case__media { position: relative; aspect-ratio: 16/10; background: linear-gradient(150deg, var(--green-100), var(--green-50)); color: var(--zd-accent-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.zd-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zd-case__body { padding: 28px; }
.zd-case__steps { display: grid; gap: 16px; margin-top: 18px; }
.zd-case__step { padding-left: 18px; border-left: 3px solid var(--zd-tint-2); }
.zd-case__step b { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--zd-accent-strong); margin-bottom: 4px; }
.zd-case__step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--zd-text); }
/* ============================================================
13. BEFORE / AFTER (comparison slider + case carousel)
============================================================ */
.zd-ba-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.zd-ba__viewer { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); user-select: none; touch-action: none; background: var(--ink-200); }
.zd-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zd-ba__img--after { filter: saturate(1.05) brightness(1.04); }
.zd-ba__clip { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.zd-ba__clip img { width: 100vw; max-width: none; height: 100%; object-fit: cover; }
.zd-ba__before-wrap { position: absolute; inset: 0; }
.zd-ba__before-wrap img { filter: grayscale(.35) brightness(.92); }
.zd-ba__tag { position: absolute; bottom: 12px; padding: 4px 10px; border-radius: var(--radius-pill); font-weight: 700; font-size: 11px; color: #fff; background: rgba(15,23,42,.7); }
.zd-ba__tag--before { left: 12px; }
.zd-ba__tag--after { right: 12px; }
.zd-ba__handle { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.15); left: 50%; transform: translateX(-50%); }
.zd-ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; cursor: ew-resize; color: var(--zd-accent-strong); }
.zd-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.zd-ba__ph { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.zd-ba__ph--before { background: linear-gradient(150deg, var(--ink-100), #e9eef1); color: var(--ink-500); }
.zd-ba__ph--after { background: linear-gradient(150deg, var(--green-100), var(--green-50)); color: var(--zd-accent-strong); }
.zd-ba__ph-note { font: 500 10px/1 "Roboto Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.zd-ba__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zd-ba-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.zd-ba-nav__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--zd-line); background: var(--surface); color: var(--zd-accent-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s; }
.zd-ba-nav__btn:hover { background: var(--zd-tint); border-color: var(--border-tint); }
.zd-ba-dots { display: flex; gap: 8px; }
.zd-ba-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); border: 0; padding: 0; cursor: pointer; transition: background .2s, transform .2s; }
.zd-ba-dot.is-active { background: var(--zd-accent); transform: scale(1.3); }
.zd-ba__meta { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; }
.zd-ba__meta[hidden] { display: none; }
.zd-ba__meta-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--zd-text); }
.zd-ba-grid--solo { grid-template-columns: 1fr !important; }
.zd-ba__meta-head { margin-bottom: 14px; }
.zd-ba__meta-head .zd-eyebrow { display: block; margin-bottom: 7px; }
.zd-ba__meta-head .zd-value__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink-800); }
.zd-ba__meta dl { margin: 0; display: block; }
.zd-ba__meta dt { font-size: 12.5px; color: var(--zd-muted); }
.zd-ba__meta dd { margin: 0 0 11px; padding-bottom: 11px; font-size: 15px; font-weight: 700; color: var(--ink-800); border-bottom: 1px solid var(--zd-line); }
.zd-ba__meta dd:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.zd-ba__meta > .zd-btn { margin-top: auto; align-self: center; }
/* Custom-CTA icons come from the icon library, whose SVGs have a viewBox but no
width/height — size them here or they render at the 300x150 SVG default. */
.zd-ba__cta svg { flex: none; width: 16px; height: 16px; }
/* ============================================================
17. LOCAL / "Як до нас дістатися"
============================================================ */
.zd-local__grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.zd-local__addr { display: grid; gap: 12px; margin-top: 8px; }
.zd-local__addr-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--zd-text); }
.zd-local__addr-row svg { flex: none; color: var(--zd-accent-strong); margin-top: 2px; }
.zd-map { position: relative; min-height: 280px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--zd-line); background: repeating-linear-gradient(0deg,#eef2f1,#eef2f1 1px,#f6f8f7 1px,#f6f8f7 30px), repeating-linear-gradient(90deg,#eef2f1,#eef2f1 1px,#f6f8f7 1px,#f6f8f7 30px); }
.zd-map__pin { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zd-map__marker { width: 44px; height: 44px; border-radius: 50%; background: var(--zd-accent); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); color: #fff; }
.zd-map__label { font-weight: 700; font-size: 13px; color: var(--ink-700); background: #fff; padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); }
/* A pasted Google Maps