/*
 * blog.css — SukoonLiving Blog Surfaces
 *
 * Loaded only on: blog archive (is_home), single posts (is_singular post),
 * and category archives (is_category) via inc/setup.php enqueue.
 *
 * All colours use existing CSS custom properties from style.css.
 * No new design tokens introduced here.
 */

/* ==========================================================
   BLOG ARCHIVE — LAYOUT
   ========================================================== */

.sl-blog-archive {
    padding-bottom: 80px;
}

.sl-blog-archive__hero .sl-blog-archive__hero-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sl-blog-archive__body {
    padding-top: 48px;
}

/* ==========================================================
   BLOG ARCHIVE — FEATURED POST (first post, home.php only)
   ========================================================== */

.sl-blog-archive__featured {
    margin-bottom: 48px;
}

/* Featured card gets a horizontal layout on desktop */
.sl-blog-archive__featured .sl-blog-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 0;
    min-height: 380px;
    border-radius: var(--sl-radius);
    overflow: hidden;
    background: var(--sl-white);
    border: 1px solid var(--sl-sand);
    box-shadow: var(--sl-shadow-card);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.sl-blog-archive__featured .sl-blog-card:hover {
    box-shadow: var(--sl-shadow-lift);
    transform: translateY(-3px);
}

.sl-blog-archive__featured .sl-blog-card__media-link {
    display: block;
    height: 100%;
}

.sl-blog-archive__featured .sl-blog-card__media {
    height: 100%;
    min-height: 320px;
    border-radius: 0;
}

.sl-blog-archive__featured .sl-blog-card__body {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.sl-blog-archive__featured .sl-blog-card__title {
    font-size: clamp(24px, 2.8vw, 34px);
    -webkit-line-clamp: 3;
}

.sl-blog-archive__featured .sl-blog-card__excerpt {
    -webkit-line-clamp: 4;
}

/* Make date label visible on featured cards */
.sl-blog-archive__featured .sl-blog-card__date-label {
    display: inline;
    margin-right: 6px;
    font-weight: 600;
}

/* Featured no-image posts switch to a clean text-led layout */
.sl-blog-archive__featured .sl-blog-card--featured-no-image {
    grid-template-columns: 1fr;
    min-height: 0;
}

.sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__body {
    max-width: 760px;
    padding: 40px;
    gap: 18px;
}

.sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__title {
    font-size: clamp(28px, 3vw, 38px);
    -webkit-line-clamp: unset;
}

.sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__excerpt {
    max-width: 62ch;
    -webkit-line-clamp: unset;
}

.sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__footer {
    margin-top: 6px;
}

/* ==========================================================
   BLOG ARCHIVE — POSTS GRID
   ========================================================== */

.sl-blog-archive__grid-wrap {
    margin-bottom: 48px;
}

.sl-blog-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sl-blog-archive__grid-item {
    display: flex;
    flex-direction: column;
}

/* ==========================================================
   BLOG ARCHIVE — PAGINATION
   ========================================================== */

.sl-blog-archive__pagination {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

/* WordPress outputs .page-numbers list inside the nav */
.sl-blog-archive__pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.sl-blog-archive__pagination .page-numbers a,
.sl-blog-archive__pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--sl-sand);
    background: var(--sl-white);
    color: var(--sl-charcoal);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sl-blog-archive__pagination .page-numbers a:hover {
    background: var(--sl-cream-deep);
    border-color: var(--sl-sand-dark);
}

.sl-blog-archive__pagination .page-numbers span.current {
    background: var(--sl-charcoal);
    border-color: var(--sl-charcoal);
    color: var(--sl-white);
}

.sl-blog-archive__pagination .page-numbers .dots {
    border: 0;
    background: transparent;
    color: var(--sl-mist);
    min-width: auto;
    padding: 0 4px;
}

/* ==========================================================
   BLOG ARCHIVE — EMPTY STATE
   ========================================================== */

.sl-blog-archive__empty {
    max-width: 600px;
}

/* ==========================================================
   BLOG CARD — BASE
   ========================================================== */

.sl-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--sl-white);
    border: 1px solid var(--sl-sand);
    border-radius: var(--sl-radius);
    overflow: hidden;
    box-shadow: var(--sl-shadow-soft);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.sl-blog-card:hover {
    box-shadow: var(--sl-shadow-card);
    transform: translateY(-3px);
}

/* ── Card image ── */

.sl-blog-card__media-link {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

.sl-blog-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sl-cream-deep);
}

.sl-blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sl-blog-card:hover .sl-blog-card__image {
    transform: scale(1.04);
}

.sl-blog-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--sl-sage-light);
    background: linear-gradient(
        135deg,
        var(--sl-cream) 0%,
        var(--sl-cream-deep) 100%
    );
}

/* ── Card body ── */

.sl-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    flex: 1;
}

/* ── Category label ── */

.sl-blog-card__meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sl-blog-card__category {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-sage);
    background: rgba(92, 122, 94, 0.08);
    border: 1px solid rgba(92, 122, 94, 0.16);
    border-radius: var(--sl-radius-pill);
    padding: 5px 11px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.sl-blog-card__category:hover {
    background: rgba(92, 122, 94, 0.14);
    color: var(--sl-sage-dark);
}

.sl-blog-card__eyebrow {
    margin: 0 0 -2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-mist);
}

/* ── Title ── */

.sl-blog-card__title {
    font-family: var(--sl-font-display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.sl-blog-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sl-blog-card__title a:hover {
    color: var(--sl-sage);
}

/* ── Excerpt ── */

.sl-blog-card__excerpt {
    font-size: 14px;
    line-height: 1.75;
    color: var(--sl-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    flex: 1;
}

/* ── Footer row ── */

.sl-blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--sl-sand);
}

.sl-blog-card__meta-bottom {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.sl-blog-card__date,
.sl-blog-card__reading-time {
    font-size: 12px;
    color: var(--sl-mist);
    line-height: 1.5;
}

.sl-blog-card__date-label {
    display: none;
}

.sl-blog-card__meta-sep {
    color: var(--sl-sand-dark);
}

.sl-blog-card__read-link {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-sage);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.sl-blog-card__read-link:hover {
    color: var(--sl-sage-dark);
}

/* ==========================================================
   BLOG CATEGORY ARCHIVE — EXTRAS
   ========================================================== */

.sl-blog-category__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sl-mist);
    margin-bottom: 8px;
}

.sl-blog-category__breadcrumb-link {
    color: var(--sl-mist);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sl-blog-category__breadcrumb-link:hover {
    color: var(--sl-charcoal);
}

.sl-blog-category__breadcrumb-sep {
    font-size: 14px;
    line-height: 1;
}

.sl-blog-category__breadcrumb-current {
    color: var(--sl-charcoal);
    font-weight: 600;
}

.sl-blog-category__count {
    font-size: 13px;
    color: var(--sl-mist);
    margin: 0;
    margin-top: 4px;
}

/* ==========================================================
   SINGLE POST — LAYOUT
   ========================================================== */

.sl-single-post {
    padding-bottom: 80px;
}

/* Hero extras */
.sl-single-post__hero .sl-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sl-single-post__cat-wrap {
    display: flex;
}

/* The category pill reuses .sl-single-product-category from style.css */
.sl-single-post__category {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sl-single-post__category:hover {
    opacity: 0.78;
}

.sl-single-post__title {
    margin: 0;
}

.sl-single-post__excerpt {
    margin: 0;
}

/* Date meta row */
.sl-single-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sl-mist);
}

.sl-single-post__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sl-single-post__meta-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-mist);
}

.sl-single-post__meta-sep {
    color: var(--sl-sand-dark);
}

.sl-single-post__date--updated {
    font-style: italic;
}

/* Featured image */
.sl-single-post__featured-image-wrap {
    margin-bottom: 32px;
    border-radius: var(--sl-radius);
    overflow: hidden;
    background: var(--sl-cream-deep);
    box-shadow: var(--sl-shadow-soft);
}

.sl-single-post__featured-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

/* Article shell — reuses .sl-editorial-shell from style.css */
.sl-single-post__article {
    margin-bottom: 0;
}

/* Paginated post links */
.sl-single-post__page-links {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--sl-sand);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
}

/* ==========================================================
   SINGLE POST — AUTHOR BOX
   ========================================================== */

.sl-blog-author-box,
.sl-blog-related-posts {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--sl-sand);
}

.sl-blog-author-box__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--sl-sand);
    border-radius: var(--sl-radius);
    background: var(--sl-white);
    box-shadow: var(--sl-shadow-soft);
}

.sl-blog-author-box__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sl-cream-deep);
    flex-shrink: 0;
}

.sl-blog-author-box__avatar-img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.sl-blog-author-box__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sl-blog-author-box__eyebrow {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-mist);
}

.sl-blog-author-box__name {
    margin: 0;
    font-family: var(--sl-font-display);
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.15;
    color: var(--sl-charcoal);
}

.sl-blog-author-box__name a {
    color: inherit;
    text-decoration: none;
}

.sl-blog-author-box__description,
.sl-blog-author-box__note {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--sl-text-muted);
}

.sl-blog-author-box__note {
    color: var(--sl-mist);
}

/* ==========================================================
   SINGLE POST — RELATED POSTS
   ========================================================== */

.sl-blog-related-posts__head {
    margin-bottom: 28px;
}

.sl-blog-related-posts__title {
    margin: 0;
    font-family: var(--sl-font-display);
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sl-charcoal);
}

.sl-blog-related-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sl-blog-related-posts__item {
    display: flex;
    flex-direction: column;
}

/* ==========================================================
   SINGLE POST — NAVIGATION
   ========================================================== */

.sl-single-post__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--sl-sand);
}

.sl-single-post__nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--sl-sand);
    border-radius: var(--sl-radius);
    background: var(--sl-white);
    text-decoration: none;
    color: var(--sl-charcoal);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: var(--sl-shadow-soft);
}

.sl-single-post__nav-link:hover {
    border-color: var(--sl-sand-dark);
    box-shadow: var(--sl-shadow-card);
    color: var(--sl-charcoal);
}

.sl-single-post__nav-link--next {
    justify-content: flex-end;
    text-align: right;
}

.sl-single-post__nav-dir {
    font-size: 20px;
    color: var(--sl-sage);
    flex-shrink: 0;
    line-height: 1;
}

.sl-single-post__nav-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sl-single-post__nav-copy--right {
    align-items: flex-end;
}

.sl-single-post__nav-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-mist);
}

.sl-single-post__nav-title {
    font-family: var(--sl-font-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--sl-charcoal);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ==========================================================
   SINGLE POST — BACK LINK
   ========================================================== */

.sl-single-post__back-wrap {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--sl-sand);
}

.sl-single-post__back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-sage);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sl-single-post__back-link:hover {
    color: var(--sl-sage-dark);
}

/* ==========================================================
   BLOG PRODUCT SECTION
   ========================================================== */

.sl-blog-products {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--sl-sand);
}

.sl-blog-products__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.sl-blog-products__title {
    font-family: var(--sl-font-display);
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

/* CTA link in header — reuses .sl-view-all from style.css */
.sl-blog-products__cta-link {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Grid — columns driven by modifier class set in blog-product-section.php */
.sl-blog-products__grid {
    display: grid;
    gap: var(--sl-card-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-blog-products--cols-2 .sl-blog-products__grid {
    grid-template-columns: repeat(2, 1fr);
}

.sl-blog-products--cols-3 .sl-blog-products__grid {
    grid-template-columns: repeat(3, 1fr);
}

.sl-blog-products--cols-4 .sl-blog-products__grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Footer CTA button */
.sl-blog-products__footer {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

/* ==========================================================
   RESPONSIVE — TABLET (max-width: 1023px)
   ========================================================== */

@media (max-width: 1023px) {

    .sl-blog-related-posts__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* Archive grid: 3 → 2 columns */
    .sl-blog-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* Featured card: horizontal → stacked */
    .sl-blog-archive__featured .sl-blog-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .sl-blog-archive__featured .sl-blog-card__media {
        aspect-ratio: 16 / 7;
        min-height: auto;
    }

    .sl-blog-archive__featured .sl-blog-card__body {
        padding: 26px 24px;
    }

    /* Product section grid: 4 → 3 max */
    .sl-blog-products--cols-4 .sl-blog-products__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Post nav */
    .sl-single-post__nav {
        gap: 12px;
    }
}

/* ==========================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   ========================================================== */

@media (max-width: 767px) {

    .sl-blog-archive {
        padding-bottom: 56px;
    }

    .sl-blog-archive__body {
        padding-top: 32px;
    }

    .sl-blog-archive__featured {
        margin-bottom: 32px;
    }

    /* Archive grid: 2 → 1 column */
    .sl-blog-archive__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Featured card stacked, image landscape */
    .sl-blog-archive__featured .sl-blog-card__media {
        aspect-ratio: 16 / 9;
    }

    .sl-blog-archive__featured .sl-blog-card__body {
        padding: 20px 18px;
        gap: 12px;
    }

    .sl-blog-archive__featured .sl-blog-card__title {
        font-size: clamp(20px, 5.5vw, 26px);
    }

    /* Keep regular archive cards aligned with 4:5 product-facing discipline */
    .sl-blog-archive__grid .sl-blog-card__media {
        aspect-ratio: 4 / 5;
    }

    .sl-blog-card__body {
        padding: 16px;
        gap: 8px;
    }

    .sl-blog-card__title {
        font-size: 18px;
    }
    .sl-blog-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }


    /* Single post */
    .sl-single-post {
        padding-bottom: 52px;
    }

    .sl-single-post__featured-image-wrap {
        border-radius: 16px;
        margin-bottom: 24px;
    }

    .sl-single-post__featured-image {
        max-height: 280px;
    }
    .sl-blog-author-box,
    .sl-blog-related-posts {
        margin-top: 36px;
        padding-top: 28px;
    }

    .sl-blog-author-box__inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
    }

    .sl-blog-author-box__avatar {
        width: 64px;
        height: 64px;
    }

    .sl-blog-author-box__avatar-img {
        width: 64px;
        height: 64px;
    }

    .sl-blog-related-posts__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    /* Post nav: side by side → stacked */
    .sl-single-post__nav {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 32px;
        padding-top: 24px;
    }

    .sl-single-post__nav-link--next {
        justify-content: flex-start;
        text-align: left;
    }

    .sl-single-post__nav-copy--right {
        align-items: flex-start;
    }

    /* Product section: all columns → 2 max */
    .sl-blog-products--cols-3 .sl-blog-products__grid,
    .sl-blog-products--cols-4 .sl-blog-products__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sl-blog-products--cols-2 .sl-blog-products__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sl-blog-products {
        margin-top: 36px;
        padding-top: 28px;
    }

    .sl-blog-products__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 20px;
    }

    /* Pagination */
    .sl-blog-archive__pagination .page-numbers a,
    .sl-blog-archive__pagination .page-numbers span {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
}
@media (max-width: 767px) {
    .sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__body {
        padding: 28px 22px;
    }

    .sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__title {
        font-size: clamp(24px, 7vw, 30px);
    }
}

/* ==========================================================
   PHASE 2 — ARCHIVE HERO / TOPICS / SECTION POLISH
   ========================================================== */

.sl-blog-archive__hero {
    border-bottom: 1px solid var(--sl-sand);
}

.sl-blog-archive__hero .sl-blog-archive__hero-inner {
    gap: 14px;
    max-width: 860px;
    padding-bottom: 6px;
}

.sl-blog-archive__intro {
    max-width: 620px;
    margin: 0;
}

.sl-blog-topics {
    margin-top: 6px;
}

.sl-blog-topics__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sl-blog-topics__link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--sl-sand);
    background: var(--sl-white);
    color: var(--sl-charcoal);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sl-blog-topics__link:hover {
    background: var(--sl-cream-deep);
    border-color: var(--sl-sand-dark);
    transform: translateY(-1px);
}

.sl-blog-topics__link.is-current {
    background: rgba(92, 122, 94, 0.08);
    border-color: rgba(92, 122, 94, 0.2);
    color: var(--sl-sage-dark);
}

.sl-blog-archive__featured-inner {
    max-width: 1220px;
    margin: 0 auto;
}

.sl-blog-archive__featured .sl-blog-card--featured-no-image {
    max-width: 1080px;
    margin: 0 auto;
}

.sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__body {
    max-width: 780px;
    padding: 44px 46px;
    gap: 20px;
}

.sl-blog-card__body--featured-no-image .sl-blog-card__meta-top {
    margin-bottom: 2px;
}

.sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__excerpt {
    max-width: 60ch;
}

.sl-blog-card__footer--featured-no-image {
    padding-top: 16px;
    max-width: 64ch;
}

.sl-blog-archive__section {
    margin-top: 10px;
}

.sl-blog-archive__section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.sl-blog-archive__section-title {
    margin: 0;
    font-family: var(--sl-font-display);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--sl-charcoal);
}

.sl-blog-archive__section-note {
    margin: 0;
    max-width: 520px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sl-text-muted);
    text-align: right;
}

.sl-blog-category__section-head {
    align-items: flex-start;
}

.sl-blog-category__count {
    margin: 0;
}

.sl-blog-archive__grid-wrap {
    margin-bottom: 52px;
}

@media (max-width: 1023px) {
    .sl-blog-archive__hero .sl-blog-archive__hero-inner {
        max-width: 100%;
    }

    .sl-blog-archive__featured .sl-blog-card--featured-no-image {
        max-width: 100%;
    }

    .sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__body {
        max-width: 100%;
        padding: 34px 30px;
    }

    .sl-blog-archive__section-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 18px;
    }

    .sl-blog-archive__section-note {
        max-width: 100%;
        text-align: left;
    }
}

@media (max-width: 767px) {
    .sl-blog-archive__hero .sl-blog-archive__hero-inner {
        gap: 12px;
    }

    .sl-blog-topics__list {
        gap: 8px;
    }

    .sl-blog-topics__link {
        min-height: 34px;
        padding: 0 14px;
        font-size: 11px;
    }

    .sl-blog-archive__featured .sl-blog-card--featured-no-image .sl-blog-card__body {
        padding: 30px 22px;
        gap: 16px;
    }

    .sl-blog-card__footer--featured-no-image {
        max-width: 100%;
    }

    .sl-blog-archive__section {
        margin-top: 0;
    }

    .sl-blog-archive__section-head {
        gap: 8px;
        margin-bottom: 14px;
    }

    .sl-blog-archive__section-title {
        font-size: clamp(22px, 6vw, 28px);
    }

    .sl-blog-archive__section-note {
        font-size: 13px;
        line-height: 1.65;
    }
}

/* ==========================================================
   BLOG BATCH 3 — SINGLE POST EDITORIAL DEPTH
   ========================================================== */

.sl-single-post__reading-width {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.sl-blog-toc {
    margin-bottom: 4px;
}

.sl-blog-toc__inner {
    padding: 22px 24px;
    border: 1px solid var(--sl-sand);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(250, 247, 242, 0.96) 0%, rgba(255, 255, 255, 1) 100%);
    box-shadow: var(--sl-shadow-soft);
}

.sl-blog-toc__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.sl-blog-toc__heading-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sl-blog-toc__eyebrow {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-mist);
}

.sl-blog-toc__title {
    margin: 0;
    font-family: var(--sl-font-display);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 400;
    line-height: 1.12;
    color: var(--sl-charcoal);
}

.sl-blog-toc__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(92, 122, 94, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--sl-charcoal);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sl-blog-toc__toggle:hover {
    border-color: rgba(92, 122, 94, 0.28);
    background: rgba(255, 255, 255, 0.98);
}

.sl-blog-toc__toggle-icon {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.sl-blog-toc__toggle-icon::before,
.sl-blog-toc__toggle-icon::after {
    content: "";
    position: absolute;
    top: 4px;
    width: 7px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
}

.sl-blog-toc__toggle-icon::before {
    left: 0;
    transform: rotate(45deg);
}

.sl-blog-toc__toggle-icon::after {
    right: 0;
    transform: rotate(-45deg);
}

.sl-blog-toc.is-expanded .sl-blog-toc__toggle-icon {
    transform: rotate(180deg);
}

.sl-blog-toc__panel {
    display: block;
}

.sl-blog-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px 18px;
}

.sl-blog-toc__item {
    margin: 0;
    padding: 0;
}

.sl-blog-toc__item--level-3 {
    padding-left: 0;
}

.sl-blog-toc__link {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--sl-charcoal);
    text-decoration: none;
    line-height: 1.6;
    font-size: 14px;
}

.sl-blog-toc__link::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    margin-top: 0.52em;
    flex-shrink: 0;
    background: rgba(92, 122, 94, 0.26);
}

.sl-blog-toc__link:hover {
    color: var(--sl-sage-dark);
}

@media (min-width: 768px) {
    .sl-blog-toc__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.sl-single-post__article .sl-editorial-content > h2,
.sl-single-post__article .sl-editorial-content > h3 {
    scroll-margin-top: 108px;
}

.sl-single-post__article .sl-editorial-content h2 {
    margin-top: 2.1em;
    padding-top: 0.18em;
}

.sl-single-post__article .sl-editorial-content h3 {
    margin-top: 1.7em;
}

.sl-single-post__article .sl-editorial-content h2 + p,
.sl-single-post__article .sl-editorial-content h3 + p {
    margin-top: 0;
}

.sl-single-post__article .sl-editorial-content ul,
.sl-single-post__article .sl-editorial-content ol {
    padding-left: 1.35rem;
}

.sl-single-post__article .sl-editorial-content li {
    margin-bottom: 0.62em;
}

.sl-single-post__article .sl-editorial-content li > ul,
.sl-single-post__article .sl-editorial-content li > ol {
    margin-top: 0.55em;
    margin-bottom: 0.15em;
}

.sl-single-post__article .sl-editorial-content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 18px 20px;
}

.sl-single-post__article .sl-editorial-content blockquote p:last-child {
    margin-bottom: 0;
}

.sl-single-post__article .sl-editorial-content .wp-block-image,
.sl-single-post__article .sl-editorial-content figure,
.sl-single-post__article .sl-editorial-content .wp-block-gallery,
.sl-single-post__article .sl-editorial-content .wp-block-columns {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
}

.sl-single-post__article .sl-editorial-content figcaption,
.sl-single-post__article .sl-editorial-content .wp-caption-text {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--sl-text-muted);
    text-align: center;
}

.sl-single-post__article .sl-editorial-content .wp-block-table,
.sl-single-post__article .sl-editorial-content table {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.sl-single-post__article .sl-editorial-content .wp-block-table {
    overflow-x: auto;
}

.sl-single-post__article .sl-editorial-content .wp-block-table table {
    min-width: 620px;
}

.sl-single-post__article .sl-editorial-content details,
.sl-single-post__article .sl-editorial-content .wp-block-details {
    margin-top: 1.35em;
    margin-bottom: 1.35em;
    border: 1px solid var(--sl-sand);
    border-radius: 16px;
    background: var(--sl-white);
    box-shadow: var(--sl-shadow-soft);
    overflow: hidden;
}

.sl-single-post__article .sl-editorial-content details summary,
.sl-single-post__article .sl-editorial-content .wp-block-details summary,
.sl-single-post__article .sl-editorial-content .rank-math-question {
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--sl-charcoal);
    background: rgba(92, 122, 94, 0.05);
}

.sl-single-post__article .sl-editorial-content details > :not(summary),
.sl-single-post__article .sl-editorial-content .wp-block-details > :not(summary),
.sl-single-post__article .sl-editorial-content .rank-math-answer {
    padding: 0 18px 18px;
}

.sl-single-post__article .sl-editorial-content .rank-math-answer p:last-child {
    margin-bottom: 0;
}

.sl-single-post__article .sl-editorial-content .wp-block-separator,
.sl-single-post__article .sl-editorial-content hr {
    margin-top: 2em;
    margin-bottom: 2em;
}

.sl-single-post__article .sl-editorial-content a[href^="#"] {
    text-decoration-thickness: 1px;
}

.sl-single-post__article .sl-editorial-content a:not(.sl-blog-toc__link):not(.sl-btn):not(.wp-element-button):not(.sl-view-all) {
    color: var(--sl-sage-dark);
    text-decoration-line: underline;
    text-decoration-color: rgba(92, 122, 94, 0.34);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.sl-single-post__article .sl-editorial-content a:not(.sl-blog-toc__link):not(.sl-btn):not(.wp-element-button):not(.sl-view-all):hover {
    color: var(--sl-charcoal);
    text-decoration-color: rgba(92, 122, 94, 0.62);
}

.sl-single-post__article .sl-editorial-content a:not(.sl-blog-toc__link):not(.sl-btn):not(.wp-element-button):not(.sl-view-all):focus-visible {
    outline: 2px solid rgba(92, 122, 94, 0.25);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (max-width: 1023px) {
    .sl-single-post__reading-width {
        gap: 22px;
    }

    .sl-blog-toc__inner {
        padding: 20px 20px;
    }

    .sl-blog-toc__title {
        font-size: clamp(22px, 3vw, 28px);
    }
}

@media (max-width: 767px) {
    .sl-single-post__reading-width {
        gap: 18px;
    }

    .sl-blog-toc__inner {
        padding: 18px 16px;
        border-radius: 16px;
    }

    .sl-blog-toc__head {
        margin-bottom: 0;
    }

    .js-enabled .sl-blog-toc__toggle {
        display: inline-flex;
    }

    .js-enabled .sl-blog-toc__panel[hidden] {
        display: none !important;
    }

    .js-enabled .sl-blog-toc.is-expanded .sl-blog-toc__head {
        margin-bottom: 14px;
    }

    .sl-blog-toc__list {
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .sl-blog-toc__link {
        font-size: 13px;
        line-height: 1.55;
    }

    .sl-single-post__article .sl-editorial-content .wp-block-table table {
        min-width: 520px;
    }

    .sl-single-post__article .sl-editorial-content details summary,
    .sl-single-post__article .sl-editorial-content .wp-block-details summary,
    .sl-single-post__article .sl-editorial-content .rank-math-question {
        padding: 14px 15px;
    }

    .sl-single-post__article .sl-editorial-content details > :not(summary),
    .sl-single-post__article .sl-editorial-content .wp-block-details > :not(summary),
    .sl-single-post__article .sl-editorial-content .rank-math-answer {
        padding: 0 15px 15px;
    }
}


/* ==========================================================
   BATCH 4 — EDITOR / PRODUCT WORKFLOW REFINEMENTS
   ========================================================== */

.sl-single-post__hero-intro {
    max-width: 760px;
    margin: 14px auto 0;
    font-size: clamp(16px, 1.8vw, 21px);
    line-height: 1.65;
    color: rgba(28, 28, 28, 0.82);
}

.sl-single-post__hero-intro + .sl-single-post__excerpt {
    margin-top: 14px;
}

.sl-blog-products__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sl-blog-products__intro {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(28, 28, 28, 0.72);
}

.sl-blog-products--has-intro .sl-blog-products__head {
    align-items: flex-start;
}

.sl-blog-products__cta-link,
.sl-blog-products__cta-btn {
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .sl-single-post__hero-intro {
        margin-top: 12px;
        font-size: 17px;
    }

    .sl-blog-products__title-wrap {
        gap: 6px;
    }
}

@media (max-width: 767px) {
    .sl-single-post__hero-intro {
        font-size: 16px;
        line-height: 1.6;
    }

    .sl-blog-products__intro {
        font-size: 13px;
        line-height: 1.65;
    }
}


/* ==========================================================
   BLOG PRODUCT CAROUSEL — CORRECTED COMPACT PREVIEW
   ========================================================== */

body.single-post .sl-blog-products--carousel {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--sl-sand);
}

body.single-post .sl-blog-products--carousel .sl-blog-products__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    margin-bottom: 22px;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__title-wrap {
    max-width: 760px;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__intro {
    margin-top: 8px;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__cta-btn--top {
    min-width: 220px;
    justify-content: center;
    white-space: nowrap;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-nav {
    display: inline-flex;
    gap: 8px;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-arrow {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(28, 28, 28, 0.14);
    background: rgba(255, 255, 255, 0.96);
    color: var(--sl-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-arrow:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-arrow[disabled] {
    opacity: 0.42;
    box-shadow: none;
    cursor: default;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-wrap {
    position: relative;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-track {
    display: flex !important;
    gap: var(--sl-card-gap);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 2px 10px;
    margin: 0;
    list-style: none;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-track::-webkit-scrollbar {
    display: none;
}

body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-track > li,
body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-track > li.product {
    flex: 0 0 calc((100% - (var(--sl-card-gap) * 2)) / 3);
    width: calc((100% - (var(--sl-card-gap) * 2)) / 3);
    max-width: calc((100% - (var(--sl-card-gap) * 2)) / 3);
    min-width: calc((100% - (var(--sl-card-gap) * 2)) / 3);
    margin: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

body.single-post .sl-blog-products--carousel .sl-product-card {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

body.single-post .sl-blog-products--carousel .sl-product-card-box {
    background: var(--sl-white);
    border: 1px solid var(--sl-sand);
    border-radius: 18px;
    box-shadow: var(--sl-shadow-soft);
    padding-bottom: 14px;
    height: 100%;
}

body.single-post .sl-blog-products--carousel .sl-product-img-wrap {
    aspect-ratio: 4 / 5;
    background: var(--sl-cream-deep);
}

body.single-post .sl-blog-products--carousel .sl-product-card-box .sl-product-info {
    padding: 14px 16px 0;
    gap: 10px;
}

body.single-post .sl-blog-products--carousel .sl-product-name {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.35;
    min-height: 2.7em;
}

body.single-post .sl-blog-products--carousel .sl-price-current {
    font-size: 15px;
    font-weight: 700;
    color: var(--sl-charcoal);
}

body.single-post .sl-blog-products--carousel .sl-price-old {
    font-size: 13px;
    color: var(--sl-mist);
}

body.single-post .sl-blog-products--carousel .sl-product-card-whatsapp,
body.single-post .sl-blog-products--carousel .sl-buy-now-btn {
    display: none !important;
}

body.single-post .sl-blog-products--carousel .sl-product-card-actions {
    display: block;
    margin-top: 12px;
    padding: 0 16px;
}

body.single-post .sl-blog-products--carousel .sl-product-card-actions .sl-add-btn,
body.single-post .sl-blog-products--carousel .sl-product-card-actions .sl-view-btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    background: var(--sl-cream-deep);
    border: 1px solid var(--sl-sand);
    color: var(--sl-charcoal);
}

body.single-post .sl-blog-products--carousel .sl-product-card-actions .sl-add-btn:hover,
body.single-post .sl-blog-products--carousel .sl-product-card-actions .sl-view-btn:hover {
    background: var(--sl-sand);
    border-color: var(--sl-sand-dark);
    color: var(--sl-charcoal);
}

body.single-post .sl-blog-products--carousel .sl-blog-products__footer,
body.single-post .sl-blog-products--carousel .sl-blog-products__cta-link {
    display: none !important;
}

@media (max-width: 1023px) {
    body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-track > li,
    body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-track > li.product {
        flex-basis: min(44vw, 320px);
        width: min(44vw, 320px);
        max-width: min(44vw, 320px);
        min-width: min(44vw, 320px);
    }
}

@media (max-width: 767px) {
    body.single-post .sl-blog-products--carousel .sl-blog-products__head {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    body.single-post .sl-blog-products--carousel .sl-blog-products__head-actions {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    body.single-post .sl-blog-products--carousel .sl-blog-products__cta-btn--top {
        min-width: 0;
        width: auto;
        padding: 11px 18px;
        min-height: 42px;
        font-size: 12px;
        letter-spacing: 0.05em;
    }

    body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-arrow {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-track > li,
    body.single-post .sl-blog-products--carousel .sl-blog-products__carousel-track > li.product {
        flex-basis: min(78vw, 292px);
        width: min(78vw, 292px);
        max-width: min(78vw, 292px);
        min-width: min(78vw, 292px);
    }

    body.single-post .sl-blog-products--carousel .sl-product-card-box .sl-product-info {
        padding: 14px 14px 0;
    }

    body.single-post .sl-blog-products--carousel .sl-product-card-actions {
        padding: 0 14px;
    }
}

/* ==========================================================
   2026-04-13 — BLOG TYPOGRAPHY CALMING PATCH
   Scope: single blog article editorial hierarchy only
   Basis: current blog.css after TOC compact patch
   ========================================================== */

.sl-single-post__article .sl-editorial-content h2,
.sl-single-post__article .sl-editorial-content h3 {
    letter-spacing: -0.012em;
}

.sl-single-post__article .sl-editorial-content h2 {
    font-size: clamp(30px, 2.95vw, 36px);
    font-weight: 400;
    line-height: 1.16;
    margin-top: 1.82em;
    margin-bottom: 0.48em;
    padding-top: 0;
}

.sl-single-post__article .sl-editorial-content h3 {
    font-size: clamp(19px, 1.8vw, 22px);
    font-weight: 500;
    line-height: 1.3;
    margin-top: 1.34em;
    margin-bottom: 0.4em;
}

.sl-single-post__article .sl-editorial-content h2 + p,
.sl-single-post__article .sl-editorial-content h3 + p {
    margin-top: 0.06em;
}

.sl-single-post__article .sl-editorial-content ul,
.sl-single-post__article .sl-editorial-content ol {
    margin-bottom: 1.15em;
}

@media (max-width: 767px) {
    .sl-single-post__article .sl-editorial-content h2 {
        font-size: 28px;
        line-height: 1.17;
        margin-top: 1.58em;
        margin-bottom: 0.44em;
    }

    .sl-single-post__article .sl-editorial-content h3 {
        font-size: 18px;
        line-height: 1.32;
        margin-top: 1.1em;
        margin-bottom: 0.36em;
    }
}

/* ==========================================================
   SukoonLiving Single Blog Featured Image Desktop Portrait Fix 2026-05-01
   Purpose: stop portrait blog featured images from being cropped on desktop single posts.
   ========================================================== */
@media (min-width: 768px) {
    .single-post .sl-single-post__featured-image-wrap {
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
        background: var(--sl-cream-deep);
    }

    .single-post .sl-single-post__featured-image {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center center;
    }
}