/* Візуальні варіанти сайту. Без data-theme — базова тема «Кава» зі styles.css.
   Тема вмикається атрибутом <html data-theme="...">; перемикач — assets/theme-preview.js. */

/* ---------- шрифти: текст / заголовки, кожна тема перевизначає змінні ---------- */
:root {
  --font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", var(--font-sys);
  --font-head: "Unbounded", var(--font-sys);
  --head-weight: 700;
}
body, .btn, .fab, .lang__btn, .form input, .form select, .form textarea { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); }
h3 { font-family: var(--font-body); font-weight: 700; }
h1 { letter-spacing: -.01em; }
@media (min-width: 1000px) { body { font-size: 17px; } }

/* ========== Світла: кремовий перший екран, темний текст, засічки ========== */
[data-theme="light"] {
  --accent: #b35a22;
  --accent-2: #96481a;
  --cream: #faf5ef;
  --cream-2: #f0e6da;
  --font-head: "Lora", Georgia, serif;
  --head-weight: 600;
}
[data-theme="light"] .header { background: rgba(255,255,255,.96); color: var(--text); box-shadow: 0 1px 0 var(--cream-2); }
[data-theme="light"] .burger span { background: var(--text); }
[data-theme="light"] .lang { border-color: var(--cream-2); }
[data-theme="light"] .lang__btn { color: var(--muted); }
[data-theme="light"] .lang__btn.is-active { color: var(--white); }
[data-theme="light"] .nav { background: var(--white); }
[data-theme="light"] .nav a { border-bottom-color: var(--cream-2); }
[data-theme="light"] .hero { background: linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%); color: var(--text); }
[data-theme="light"] .hero__sub { color: var(--muted); }
[data-theme="light"] .hero__adv li { background: var(--white); border-color: var(--cream-2); box-shadow: var(--shadow); }
[data-theme="light"] .btn--ghost { color: var(--coffee); border-color: rgba(59,36,23,.35); }
[data-theme="light"] .btn--ghost:hover { background: rgba(59,36,23,.06); border-color: var(--coffee); }
[data-theme="light"] .section--alt { background: var(--cream); }
@media (min-width: 1000px) {
  [data-theme="light"] .nav { background: none; }
  [data-theme="light"] .nav a { color: var(--text); }
  [data-theme="light"] .nav a:hover { color: var(--accent-2); }
}

/* ========== Преміум: чорний + золото, строгі кути ========== */
[data-theme="noir"] {
  --coffee: #141414;
  --coffee-2: #262626;
  --cream: #f5f2ec;
  --cream-2: #e8e1d4;
  --accent: #c9a54e;
  --accent-2: #b08c35;
  --text: #1a1a1a;
  --muted: #6b665e;
  --radius: 6px;
  --shadow: 0 6px 24px rgba(0,0,0,.08);
  --font-body: "Inter", var(--font-sys);
  --font-head: "Playfair Display", Georgia, serif;
  --head-weight: 500;
}
[data-theme="noir"] h2::after { content: ""; display: block; width: 48px; height: 2px; margin-top: .45em; background: var(--accent); }
[data-theme="noir"] .header { background: rgba(20,20,20,.97); }
[data-theme="noir"] .hero { background: radial-gradient(circle at 85% 15%, #2e2618, var(--coffee) 55%); }
[data-theme="noir"] .hero__adv li { border-color: rgba(201,165,78,.3); }
[data-theme="noir"] .btn, [data-theme="noir"] .fab { border-radius: var(--radius); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
[data-theme="noir"] .btn, [data-theme="noir"] .fab,
[data-theme="noir"] .step__n, [data-theme="noir"] .checks li::before,
[data-theme="noir"] .lang__btn.is-active { color: var(--coffee); }
[data-theme="noir"] .btn--ghost { color: var(--white); }
[data-theme="noir"] .step__n { border-radius: var(--radius); }
[data-theme="noir"] .link, [data-theme="noir"] .machine__price, [data-theme="noir"] .promo .promo__until, [data-theme="noir"] .news__date { color: #7a5f18; }
[data-theme="noir"] .footer { background: #0a0a0a; }

/* ========== Капучино: молочно-бежевий перший екран, карамельний акцент, м'які форми ========== */
[data-theme="cappuccino"] {
  --coffee: #4a2c1d;
  --coffee-2: #6b4430;
  --cream: #f6ede3;
  --cream-2: #ead8c5;
  --accent: #a85a17;
  --accent-2: #8a4910;
  --text: #332015;
  --muted: #7d6656;
  --radius: 20px;
  --shadow: 0 10px 30px rgba(74,44,29,.10);
  --font-head: "Lora", Georgia, serif;
  --head-weight: 700;
}
[data-theme="cappuccino"] .header { background: rgba(74,44,29,.97); }
[data-theme="cappuccino"] .logo b { color: #e3cbb2; }
[data-theme="cappuccino"] .hero { background: radial-gradient(circle at 85% 15%, #fbf3ea, #e3cbb2 70%); color: var(--text); }
[data-theme="cappuccino"] .hero__sub { color: var(--muted); }
[data-theme="cappuccino"] .hero__adv li { background: rgba(255,255,255,.55); border-color: rgba(74,44,29,.12); }
[data-theme="cappuccino"] .btn--ghost { color: var(--coffee); border-color: rgba(74,44,29,.35); }
[data-theme="cappuccino"] .btn--ghost:hover { background: rgba(74,44,29,.06); border-color: var(--coffee); }
[data-theme="cappuccino"] .form input, [data-theme="cappuccino"] .form select, [data-theme="cappuccino"] .form textarea { border-radius: 14px; }
[data-theme="cappuccino"] .footer { background: #2e1a10; }

/* ========== Південь: теракота + сонячний жовтий, «пухкі» кнопки ========== */
[data-theme="sunny"] {
  --coffee: #7a2e1a;
  --coffee-2: #a8452a;
  --cream: #fff4e0;
  --cream-2: #ffe7bf;
  --accent: #f2b705;
  --accent-2: #dda600;
  --text: #3a1f14;
  --muted: #85604f;
  --radius: 22px;
  --shadow: 0 8px 0 rgba(122,46,26,.10);
  --head-weight: 800;
}
[data-theme="sunny"] .header { background: rgba(122,46,26,.97); }
[data-theme="sunny"] .hero { background: radial-gradient(circle at 90% 10%, #c85a35, var(--coffee) 65%); }
[data-theme="sunny"] .btn, [data-theme="sunny"] .fab,
[data-theme="sunny"] .step__n, [data-theme="sunny"] .checks li::before,
[data-theme="sunny"] .lang__btn.is-active { color: var(--text); }
[data-theme="sunny"] .btn--ghost { color: var(--white); }
[data-theme="sunny"] .btn { box-shadow: 0 4px 0 #b88a00; font-weight: 800; }
[data-theme="sunny"] .btn--ghost { box-shadow: none; }
[data-theme="sunny"] .link, [data-theme="sunny"] .machine__price, [data-theme="sunny"] .promo .promo__until, [data-theme="sunny"] .news__date { color: var(--coffee-2); }
[data-theme="sunny"] .logo b, [data-theme="light"] .logo b, [data-theme="raf"] .logo b,
[data-theme="noir"] .logo b, [data-theme="espresso"] .logo b, [data-theme="green"] .logo b { color: var(--accent); }
[data-theme="sunny"] .footer { background: #4a1b0f; }

/* ========== Еспресо: уся сторінка темна, акцент кольору крема ========== */
[data-theme="espresso"] {
  --card-bg: #1f160f; /* фон карток — для «обвідки» іконки, що напливає на фото */
  --coffee: #0e0906;
  --coffee-2: #2a1c14;
  --cream: #21170f;
  --cream-2: #2e2118;
  --accent: #d6a670;
  --accent-2: #e6bd8c;
  --text: #f2e8dd;
  --muted: #b5a291;
  --shadow: 0 0 0 1px rgba(255,255,255,.06);
  --head-weight: 600;
}
[data-theme="espresso"] body { background: #17100b; }
[data-theme="espresso"] .header { background: rgba(14,9,6,.95); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
[data-theme="espresso"] .hero { background: radial-gradient(circle at 80% 20%, #3a2618, #17100b 60%); }
[data-theme="espresso"] .card, [data-theme="espresso"] .goods li, [data-theme="espresso"] .faq details,
[data-theme="espresso"] .form, [data-theme="espresso"] .modal__box { background: #1f160f; color: var(--text); }
[data-theme="espresso"] .form label { color: var(--muted); }
[data-theme="espresso"] .form input, [data-theme="espresso"] .form select, [data-theme="espresso"] .form textarea { background: #17100b; border-color: #3d2c20; color: var(--text); }
[data-theme="espresso"] .modal__x { color: var(--text); }
[data-theme="espresso"] .btn, [data-theme="espresso"] .fab,
[data-theme="espresso"] .step__n, [data-theme="espresso"] .checks li::before,
[data-theme="espresso"] .lang__btn.is-active { color: #17100b; }
[data-theme="espresso"] .btn--ghost { color: var(--text); }
[data-theme="espresso"] .link, [data-theme="espresso"] .machine__price, [data-theme="espresso"] .promo .promo__until, [data-theme="espresso"] .news__date { color: var(--accent); }
[data-theme="espresso"] .footer { background: #0a0604; }

/* ========== Фірмова: кольори логотипа — графіт, бордо, зелений листок ========== */
[data-theme="brand"] {
  --coffee: #2f2a29;
  --coffee-2: #4e4544;
  --cream: #f7f4f2;
  --cream-2: #ebe4e1;
  --accent: #8e2b33;
  --accent-2: #74222a;
  --leaf: #2a7a48;
  --text: #2a2524;
  --muted: #6e6563;
}
[data-theme="brand"] .header { background: rgba(47,42,41,.97); }
[data-theme="brand"] .logo b { color: #7cc79a; }
[data-theme="brand"] .hero { background: radial-gradient(circle at 80% 20%, #4e4544, var(--coffee) 60%); }
[data-theme="brand"] .hero__adv li { border-color: rgba(124,199,154,.25); }
/* зелений — другорядний акцент, як листок на логотипі */
[data-theme="brand"] .checks li::before, [data-theme="brand"] .tag { background: var(--leaf); }
[data-theme="brand"] .faq summary::after { color: var(--leaf); }
[data-theme="brand"] .footer { background: #1f1b1a; }

/* ========== Фірмова нічна: уся сторінка темна, бордо + зелений листок ========== */
[data-theme="brand-dark"] {
  --card-bg: #1f1b1a; /* фон карток — для «обвідки» іконки, що напливає на фото */
  --coffee: #141211;
  --coffee-2: #2b2524;
  --cream: #201c1b;
  --cream-2: #2e2827;
  --accent: #b33a44;
  --accent-2: #c94d57;
  --leaf: #2f7d4f;
  --text: #f0ebe8;
  --muted: #b0a6a3;
  --shadow: 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="brand-dark"] body { background: #181514; }
[data-theme="brand-dark"] .header { background: rgba(20,18,17,.95); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
[data-theme="brand-dark"] .logo b { color: #7cc79a; }
[data-theme="brand-dark"] .hero { background: radial-gradient(circle at 80% 20%, #3a3231, #181514 60%); }
[data-theme="brand-dark"] .card, [data-theme="brand-dark"] .goods li, [data-theme="brand-dark"] .faq details,
[data-theme="brand-dark"] .form, [data-theme="brand-dark"] .modal__box { background: #1f1b1a; color: var(--text); }
[data-theme="brand-dark"] .form label, [data-theme="brand-dark"] .form__how legend { color: var(--muted); }
[data-theme="brand-dark"] .form input, [data-theme="brand-dark"] .form select, [data-theme="brand-dark"] .form textarea { background: #181514; border-color: #3a3332; color: var(--text); }
[data-theme="brand-dark"] .modal__x { color: var(--text); }
[data-theme="brand-dark"] .chip span { background: #181514; border-color: #3a3332; color: var(--text); }
[data-theme="brand-dark"] .checks li::before, [data-theme="brand-dark"] .tag { background: var(--leaf); }
[data-theme="brand-dark"] .faq summary::after { color: var(--leaf); }
[data-theme="brand-dark"] .link, [data-theme="brand-dark"] .machine__price, [data-theme="brand-dark"] .promo .promo__until, [data-theme="brand-dark"] .news__date { color: #e07a83; }
[data-theme="brand-dark"] .footer { background: #0e0c0c; }

/* ========== Зелена кав'ярня: глибокий зелений + крем + золото (прийом Jacobs) ========== */
[data-theme="green"] {
  --coffee: #2f4531;
  --coffee-2: #3f5a41;
  --cream: #fbf6ee;
  --cream-2: #efe6d6;
  --accent: #c2a866;
  --accent-2: #ab9150;
  --text: #1f2a20;
  --muted: #66705f;
  --head-weight: 700;
}
[data-theme="green"] .header { background: rgba(47,69,49,.97); }
[data-theme="green"] .hero { background: radial-gradient(circle at 80% 20%, #4a6a4c, var(--coffee) 60%); }
[data-theme="green"] .hero__adv li { border-color: rgba(194,168,102,.3); }
/* золото світле — текст на ньому темно-зелений */
[data-theme="green"] .btn, [data-theme="green"] .fab, [data-theme="green"] .step__n,
[data-theme="green"] .checks li::before, [data-theme="green"] .lang__btn.is-active,
[data-theme="green"] .chip input:checked + span, [data-theme="green"] .tag { color: #1f2e21; }
[data-theme="green"] .btn--ghost { color: var(--white); }
[data-theme="green"] .link, [data-theme="green"] .machine__price, [data-theme="green"] .promo .promo__until, [data-theme="green"] .news__date { color: #7a6430; }
[data-theme="green"] .footer { background: #1e2d20; }

/* ========== Раф: ванільно-персикова пастель, без засічок, дуже м'які форми ========== */
[data-theme="raf"] {
  --coffee: #5b3a2e;
  --coffee-2: #7a5243;
  --cream: #fff4ec;
  --cream-2: #fbe3d4;
  --accent: #b4512f;
  --accent-2: #97411f;
  --text: #4a2f25;
  --muted: #7a5c50;
  --radius: 26px;
  --shadow: 0 14px 40px rgba(208,105,74,.12);
  --font-head: "Manrope", var(--font-sys);
  --head-weight: 800;
}
[data-theme="raf"] h1, [data-theme="raf"] h2 { letter-spacing: -.03em; }
[data-theme="raf"] .header { background: rgba(255,250,246,.95); color: var(--text); box-shadow: 0 1px 0 var(--cream-2); }
[data-theme="raf"] .burger span { background: var(--text); }
[data-theme="raf"] .lang { border-color: var(--cream-2); }
[data-theme="raf"] .lang__btn { color: var(--muted); }
[data-theme="raf"] .lang__btn.is-active { color: var(--white); }
[data-theme="raf"] .nav { background: #fffaf6; }
[data-theme="raf"] .nav a { border-bottom-color: var(--cream-2); }
[data-theme="raf"] .hero { background: linear-gradient(150deg, #fff6ee 0%, #fbdcc8 100%); color: var(--text); }
[data-theme="raf"] .hero__sub { color: var(--muted); }
[data-theme="raf"] .hero__adv li { background: rgba(255,255,255,.75); border-color: transparent; box-shadow: var(--shadow); }
[data-theme="raf"] .btn--ghost { color: var(--accent-2); border-color: rgba(208,105,74,.4); }
[data-theme="raf"] .btn--ghost:hover { background: rgba(208,105,74,.08); border-color: var(--accent); }
[data-theme="raf"] .section--dark { background: linear-gradient(150deg, var(--coffee) 0%, #7a4a38 100%); }
[data-theme="raf"] .form input, [data-theme="raf"] .form select, [data-theme="raf"] .form textarea { border-radius: 16px; border-color: #f0d3c2; }
[data-theme="raf"] .footer { background: #3d261d; }
@media (min-width: 1000px) {
  [data-theme="raf"] .nav { background: none; }
  [data-theme="raf"] .nav a { color: var(--text); }
  [data-theme="raf"] .nav a:hover { color: var(--accent-2); }
}

/* ---------- «пігулки» способу зв'язку в темах із темним текстом на акценті ---------- */
[data-theme="noir"] .chip input:checked + span,
[data-theme="sunny"] .chip input:checked + span,
[data-theme="espresso"] .chip input:checked + span,
[data-theme="noir"] .tag,
[data-theme="sunny"] .tag,
[data-theme="espresso"] .tag { color: #17100b; }
[data-theme="espresso"] .chip span { background: #17100b; border-color: #3d2c20; color: var(--text); }
[data-theme="espresso"] .form__how legend { color: var(--muted); }

/* ---------- іконки: де акцент світлий (золото, жовтий) — темніший колір, щоб не губились на білому ---------- */
[data-theme="noir"]       { --icon: #7a5f18; }
[data-theme="sunny"]      { --icon: var(--coffee-2); }
[data-theme="green"]      { --icon: var(--coffee-2); }
[data-theme="brand-dark"] { --icon: #e07a83; }
/* світлий перший екран — кружечок під іконкою кремовий замість напівпрозорого білого */
[data-theme="light"] .ico, [data-theme="cappuccino"] .ico, [data-theme="raf"] .ico { background: var(--cream-2); color: var(--accent); }

/* ========== Шрифти поверх будь-якої теми: <html data-font="..."> (м'які, спокійні) ========== */
/* стоять після тем — при однаковій специфічності перемагають їхні --font-* */
[data-font="nunito"]    { --font-head: "Nunito", var(--font-sys); --font-body: "Nunito", var(--font-sys); --head-weight: 800; }
[data-font="comfortaa"] { --font-head: "Comfortaa", var(--font-sys); --font-body: "Nunito", var(--font-sys); --head-weight: 700; }
[data-font="cormorant"] { --font-head: "Cormorant", Georgia, serif; --font-body: "Nunito", var(--font-sys); --head-weight: 600; }
/* у Cormorant дрібне око літер — вирівнюємо видимий розмір заголовків */
[data-font="cormorant"] h1, [data-font="cormorant"] h2 { font-size-adjust: .5; letter-spacing: 0; }
/* шрифт цифрової держави (як у «Дії») */
[data-font="eukraine"]  { --font-head: "e-Ukraine Head", var(--font-sys); --font-body: "e-Ukraine", var(--font-sys); --head-weight: 700; }
/* вузькі заголовки великими літерами (як у Jacobs і VIČI), текст — шрифт теми */
[data-font="condensed"] { --font-head: "Fira Sans Extra Condensed", "Arial Narrow", var(--font-sys); --head-weight: 700; }
[data-font="condensed"] h1, [data-font="condensed"] h2 { text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
/* український Fixel від MacPaw (SIL OFL — без вимоги підпису на сайті, на відміну від e-Ukraine) */
[data-font="fixel"]     { --font-head: "Fixel Display", var(--font-sys); --font-body: "Fixel Text", var(--font-sys); --head-weight: 700; }
/* «кавовий» вузький шрифт VIČI/Jacobs; дрібний — вирівнюємо видимий розмір заголовків */
[data-font="yanone"]    { --font-head: "Yanone Kaffeesatz", "Arial Narrow", var(--font-sys); --head-weight: 700; }
[data-font="yanone"] h1, [data-font="yanone"] h2 { font-size-adjust: .52; letter-spacing: .01em; line-height: 1.05; }
/* рукописний акцент: лише заголовки розділів, решта — шрифти теми */
[data-font="hand"] .section h2 { font-family: "Caveat", cursive; font-weight: 700; font-size-adjust: .55; text-transform: none; letter-spacing: 0; }

/* ========== Нумерація розділів «01 / 02 …»: <html data-num="on"> ========== */
[data-num="on"] main { counter-reset: sec; }
[data-num="on"] .section h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) "  ——";
  display: block; margin-bottom: .55em;
  font: 800 .8rem/1 var(--font-body); font-size-adjust: none;
  letter-spacing: .18em; text-transform: none; white-space: pre;
  color: var(--accent-2);
}
[data-num="on"] .section--dark h2::before { color: var(--accent); }

/* ---------- перемикач варіантів (лише для перегляду) ---------- */
.theme-picker {
  position: fixed; left: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 70;
  max-width: calc(100vw - 20px);
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: rgba(255,255,255,.95); border-radius: 22px; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  font: 600 .8rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.theme-picker button {
  display: flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: #333; font: inherit; cursor: pointer;
}
.theme-picker button.is-active { background: #222; color: #fff; }
.theme-picker__row { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-picker i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.theme-picker b { font-size: 1rem; font-weight: 600; line-height: 1; }
.theme-picker span { display: none; }
@media (min-width: 640px) { .theme-picker span { display: inline; } }
/* службовий ряд: «Посилання на варіант» і «Згорнути»; згорнута панель — лише кнопка «Варіанти» */
.theme-picker__tools { border-top: 1px solid rgba(0,0,0,.1); padding-top: 4px; }
.theme-picker__tools button { background: #f1ece7; }
.theme-picker.is-min { padding: 4px; }
.theme-picker.is-min .theme-picker__row:not(.theme-picker__tools),
.theme-picker.is-min .theme-picker__tools button:first-child { display: none; }
.theme-picker.is-min .theme-picker__tools { border: 0; padding: 0; }