/* tapki-theme.css — візуальна доводка під Figma-еталон (home-preview.html).
   Токени: Montserrat (заголовки) + Open Sans (текст), #23856D акцент, radius 8px.
   Ядро Flatsome НЕ чіпаємо — лише дочірні перевизначення.
   Design-токени — у tokens.css (єдине джерело правди), підключається ПЕРШИМ. */

/* ─── Типографіка ─── */
body{ font-family:var(--tapki-font-body,'Open Sans',sans-serif); color:var(--tapki-text,#2d3436); }
h1,h2,h3,h4,h5,h6,
.heading-font,.entry-title,.product-title,
.section-title b,.section-title span{
  font-family:var(--tapki-font-head,'Montserrat',sans-serif); color:var(--tapki-text,#2d3436);
}

/* ─── Заголовки секцій (Flatsome [title]) ─── */
.section-title-container{ margin-bottom:1.4rem; }
.section-title b{ border-color:var(--tapki-green,#23856D); }

/* ─── Кнопки ─── */
.button{
  border-radius:var(--tapki-radius,8px);
  font-family:var(--tapki-font-head,'Montserrat',sans-serif); text-transform:none; font-weight:600;
}
/* ⚠ 2026-08-09, рішення власника: усі кнопки — колір ядра бренду #23856D, той самий, що плитки,
   топбар і знак. Це свідома зміна попереднього правила (кнопки жили на --tapki-green-600 заради
   контрасту 5.61). Ціна названа й прийнята: білий текст на #23856D дає 2.91 при нормі 4.5 —
   такий самий компроміс, який уже діє на плитках каталогу. Єдність схеми обрана свідомо.
   Якщо колись знадобиться повернути контраст — у tokens.css лежить готова роль --tapki-green-cta. */
.button.primary,.button.success{ background-color:var(--tapki-green,#23856D); border-color:var(--tapki-green,#23856D); }
.button.primary:hover,.button.success:hover{ background-color:var(--tapki-green-hover,#1c6a57); border-color:var(--tapki-green-hover,#1c6a57); }
.button.white{ color:var(--tapki-green-tx,#2e7564); }

/* ─── Картки товарів у гріді ─── */
/* Рівна висота карток у ряду (Ф13-fix): картка тягнеться на всю клітинку, текст-блок гнучкий —
   різна довжина назви / бейдж «Хіт» не роблять картки різними. Кнопка притиснута донизу. */
.products.row{ align-items:stretch; }        /* ряд-грід: флекс тягне колонки Flatsome (.col) на рівну висоту */
.product-small.col .col-inner{ height:100%; } /* обгортка заповнює колонку — і в гріді, і в flickity-слайдері (ряд без класу .products) */
.product-small.box{ height:100%; display:flex; flex-direction:column; }
.product-small.box .box-image{ flex:0 0 auto; }
.product-small.box .box-text{ flex:1 1 auto; display:flex; flex-direction:column; }
.product-small.box .box-text .price-wrapper,
.product-small.box .box-text .add_to_cart_button,
.product-small.box .box-text .button{ margin-top:auto; }
.product-small.box{
  border:1px solid #e8e8e8; border-radius:var(--tapki-radius,8px);
  overflow:hidden; transition:box-shadow .25s ease, transform .25s ease;
}
.product-small.box:hover{ box-shadow:0 6px 20px rgba(17,24,39,.09); transform:translateY(-3px); border-color:#d1d5db; } /* нейтральний hover — без зеленого тінту/тіні (на прохання оператора: зелень виглядала як «рамка більша за фото») */
.product-small .box-text{ padding:12px 14px; }
.product-small .name a,.product-small .product-title{ color:var(--tapki-text,#2d3436); font-weight:600; }
/* картка товару: мітка категорії — крупніше і яскравіше (було is-smaller op-8 — дрібно/бліло) */
.product-small .category.product-cat,
.product-small .category{ color:var(--tapki-green-tx,#2e7564) !important; font-size:12.5px !important; letter-spacing:.3px; opacity:.95 !important; margin-bottom:3px; }
/* назва товару — читабельніше + РІВНО 2 рядки: min-height тримає мінімум, line-clamp обрізає довші
   (напр. 3-рядкові) до 2 рядків з «…». Так картки рівні всюди — і в гріді, і в flickity-слайдері,
   де flex-висота не пробивається крізь absolute-комірки. Повна назва — на сторінці товару. */
.product-small .name.product-title,
.product-small .woocommerce-loop-product__title{
  font-size:16px !important; font-weight:600; line-height:1.35;
  min-height:2.7em; overflow:hidden;
}
/* Текст назви лежить у <a> (inline-block, без конкурентних правил); саму .name тема перебиває на
   display:flow-root, тож клампимо якір: рівно 2 рядки з «…», картки однакові скрізь. */
.product-small .name a{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
/* Мобільний (≤549px): вузька 2-колонкова картка — 2 рядки надто ріжуть назву. Даємо 3 рядки
   (і clamp, і min-height синхронно → картки лишаються рівними, просто вищі). */
@media (max-width:549px){
  .product-small .name.product-title,
  .product-small .woocommerce-loop-product__title{ min-height:4.05em; }
  .product-small .name a{ -webkit-line-clamp:3; line-clamp:3; }
}
/* ціна — крупніше */
.product-small .price, .product-small .price-wrapper .price{ font-size:18px; font-weight:700; }

/* ціна — зелена жирна (як еталон) */
.price .amount,.woocommerce-Price-amount,
.product .price ins .amount{ color:var(--tapki-green-tx,#2e7564); font-weight:700; }
del .amount{ color:#9aa0a6; font-weight:400; }

/* ── Єдина колірна схема кнопок (рішення власника 09.08) ──
   Усі кнопки сайту — колір ядра бренду #23856D, той самий, що плитки, топбар і знак.
   Кнопки покупки Flatsome фарбує з secondary (.button.alt), тому приводимо їх сюди явно,
   інакше «До кошика» лишалась би темнішою за решту.
   ⚠ Білий текст на #23856D дає 2.91 — нижче норми AA. Це свідомий вибір власника заради
   єдиної схеми: рівно такий самий компроміс уже прийнято для плиток каталогу. */
.button.alt, .single_add_to_cart_button, .checkout-button, #place_order,
button[name="woocommerce_checkout_place_order"], .tapki-osum-btn--primary, .tapki-btn-green {
  background-color:var(--tapki-green,#23856D) !important;
  border-color:var(--tapki-green,#23856D) !important;
  color:#fff !important;
}
.button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover,
.tapki-osum-btn--primary:hover, .tapki-btn-green:hover {
  background-color:var(--tapki-green-hover,#1c6a57) !important;
  border-color:var(--tapki-green-hover,#1c6a57) !important;
}

/* Дві кнопки лишались поза схемою — заміряно обходом усіх кнопок сайту:
   пошук у шапці брав secondary (#347162). Кнопка «Фільтр» — теж поза схемою, але її правило
   живе в inc/header-critical-css.php: файловий CSS для неї RUCSS вирізає. */
.ux-search-submit, .ux-search-submit.submit-button {
  background-color:var(--tapki-green,#23856D) !important;
  border-color:var(--tapki-green,#23856D) !important;
  color:#fff !important;
}

/* Текст на бренд-кнопці — чистий білий. Flatsome сам обирає відтінок і ставив #f1f1f1,
   що додатково знижувало контраст на крок сірого. */
.button.primary, .button.primary:hover, input[type="submit"].primary { color:#fff; }

/* кнопка "Додати в кошик" на картці */
.product-small .button.add_to_cart_button,
.product-small .add_to_cart_button,
ul.products li.product .button{
  background:var(--tapki-green,#23856D); border-color:var(--tapki-green,#23856D); color:#fff;
  border-radius:var(--tapki-radius,8px); width:100%; text-align:center;
}
.product-small .add_to_cart_button:hover{ background:var(--tapki-green-hover,#1c6a57); border-color:var(--tapki-green-hover,#1c6a57); }

/* ─── Категорії-плитки (ux_banner на головній) ─── */
.ux-box-text h3{ font-family:var(--tapki-font-head,'Montserrat',sans-serif); }

/* ─── Фільтри в сайдбарі ─── */
.widget_layered_nav ul li a:hover,
.wc-layered-nav-term a:hover{ color:var(--tapki-green-tx,#2e7564); }

/* ─── Хлібні крихти ─── */
.breadcrumbs{ font-size:.8em; color:var(--tapki-gray-bc, #8a9099); }
.breadcrumbs a:hover{ color:var(--tapki-green-tx,#2e7564); }

/* ─── Посилання-акценти ─── */
/* Текст посилань — green-tx (5.61:1). На бренд-зеленому було 2.91:1 (фронт M2). */
a{ color:var(--tapki-green-tx,#2e7564); }
/* Hover теж мусить проходити поріг: #1c6a57 давав 3.93:1. Беремо green-700 (8.89:1) —
   він і темніший за звичайний стан, тобто hover лишається візуально відмінним. */
a:hover{ color:var(--tapki-green-700,#1d5447); }

/* ─── Шапка: меню в ОДИН рядок (як у Figma-еталоні — без CAPS) ─── */
.header-nav-main{ flex-wrap:nowrap; }
.header-nav-main > li{ white-space:nowrap; }
.header-nav.nav-uppercase > li > a,
.header-nav-main > li > a{
  font-size:15px;
  padding:0 10px;
  letter-spacing:0;
  font-weight:500;                  /* меню — medium (не надто жирне) */
  text-transform:none !important;   /* прибираємо UPPERCASE — як в еталоні; !important перебиває .nav-uppercase Flatsome */
}
/* стрілку-дропдаун ▼ прибрано на рівні HTML (inc/frontend-cleanup.php) — Rocket вирізав CSS-варіант */
/* проміжний десктоп — компактніше (щоб меню+«Кабінет»+кошик влазили без налазання) */
@media (min-width:850px) and (max-width:1400px){
  .header-nav-main > li > a{ font-size:14px; padding:0 8px; }
}
/* «Увійти / Кошик» праворуч */
.header-nav-main.nav-right > li > a{ padding:0 8px; font-size:13.5px; text-transform:none; }
/* ЛОГОТИП не стискати (меню з flex-wrap:nowrap витісняло його у flex-контейнері) */
#logo,#logo.logo{ flex:0 0 auto; }
#logo img{ max-width:160px; width:auto; height:auto; }
/* Кошик: текст «Кошик/сума» РЯДОМ з іконкою (в один рядок), не над нею */
.header-nav .cart-item{ margin-left:6px; }
.header-cart-title{ white-space:nowrap; width:auto !important; }
.header-cart-link{ flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:8px; }
.header-cart-link .cart-icon{ margin:0 !important; display:inline-flex !important; flex:0 0 auto; }

/* ─── Top-bar: брендовий шрифт + рівні цифри (час/телефон) ─── */
.header-top{
  font-family:var(--tapki-font-body,'Open Sans',sans-serif);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.header-top .html,
.header-top a,
.header-top span{ font-size:13px; font-weight:400; letter-spacing:.1px; }
.header-top i[class^="icon-"]{ font-size:15px; margin-right:4px; vertical-align:-1px; opacity:.95; }
/* мобільний top-bar: компактніше, без переносів (часи/email сховані класом hide-for-small) */
@media (max-width:549px){
  .header-top{ font-size:12px; min-height:36px; }
  .header-top .html > div{ gap:12px !important; justify-content:center; }
  .header-top i[class^="icon-"]{ font-size:14px; margin-right:3px; }
}

/* ─── Світлий текст на бренд-зеленому: білий, а не #f1f1f1 Flatsome ───
   Flatsome фарбує текст темних блоків у #f1f1f1 (.dark,.dark p,.dark td). На бренд-зеленому
   #23856D це 4,0:1 — нижче порогу AA 4,5 для звичайного тексту (Lighthouse 27.09.2026: кнопка
   «Отримати консультацію», 19 px, та кнопки банерів). Чистий білий дає 4,52:1. На темних фонах
   білий контраст лише підвищує, тож правило безпечне для всіх .dark-блоків. Селектор той самий,
   що у Flatsome: специфічність однакова, перемагає порядок підключення (цей файл — після теми). */
.dark,.dark p,.dark td{ color:#fff; }

/* ─── Плитки категорій (головна): читабельні заголовок+підзаголовок ───
   Без opacity: біле з прозорістю .95 на #23856D давало 4,25:1, нижче AA 4,5 (Lighthouse 27.09.2026).
   Чистий білий — 4,52:1. */
.cat-tile-sub{ font-size:17px !important; line-height:1.2; margin-top:4px; }
@media (max-width:549px){ .cat-tile-sub{ font-size:14px !important; line-height:1.35; } }
/* Заголовки чотирьох плиток стоять на одній лінії.
   Було: вміст плитки центрувався по вертикалі, тому довший підпис піднімав заголовок угору —
   заміряно 100.4 / 90.2 / 100.4 / 90.2 на 1440 і 83.7 / 74.3 / 73.7 / 83.7 на 390.
   Резервувати місце під підпис не годиться: на 390 колонка вужча, і найдовший підпис займає
   вже три рядки, а не два — резерв доводилось би вгадувати під кожну ширину (пробував: на
   360 і 390 підпис ліз за межі плитки).
   Тому центрування прибрано зовсім: вміст притиснутий до верху на однакову відстань, і
   заголовок стоїть на одному місці за будь-якої довжини підпису. Зсув по горизонталі
   (translateX) лишається — інакше вміст поїде вбік. */
.cat-tile .text-box{ top:18px !important; bottom:auto !important; transform:translateX(-50%) !important; }
/* На телефоні колонка вдвічі вужча: заголовок і підпис ідуть у два-три рядки й упираються
   в нижній край плитки (заміряно 200.7 і 201.8 при висоті 200). Тому тут коло значка менше
   й відступ зверху коротший — текст лишається всередині з запасом. */
@media (max-width:549px){
  /* width:96% — з 09.09 заголовки плиток довші («БРЕНДУВАННЯ» одним словом).
     Заміряно на 390: корисна ширина при width=90 була 117px, слово в капсі — 175px,
     виліт 58px (на 320 — 90px). 96% дає 158px; решту добирає м'який перенос у тексті. */
  .cat-tile .text-box{ top:10px !important; width:96% !important; }
  /* Заголовок у два рядки, не в три. Заміряно на 390: корисна ширина 126px, при 20px
     «ТОВАРИ ДЛЯ» займає 138px і слово «ДЛЯ» зривається на власний рядок — заголовок
     розповзається на три рядки й заповнює плитку від краю до краю. При 18px «ТОВАРИ ДЛЯ»
     = 124px і вміщається; «SPA & SAUNA» тоді стає в один рядок. */
  .cat-tile h3{ font-size:16px !important; line-height:1.15; letter-spacing:0 !important; }
  /* Flatsome кладе .text-inner з padding 16px з кожного боку — на плитці 165px це 32px,
     майже чверть ширини. Заміряно на 390: коробка заголовка 126px при 158px text-box.
     Через це «БРЕНДУВАННЯ» (140px у капсі) ламалось на два рядки, а «ТОВАРИ ДЛЯ ГОТЕЛІВ»
     на 375 і вужче — на три. 6px + знятий трекинг дають 146px: обидва стають цілими
     аж до 360px. Перевірено пробою на 320/360/375/390/412/430. */
  .cat-tile .text-inner{ padding-left:6px !important; padding-right:6px !important; }
  /* Підпис під заголовком розділу («Hotel Essentials · Spa · Hospitality», з 09.09).
     При 19.2px на 390 вона йде у два рядки й розрив падає ПІСЛЯ роздільника — «Spa ·»
     повисає в кінці рядка. 16px укладає її в один рядок аж до 360. */
  .section-title .sub-title{ font-size:16px !important; }
  /* body.home — щоб перебити правило кола нижче за файлом: специфічність там така сама,
     і без цього виграє те, що стоїть пізніше (перевірено заміром: коло лишалось 58px). */
  body.home .cat-tile .cat-tile-ico{ width:48px; height:48px; margin-bottom:6px; }
}
/* Найвужчі телефони (320-374px): підпис іде вже в чотири рядки й не вміщається у 200px висоти.
   Зменшуємо кегль підпису — плитка лишається однієї висоти, текст цілий. */
@media (max-width:374px){
  .cat-tile-sub{ font-size:12.5px !important; line-height:1.25; }
  /* на 320 підпису розділу бракує 6px до одного рядка — заміряно */
  .section-title .sub-title{ font-size:15px !important; }
}
/* текст плитки не перехоплює клік → вся плитка (разом зі словами) веде за посиланням */
.cat-tile .text-box, .cat-tile .text-box *{ pointer-events:none; }
.cat-tile{ cursor:pointer; border-radius:10px; overflow:hidden; }
.cat-tile .banner-bg, .cat-tile .banner-inner{ border-radius:10px; }
/* Іконка плитки (як у переваги, адаптовано під зелену плитку: білий line-значок у півпрозорому колі) */
.cat-tile .cat-tile-ico{ display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; margin-bottom:10px; border-radius:50%; background:rgba(255,255,255,.16); }
.cat-tile .cat-tile-ico .tapki-ico{ color:#fff; }   /* перебиває зелений .tapki-ico → білий значок на зеленій плитці */
.cat-tile .cat-tile-ico .tapki-svg{ display:block; }

/* ─── Блок «Наші категорії»: назва ПІД фото (не плашка-overlay, що «розрізає») ─── */
.box-category .box-text{
  position:static !important;
  background:transparent !important;
  bottom:auto !important;
  padding:10px 6px 0 !important;
}
.box-category .box-text-inner,
.box-category .box-text a,
.box-category .box-text strong,
.box-category .box-text .category-name{ color:var(--tapki-text,#2d3436) !important; text-shadow:none !important; }
/* .box-category .box-image (рамка, тінь, розмір фото, object-fit:contain) живе INLINE у
   inc/refresh-home.php — єдиний власник цих плиток. Inline, бо RUCSS вирізає такі правила з
   used-css (перевірено computed: у файлі лишалось cover). Тут їх немає навмисно (DRY). */

/* ─── Футер: 4 рівні колонки в ряд (віджети .col без span переносились) ─── */
#footer .footer-widgets .row.large-columns-4{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:24px 30px !important; width:100% !important; max-width:1080px !important; margin-left:auto !important; margin-right:auto !important; padding:0 15px !important; box-sizing:border-box !important; }
#footer .footer-widgets .row.large-columns-4 > .col{ flex:none !important; max-width:none !important; width:auto !important; padding-left:0 !important; }
@media (max-width:849px){ #footer .footer-widgets .row.large-columns-4{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:549px){ #footer .footer-widgets .row.large-columns-4{ grid-template-columns:1fr !important; text-align:center; } }

/* ─── H1 категорії/каталогу (Фаза 11, SEO — Flatsome не виводив H1) ─── */
.tapki-category-title{
  font-family:var(--tapki-font-head,'Montserrat',sans-serif); color:var(--tapki-text,#2d3436);
  font-size:1.6rem; font-weight:700; line-height:1.2;
  margin:0 0 .6rem;
}
@media (max-width:549px){ .tapki-category-title{ font-size:1.3rem; } }
/* Полірування товару (кнопка зразка + таблиця знижок) винесено INLINE у inc/sample-popup.php —
   RUCSS вирізає нові правила з used-css (memory wp-rocket-rucss-newclass), тому тут їх немає. */

/* ─── Стор.179 (послуга): акцент-риска під центрованими заголовками секцій ─── */
/* Перенесено з пілота refresh-pilot.php у бренд-слій (D7): семантичний .tapki-content h2 замість
   крихкого h2[style*="center"], колір — токен. Стабільний маркер сторінки body.page-id-179. */
body.page-id-179 .tapki-content h2{ position:relative; padding-bottom:16px; }
body.page-id-179 .tapki-content h2::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:56px; height:3px; border-radius:3px; background:var(--tapki-green,#23856D);
}

/* ─── Стор.140 (Контакти): єдина панель «контакти + карта» рівної висоти + форма заявки ─── */
/* Заміна emoji/хотлінк-блобів на бренд-іконки + об'єднання контактів і карти в ОДИН блок
   (карта тягнеться на всю висоту панелі, край-у-край) + модернізація форми CF7 (картка, 2-кол. сітка).
   Токени з fallback — RUCSS може різати :root (memory wp-rocket-rucss-newclass). Маркер body.page-id-140. */
body.page-id-140 .tapki-contacts h1{ margin-bottom:10px; }
body.page-id-140 .tapki-contacts-lead{
  color:var(--tapki-gray,#6b7280); max-width:680px; font-size:16px; line-height:1.6; margin:0 0 26px;
}

/* Єдина панель: інфо ліворуч + карта праворуч, в одній рамці, рівна висота (align-items:stretch) */
body.page-id-140 .tapki-contact-panel{
  display:flex; align-items:stretch; background:#fff; overflow:hidden;
  border:1px solid var(--tapki-border,#e5e7eb); border-radius:16px;
  box-shadow:0 2px 6px rgba(20,45,32,.06), 0 16px 40px rgba(45,168,112,.10);
}
body.page-id-140 .tapki-contact-panel__info{ flex:1 1 44%; min-width:0; padding:32px; display:flex; flex-direction:column; }
body.page-id-140 .tapki-contact-panel__map{ flex:1 1 56%; min-width:0; }
body.page-id-140 .tapki-contact-panel__map iframe{ display:block; width:100%; height:100%; min-height:440px; border:0; }

body.page-id-140 .tapki-contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
body.page-id-140 .tapki-contact-row{ display:flex; align-items:flex-start; gap:14px; margin:0; }
body.page-id-140 .tapki-contact-ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tapki-green-bg,#f1f9f7); color:var(--tapki-green,#23856D);
}
body.page-id-140 .tapki-contact-ico .tapki-ico{ display:inline-flex; }
body.page-id-140 .tapki-contact-ico svg{ width:20px; height:20px; }
body.page-id-140 .tapki-contact-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
body.page-id-140 .tapki-contact-label{
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--tapki-gray,#6b7280); font-weight:600;
}
body.page-id-140 .tapki-contact-body a,
body.page-id-140 .tapki-contact-value{
  color:var(--tapki-ink,#111827); font-size:15.5px; line-height:1.55; text-decoration:none;
}
body.page-id-140 .tapki-contact-body a:hover{ color:var(--tapki-green,#23856D); }

/* Месенджери — тонколінійні pill-кнопки, притиснуті до низу панелі (заповнюють висоту) */
body.page-id-140 .tapki-contact-msg{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:24px; }
body.page-id-140 .tapki-msg-btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; background:#fff;
  border:1px solid var(--tapki-border,#e5e7eb); border-radius:999px;
  color:var(--tapki-ink2,#4b5563); font-size:14.5px; font-weight:600; text-decoration:none;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
body.page-id-140 .tapki-msg-btn .tapki-ico{ display:inline-flex; }
body.page-id-140 .tapki-msg-btn svg,
body.page-id-140 .tapki-msg-btn img.tapki-msg-ico{ width:18px; height:18px; margin:0; display:inline-block; }
body.page-id-140 .tapki-msg-btn:hover{
  border-color:var(--tapki-green,#23856D); color:var(--tapki-green,#23856D); background:var(--tapki-green-bg,#f1f9f7);
}

/* Форма заявки — сучасна картка з 2-колонковою сіткою + брендові поля (замість «1998») */
body.page-id-140 .tapki-form-card{
  background:#fff; border:1px solid var(--tapki-border,#e5e7eb); border-radius:16px; padding:32px; margin-top:26px;
  box-shadow:0 2px 6px rgba(20,45,32,.06), 0 16px 40px rgba(45,168,112,.10);
}
body.page-id-140 .tapki-form-card h2{ margin:0 0 6px; }
body.page-id-140 .tapki-contacts-form-sub{ color:var(--tapki-gray,#6b7280); margin:0 0 22px; }
body.page-id-140 .tapki-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
body.page-id-140 .tapki-form-grid p{ margin:0; font-size:13.5px; font-weight:600; color:var(--tapki-ink2,#4b5563); }
body.page-id-140 .tapki-form-grid p br{ display:none; }
body.page-id-140 .tapki-form-grid .tf-full{ grid-column:1 / -1; }
body.page-id-140 .tapki-form-grid .wpcf7-form-control-wrap{ display:block; margin-top:6px; }
body.page-id-140 .wpcf7 input[type=text],
body.page-id-140 .wpcf7 input[type=tel],
body.page-id-140 .wpcf7 input[type=email],
body.page-id-140 .wpcf7 textarea{
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:15px; line-height:1.4;
  border:1px solid var(--tapki-border,#e5e7eb); border-radius:10px;
  background:var(--tapki-gray-bg,#f9fafb); color:var(--tapki-ink,#111827);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.page-id-140 .wpcf7 input[type=text]:focus,
body.page-id-140 .wpcf7 input[type=tel]:focus,
body.page-id-140 .wpcf7 input[type=email]:focus,
body.page-id-140 .wpcf7 textarea:focus{
  outline:none; border-color:var(--tapki-green,#23856D); background:#fff; box-shadow:0 0 0 3px rgba(85,168,112,.15);
}
body.page-id-140 .wpcf7 textarea{ min-height:130px; resize:vertical; }
body.page-id-140 .wpcf7 .wpcf7-submit{
  margin-top:6px; background:var(--tapki-green,#23856D); color:#fff; border:0; border-radius:10px;
  padding:13px 32px; font-weight:600; font-size:13.5px; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; transition:background .15s ease; width:auto;
}
body.page-id-140 .wpcf7 .wpcf7-submit:hover{ background:var(--tapki-green-hover,#1c6a57); }

@media (max-width:849px){
  body.page-id-140 .tapki-contact-panel{ flex-direction:column; }
  body.page-id-140 .tapki-contact-panel__map{ min-height:280px; }
  body.page-id-140 .tapki-contact-panel__map iframe{ min-height:280px; }
  body.page-id-140 .tapki-contact-msg{ margin-top:24px; }
}
@media (max-width:549px){
  body.page-id-140 .tapki-contact-panel__info{ padding:24px; }
  body.page-id-140 .tapki-form-card{ padding:22px; }
  body.page-id-140 .tapki-form-grid{ grid-template-columns:1fr; }
}

/* ── Останні вживання бренд-зеленого як ТЕКСТУ на світлому (фронт M2, замір 2026-08-05) ──
   #23856D дає 2.91:1 на білому — для тексту провал при нормі 4.5:1. Бренд-зелений лишається
   заливкою великих площин і текстом на ТЕМНОМУ тлі (там він 4.80:1 — і саме тому в темній секції
   головної його повернули після невдалої суцільної заміни). Тут — тільки світлий контекст. */
.skip-link, a.skip-link { color: var(--tapki-green-600, #2e7564) !important; }

/* ── Копірайт у футері: контраст (знайдено PageSpeed 2026-08-05) ──
   Flatsome задає rgba(0,0,0,.5) — це чорний з АЛЬФОЮ, тобто фактично #808080 на білому,
   3.94:1 при нормі 4.5:1. Власний замір цього не бачив: він брав лише RGB і відкидав альфу,
   тому рахував контраст чистого чорного (21:1). Інструмент виправлено, значення — теж. */
.copyright-footer, .copyright-footer a { color: var(--tapki-gray, #6b7280); }

/* ─── Секція без бічних полів ───
   Flatsome дає кожній .section падінг 0 30px. Через нього вміст сторінки починався на 30px
   правіше за логотип — вертикальні лінії шапки й контенту не збігались (заміряно на 1512:
   логотип 186, банер 216 при контейнері 171…1341).
   Знімаємо поля ЛИШЕ там, де вікно ширше за контейнер (1170 + 2×30): на вужчих екранах ці
   30px — єдине, що тримає вміст від краю, і без них рядок Flatsome із margin -15px вилазив
   за вікно (заміряно на 1024: .row шириною 1054 при вікні 1024). */
@media (min-width: 1230px) {
  .section.tapki-flush { padding-left: 0 !important; padding-right: 0 !important; }
  /* Заголовок статті лежить у блоці з власним падінгом 23px — тіло статті вже стояло на лінії
     логотипа, а шапка запису була вужчою за нього на 46px і давала зайвий перенос. */
  .entry-header-text { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── Плитки сегментів на головній («Нам довіряють») — тепер посилання ──────────────────
   До 21.08.2026 це були мертві картинки з підписом: покупець бачив свій сегмент і не міг
   по ньому нікуди піти. Тепер уся плитка — посилання на розділ каталогу, за картою самого
   сайту (меню «Товари для готелів» веде в /aksesuary-dlya-goteliw/, «Все для лазні» — у
   /vse-dlya-lazni/), а не за вигаданими адресами.

   ⚠ Скидання вигляду посилання (display/underline/color) задане ІНЛАЙНОМ у розмітці, не тут.
   Причина не в лінощах: RUCSS вирізає з бойового used-css правила по НОВИХ класах, і тоді
   плитка стала б синьою підкресленою — видимий злам. Тут лишається лише те, чия пропажа
   непомітна: ховер і фокус.

   ⚠ box-shadow картинки заданий інлайном у розмітці, тому ховер перебиває його !important —
   інакше інлайн виграє за специфічністю. */
.tapki-seg img { transition: transform .25s ease, box-shadow .25s ease; }
.tapki-seg h3  { transition: color .15s ease; }
.tapki-seg:hover img { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(45,168,112,.20) !important; }
.tapki-seg:hover h3  { color: var(--tapki-green-hover, #1c6a57); }
.tapki-seg:focus-visible { outline: 3px solid var(--tapki-green, #23856D); outline-offset: 4px; border-radius: 12px; }