/* ================================================================
   BLOG REDESIGN — Moon Juice palette  (2026-09-27)
   Стрічка блогу (archive.php/home.php) + сторінка статті (single.php).
   Візуально узгоджено з кабінетом/чекаутом: кремовий фон #FAF8F3,
   чорні CTA (#1A1A1A), Raleway/Playfair Display, приглушений зелений
   #2D7A4F лише як дрібний акцент (теги, іконки), радіус 4px.
   ================================================================ */

.blog-page,
.blog-post-section {
    background: #FAF8F3;
}

/* ── Заголовок сторінки (archive/home) ─────────────────────────── */
.blog-page__eyebrow {
    font: 600 12px/1 'Golos Text', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2D7A4F;
    margin: 0 0 12px;
}
.blog-page__title {
    font: 300 42px/1.2 'Unbounded', sans-serif;
    color: #1A1A1A;
}

/* ── Category tabs / subtags ────────────────────────────────────── */
.blog-tab,
.blog-tabs .blog-tab {
    border-radius: 999px;
    border: 1px solid #E8E0D4;
    background: #fff;
    font: 600 13px/1 'Golos Text', sans-serif;
    color: #3A3530;
    padding: 10px 20px;
}
.blog-tab.active,
.blog-tab:hover {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #fff;
}
.blog-subtag {
    background: #F5F0E8;
    color: #6B6560;
    border-radius: 999px;
    font: 500 13px/1 'Golos Text', sans-serif;
}
.blog-subtag.active,
.blog-subtag:hover {
    background: #E6F0E9;
    color: #2D7A4F;
}
.blog-subtag span { color: #9B9589; opacity: 1; }

/* ── Bento / grid cards ─────────────────────────────────────────── */
.bm-blog-card {
    background: #fff;
    border: 1px solid #E8E0D4;
    border-radius: 4px;
    box-shadow: none;
}
.bm-blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26,26,26,.08);
}
.bm-blog-card__img { position: relative; background: #F5F0E8; }
.bm-blog-card__img--empty::after {
    content: 'ФОТО СТАТТІ';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 11px/1 'Golos Text', sans-serif;
    letter-spacing: .04em;
    color: #9B9589;
}

/* Тег категорії — оверлей на фото картки (як у макеті "Блог") */
.bm-blog-card__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    background: #fff;
    color: #2D7A4F;
    border-radius: 999px;
    font: 600 11px/1 'Golos Text', sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

.bm-blog-card__avatar { border: 2px solid #F5F0E8; }
.bm-blog-card__author { font: 600 13px/1 'Golos Text', sans-serif; color: #1A1A1A; }
.bm-blog-card__date   { font: 400 11px/1 'Golos Text', sans-serif; color: #9B9589; }

.bm-blog-card__title,
.bm-blog-card__title a {
    font-family: 'Golos Text', sans-serif;
    font-weight: 600;
    color: #1A1A1A;
}
.bm-blog-card__title a:hover { color: #2D7A4F; }
.bm-blog-card--hero .bm-blog-card__title { font-weight: 600; }

.bm-blog-card__excerpt { font-family: 'Golos Text', sans-serif; color: #6B6560; }

.bm-blog-card__read-more {
    color: #1A1A1A;
    font: 600 14px/1 'Golos Text', sans-serif;
}
.bm-blog-card__read-more:hover { color: #2D7A4F; }

.blog-empty { font-family: 'Golos Text', sans-serif; color: #9B9589; }

.blog-pagination .page-numbers {
    border: 1px solid #E8E0D4;
    border-radius: 4px;
    font: 500 14px/1 'Golos Text', sans-serif;
    color: #3A3530;
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #fff;
}

/* =================================================================
   СТОРІНКА СТАТТІ (single.php)
   ================================================================= */

.blog-post-section .content { padding: 40px 0 72px; }

/* Хлібні крихти */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    font: 400 13px/1 'Golos Text', sans-serif;
}
.breadcrumbs a { color: #6B6560; text-decoration: none; }
.breadcrumbs a:not(:last-child)::after {
    content: '/';
    margin-left: 6px;
    color: #D6CDBB;
}
.breadcrumbs a:last-child { color: #1A1A1A; font-weight: 600; }

/* Таби категорій (як на сторінці блогу, тільки менші) */
.blog__tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.blog__tab {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid #E8E0D4;
    background: #fff;
    font: 600 12px/1 'Golos Text', sans-serif;
    color: #3A3530;
    text-decoration: none;
}
.blog__tab.active,
.blog__tab:hover { background: #1A1A1A; border-color: #1A1A1A; color: #fff; }

/* Layout: контент + прилипла колонка */
.blog__layout {
    display: flex;
    gap: 56px;
    align-items: flex-start;
}
.blog__main { flex: 1; min-width: 0; max-width: 700px; }

.blog-post__title {
    font: 300 38px/1.25 'Unbounded', sans-serif;
    color: #1A1A1A;
    margin: 0 0 18px;
    max-width: 700px;
}

.blog-post__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E8E0D4;
}
.blog-post__cat {
    padding: 5px 12px;
    background: #E6F0E9;
    color: #2D7A4F;
    border-radius: 999px;
    font: 600 11px/1 'Golos Text', sans-serif;
    text-decoration: none;
}
.blog-post__date { font: 400 13px/1 'Golos Text', sans-serif; color: #9B9589; }

.blog-post__share-inline,
.blog-post__share-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.blog-post__share-bottom { margin: 44px 0 0; padding-top: 24px; border-top: 1px solid #E8E0D4; justify-content: center; }
.blog-post__share-inline span,
.blog-post__share-bottom span {
    font: 600 11px/1 'Golos Text', sans-serif;
    letter-spacing: .06em;
    color: #9B9589;
    text-transform: uppercase;
}
.blog-post__share-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F5F0E8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease;
}
.blog-post__share-btn:hover { background: #E8E0D4; }
.blog-post__share-btn svg path { fill: #6B6560; }

/* Текст статті — типографіка редактора WordPress */
.blog-post__content {
    font: 400 17px/1.75 'Golos Text', sans-serif;
    color: #3A3530;
}
.blog-post__content > * + * { margin-top: 20px; }
.blog-post__content h2 {
    font: 600 27px/1.3 'Unbounded', sans-serif;
    color: #1A1A1A;
    margin-top: 36px;
}
.blog-post__content h3 {
    font: 600 21px/1.35 'Unbounded', sans-serif;
    color: #1A1A1A;
    margin-top: 28px;
}
.blog-post__content img {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #E8E0D4;
}
.blog-post__content ul,
.blog-post__content ol { padding-left: 22px; }
.blog-post__content li { margin: 8px 0; }
.blog-post__content a { color: #2D7A4F; text-decoration: underline; }
.blog-post__content blockquote {
    margin: 30px 0;
    padding: 28px 8px;
    border-top: 1px solid #E8E0D4;
    border-bottom: 1px solid #E8E0D4;
    text-align: center;
}
.blog-post__content blockquote p {
    font: 500 22px/1.55 'Golos Text', sans-serif;
    color: #1A1A1A;
    margin: 0;
}

/* Статті по темі (текстовий список у контенті) */
.blog-post__related-links {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid #E8E0D4;
}
.blog-post__related-links-title {
    font: 600 13px/1 'Golos Text', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9B9589;
    margin: 0 0 14px;
}
.blog-post__related-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.blog-post__related-links a {
    font: 600 15px/1.4 'Golos Text', sans-serif;
    color: #1A1A1A;
    text-decoration: none;
}
.blog-post__related-links a:hover { color: #2D7A4F; }

/* ── Прилипла колонка: товар зі статті ──────────────────────────── */
.bm-rail { width: 300px; flex-shrink: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }

.bm-rail-product {
    background: #fff;
    border: 1px solid #E8E0D4;
    border-radius: 4px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bm-rail-product__img { display: block; border-radius: 4px; overflow: hidden; }
.bm-rail-product__img img { width: 100%; height: 190px; object-fit: cover; display: block; }
.bm-rail-product__label {
    font: 600 11px/1 'Golos Text', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B6560;
}
.bm-rail-product__title {
    font: 600 18px/1.3 'Golos Text', sans-serif;
    color: #1A1A1A;
    text-decoration: none;
}
.bm-rail-product__title:hover { color: #2D7A4F; }
.bm-rail-product__rating { display: flex; align-items: center; gap: 3px; }
.bm-rail-product__rating-count { font: 400 12px/1 'Golos Text', sans-serif; color: #9B9589; margin-left: 4px; }
.bm-rail-product__price {
    font: 700 20px/1 'Golos Text', sans-serif;
    color: #1A1A1A;
}
.bm-rail-product__price del { color: #9B9589; font-weight: 400; margin-right: 6px; }
.bm-rail-product__price ins { text-decoration: none; }
.bm-rail-product__btn {
    text-align: center;
    padding: 14px;
    background: #1A1A1A;
    color: #fff;
    border-radius: 4px;
    font: 600 14px/1 'Golos Text', sans-serif;
    text-decoration: none;
    transition: background 160ms ease;
}
.bm-rail-product__btn:hover { background: #000; }

.bm-rail-tags {
    background: #fff;
    border: 1px solid #E8E0D4;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bm-rail-tags__label {
    font: 600 12px/1 'Golos Text', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6B6560;
}
.bm-rail-tags__list { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-rail-tags__chip {
    padding: 6px 12px;
    background: #E6F0E9;
    color: #2D7A4F;
    border-radius: 999px;
    font: 600 12px/1 'Golos Text', sans-serif;
    text-decoration: none;
}

/* ── Сайдбар «Вам буде цікаво» (фолбек, коли товар не прив'язаний) ─ */
.blog__sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.blog__sidebar-caption {
    font: 600 12px/1 'Golos Text', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9B9589;
    margin: 0 0 14px;
}
.blog-sidebar-card {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E8E0D4;
    text-decoration: none;
}
.blog-sidebar-card:last-child { border-bottom: none; }
.blog-sidebar-card__img { width: 60px; height: 60px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #F5F0E8; }
.blog-sidebar-card__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-sidebar-card__placeholder { width: 100%; height: 100%; background: #F5F0E8; }
.blog-sidebar-card__cat {
    display: block;
    font: 600 10px/1 'Golos Text', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #2D7A4F;
    margin-bottom: 4px;
}
.blog-sidebar-card__title {
    margin: 0;
    font: 600 13px/1.4 'Golos Text', sans-serif;
    color: #1A1A1A;
}

/* ── Картки-рекомендації внизу статті ("Читайте також") ───────────── */
.blog-bottom-cards {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid #E8E0D4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.blog-bottom-card {
    background: #fff;
    border: 1px solid #E8E0D4;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.blog-bottom-card__img { display: block; aspect-ratio: 16/10; background: #F5F0E8; }
.blog-bottom-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__no-img { width: 100%; height: 100%; background: #F5F0E8; }
.blog-bottom-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.blog-card__date { font: 400 11px/1 'Golos Text', sans-serif; color: #9B9589; }
.blog-bottom-card__title { margin: 0; font: 600 15px/1.35 'Golos Text', sans-serif; }
.blog-bottom-card__title a { color: #1A1A1A; text-decoration: none; }
.blog-bottom-card__title a:hover { color: #2D7A4F; }
.blog-bottom-card__read-more { font: 600 13px/1 'Golos Text', sans-serif; color: #1A1A1A; text-decoration: none; align-self: flex-start; }
.blog-bottom-card__read-more:hover { color: #2D7A4F; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1000px) {
    .blog__layout { flex-direction: column; }
    .blog__main { max-width: 100%; }
    .bm-rail,
    .blog__sidebar { width: 100%; position: static; flex-direction: column; }
}

@media (max-width: 768px) {
    .blog-page__title { font-size: 28px; }
    .blog-post__title { font-size: 28px; }
    .blog-bottom-cards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .blog-tabs,
    .blog__tabs { overflow-x: auto; flex-wrap: nowrap; }
    .blog-post__meta { gap: 10px; }
    .blog-post__share-inline { display: none; }
}