/*
 * eTravelPort — sitewide CSS
 * URL: https://ai.etravelport.pl/css/etp-site.css
 *
 * Що це: усі стилі сайту Ghost (Casper), які раніше жили в
 * Settings → Code injection → Site Header (~57k, упирались у ліміт 65k).
 * Analytics / Meta Pixel / Google Fonts лишаються в хедері Ghost.
 *
 * Як підключити (один раз, поверх старого CSS, потім старий <style> прибрати):
 *   <link rel="preconnect" href="https://ai.etravelport.pl">
 *   <link rel="stylesheet" href="https://ai.etravelport.pl/css/etp-site.css?v=2026-10-23">
 *
 * Звідки зібрано:
 *   блоки 1–18  — docs/ghost/sitewide-backup/codeinjection_head.html
 *   блоки 19–29 — docs/ghost/sitewide-patch/casper-compat-and-cards.html
 *   блок 30     — docs/ghost/sitewide-patch/article-blocks.html (картки Storyteller)
 *
 * Прибрано після звірки HTML живих сторінок (style/script зрізані, жовтень 2026):
 *   × Тема Edition (.gh-foot*, .is-head-open, .gh-outer.cover, .gh-mobile-menu) —
 *     Casper має .site-footer / .gh-head-open (блок 19)
 *   × #scroll-to-filters — кнопки немає на last/first/wyszukiwarka
 *   × .dyn-hotel-title / .dyn-hotel-btn / .ua-wide-inner — старий фідер polecane, зараз .dest-card
 *
 * Навмисно залишено:
 *   Unit.travel — /rezerwacja-hoteli/ (форма + сітка offers). Не плутати з Wakacje (#widget-holder).
 *   .page-intro-description — рожевий інтро-блок (є в тестових/старих лендінгах)
 *   body.ua-page — клас вішає футер-скрипт на /ua/
 *   .travelexpert-* / .etp-listing-badge / .expert-review-section — малює widget.bundle.js
 *   .tab-btn / .filter-grid — polecane, oferty, старі форми пошуку
 *
 * Правки: цей файл у git. Після пуша Vercel віддає його з /css/etp-site.css
 * (кеш ~5 хв, як у віджета). Не класти в public/widget/ — vite emptyOutDir зітре.
 */

/* ========================================================================== */
/* ЧАСТИНА A. БАЗОВИЙ ШАР (пошук, картки країн, віджет Wakacje, типографіка) */
/* ========================================================================== */
/* ==========================================================================
   1. ГЛОБАЛЬНІ НАЛАШТУВАННЯ ТА ШРИФТИ
   ========================================================================== */
html {
    scroll-behavior: smooth; /* Плавна прокрутка сторінки до якорів */
}

/* Примусово застосовуємо шрифт Inter до всіх текстових елементів */
body, h1, h2, h3, h4, h5, h6, p, .tab-btn, .btn-submit {
    font-family: 'Inter', sans-serif !important; 
}

/* Лендінги /ua/: клас body.ua-page вішає скрипт у Site Footer. Градієнт шапки — також у блоці Casper (19/22). */
body.ua-page,
body.ua-page #gh-head {
    background: linear-gradient(135deg, #4b0082 0%, #ff0066 100%) !important;
}
body.ua-page .gh-head { background: transparent !important; }
body.ua-page .gh-head-logo,
body.ua-page .nav a,
body.ua-page .gh-search,
body.ua-page .gh-burger { color: white !important; }


/* Мобільне меню Casper: .gh-head-open — блок 19. Старі .is-head-open / .gh-mobile-menu прибрані (їх немає в DOM). */

/* Powered by Ghost — ще трапляється в розмітці Casper, ховаємо. Футер (.site-footer) стилізує блок 19. */
.gh-powered-by { display: none !important; }


/* Доступність (Accessibility): красива рожева рамка при навігації клавіатурою (Tab) */
button:focus-visible, 
a:focus-visible, 
input:focus-visible {
    outline: 2px solid #ff1a75 !important; 
    outline-offset: 2px; 
}

/* ==========================================================================
   2. СТИЛІ ФОРМИ ПОШУКУ (BREAKOUT-ЛОГІКА)
   ========================================================================== */
/* Контейнер на всю ширину екрана, який виривається з вузької колонки Ghost */
.search-engine-wide {
    width: 100vw !important; /* 100% ширини вікна */
    position: relative !important; 
    left: 50% !important; /* Зсув у центр */
    right: 50% !important; 
    margin-left: -50vw !important; /* Компенсація зсуву вліво */
    margin-right: -50vw !important; /* Компенсація зсуву вправо */
    display: flex !important; 
    justify-content: center !important; /* Центрування внутрішнього контенту */
    margin-top: 40px !important; /* Відступ зверху */
    margin-bottom: 40px !important; /* Відступ знизу */
}

/* Внутрішній обмежувач ширини (щоб контент не розтягувався до нескінченності на великих моніторах) */
.search-engine-inner { 
    width: 100% !important; 
    max-width: 1200px !important; /* Максимальна ширина 1200px */
    padding: 0 4vw !important; /* Безпечні відступи по боках */
    box-sizing: border-box !important; 
}

/* Контейнер віджета: без білої рамки. Відступи дає .search-engine-inner */
.engine-content {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Сітка для фільтрів форми (2 колонки) */
.filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 30px; }
/* Заголовки над фільтрами */
.filter-group label {
    display: block; font-weight: 800; font-size: 1.3rem; margin-bottom: 12px;
    text-transform: uppercase; color: #15171a; letter-spacing: 0.5px;
}

/* Контейнер для кнопок-табів (міста, країни) */
.tabs-navigation { display: flex; flex-wrap: wrap; gap: 10px; }
/* Базовий стиль кнопки-табу */
.tab-btn {
    padding: 10px 20px; border: 1px solid #e0e0e0; background: #fff;
    border-radius: 8px; font-weight: 600; font-size: 1.3rem; cursor: pointer; transition: all 0.3s ease;
}
/* Активний стан кнопки-табу (рожевий) */
.tab-btn.active {
    background: #ff1a75 !important; border-color: #ff1a75 !important;
    color: #fff !important; box-shadow: 0 4px 12px rgba(255, 26, 117, 0.3);
}

/* Рядок для вводу ціни (від і до) */
.price-row { display: flex; gap: 15px; grid-column: span 2; }
.price-row input { flex: 1; padding: 12px 20px; border: 1px solid #e0e0e0; border-radius: 50px; font-weight: 600; outline: none; }

/* Головна кнопка "Wyszukaj" */
.btn-submit {
    width: 100%; max-width: 400px; margin: 10px auto 30px; display: block;
    padding: 18px 24px; background: #ff1a75; color: #ffffff !important;
    border: none; border-radius: 8px; font-weight: 800; font-size: 1.6rem;
    cursor: pointer; text-align: center; text-transform: uppercase;
    transition: background-color 0.3s ease;
}
.btn-submit:hover { background: #e61065; } /* Темніший рожевий при наведенні */

/* ==========================================================================
   3. СТИЛІ КАРТОК НАПРЯМКІВ (DESTINATION CARDS)
   ========================================================================== */
/* Головний контейнер для карток (теж на всю ширину) */
.dest-grid-wrapper {
    width: 100vw !important; 
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    display: flex !important;
    justify-content: center !important; 
    padding: 0 0 40px 0 !important; /* Відступ тільки знизу */
    margin-top: 0 !important; 
    font-family: 'Inter', sans-serif !important; 
}

/* Сітка карток (2 колонки на ПК) */
.dest-grid-container {
    width: 100% !important;
    max-width: 1200px !important; 
    padding: 0 4vw !important; 
    display: grid !important; 
    grid-template-columns: repeat(2, 1fr) !important; /* Дві однакові колонки */
    gap: 30px !important; /* Відстань між картками */
}

/* Заголовок секції карток */
.dest-section-title {
    grid-column: 1 / -1 !important; /* Розтягуємо заголовок на всі колонки */
    text-align: center !important; 
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    color: #15171a !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important; 
}

/* Сама картка напрямку */
.dest-card {
    text-decoration: none !important; /* Прибираємо підкреслення посилання */
    display: flex !important;
    flex-direction: column !important; 
    background: #fff !important; 
    border-radius: 12px !important; /* Заокруглення картки */
    overflow: hidden !important; /* Обрізаємо все, що вилазить за краї */
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; /* Тінь */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Плавна анімація */
    border: 1px solid #f0f0f0 !important; 
    will-change: transform !important; /* Оптимізація для відеокарти */
}
/* Ефект при наведенні мишкою на картку */
.dest-card:hover {
    transform: translateY(-6px) !important; /* Картка піднімається вгору */
    box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important; /* Тінь стає більшою */
}

/* Блок для картинки в картці */
.dest-card-image {
    position: relative !important;
    width: 100% !important;
    padding-top: 65% !important; /* Пропорція картинки (висота відносно ширини) */
    overflow: hidden !important;
    background: #f8f8f8 !important; 
}
/* Сама картинка */
.dest-card-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Картинка заповнює блок без спотворень */
    transition: transform 0.5s ease !important; /* Плавне збільшення */
}
/* Збільшення картинки при наведенні на картку */
.dest-card:hover .dest-card-image img {
    transform: scale(1.05) !important; 
}

/* Блок з текстом під картинкою */
.dest-card-info {
    padding: 20px !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; 
}
/* Підзаголовок (напр. "Wyprzedaż ofert") */
.dest-card-subtitle {
    font-size: 1.2rem !important; 
    color: #ff1a75 !important; 
    font-weight: 700 !important; 
    margin: 0 !important;
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important; 
}
/* Рядок, де лежить назва країни та кнопка */
.dest-card-title-row {
    display: flex !important;
    justify-content: space-between !important; /* Розсуваємо по краях */
    align-items: center !important; 
    gap: 15px !important; 
}
/* Назва країни */
.dest-card-title {
    font-size: 2.9rem !important; 
    font-weight: 800 !important; 
    margin: 0 !important;
    color: #15171a !important; 
    line-height: 1.3 !important; 
}

/* Кнопка всередині картки напрямку */
.dest-card-btn {
    background-color: #ff1a75 !important; 
    color: #ffffff !important; 
    padding: 10px 38px !important; 
    border-radius: 10px !important; 
    font-size: 1.5rem !important; 
    font-weight: 700 !important;
    white-space: nowrap !important; /* Забороняємо перенос тексту на новий рядок */
    transition: background-color 0.3s ease !important;
}
.dest-card:hover .dest-card-btn {
    background-color: #e61065 !important; 
}

/* Адаптація карток напрямків для планшетів та телефонів */
@media (max-width: 768px) {
    .dest-grid-container {
        grid-template-columns: 1fr !important; /* Одна колонка замість двох */
        gap: 20px !important; 
        padding: 0 20px !important; 
    }
    .dest-section-title { font-size: 2.8rem !important; margin-bottom: 5px !important; }
    .dest-card-info { padding: 15px !important; gap: 6px !important; }
    .dest-card-title { font-size: 2.5rem !important; }
    .dest-card-subtitle { font-size: 1.1rem !important; }
    .dest-card-image { padding-top: 60% !important; }
    .dest-card-btn { padding: 9px 28px !important; font-size: 1.4rem !important; border-radius: 8px !important; }
}

/* ==========================================================================
   4. МОБІЛЬНА АДАПТАЦІЯ (ЗАГАЛЬНА)
   ========================================================================== */
@media (max-width: 767px) {
    .search-engine-inner { padding: 0 2vw !important; }
    
    .filter-grid { grid-template-columns: 1fr; gap: 20px; }
    .price-row { grid-column: span 1; }
    .btn-submit { max-width: 100%; font-size: 1.4rem !important; }
    
    #ua-dynamic-feed { grid-template-columns: 1fr !important; gap: 20px !important; }
    
    .gh-canvas > p, .gh-content > p, .post-content > p, .article-content > p {
        padding: 0 2vw !important;
    }
}
  
/* ==========================================================================
   5. WAKACJE.PL WIDGET - КАСТОМІЗАЦІЯ ДИЗАЙНУ (STABLE & FINAL)
   ========================================================================== */

/* Кнопки віджета: Базовий стиль для всіх версій */
#widget-holder a[class*="Button__ButtonLink"],
.widget-holder-instance a[class*="Button__ButtonLink"],
#widget-holder button[class*="CheckOfferButton"],
.widget-holder-instance button[class*="CheckOfferButton"],
#widget-holder a[class*="CheckOfferButton"],
.widget-holder-instance a[class*="CheckOfferButton"] {
    background-color: #ff1a75 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(255, 26, 117, 0.3) !important;
    transition: background-color 0.3s ease !important;
    padding: 6px 24px !important; /* Трохи збільшили для солідності */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0px !important; /* Додаємо невеликий відступ зверху */
}

#widget-holder a[class*="Button__ButtonLink"]:hover,
.widget-holder-instance a[class*="Button__ButtonLink"]:hover,
#widget-holder a[class*="CheckOfferButton"]:hover,
.widget-holder-instance a[class*="CheckOfferButton"]:hover {
    background-color: #e61065 !important;
}

/* Блок рейтингу */
#widget-holder div[class*="RatingContainer__RatingBox"],
.widget-holder-instance div[class*="RatingContainer__RatingBox"] {
    background-color: #ff1a75 !important;
    border-radius: 6px !important;
}

/* Головна ціна туру */
#widget-holder p[class*="Price__CurrentPrice"] span:nth-child(2),
.widget-holder-instance p[class*="Price__CurrentPrice"] span:nth-child(2) {
    color: #15171a !important;
    font-size: 2.4rem !important;
    font-weight: 900 !important;
}

/* --- МОБІЛЬНА ВЕРСІЯ: ВИРІВНЮВАННЯ ВПРАВО (oferty + search, той самий rule) --- */
@media (max-width: 767px) {
    #widget-holder div[class*="Price__PriceContent"],
    #etp-search-holder div[class*="Price__PriceContent"],
    .widget-holder-instance div[class*="Price__PriceContent"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }
}

/* --- ДЕСКТОПНА ВЕРСІЯ: СІТКА 380px (нижче 768 = Wakacje native mobile, як oferty) --- */
@media (min-width: 768px) {
    #widget-holder div[class*="OfferContainer"],
    #etp-search-holder div[class*="OfferContainer"],
    .widget-holder-instance div[class*="OfferContainer"] {
        display: grid !important;
        grid-template-columns: 380px 1fr auto !important;
        align-items: stretch !important;
    }
    #widget-holder div[class*="PhotoContainer"],
    #etp-search-holder div[class*="PhotoContainer"],
    .widget-holder-instance div[class*="PhotoContainer"] {
        flex: 0 0 380px !important;
        width: 380px !important;
        min-width: 380px !important;
        max-width: 380px !important;
    }
    #widget-holder img[class*="Photo__Img"],
    #etp-search-holder img[class*="Photo__Img"],
    .widget-holder-instance img[class*="Photo__Img"] {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* --- ETP card polish (дзеркало listing-card-polish.ts) --- */
/* Wakacje .rWrVL×3 { width:82px } ламає LM — бити width:max-content + ID scope */
#widget-holder [class*="Photo__PhotoContainer"], #etp-search-holder [class*="Photo__PhotoContainer"], .widget-holder-instance [class*="Photo__PhotoContainer"] { overflow: hidden !important; }
#widget-holder [class*="Photo__Img"], #etp-search-holder [class*="Photo__Img"], .widget-holder-instance [class*="Photo__Img"] { transition: transform 0.35s ease !important; }
#widget-holder a:hover [class*="Photo__Img"], #etp-search-holder a:hover [class*="Photo__Img"], .widget-holder-instance a:hover [class*="Photo__Img"] { transform: scale(1.08) !important; }
#widget-holder span.etp-geo-pin, #etp-search-holder span.etp-geo-pin, .widget-holder-instance span.etp-geo-pin {
    display: inline-block !important; width: 14px !important; height: 14px !important; min-width: 14px !important; flex: 0 0 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171a' stroke-width='2'%3E%3Cpath d='M12 21s7-4.5 7-11a7 7 0 1 0-14 0c0 6.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-color: transparent !important;
}
#widget-holder span.etp-gold-stars, #etp-search-holder span.etp-gold-stars, .widget-holder-instance span.etp-gold-stars,
#widget-holder figure.etp-stars-host, #etp-search-holder figure.etp-stars-host, .widget-holder-instance figure.etp-stars-host {
    display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important;
    gap: 2px !important; width: auto !important; min-width: max-content !important; background: none !important;
}
#widget-holder [class*="Photo__SinglePromo"].etp-promo-lm, #etp-search-holder [class*="Photo__SinglePromo"].etp-promo-lm, .widget-holder-instance [class*="Photo__SinglePromo"].etp-promo-lm,
#widget-holder [class*="Photo__SinglePromo"].etp-promo-fm, #etp-search-holder [class*="Photo__SinglePromo"].etp-promo-fm, .widget-holder-instance [class*="Photo__SinglePromo"].etp-promo-fm {
    display: inline-flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; white-space: nowrap !important;
    width: max-content !important; min-width: max-content !important; max-width: none !important;
    border: none !important; border-radius: 6px !important; padding: 5px 10px !important;
}
#widget-holder [class*="Photo__SinglePromo"].etp-promo-lm, #etp-search-holder [class*="Photo__SinglePromo"].etp-promo-lm, .widget-holder-instance [class*="Photo__SinglePromo"].etp-promo-lm {
    background: linear-gradient(90deg, #ff1a75 0%, #ff7a18 55%, #ffc107 100%) !important;
}
#widget-holder [class*="Photo__SinglePromo"].etp-promo-fm, #etp-search-holder [class*="Photo__SinglePromo"].etp-promo-fm, .widget-holder-instance [class*="Photo__SinglePromo"].etp-promo-fm {
    background: linear-gradient(90deg, #0d9488 0%, #06b6d4 55%, #38bdf8 100%) !important;
}
#widget-holder [class*="Photo__SinglePromo"].etp-promo-lm [class*="Photo__PromoText"], #etp-search-holder [class*="Photo__SinglePromo"].etp-promo-lm [class*="Photo__PromoText"], .widget-holder-instance [class*="Photo__SinglePromo"].etp-promo-lm [class*="Photo__PromoText"],
#widget-holder [class*="Photo__SinglePromo"].etp-promo-fm [class*="Photo__PromoText"], #etp-search-holder [class*="Photo__SinglePromo"].etp-promo-fm [class*="Photo__PromoText"], .widget-holder-instance [class*="Photo__SinglePromo"].etp-promo-fm [class*="Photo__PromoText"] {
    color: #fff !important; font-weight: 700 !important; white-space: nowrap !important; width: max-content !important; background: none !important;
}
/* Mobile card chrome: не форсити OfferContainer — Wakacje native (як на oferty) */

/* ==========================================================================
   6. ПРИБРАНО — #scroll-to-filters
   Кнопки «повернутися до фільтрів» немає на last-minute / first-minute /
   wyszukiwarka / сторінках країн (перевірка HTML жовт. 2026).
   Стрілки між постами — блок 18. Кнопка вгору — блок 14 (#ua-scroll-top).
   ========================================================================== */

/* ==========================================================================
   7. РОЗШИРЕННЯ ТЕКСТОВИХ БЛОКІВ (GHOST GRID OVERRIDE)
   ========================================================================== */
/* Знімаємо обмеження з головних контейнерів Ghost */
.gh-canvas, .gh-content, .post-content, .article-content {
    max-width: 100% !important; 
    overflow-x: hidden !important;
}

/* Змушуємо тексти та заголовки займати ширину 1050px замість стандартних 720px */
.gh-canvas > p, .gh-canvas > ul, .gh-canvas > ol,
.gh-content > p, .gh-content > ul, .gh-content > ol,
.post-content > p, .post-content > ul, .post-content > ol,
.gh-canvas > h1, .gh-canvas > h2, .gh-canvas > h3, .gh-canvas > h4, .gh-canvas > h5, .gh-canvas > h6,
.gh-content > h1, .gh-content > h2, .gh-content > h3, .gh-content > h4, .gh-content > h5, .gh-content > h6 {
    grid-column: 1 / -1 !important; 
    width: 100% !important;
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

/* Типографіка основного тексту (вирівнювання по ширині) */
.gh-canvas > p, .gh-content > p, .post-content > p {
    text-align: justify !important;
    text-justify: inter-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    font-size: 1.7rem !important;
    line-height: 1.8 !important;
}

/* Стилі для головного заголовка H1 */
.gh-canvas > h1, .gh-content > h1 {
    text-align: left !important;
    font-size: 4.2rem !important; 
    font-weight: 900 !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
}

/* Відступи для підзаголовків */
.gh-canvas > h2, .gh-content > h2, 
.gh-canvas > h3, .gh-content > h3,
.gh-canvas > h4, .gh-content > h4 { 
    text-align: left !important; 
    margin-top: 50px !important; 
}

/* Відступи для маркованих списків */
.gh-canvas > ul, .gh-canvas > ol, 
.gh-content > ul, .gh-content > ol { 
    padding-left: 60px !important; 
}

/* Адаптація текстів та ЗАГОЛОВКІВ для мобільних пристроїв */
@media (max-width: 767px) {
    /* 1. Основний текст (параграфи та списки) */
    .gh-canvas > p, .gh-canvas > ul, .gh-canvas > ol,
    .gh-content > p, .gh-content > ul, .gh-content > ol,
    .post-content > p, .post-content > ul, .post-content > ol {
        padding: 0 24px !important;  
        font-size: 16px !important;  
        line-height: 1.6 !important; 
    }
    
    .gh-canvas > ul, .gh-canvas > ol, 
    .gh-content > ul, .gh-content > ol { 
        padding-left: 45px !important; 
    }

    .gh-canvas li, .gh-content li, .post-content li {
        font-size: 16px !important;
    }

    /* 2. Головні заголовки (H1) - статті та сторінки */
    .gh-canvas > h1, .gh-content > h1 {
        font-size: 2.8rem !important; /* Було 4.2rem (42px) -> стало 28px */
        line-height: 1.25 !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
        padding: 0 24px !important;
    }

    /* 3. Підзаголовки (H2) - в тексті та в модулях пошуку */
    .gh-canvas > h2, .gh-content > h2,
    .engine-content h2, .search-engine-wide h2 {
        font-size: 2.2rem !important; /* Близько 22px */
        line-height: 1.3 !important;
    }
    
    /* Відступи для H2 тільки в статтях (щоб не ламати центрування в модулях) */
    .gh-canvas > h2, .gh-content > h2 {
        padding: 0 24px !important;
        margin-top: 35px !important;
        margin-bottom: 15px !important;
    }

    /* 4. Дрібні підзаголовки (H3) в статтях */
    .gh-canvas > h3, .gh-content > h3 {
        font-size: 1.8rem !important;
        padding: 0 24px !important;
        margin-top: 25px !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   8. МАРКЕТИНГОВІ ФІШКИ ВІДЖЕТУ (РАМКА ТА ПЛАШКИ)
   ========================================================================== */
/* Дозволяємо абсолютне позиціонування плашок поверх фото */
#widget-holder [class*="OfferLink"], .widget-holder-instance [class*="OfferLink"] { position: relative !important; display: block !important; }
#widget-holder [class*="Photo__PhotoContainer"], .widget-holder-instance [class*="Photo__PhotoContainer"] { position: relative !important; }

/* Рамки: solid fallback + градієнт через mask де підтримується */
#widget-holder .travelexpert-gold-overlay, .widget-holder-instance .travelexpert-gold-overlay {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    border: 4px solid #ffb300 !important; border-radius: 3px !important;
    box-sizing: border-box !important; pointer-events: none !important;
    z-index: 2 !important; padding: 0 !important; background: transparent !important;
}
#widget-holder .travelexpert-gold-overlay--recommended,
.widget-holder-instance .travelexpert-gold-overlay--recommended,
#widget-holder .travelexpert-gold-overlay--top,
.widget-holder-instance .travelexpert-gold-overlay--top {
    border-color: #6b21a8 !important;
}
#widget-holder .travelexpert-gold-overlay--inspected,
.widget-holder-instance .travelexpert-gold-overlay--inspected {
    border-color: #ffb300 !important;
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  #widget-holder .travelexpert-gold-overlay, .widget-holder-instance .travelexpert-gold-overlay {
    border: none !important; padding: 4px !important;
    background: linear-gradient(135deg, #b45309 0%, #ffb300 45%, #fde68a 100%) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
  }
  #widget-holder .travelexpert-gold-overlay--recommended,
  .widget-holder-instance .travelexpert-gold-overlay--recommended,
  #widget-holder .travelexpert-gold-overlay--top,
  .widget-holder-instance .travelexpert-gold-overlay--top {
    background: linear-gradient(105deg, #1e1b4b 0%, #6b21a8 48%, #c026d3 100%) !important;
    border: none !important;
  }
  #widget-holder .travelexpert-gold-overlay--inspected,
  .widget-holder-instance .travelexpert-gold-overlay--inspected {
    background: linear-gradient(135deg, #b45309 0%, #ffb300 45%, #fde68a 100%) !important;
    border: none !important;
  }
}
/* Заголовки над картками вимкнені */
#widget-holder div.expert-hotel-heading,
.widget-holder-instance div.expert-hotel-heading {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Плашка Hit Eksperta (Золота, в правому нижньому куті фото) */
#widget-holder .travelexpert-gold-badge, .widget-holder-instance .travelexpert-gold-badge {
    position: absolute !important; bottom: 12px !important; right: 12px !important; 
    background: #FFB300 !important; color: #15171a !important;
    padding: 8px 18px !important; border-radius: 6px !important;
    font-weight: 900 !important; font-size: 1.25rem !important; 
    z-index: 110 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    pointer-events: none !important;
}

/* Listing A/B плашки (Inspekcja / Rekomendowane / Top) */
#widget-holder .etp-listing-badges, .widget-holder-instance .etp-listing-badges {
    position: absolute !important;
    top: auto !important;
    bottom: 12px !important;
    left: auto !important;
    right: 8px !important;
    z-index: 110 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
    pointer-events: none !important;
    max-width: 78% !important;
}
#widget-holder .etp-listing-badge, .widget-holder-instance .etp-listing-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.22) !important;
}
#widget-holder .etp-listing-badge--inspected, .widget-holder-instance .etp-listing-badge--inspected { background: #ff1a75 !important; color: #fff !important; }
#widget-holder .etp-listing-badge--recommended, .widget-holder-instance .etp-listing-badge--recommended { background: #FFB300 !important; color: #422006 !important; }
#widget-holder .etp-listing-badge--top, .widget-holder-instance .etp-listing-badge--top { background: #7c3aed !important; color: #fff !important; }
#widget-holder .etp-listing-badge--tag, .widget-holder-instance .etp-listing-badge--tag {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
}

/* Плашка FOMO (Червоно-рожева, в лівому нижньому куті фото) */
#widget-holder .travelexpert-fomo-badge, .widget-holder-instance .travelexpert-fomo-badge {
    position: absolute !important; bottom: 12px !important; left: 12px !important; 
    background: #ff1a75 !important; color: #ffffff !important;
    padding: 8px 18px !important; border-radius: 6px !important;
    font-weight: 900 !important; font-size: 1.25rem !important; 
    z-index: 99 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    pointer-events: none !important;
}

/* Ціна за день (Під головною ціною) — всередині <a>, інакше тема фарбує в синій */
#widget-holder .travelexpert-daily-price, .widget-holder-instance .travelexpert-daily-price,
#widget-holder a .travelexpert-daily-price, .widget-holder-instance a .travelexpert-daily-price {
    color: #4a5568 !important; font-size: 1.1rem !important; font-weight: 600 !important;
    margin-top: 10px !important; text-align: right !important; 
    display: block !important; width: 100% !important; clear: both !important;
    text-decoration: none !important;
}
/* Виділення самої цифри ціни за день (не фарбувати * — інакше б'ється з pink b) */
#widget-holder .travelexpert-daily-price b, .widget-holder-instance .travelexpert-daily-price b,
#widget-holder a .travelexpert-daily-price b, .widget-holder-instance a .travelexpert-daily-price b {
    color: #ff1a75 !important; font-weight: 900 !important; font-size: 1.35rem !important; 
}
@media (max-width: 767px) {
    #widget-holder .travelexpert-daily-price, .widget-holder-instance .travelexpert-daily-price { margin-bottom: 10px !important; }
}

/* ==========================================================================
   9. БЛОК ОГЛЯДУ ТА ЗАГОЛОВКИ (ЕКСПЕРТНИЙ КОНТЕНТ)
   ========================================================================== */
/* Назва готелю (вставляється нашим скриптом над карткою) */
div.expert-hotel-heading {
    display: block !important;
    width: 100% !important;
    text-align: center !important; 
    font-weight: 900 !important; 
    font-family: 'Inter', sans-serif !important;
    color: #15171a !important;
    line-height: 1.2 !important;
    font-size: 28px !important; 
    margin: 50px 0 20px 0 !important; 
}

/* Кремовий блок з текстом огляду (під карткою) */
.expert-review-section, 
#widget-holder .expert-review-section,
.widget-holder-instance .expert-review-section {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px 0 30px 0 !important;
    padding: 25px 30px !important;
    background: #FFF9F0 !important;
    background-color: #FFF9F0 !important;
    border: none !important;
    border-left: 6px solid #ff1a75 !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #1d1d1f !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Więcej od eksperta — форма як SPRAWDŹ OFERTĘ */
#widget-holder .etp-details-btn,
.widget-holder-instance .etp-details-btn,
.expert-review-section .etp-details-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 14px !important;
    padding: 6px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    background: #ff1a75 !important;
    color: #fff !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(255, 26, 117, 0.3) !important;
    cursor: pointer !important;
}
#widget-holder .etp-details-btn:hover,
.widget-holder-instance .etp-details-btn:hover,
.expert-review-section .etp-details-btn:hover {
    background-color: #e61065 !important;
}

/* Адаптація експертних блоків для мобільних */
@media (max-width: 767px) {
    div.expert-hotel-heading {
        font-size: 20px !important; 
        margin: 35px 0 15px 0 !important;
        padding: 0 10px !important;
    }
    #widget-holder .expert-review-section,
    .widget-holder-instance .expert-review-section {
        margin: 10px 0 25px 0 !important; 
        padding: 15px 20px !important; 
        font-size: 15px !important;
    }
    #widget-holder .expert-review-section p,
    .widget-holder-instance .expert-review-section p {
        text-align: left !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   10. ВСТУПНИЙ БЛОК СТОРІНКИ (ОПИС КАТЕГОРІЇ)
   ========================================================================== */
/* Блок з описом перед віджетом */
.page-intro-description {
    background: linear-gradient(135deg, #ffffff 0%, #fef5f8 100%) !important;
    border: 1px solid #ffe6f0 !important;
    border-radius: 16px !important;
    padding: 30px 40px !important;
    margin-bottom: 40px !important;
    font-size: 1.7rem !important; 
    line-height: 1.7 !important;
    color: #2d3748 !important;
    text-align: justify;
    -webkit-hyphens: auto; 
    hyphens: auto;         
    box-shadow: 0 10px 25px rgba(255, 26, 117, 0.04) !important;
    font-family: 'Inter', sans-serif !important;
}

@media (max-width: 767px) {
    .page-intro-description {
        padding: 20px 15px !important;
        font-size: 1.7rem !important;
        text-align: justify !important; 
        border-radius: 12px !important;
    }
}


/* ==========================================================================
   11. UNIT.TRAVEL — ФОРМА ПОШУКУ ГОТЕЛЮ (/rezerwacja-hoteli/)
   HTML: .unit-outer-wrapper > .unit-inner-container > #9cdaeec9-…
   Скрипт: online.unit.travel → iframe.is-main + .t-frame-widget (календар/дропдаун).
   Це НЕ Wakacje. Wakacje живе в блоці 5 (#widget-holder) на last/first/oferty.
   ========================================================================== */
.unit-inner-container {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
    border: 1px solid #f0f0f0 !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.3s ease !important;
    padding: 20px !important;
}
.unit-inner-container:hover {
    box-shadow: 0 20px 45px rgba(0,0,0,0.08) !important;
}
.unit-outer-wrapper iframe.is-main {
    width: 100% !important;
    border: none !important;
    display: block !important;
    border-radius: 16px !important;
}
/* Ghost canvas: iframe Unit не обрізається. Календар Unit має літати поверх усього. */
.gh-content, .gh-canvas, .gh-viewport { overflow: visible !important; }
.t-frame-widget:not(.is-main) { z-index: 2147483647 !important; }

@media (min-width: 768px) {
    .unit-outer-wrapper {
        grid-column: 1 / -1 !important;
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        display: flex !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 100 !important;
    }
    .unit-inner-container {
        width: 100% !important;
        max-width: 1200px !important;
        padding: 20px 30px !important;
    }
    .t-frame-widget:not(.is-main) {
        transform: translateY(15px) !important;
    }
}

@media (max-width: 767px) {
    .unit-outer-wrapper {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    .unit-inner-container {
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 16px !important;
    }
}

/* ==========================================================================
   12. ПРИХОВУВАННЯ ЕЛЕМЕНТІВ ПІДПИСКИ ТА МЕМБЕРШИПУ GHOST
   ========================================================================== */
/* Ховаємо кнопки логіну/підписки в хедері */
.gh-head-actions, 
.gh-head-btn, 
.gh-head-link {
    display: none !important;
}

/* Ховаємо форми підписки в статтях */
.gh-header-content form,
.gh-form,[data-members-form],
.gh-subscribe-form {
    display: none !important;
}

/* Ховаємо плаваючу кнопку порталу Ghost у правому нижньому куті */
#ghost-portal-root,
.gh-portal-triggerbtn-wrapper {
    display: none !important;
}

/* ==========================================================================
   13. РОЗШИРЕННЯ ТА ШРИФТИ GHOST TOGGLE (АКОРДЕОНИ / FAQ)
   ========================================================================== */
/* Розширюємо акордеони на всю ширину тексту */
.gh-canvas .kg-toggle-card,
.gh-content .kg-toggle-card,
.post-content .kg-toggle-card,
.gh-canvas details,
.gh-content details {
    grid-column: 1 / -1 !important; 
    width: 100% !important;
    max-width: 990px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.gh-canvas .kg-card.kg-toggle-card,
.gh-content .kg-card.kg-toggle-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 990px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Заголовок питання в акордеоні */
.gh-canvas .kg-toggle-heading-text,
.gh-content .kg-toggle-heading-text,
.gh-canvas summary,
.gh-content summary {
    font-size: 1.7rem !important; 
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Відповідь в акордеоні */
.gh-canvas .kg-toggle-content,
.gh-content .kg-toggle-content,
.gh-canvas .kg-toggle-content p,
.gh-content .kg-toggle-content p {
    font-size: 1.6rem !important; 
    line-height: 1.6 !important;
    padding-bottom: 0 !important; 
}

@media (max-width: 767px) {
    .gh-canvas .kg-toggle-card,
    .gh-content .kg-toggle-card,
    .gh-canvas details,
    .gh-content details,
    .gh-canvas .kg-card.kg-toggle-card,
    .gh-content .kg-card.kg-toggle-card {
        width: calc(100% - 48px) !important; 
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gh-canvas .kg-toggle-heading-text,
    .gh-content .kg-toggle-heading-text,
    .gh-canvas summary,
    .gh-content summary {
        font-size: 15px !important; 
    }

    .gh-canvas .kg-toggle-content,
    .gh-content .kg-toggle-content,
    .gh-canvas .kg-toggle-content p,
    .gh-content .kg-toggle-content p {
        font-size: 15px !important; 
    }
}

/* ==========================================================================
   14. КНОПКА ПОВЕРНЕННЯ ВГОРУ (SCROLL TO TOP)
   ========================================================================== */
#ua-scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #ff1a75 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(255, 26, 117, 0.4) !important;
    z-index: 99999 !important; 
    opacity: 0;
    visibility: hidden; /* Прихована за замовчуванням */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
    transform: translateY(20px); 
}

/* Клас, який додається через JS при скролі вниз */
#ua-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#ua-scroll-top:hover {
    background-color: #e61065 !important; 
    transform: translateY(-5px) !important;
    box-shadow: 0 6px 20px rgba(255, 26, 117, 0.6) !important;
}

#ua-scroll-top svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    #ua-scroll-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* ==========================================================================
   15. КОРЕКЦІЯ ВІДСТУПІВ МІЖ ЗАГОЛОВКАМИ ТА HTML-БЛОКАМИ
   ========================================================================== */
/* Видаляємо порожні параграфи, які іноді генерує редактор Ghost */
.gh-canvas p:empty, .gh-content p:empty {
    display: none !important;
}

/* Зменшуємо відступ під заголовками для щільнішої верстки */
.gh-canvas h2, .gh-content h2,
.gh-canvas h3, .gh-content h3 {
    margin-bottom: 15px !important; 
}

/* Прибираємо зайвий відступ зверху у кастомних HTML-блоків */
.gh-canvas .kg-html-card, 
.gh-content .kg-html-card {
    margin-top: 0 !important; 
}

/* ==========================================================================
   16. UNIT.TRAVEL — СІТКА ПРОПОЗИЦІЙ (/rezerwacja-hoteli/, другий HTML-блок)
   HTML: .unit-offers-wrapper > .unit-offers-container > #e82807c6-…
   products: bestoffer. Ширина 1200px, щоб Unit зібрав 3 колонки.
   ========================================================================== */
.unit-offers-wrapper iframe {
    width: 100% !important;
    border: none !important;
    display: block !important;
    border-radius: 16px !important;
}

@media (min-width: 768px) {
    .unit-offers-wrapper {
        grid-column: 1 / -1 !important;
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    .unit-offers-container {
        width: 100% !important;
        max-width: 1200px !important;
        padding: 0 30px !important;
    }
}

@media (max-width: 767px) {
    .unit-offers-wrapper {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
    .unit-offers-container {
        width: 100% !important;
    }
}

/* ==========================================================================
   17. МОБІЛЬНИЙ ГОРИЗОНТАЛЬНИЙ СКРОЛ ДЛЯ КНОПОК-ФІЛЬТРІВ (СВАЙП)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. ФІКСИМО РОЗРИВ КОНТЕЙНЕРА */
    .filter-group {
        min-width: 0 !important; 
        width: 100% !important;
    }

    /* 2. НАЛАШТОВУЄМО СВАЙП */
    .tabs-navigation {
        display: flex !important;
        flex-wrap: nowrap !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch !important; 
        padding-bottom: 8px !important; 
        width: 100% !important; 
        
        /* ФІКС: Примусово вирівнюємо по лівому краю, щоб не зрізало першу кнопку */
        justify-content: flex-start !important; 
        
        /* Приховуємо смугу прокрутки */
        scrollbar-width: none !important; 
        -ms-overflow-style: none !important; 
    }
    
    .tabs-navigation::-webkit-scrollbar {
        display: none !important;
    }

    .tab-btn {
        flex: 0 0 auto !important; /* Забороняємо кнопкам стискатися */
        white-space: nowrap !important; /* Текст завжди в один рядок */
    }
}

/* ==========================================================================
   18. СТИЛІЗАЦІЯ СТРІЛОК НАВІГАЦІЇ В ПОСТАХ (ФІКС)
   ========================================================================== */
/* Додали клас .pagination, який використовує тема Casper */
.pagination, .post-navigation, .article-navigation, .prev-next-navigation, .gh-navigation {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 50px auto !important;
    max-width: 800px !important;
    padding: 0 20px !important;
    width: 100% !important;
}

.pagination a, .post-navigation a, .article-navigation a, .prev-next-navigation a, .gh-navigation a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 65px !important;
    height: 65px !important;
    background: #ffffff !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 50% !important;
    color: #15171a !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04) !important;
    text-decoration: none !important;
}

.pagination a:hover, .post-navigation a:hover, .article-navigation a:hover, .prev-next-navigation a:hover, .gh-navigation a:hover {
    background: #ff1a75 !important;
    border-color: #ff1a75 !important;
    color: #ffffff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 25px rgba(255, 26, 117, 0.3) !important;
}

.pagination a svg, .post-navigation a svg, .article-navigation a svg, .prev-next-navigation a svg, .gh-navigation a svg {
    width: 28px !important;
    height: 28px !important;
    fill: currentColor !important;
    transition: fill 0.3s ease !important;
}

/* ========================================================================== */
/* ЧАСТИНА B. CASPER (футер, картки блогу, рейка 1320px, головна, відступи)   */
/* ========================================================================== */
/* ==========================================================================
   19. CASPER COMPAT: ФУТЕР, МОБІЛЬНЕ МЕНЮ, ЛЕНДІНГИ /ua/
   (Edition мав .gh-foot / .is-head-open / .gh-outer.cover — у Casper цього немає.
    Мобільне меню = body.gh-head-open, футер = .site-footer)
   ========================================================================== */

/* Футер: ховаємо меню (Головна / Рекомендовані готелі / PL), стискаємо відступи, приглушуємо копірайт */
.site-footer-nav { display: none !important; }
.site-footer { padding-top: 22px !important; padding-bottom: 22px !important; }
.site-footer .copyright { margin-bottom: 0 !important; }
.site-footer .copyright,
.site-footer .copyright a { font-size: 1.3rem !important; }
.site-footer .copyright { opacity: 0.7; }

/* Мобільне меню: Casper вішає на body клас .gh-head-open (а не .is-head-open) */
body.gh-head-open #gh-head,
body.gh-head-open.has-cover #gh-head {
    background: linear-gradient(135deg, #4b0082 0%, #ff0066 100%) !important;
}
body.gh-head-open #gh-head .gh-head-actions,
body.gh-head-open.has-cover #gh-head .gh-head-actions {
    background: transparent !important;
}

/* Лендінги /ua/ (body.ua-page ставить скрипт у футері): градієнт на банері Casper */
body.ua-page .site-header-content {
    background: linear-gradient(135deg, #4b0082 0%, #ff0066 100%) !important;
}

/* ==========================================================================
   20. КАРТКИ БЛОГУ (ГОЛОВНА, ТЕГИ, АВТОРИ, «ЧИТАЙТЕ ТАКОЖ»)
   Розмітка Casper: article.post-card > a.post-card-image-link + .post-card-content
   ========================================================================== */
/* Новини не в готельній сітці головної. Розділ: /aktualnosci/. Casper вішає tag-{slug} на картку. */
body.home-template .post-feed .post-card.tag-aktualnosci {
    display: none !important;
}

.post-feed .post-card {
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 20px;
    overflow: hidden; /* заокруглює і фото, і низ картки */
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
}

/* Фото впритул до країв картки, плавний zoom при наведенні */
.post-feed .post-card-image-link { margin-bottom: 0; }
.post-feed .post-card-image { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

/* Контентна частина: відступи + мета-рядок притиснутий донизу (однакова висота карток у ряду) */
.post-feed .post-card-content { padding: 22px 24px 24px; }
.post-feed .post-card-content-link { flex-grow: 1; }
.post-feed .post-card-meta { margin-top: auto; padding-top: 16px; }

/* Рубрика: рожева «пілюля»; Featured — акцентний бейдж */
.post-feed .post-card-tags { gap: 10px; margin-bottom: 12px; }
.post-feed .post-card-primary-tag {
    background: rgba(255, 26, 117, 0.08);
    color: #ff1a75;
    padding: 6px 11px 5px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}
.post-feed .post-card-featured { font-size: 1.2rem; font-weight: 700; }

/* Заголовок і опис */
.post-feed .post-card-title,
.post-feed .post-card.dynamic .post-card-title {
    font-size: 2.2rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: #15171a;
    transition: color 0.25s ease;
}
.post-feed .post-card-excerpt {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #475467;
    margin-top: 10px;
}
.post-feed .post-card-meta { color: #98a2b3; }

/* Наведення (лише пристрої з мишею, щоб не «залипало» на телефонах) */
@media (hover: hover) {
    .post-feed .post-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 26, 117, 0.25);
        box-shadow: 0 22px 50px rgba(255, 26, 117, 0.14), 0 8px 20px rgba(16, 24, 40, 0.08);
    }
    .post-feed .post-card:hover .post-card-image { transform: scale(1.05); }
    .post-feed .post-card-content-link:hover .post-card-title { color: #ff1a75; opacity: 1; }
}

/* Велика (перша) картка: фото ліворуч, текст праворуч, без «шва» між колонками */
@media (min-width: 1001px) {
    .post-feed .post-card-large { grid-gap: 0; }
    .post-feed .post-card-large .post-card-content {
        padding: 36px 36px 32px;
        justify-content: center;
    }
    .post-feed .post-card-large .post-card-title { font-size: 3.4rem; line-height: 1.12; }
    .post-feed .post-card-large .post-card-excerpt { font-size: 1.6rem; margin-top: 14px; }
}

/* Телефон: компактніші відступи */
@media (max-width: 767px) {
    .post-feed .post-card { border-radius: 16px; }
    .post-feed .post-card-content { padding: 18px 18px 20px; }
    .post-feed .post-card-title,
    .post-feed .post-card.dynamic .post-card-title,
    .post-feed .post-card-large .post-card-title { font-size: 2rem; }
}

/* Доступність: без анімацій, якщо користувач їх вимкнув */
@media (prefers-reduced-motion: reduce) {
    .post-feed .post-card,
    .post-feed .post-card-image { transition: none !important; }
    .post-feed .post-card:hover,
    .post-feed .post-card:hover .post-card-image { transform: none !important; }
}

/* ==========================================================================
   21. ЄДИНА «РЕЙКА» ШИРИНИ САЙТУ (ПК, від 768px)
   Було: головна 1193px, текст 1050px (+30px відступи), блоки Casper 720px, віджети 100vw.
   Стало: усе стоїть в одній рейці --etp-rail (збігається з шириною блоку на /wyszukiwarka/).
   Налаштування:
     --etp-rail  — ширина рейки (контейнер сторінки, картки, віджети, фото);
     --etp-text  — ширина лише абзаців/заголовків (за замовчуванням = рейка;
                   щоб звузити текст, напр. 1100px — він центрується в рейці).
   ========================================================================== */
:root {
    --etp-rail: 1320px;
    --etp-text: var(--etp-rail);
    --etp-pad: max(4vmin, 20px); /* бокові поля Casper (.outer) */
}

@media (min-width: 768px) {
    /* 1. Контейнер Casper: шапка, банер, стрічка карток, «Читайте також» */
    .inner { max-width: var(--etp-rail); }

    /* 2. Сітка статті/сторінки Casper: колонка «main» і «wide» = рейка.
          Усі блоки (фото, цитати, html-картки, акордеони, віджети) вирівнюються по ній самі. */
    .gh-canvas,
    .kg-width-full.kg-content-wide {
        --content-width: var(--etp-rail);
        --container-width: var(--etp-rail);
    }

    /* 3. Абзаци, списки, заголовки: по рейці, без бокових відступів 30px
          (перекриває розділ 7, який тримав 1050px + padding 30px) */
    body .gh-canvas > p, body .gh-canvas > ul, body .gh-canvas > ol,
    body .gh-content > p, body .gh-content > ul, body .gh-content > ol,
    body .post-content > p, body .post-content > ul, body .post-content > ol,
    body .gh-canvas > h1, body .gh-canvas > h2, body .gh-canvas > h3,
    body .gh-canvas > h4, body .gh-canvas > h5, body .gh-canvas > h6,
    body .gh-content > h1, body .gh-content > h2, body .gh-content > h3,
    body .gh-content > h4, body .gh-content > h5, body .gh-content > h6 {
        grid-column: main-start / main-end !important;
        width: 100% !important;
        max-width: var(--etp-text) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Списки: відступ під маркери */
    body .gh-canvas > ul, body .gh-canvas > ol,
    body .gh-content > ul, body .gh-content > ol { padding-left: 32px !important; }

    /* Основний текст: трохи більший шрифт і інтервал, бо рядки довші */
    body .gh-canvas > p, body .gh-content > p, body .post-content > p {
        font-size: 1.8rem !important;
        line-height: 1.7 !important;
    }

    /* Лід статті під заголовком — на всю рейку (Casper тримав 720px) */
    .article-excerpt { max-width: none; }

    /* Акордеони/FAQ (розділ 13 тримав 990px) */
    .gh-canvas .kg-toggle-card, .gh-content .kg-toggle-card,
    .post-content .kg-toggle-card,
    .gh-canvas details, .gh-content details,
    .gh-canvas .kg-card.kg-toggle-card, .gh-content .kg-card.kg-toggle-card {
        grid-column: main-start / main-end !important;
        max-width: none !important;
    }

    /* 4. Віджети: фон лишається на всю ширину екрана, а білий блок/контент — у рейці
          (перекриває max-width: 1200px з розділів 2, 3, 11, 16) */
    .search-engine-inner {
        max-width: calc(var(--etp-rail) + 2 * var(--etp-pad)) !important;
        padding: 0 var(--etp-pad) !important;
    }
    .dest-grid-container {
        max-width: calc(var(--etp-rail) + 2 * var(--etp-pad)) !important;
        padding: 0 var(--etp-pad) !important;
        box-sizing: border-box !important;
    }
    .unit-inner-container {
        max-width: min(var(--etp-rail), calc(100% - 2 * var(--etp-pad))) !important;
    }
    .unit-offers-container {
        max-width: calc(var(--etp-rail) + 2 * var(--etp-pad)) !important;
        padding: 0 var(--etp-pad) !important;
        box-sizing: border-box !important;
    }
}

.gh-canvas .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content,
.gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content {
    padding-top: 1.6rem !important;
}

/* ==========================================================================
   22. ШАПКА: ЄДИНИЙ БРЕНДОВИЙ ГРАДІЄНТ НА ВСЬОМУ САЙТІ
   Головна показувала стандартну обкладинку Ghost (static.ghost.org/.../publication-cover.jpg),
   інші сторінки — суцільний акцентний колір. Тепер скрізь однаковий градієнт.
   (Власну обкладинку можна задати в Ghost → Settings → Design → Homepage;
    тоді видаліть правило .site-header-cover нижче.)
   ========================================================================== */
.has-cover .site-header-cover { display: none !important; }
.has-cover .site-header-content {
    background: linear-gradient(135deg, #4b0082 0%, #ff0066 100%) !important;
}
body.has-cover:not(.home-template):not(.ua-page) .gh-head {
    background: linear-gradient(135deg, #4b0082 0%, #ff0066 100%);
}

/* ==========================================================================
   23. БЛОК ПІДПИСКИ ВНИЗУ СТАТТІ (Casper .footer-cta) — ховаємо, як решту форм підписки
   ========================================================================== */
.footer-cta { display: none !important; }

/* ==========================================================================
   24. ВІДСТУПИ: ПРИБРАНО ЗАЙВЕ ПОРОЖНЄ МІСЦЕ (ПК, від 768px)
   Було: шапка → заголовок сторінки 148px, перед футером 108px, банер 560px.
   ========================================================================== */
@media (min-width: 768px) {
    /* Сторінки: верх заголовка і низ шапки; 108px/40px → 48px */
    .page-template .article-header { padding: 48px 0 16px; }
    body .article-header > h1.article-title { margin-top: 0 !important; margin-bottom: 0 !important; }
    body.page-template .gh-content > :first-child:not(.kg-width-full) { margin-top: 16px !important; }
    body.page-template .gh-content > :last-child:not(.kg-width-full) { margin-bottom: 24px !important; }

    /* Пости: менше повітря під заголовком і над головним фото */
    .post-template .article-header { padding-bottom: 32px; }
    body .gh-canvas .article-image { margin-top: max(3vmin, 24px); }

    /* Футер: відступ зверху 108px → ~48px (на сторінках лишається 0 за правилом Casper) */
    body .site-footer { margin-top: max(4.5vmin, 40px); }

    /* Банер на головній: 560px → ~380px */
    .has-cover .site-header-content { min-height: 380px; }
    body.is-head-stacked.has-cover .site-header-content {
        padding-top: calc(max(8vmin, 48px) + 120px);
        padding-bottom: max(8vmin, 48px);
    }
}

/* ==========================================================================
   25. ПАГІНАЦІЯ: БЕЗ «Page X of Y»; якщо сторінка одна — блок прихований
   ========================================================================== */
.pagination .page-number { display: none !important; }
.pagination:not(:has(a)) { display: none !important; }

/* ==========================================================================
   26. ЗАГОЛОВКИ
   (розділ 9 стилізував назви готелів як div, а на сайті це h3 — тепер працює для будь-якого тегу)
   ========================================================================== */
@media (min-width: 768px) {
    /* H1: назва сторінки/статті */
    body .article-header > h1.article-title,
    body .gh-canvas > h1, body .gh-content > h1 {
        font-size: 4rem !important;
        font-weight: 800 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.02em !important;
        color: #15171a;
    }
    /* Короткий рожевий акцент під назвою сторінки/статті */
    .article-header .article-title::after {
        content: "";
        display: block;
        width: 56px;
        height: 4px;
        margin-top: 18px;
        border-radius: 4px;
        background: linear-gradient(90deg, #4b0082 0%, #ff0066 100%);
    }
    /* H2 / H3 у тексті */
    body .gh-canvas > h2, body .gh-content > h2 {
        font-size: 3rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.015em !important;
        margin-top: 48px !important;
        margin-bottom: 14px !important;
    }
    body .gh-canvas > h3, body .gh-content > h3 {
        font-size: 2.2rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: -0.01em !important;
        margin-top: 36px !important;
        margin-bottom: 12px !important;
    }
    /* Назви готелів над картками пропозицій */
    body div.expert-hotel-heading,
    body .expert-hotel-heading {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 2.4rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
        color: #15171a !important;
        margin: 48px 0 16px 0 !important;
        padding: 0 !important;
    }
}
@media (max-width: 767px) {
    body .expert-hotel-heading {
        text-align: left !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        margin: 32px 0 12px 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   27. ПІДПИСИ + АВТОР
   ========================================================================== */
/* Підписи під фото */
.gh-canvas figcaption, .gh-content figcaption, .kg-card figcaption {
    font-size: 1.35rem !important;
    line-height: 1.5 !important;
    color: #667085 !important;
    text-align: center !important;
    font-style: normal !important;
    letter-spacing: 0.01em;
    margin-top: 12px !important;
}
/* Мета-рядки: дата · час читання (картки і стаття) — один стиль */
.post-feed .post-card-meta,
.article-byline-meta, .byline-meta-content {
    color: #667085;
    font-size: 1.35rem;
}
.post-feed .post-card-meta { color: #667085; }

/* Автор: ховаємо аватар, ім'я й посилання (дата та «min read» лишаються) */
.article-byline .author-list,
.article-byline .author-avatar,
.article-byline-meta .author-name { display: none !important; }
.article-byline { margin-top: 16px; }

/* Мова (Polski / slug pl) лишається тегом для /polecane-hotele/, але не як шильдик над заголовком */
.post-template .article-header .article-tag,
.post-template .article-header .post-card-tags { display: none !important; }

/* ==========================================================================
   28. ТЕЛЕФОН (до 767px): відступи, вирівнювання тексту, акцент під заголовком
   Було: від шапки до заголовка ~100px; абзаци вирівняні «по ширині» з переносами —
   у коротких рядках виходили великі дірки між словами.
   ========================================================================== */
@media (max-width: 767px) {
    .page-template .article-header { padding: 24px 0 8px; }
    .post-template .article-header { padding-bottom: 20px; }
    body .article-header > h1.article-title {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }
    .article-header .article-title::after {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin-top: 12px;
        border-radius: 3px;
        background: linear-gradient(90deg, #4b0082 0%, #ff0066 100%);
    }
    body.page-template .gh-content > :first-child:not(.kg-width-full) { margin-top: 12px !important; }
    body .gh-canvas > p, body .gh-content > p, body .post-content > p {
        text-align: left !important;
        -webkit-hyphens: manual !important;
        hyphens: manual !important;
    }
    body .site-footer { margin-top: 32px; }
}

/* ==========================================================================
   29. ГОЛОВНА: пошуковик у hero (його малює widget.bundle.js) + плавні переходи між сторінками
   --------------------------------------------------------------------------
   - @view-transition: cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+).
     Сторінки плавно перетікають одна в одну, зокрема головна → /wyszukiwarka/.
     Браузери без підтримки просто ігнорують правило (віджет робить власний fade).
   - ::after у hero резервує місце під капсулу ще ДО завантаження віджета, щоб заголовок не стрибав (CLS).
     Висоти виміряні на живій сторінці: десктоп 260px, мобільний 514px. Коли віджет змонтувався
     (body.etp-home-on), резерв вимикається, а реальна капсула займає те саме місце.
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
body.home-template .site-header-inner::after { content: ""; display: block; height: 260px; }
body.etp-home-on .site-header-inner::after { display: none !important; }
@media (max-width: 767px) {
    body.home-template .site-header-inner::after { height: 514px; }
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}
/* ========================================================================== */
/* ЧАСТИНА C. STORYTELLER — картки в статті готелю                             */
/* Класи .etp-* ставить пайплайн Storyteller. Старі пости без них не зміняться.*/
/* Ghost: html { font-size: 62.5% } → 1.8rem = 18px, як звичайний абзац.       */
/* Дзеркало мініфіковане: src/lib/storyteller/article-blocks.ts                */
/* (поки CSS не на Vercel, пост усе ще клеїть <style> у codeinjection_head).   */
/* ========================================================================== */

/* --------------------------------------------------------------------------
   30. СІТКА GHOST: картки на всю ширину колонки статті
   html-картка Ghost (.kg-html-card) інакше стискається до ~720px.
   :has(.etp-*) — лише картки Storyteller, інші HTML-блоки не чіпаємо.
   -------------------------------------------------------------------------- */
.gh-canvas .kg-html-card:has(.etp-pm),
.gh-canvas .kg-html-card:has(.etp-fiszka),
.gh-canvas .kg-html-card:has(.etp-werdykt),
.gh-canvas .kg-html-card:has(.etp-chips),
.gh-content .kg-html-card:has(.etp-pm),
.gh-content .kg-html-card:has(.etp-fiszka),
.gh-content .kg-html-card:has(.etp-werdykt),
.gh-content .kg-html-card:has(.etp-chips) {
  grid-column: main-start / main-end !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 2.4rem !important;
  padding: 0 !important;
}
/* Якщо картка стоїть напряму в canvas (без обгортки kg-html-card) */
.gh-canvas > .etp-chips,
.gh-canvas > .etp-pm,
.gh-canvas > .etp-fiszka,
.gh-canvas > .etp-werdykt,
.gh-content > .etp-chips,
.gh-content > .etp-pm,
.gh-content > .etp-fiszka,
.gh-content > .etp-werdykt {
  grid-column: main-start / main-end !important;
  width: 100% !important;
  max-width: none !important;
}
.etp-pm, .etp-fiszka, .etp-werdykt { margin-bottom: 2.4rem !important; }

/* --------------------------------------------------------------------------
   31. ЧІПИ (.etp-chips) — ряд тегів над плюс/мінус (All Inclusive, 5*, …)
   .etp-chip--hot — рожевий акцент (напр. Last Minute)
   -------------------------------------------------------------------------- */
.etp-chips {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-bottom: .8rem !important;
  font-family: Inter, system-ui, sans-serif;
}
.gh-canvas > p + .etp-chips,
.gh-content > p + .etp-chips { margin-top: 2.4rem !important; }
.etp-chip {
  display: inline-flex; align-items: center;
  padding: .5rem 1.1rem; border-radius: .6rem;
  font-size: 1.2rem; font-weight: 700; line-height: 1.2;
  background: #fff; color: #334155; border: 1px solid rgba(15, 23, 42, .14);
}
.etp-chip--hot { background: #ff1a75; color: #fff; border-color: transparent; }

/* --------------------------------------------------------------------------
   32. CO DZIAŁA / CO IRYTUJE (.etp-pm) — дві колонки плюс / мінус
   Фіолетова риска = плюси, рожева = мінуси. Маркери + / – через ::before.
   -------------------------------------------------------------------------- */
.etp-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; font-family: Inter, system-ui, sans-serif; }
.etp-pm__col {
  background: #fff; border: 1px solid #eef0f3; border-radius: 1.6rem;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .06); padding: 1.6rem 1.8rem 1.4rem;
}
.etp-pm__col--plus { border-left: 4px solid #4b0082; }
.etp-pm__col--minus { border-left: 4px solid #ff0066; }
.etp-pm__label {
  margin: 0 0 1rem; font-size: 1.1rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; font-family: Inter, system-ui, sans-serif;
}
.etp-pm__col--plus .etp-pm__label { color: #4b0082; }
.etp-pm__col--minus .etp-pm__label { color: #ff0066; }
.etp-pm ul { list-style: none; margin: 0; padding: 0; }
.etp-pm li {
  position: relative; padding: 0 0 .8rem 2rem;
  font-size: 1.8rem !important; line-height: 1.7 !important;
  color: #1f2937; font-family: Inter, system-ui, sans-serif !important;
}
.etp-pm li:last-child { padding-bottom: 0; }
.etp-pm li::before { position: absolute; left: 0; top: .15em; font-weight: 800; font-size: 1.8rem; line-height: 1; }
.etp-pm__col--plus li::before { content: "+"; color: #4b0082; }
.etp-pm__col--minus li::before { content: "–"; color: #ff0066; }

/* --------------------------------------------------------------------------
   33. WARTO WIEDZIEĆ (.etp-fiszka) — жовта плашка з інсайдом
   -------------------------------------------------------------------------- */
.etp-fiszka {
  padding: 1.6rem 1.8rem; border-radius: 1.6rem;
  background: #fffdf6; border: 1px solid rgba(255, 179, 0, .35); border-left: 4px solid #FFB300;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .06); font-family: Inter, system-ui, sans-serif;
}
.etp-fiszka__label {
  margin: 0 0 1rem !important; font-size: 1.1rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #422006;
}
.etp-fiszka p { margin: 0; font-size: 1.8rem !important; line-height: 1.7 !important; font-family: Inter, system-ui, sans-serif !important; }
.etp-fiszka p.etp-fiszka__label { margin: 0 0 1rem !important; font-size: 1.1rem !important; line-height: 1.3 !important; }

/* --------------------------------------------------------------------------
   34. WERDYKT (.etp-werdykt) — підсумок «кому підходить / кому ні»
   Верхня смужка — брендовий градієнт. dt.ok / dt.no фарбують підписи.
   -------------------------------------------------------------------------- */
.etp-werdykt {
  position: relative; padding: 2.2rem 2.2rem 1.8rem; border-radius: 1.6rem;
  background: #fff; border: 1px solid #eef0f3; box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
  overflow: hidden; font-family: Inter, system-ui, sans-serif;
}
.etp-werdykt::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #4b0082, #ff0066);
}
.etp-werdykt__title,
.etp-werdykt h2,
.etp-werdykt h3 {
  display: block !important; margin: 0 0 1.2rem !important; padding: 0 !important;
  font-size: 2.4rem !important; font-weight: 800 !important; line-height: 1.25 !important;
  letter-spacing: -.015em; font-family: Inter, system-ui, sans-serif !important;
  float: none !important; width: auto !important;
}
.etp-werdykt dl,
.etp-werdykt dt,
.etp-werdykt dd {
  display: block !important; float: none !important; width: auto !important;
  max-width: none !important; grid-column: auto !important; margin-left: 0 !important;
  text-align: left !important; white-space: normal !important;
}
.etp-werdykt dl { margin: 0 !important; }
.etp-werdykt__label,
.etp-werdykt dt {
  margin: 1.6rem 0 .6rem !important; font-size: 1.1rem !important; font-weight: 800 !important;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3 !important;
  font-family: Inter, system-ui, sans-serif !important;
}
.etp-werdykt__title + .etp-werdykt__label,
.etp-werdykt h2 + .etp-werdykt__label,
.etp-werdykt h2 + dl dt:first-child,
.etp-werdykt__title + dl dt:first-child { margin-top: .4rem !important; }
.etp-werdykt dt.ok, .etp-werdykt__label--ok { color: #4b0082; }
.etp-werdykt dt.no, .etp-werdykt__label--no { color: #ff0066; }
.etp-werdykt__body,
.etp-werdykt dd {
  margin: 0 !important; font-size: 1.8rem !important; line-height: 1.7 !important;
  font-family: Inter, system-ui, sans-serif !important;
}

/* --------------------------------------------------------------------------
   35. ШАПКА СТАТТІ: ховаємо теги Ghost над заголовком (дублюють чіпи)
   -------------------------------------------------------------------------- */
.article-header .article-tag,
.article-header .post-card-tags { display: none !important; }

/* --------------------------------------------------------------------------
   36. СТАТТЯ НА ТЕЛЕФОНІ (до 767px)
   16px поля в тексту, 8px у фото/акордеонів/карток — щоб не липло до краю.
   Плюс/мінус стають однією колонкою.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .article-header .article-title,
  .article-header .article-excerpt,
  .article-header .article-byline,
  .gh-canvas > p, .gh-content > p,
  .gh-canvas > h2, .gh-content > h2,
  .gh-canvas > h3, .gh-content > h3 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .article-header .article-image,
  .gh-canvas > .kg-image-card, .gh-content > .kg-image-card {
    grid-column: 1 / -1 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  body.post-template .gh-canvas > .kg-card.kg-toggle-card,
  body.post-template .gh-content > .kg-card.kg-toggle-card {
    grid-column: 1 / -1 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  /* Віджет пошуку всередині статті готелю */
  .gh-canvas [data-etp-article] .search-engine-inner,
  .gh-content [data-etp-article] .search-engine-inner {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .gh-canvas [data-etp-article] .filter-group,
  .gh-content [data-etp-article] .filter-group {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.post-template [data-etp-article] [class*="MiniListingWidget__Widget"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .gh-canvas .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content,
  .gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content {
    padding-top: 1.6rem !important;
  }
  .gh-canvas .kg-html-card:has(.etp-pm),
  .gh-canvas .kg-html-card:has(.etp-fiszka),
  .gh-canvas .kg-html-card:has(.etp-werdykt),
  .gh-canvas .kg-html-card:has(.etp-chips),
  .gh-content .kg-html-card:has(.etp-pm),
  .gh-content .kg-html-card:has(.etp-fiszka),
  .gh-content .kg-html-card:has(.etp-werdykt),
  .gh-content .kg-html-card:has(.etp-chips),
  .gh-canvas > .etp-pm,
  .gh-canvas > .etp-fiszka,
  .gh-canvas > .etp-werdykt,
  .gh-content > .etp-pm,
  .gh-content > .etp-fiszka,
  .gh-content > .etp-werdykt {
    grid-column: 1 / -1 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    box-sizing: border-box !important;
  }
  .gh-canvas > .etp-chips,
  .gh-content > .etp-chips {
    grid-column: 1 / -1 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-sizing: border-box !important;
  }
  .etp-pm { grid-template-columns: 1fr; }
  .etp-pm li, .etp-fiszka p, .etp-werdykt__body, .etp-werdykt dd {
    font-size: 1.6rem !important; line-height: 1.6 !important;
  }
  .etp-fiszka p.etp-fiszka__label, .etp-pm__label, .etp-werdykt__label, .etp-werdykt dt {
    margin-bottom: 1rem !important; font-size: 1.1rem !important; line-height: 1.3 !important;
  }
  .etp-werdykt__title, .etp-werdykt h2, .etp-werdykt h3 { font-size: 2.2rem !important; }
}