/* Базові стилі для тіла статті */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0; /* Рекомендується обнулити відступи тіла */
    padding: 0; /* Рекомендується обнулити відступи тіла */
}

.page-container {
    max-width: 1200px;
    margin: 0 auto 64px;
    padding: 0 15px;
    box-sizing: border-box; /* Додано для кращого контролю розмірів */
}

article section {
    padding: 25px 0; /* Збільшив вертикальні відступи для секцій */
    border-bottom: 1px solid #eeeeee;
}

article section:last-of-type { /* Використовувати last-of-type замість last-child для більшої надійності */
    border-bottom: none;
}

/* Заголовки */
h1 {
    font-size: 2.2em; /* Можна трохи зменшити, якщо занадто великий */
    color: #007BFF;
    margin-bottom: 25px;
    margin-top: 20px; /* Додав верхній відступ */
    text-align: center;
    line-height: 1.3;
}

h2 {
    font-size: 1.8em;
    color: #0056b3;
    margin-bottom: 20px;
    margin-top: 30px;
    border-bottom: 2px solid #007BFF;
    padding-bottom: 8px;
    line-height: 1.3;
}

h3 {
    font-size: 1.4em;
    color: #007BFF; /* Змінив колір для кращого контрасту з h2 */
    margin-bottom: 15px;
    margin-top: 25px;
    line-height: 1.3;
}

h4 {
    font-size: 1.2em;
    color: #333333;
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: bold; /* Додав жирність для h4 */
}

/* Текстові елементи */
p {
    margin-bottom: 18px; /* Збільшив між абзацний інтервал */
    color: #555555;
    font-size: 1em; /* Або 16px, якщо базовий шрифт сайту інший */
}

ul, ol {
    margin-left: 0; /* Обнулив стандартний відступ браузера */
    margin-bottom: 18px;
    padding-left: 30px; /* Встановив кастомний відступ */
}

li {
    margin-bottom: 8px;
}

strong { /* Стиль для жирного тексту, якщо потрібно його виділити більше */
    color: #2c3e50;
}

code { /* Стиль для відображення формул або коду */
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    background-color: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.95em;
    color: #c7254e; /* Приклад кольору для коду */
}

/* Таблиці */
.page-container table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: 0.95em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Легка тінь для таблиць */
}

.page-container th, .page-container td {
    border: 1px solid #dddddd;
    padding: 12px; /* Збільшив відступи в комірках */
    text-align: left;
    vertical-align: top; /* Краще для комірок з великим об'ємом тексту */
}

.page-container th {
    background-color: #f0f8ff;
    color: #0056b3;
    font-weight: bold; /* Жирний шрифт для заголовків таблиці */
}

/* Зображення */
img.article-hero-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 30px auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Хлібні крихти */
.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0; /* Відступ знизу */
    font-size: 0.9em;
    color: #777;
}

.breadcrumb li {
    display: inline;
}

.breadcrumb li+li:before {
    content: "/\00a0"; /* Слеш з нерозривним пробілом */
    padding: 0 8px; /* Збільшив відступ */
    color: #cccccc;
}
.breadcrumb a {
    color: #007BFF;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* Мета-інформація статті (дати) */
.article-meta {
    font-size: 0.9em;
    color: #777777;
    margin-bottom: 25px;
    text-align: center;
}
.article-meta span + span { /* Додає розділювач між датами */
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #ddd;
}


/* Блоки експертної перевірки та автора */
.expert-review-block,
.author-block {
    background: #f8f9fa;
    padding: 20px 25px; /* Збільшив відступи */
    border-radius: 8px;
    margin: 30px 0;
    border-left: 5px solid #007BFF; /* Зробив рамку товщою */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.expert-review-block p,
.author-block p {
    margin-bottom: 8px; /* Збільшив відступ */
    font-size: 0.95em; /* Трохи збільшив шрифт */
}
.expert-review-block p strong,
.author-block p strong {
    color: #2c3e50;
}

.author-block div { /* Контейнер для фото та тексту автора */
    display: flex;
    align-items: center;
    gap: 25px; /* Збільшив відстань */
}

.author-block img {
    width: 100px; /* Можна зробити трохи більшим, наприклад 120px */
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff; /* Додав білу рамку навколо фото автора */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.author-block h3 { /* Заголовок з ім'ям автора */
    margin-top: 0; /* Прибрав верхній відступ, якщо блок вже має відступ */
}


/* Кнопки */
.button-primary {
    display: inline-block;
    padding: 10px 18px; /* Збільшив розмір кнопки */
    background-color: #007BFF;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em; /* Зробив текст кнопки більшим */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-primary:hover {
    background-color: #0056b3;
    color: #ffffff; /* Переконатись, що колір тексту не змінюється при ховері */
}

/* Картка товару (вбудована в статтю) */
.product-card-inline {
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin: 30px 0;
    background: #fdfdfd;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Краще для різної висоти контенту */
    gap: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.product-card-inline img {
    max-width: 120px; /* Можна зробити 150px */
    height: auto;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    align-self: center; /* Центрувати зображення, якщо текст вищий */
}

.product-card-inline div { /* Контейнер для тексту картки */
    flex: 1;
    min-width: 200px; /* Мінімальна ширина для тексту */
}

.product-card-inline h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.25em; /* Збільшив заголовок картки */
    color: #007BFF;
}
.product-card-inline h4 a {
    color: #007BFF;
    text-decoration: none;
}
.product-card-inline h4 a:hover {
    text-decoration: underline;
}


.product-card-inline p {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #555;
}

.product-card-inline .price {
    font-weight: bold;
    color: #d63384; /* Виділив ціну іншим кольором (приклад) */
    font-size: 1.15em;
    margin-top: 10px;
    margin-bottom: 15px; /* Додав відступ знизу для кнопки */
}

/* Стилі для спеціальних блоків (адаптовано з вашого прикладу) */
.warranty-note-custom { /* Можна перейменувати на .info-note або .highlight-box */
    background-color: #e9f5ff;
    padding: 20px 25px;
    border-radius: 8px;
    margin: 25px 0;
    border-left: 5px solid #007BFF;
}

.warranty-note-custom h4 {
    font-size: 1.3em;
    color: #007BFF;
    margin-top: 0; /* Прибрав верхній відступ, якщо блок вже має відступ */
    margin-bottom: 10px;
}

.warranty-note-custom p {
    font-size: 1em;
    color: #555555;
}
.warranty-note-custom ul { /* Якщо в таких блоках будуть списки */
    padding-left: 20px;
}


/* Секція "Важливо" */
.important-note-section {
    padding: 20px 25px;
    background-color: #fff8e1;
    border-left: 5px solid #ffc107;
    margin: 25px 0;
    border-radius: 8px;
}
.important-note-section h4 {
    color: #e69500; /* Трохи темніший жовтий для кращого читання */
    margin-top:0;
    margin-bottom: 10px;
}
.important-note-section p, .important-note-section li {
    color: #795548; /* Колір тексту для цього блоку */
}

/* Таблиця порівняння AGM/GEL */
.comparison-table th,
.comparison-table td {
    padding: 12px;
    font-size:0.9em;
    vertical-align: middle; /* Якщо текст короткий */
}
.comparison-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.comparison-table strong { /* Якщо потрібно виділити щось у таблиці */
    font-weight: bold;
    color: #0056b3;
}

/* Адаптивність (базовий приклад) */
@media (max-width: 768px) {
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.25em; }
    .product-card-inline {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .product-card-inline img {
        margin-bottom: 15px;
    }
    .author-block div {
        flex-direction: column;
        text-align: center;
    }
    .author-block img {
        margin-bottom: 15px;
    }
}
/* === Unified author card (matches KIN / bb-article.css .bbart .author-block) === */
.page-container .author-block{margin:46px 0 0;padding:26px;border:1px solid #dbe8f1;border-radius:14px;background:linear-gradient(180deg,#fbfdff 0%,#f4f9fc 100%);box-shadow:0 4px 14px rgba(31,63,86,.07);border-left:1px solid #dbe8f1;font-size:17px;line-height:1.68;color:#43586a}
.page-container .author-block>div{display:flex;gap:22px;align-items:flex-start}
.page-container .author-block img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 1px #c7dce9,0 10px 22px rgba(31,63,86,.16);flex:0 0 auto}
.page-container .author-block h3{margin:0 0 7px;color:#1f3f56;font-size:1.24em;font-weight:700;line-height:1.25}
.page-container .author-block p{margin:0 0 9px;color:#43586a;line-height:1.6}
.page-container .author-block .author-cta{margin:4px 0 0}
.page-container .author-block .author-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:10px;background:#244b63;color:#fff!important;text-decoration:none!important;font-weight:700;line-height:1.35;letter-spacing:.2px;border:1px solid #244b63;box-shadow:0 4px 10px rgba(36,75,99,.16);font-size:.9em;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.page-container .author-block .author-link:hover,.page-container .author-block .author-link:focus{background:#15303f;color:#fff!important;transform:translateY(-2px);box-shadow:0 12px 22px rgba(36,75,99,.26);text-decoration:none!important}
@media(max-width:768px){.page-container .author-block{padding:20px 16px}.page-container .author-block>div{flex-direction:column;align-items:flex-start}.page-container .author-block img{width:84px;height:84px}}