/* ==========================================================
   Rankly Article Cards
   ==========================================================
   Desktop:
   - section heading is OUTSIDE the colored article surface
   - optional 3x3 horizontal carousel, 9 loaded posts per page

   Mobile:
   - section heading is INSIDE the full-width colored surface
   - single-card swipe carousel with next card peeking in

   The desktop carousel never changes the WordPress query count.
   It only paginates the posts already present in the DOM.
   ========================================================== */

/* ==========================================================
   1. SECTION WRAPPER + HEADINGS – DESKTOP
   ========================================================== */

.rankly-article-section {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.rankly-article-section__head {
    box-sizing: border-box;
    margin: 0 0 var(--rankly-section-title-gap-desktop) !important;
    padding: var(--rankly-section-title-top-desktop) 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.rankly-article-section__head .section-header {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.rankly-article-section__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--rankly-section-title-color-desktop) !important;
    font-size: var(--rankly-section-title-size-desktop) !important;
    line-height: 1.15 !important;
    font-weight: var(--rankly-section-title-weight-desktop) !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
}

/*
 * The carousel indicators use the same resolved color as the section title.
 * Category-specific variables therefore automatically color their own dots.
 */
.rankly-article-section {
    --rankly-carousel-dot-color: var(--rankly-section-title-color-desktop, #181621);
}

.rankly-article-section--search {
    --rankly-carousel-dot-color: var(--rankly-search-title-color-desktop, #181621);
}

/*
 * Blooming Blog Pro's Recent Posts heading is not part of the card wrapper,
 * but uses the same Rankly heading typography and color controls.
 */
.rankly-frontpage-section-title,
#blooming_blog_pro_recent_posts_section h3.section-title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--rankly-section-title-color-desktop) !important;
    font-size: var(--rankly-section-title-size-desktop) !important;
    line-height: 1.15 !important;
    font-weight: var(--rankly-section-title-weight-desktop) !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
}

/*
 * WordPress static emoji: no badge, no box. The image behaves like a glyph
 * and scales with the heading font size. Emoji may appear anywhere in text.
 */
.rankly-article-section__title img.wp-smiley,
.rankly-article-section__title img.emoji,
.rankly-frontpage-section-title img.wp-smiley,
.rankly-frontpage-section-title img.emoji,
#blooming_blog_pro_recent_posts_section h3.section-title img.wp-smiley,
#blooming_blog_pro_recent_posts_section h3.section-title img.emoji {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
    margin: 0 .07em !important;
    padding: 0 !important;
    vertical-align: -.12em !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Recent Posts keeps Blooming Blog Pro's own section markup, but its heading
   follows the same spacing controls and supports WordPress wp-smiley images. */
#blooming_blog_pro_recent_posts_section .section-head {
    margin-bottom: var(--rankly-section-title-gap-desktop) !important;
    padding-top: var(--rankly-section-title-top-desktop) !important;
}

/* Search has its own independent heading color. */
.rankly-article-section--search .rankly-article-section__title {
    color: var(--rankly-search-title-color-desktop) !important;
}

/* Keep Blooming Blog Pro's existing View All button functional. */
.rankly-article-section__head .adore-view-all {
    flex: 0 0 auto;
}

/* ==========================================================
   1B. OPTIONAL DESKTOP – HEADING INSIDE COLORED FIELD
   ========================================================== */

@media (min-width: 768px) {

    body.rankly-section-title-inside-desktop.rankly-cards-archive .rankly-article-section--home,
    body.rankly-section-title-inside-desktop.rankly-cards-archive .rankly-article-section--archive,
    body.rankly-section-title-inside-desktop.rankly-cards-archive .rankly-article-section--search,
    body.rankly-section-title-inside-desktop.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .rankly-article-section--front-grid {
        box-sizing: border-box !important;
        background: var(--rankly-section-bg-desktop) !important;
        padding: var(--rankly-section-padding-desktop) !important;
        border: 0 !important;
        border-radius: var(--rankly-section-radius-desktop, 24px) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body.rankly-section-title-inside-desktop.rankly-cards-archive .rankly-article-section__head,
    body.rankly-section-title-inside-desktop.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .rankly-article-section__head {
        margin: 0 !important;
        padding-top: var(--rankly-section-title-top-desktop) !important;
        padding-right: 0 !important;
        padding-bottom: var(--rankly-section-title-gap-desktop) !important;
        padding-left: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.rankly-section-title-inside-desktop.rankly-cards-archive .rankly-article-section--home > .theme-archive-layout,
    body.rankly-section-title-inside-desktop.rankly-cards-archive .rankly-article-section--archive > .theme-archive-layout,
    body.rankly-section-title-inside-desktop.rankly-cards-archive .rankly-article-section--search > .theme-archive-layout,
    body.rankly-section-title-inside-desktop.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .rankly-article-section--front-grid > .post-grid-wrapper {
        background: transparent !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* ==========================================================
   2. COLORED SECTION SURFACES – DESKTOP
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-grid-wrapper,
body.rankly-cards-related .related-posts .theme-archive-layout {
    box-sizing: border-box;
    background: var(--rankly-section-bg-desktop) !important;
    padding: var(--rankly-section-padding-desktop) !important;
    column-gap: var(--rankly-gap-desktop) !important;
    row-gap: var(--rankly-gap-desktop) !important;
    border: 0 !important;
    border-radius: var(--rankly-section-radius-desktop, 24px) !important;
    box-shadow: none !important;
}

/* ==========================================================
   3. ARCHIVE ARTICLE SHELL
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout > article.post,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================
   4. CARD
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout > article.post > .post-item,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-grid-wrapper > .post-item,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post > .post-item {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: var(--rankly-card-padding-desktop) !important;
    padding-bottom: calc(var(--rankly-card-padding-desktop) + 6px) !important;
    background: var(--rankly-card-bg-desktop) !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: var(--rankly-card-radius-desktop) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .018),
        0 4px 14px rgba(15, 23, 42, .032) !important;
    overflow: hidden !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
    body.rankly-cards-archive .theme-archive-layout > article.post > .post-item:hover,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-grid-wrapper > .post-item:hover,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post > .post-item:hover {
        transform: translateY(-2px);
        box-shadow:
            0 2px 4px rgba(15, 23, 42, .025),
            0 9px 22px rgba(15, 23, 42, .05) !important;
    }
}

/* ==========================================================
   5. IMAGE
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: var(--rankly-image-radius-desktop) !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: hidden !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image::before,
body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image::after,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image::before,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image::after,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image::before,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image::after {
    content: none !important;
    display: none !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image > a,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image > a,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image > a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: var(--rankly-image-ratio-desktop);
    margin: 0 !important;
    padding: 0 !important;
    background: #eeeeef !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: var(--rankly-image-radius-desktop) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image img,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image img,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: var(--rankly-image-radius-desktop) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: scale(1);
    transition: transform .35s ease;
}

@media (hover: hover) {
    body.rankly-cards-archive .theme-archive-layout > article.post:hover .post-item-image img,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item:hover .post-item-image img,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post:hover .post-item-image img {
        transform: scale(1.018);
    }
}

/* ==========================================================
   6. TEXT AREA
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout > article.post .post-item-content,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-content,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-content {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 7px 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================
   7. HIDE THEME CHROME
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout > article.post .entry-cat,
body.rankly-cards-archive .theme-archive-layout > article.post .read-time-comment,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-cat,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .read-time-comment,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-cat,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .read-time-comment,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta .read-time,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta .comment {
    display: none !important;
}

/* ==========================================================
   8. ARTICLE TITLE
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout > article.post .entry-title,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-title,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--rankly-title-color-desktop) !important;
    font-size: var(--rankly-title-size-desktop) !important;
    line-height: 1.15 !important;
    font-weight: var(--rankly-title-weight-desktop) !important;
    letter-spacing: -.027em !important;
    text-transform: none !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rankly-title-lines-desktop);
    overflow: hidden !important;
    min-height: calc(var(--rankly-title-lines-desktop) * 1.15em);
}

body.rankly-cards-archive .theme-archive-layout > article.post .entry-title a,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-title a,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-title a {
    color: inherit !important;
    font: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    body.rankly-cards-archive .theme-archive-layout > article.post .entry-title a:hover,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-title a:hover,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-title a:hover {
        opacity: .72;
    }
}

/* ==========================================================
   9. META / AUTHOR
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout > article.post .entry-meta,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-meta,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--rankly-meta-color-desktop) !important;
    font-size: var(--rankly-meta-size-desktop) !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: 0 !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .entry-meta .post-date,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-meta .post-date,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta .post-date {
    display: none !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .entry-meta .post-author i,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-meta .post-author i,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta .post-author i {
    display: none !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .entry-meta .post-author,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-meta .post-author,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta .post-author {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .entry-meta .post-author a,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-meta .post-author a,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta .post-author a {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .entry-meta .post-author a::before,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-meta .post-author a::before,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta .post-author a::before {
    content: "Av ";
}

/* ==========================================================
   10. EXCERPT
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout > article.post .post-content,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-content,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-content {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--rankly-text-color-desktop) !important;
    font-size: var(--rankly-text-size-desktop) !important;
    line-height: 1.48 !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: 0 !important;
}

body.rankly-cards-archive .theme-archive-layout > article.post .post-content p,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-content p,
body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-content p {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rankly-excerpt-lines-desktop);
    overflow: hidden !important;
    min-height: calc(var(--rankly-excerpt-lines-desktop) * 1.48em);
}

/* ==========================================================
   11. FOCUS
   ========================================================== */

body.rankly-cards-archive .theme-archive-layout a:focus-visible,
body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section a:focus-visible,
body.rankly-cards-related .related-posts .theme-archive-layout a:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 3px !important;
}

/* ==========================================================
   12. DESKTOP 3x3 CAROUSEL
   ==========================================================
   JavaScript adds .rankly-desktop-carousel-ready and positions the
   already-rendered articles in groups of 9:

   1  2  3      10 11 12
   4  5  6      13 14 15
   7  8  9      16 17 18

   Nothing is cloned and the WordPress query is never changed.
   ========================================================== */

/* Navigation host is present in the templates but stays hidden until
   JavaScript confirms that more than one 9-article page exists. */
.rankly-article-carousel-nav {
    display: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {

    .rankly-desktop-carousel-ready {
        position: relative !important;
        display: grid !important;
        grid-template-columns: none !important;
        grid-template-rows: repeat(3, auto) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc(
            (100% - (2 * var(--rankly-gap-desktop))) / 3
        ) !important;
        column-gap: var(--rankly-gap-desktop) !important;
        row-gap: var(--rankly-gap-desktop) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding-left: var(--rankly-section-padding-desktop);
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .rankly-desktop-carousel-ready::-webkit-scrollbar {
        display: none;
    }

    .rankly-desktop-carousel-ready > article.post,
    .rankly-desktop-carousel-ready > .post-item {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .rankly-desktop-carousel-ready > .rankly-carousel-page-start {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    /* Invisible helper columns make an incomplete final page occupy a
       full carousel viewport, so its dot can always become active. */
    .rankly-desktop-carousel-ready > .rankly-carousel-spacer {
        display: block !important;
        min-width: 0 !important;
        min-height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .rankly-article-carousel-nav.is-visible {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--rankly-carousel-dot-gap-desktop, 7px) !important;
        width: 100% !important;
        min-height: 18px !important;
        margin: 11px 0 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 5 !important;
        color: var(--rankly-carousel-dot-color, var(--rankly-section-title-color-desktop, #181621)) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .rankly-article-section--search .rankly-article-carousel-nav.is-visible {
        color: var(--rankly-carousel-dot-color, var(--rankly-search-title-color-desktop, #181621)) !important;
    }

    .rankly-article-carousel-nav .rankly-article-carousel-dot {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: block !important;
        flex: 0 0 var(--rankly-carousel-dot-size-desktop, 7px) !important;
        width: var(--rankly-carousel-dot-size-desktop, 7px) !important;
        min-width: var(--rankly-carousel-dot-size-desktop, 7px) !important;
        max-width: var(--rankly-carousel-dot-size-desktop, 7px) !important;
        height: var(--rankly-carousel-dot-size-desktop, 7px) !important;
        min-height: var(--rankly-carousel-dot-size-desktop, 7px) !important;
        max-height: var(--rankly-carousel-dot-size-desktop, 7px) !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: var(--rankly-carousel-dot-color, var(--rankly-section-title-color-desktop, #181621)) !important;
        background-color: currentColor !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        opacity: .28 !important;
        cursor: pointer !important;
        transform: scale(1) !important;
        transition: opacity .18s ease, transform .18s ease !important;
    }

    .rankly-article-carousel-nav .rankly-article-carousel-dot:hover {
        opacity: .52 !important;
    }

    .rankly-article-carousel-nav .rankly-article-carousel-dot.is-active {
        opacity: .88 !important;
        transform: scale(1.18) !important;
    }

    .rankly-article-carousel-nav .rankly-article-carousel-dot:focus-visible {
        outline: 2px solid currentColor !important;
        outline-offset: 3px !important;
    }
}

/* ==========================================================
   13. MOBILE – HEADING INSIDE THE COLORED FIELD
   ========================================================== */

@media (max-width: 767px) {

    /*
     * On mobile the WRAPPER owns the full-width background.
     * This guarantees that the heading is inside the same colored field
     * while the white cards remain inset from the screen edges.
     */
    body.rankly-cards-archive .rankly-article-section--home,
    body.rankly-cards-archive .rankly-article-section--archive,
    body.rankly-cards-archive .rankly-article-section--search,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .rankly-article-section--front-grid {
        --rankly-mobile-theme-inset: 15px;

        box-sizing: border-box !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: 0 !important;
        padding: 0 !important;
        background: var(--rankly-section-bg-mobile) !important;
        border: 0 !important;
        border-radius: var(--rankly-section-radius-mobile, 0px) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    /* Heading padding is inside the colored mobile wrapper. */
    body.rankly-cards-archive .rankly-article-section__head,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .rankly-article-section__head {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: var(--rankly-section-title-top-mobile) !important;
        padding-right: calc(var(--rankly-mobile-theme-inset, 15px) + var(--rankly-section-padding-mobile)) !important;
        padding-bottom: var(--rankly-section-title-gap-mobile) !important;
        padding-left: calc(var(--rankly-mobile-theme-inset, 15px) + var(--rankly-section-padding-mobile)) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.rankly-cards-archive .rankly-article-section__title,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .rankly-article-section__title {
        color: var(--rankly-section-title-color-mobile) !important;
        font-size: var(--rankly-section-title-size-mobile) !important;
        font-weight: var(--rankly-section-title-weight-mobile) !important;
        line-height: 1.15 !important;
    }

    body.rankly-cards-archive .rankly-article-section--search .rankly-article-section__title {
        color: var(--rankly-search-title-color-mobile) !important;
    }


    .rankly-article-section {
        --rankly-carousel-dot-color: var(--rankly-section-title-color-mobile, #181621);
    }

    .rankly-article-section--search {
        --rankly-carousel-dot-color: var(--rankly-search-title-color-mobile, #181621);
    }

    .rankly-frontpage-section-title,
    #blooming_blog_pro_recent_posts_section h3.section-title {
        color: var(--rankly-section-title-color-mobile) !important;
        font-size: var(--rankly-section-title-size-mobile) !important;
        font-weight: var(--rankly-section-title-weight-mobile) !important;
        line-height: 1.15 !important;
    }

    #blooming_blog_pro_recent_posts_section .section-head {
        margin-bottom: var(--rankly-section-title-gap-mobile) !important;
        padding-top: var(--rankly-section-title-top-mobile) !important;
    }

    /*
     * The child article grid is transparent on mobile. The wrapper above
     * is the only colored surface, so there can be no rounded field around
     * another rounded field.
     */
    body.rankly-cards-archive .rankly-article-section--home > .theme-archive-layout,
    body.rankly-cards-archive .rankly-article-section--archive > .theme-archive-layout,
    body.rankly-cards-archive .rankly-article-section--search > .theme-archive-layout,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .rankly-article-section--front-grid > .post-grid-wrapper {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-top: var(--rankly-section-padding-mobile) !important;
        padding-right: calc(15px + var(--rankly-section-padding-mobile)) !important;
        padding-bottom: var(--rankly-section-padding-mobile) !important;
        padding-left: calc(15px + var(--rankly-section-padding-mobile)) !important;
        background: transparent !important;
        column-gap: var(--rankly-gap-mobile) !important;
        row-gap: var(--rankly-gap-mobile) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Heading already supplies the vertical space above the cards. */
    body.rankly-cards-archive .rankly-article-section--home.has-heading > .theme-archive-layout,
    body.rankly-cards-archive .rankly-article-section--archive.has-heading > .theme-archive-layout,
    body.rankly-cards-archive .rankly-article-section--search.has-heading > .theme-archive-layout,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .rankly-article-section--front-grid.has-heading > .post-grid-wrapper {
        padding-top: 0 !important;
    }

    /* Related posts have no Rankly wrapper, so keep a direct mobile surface. */
    body.rankly-cards-related .related-posts .theme-archive-layout {
        box-sizing: border-box !important;
        background: var(--rankly-section-bg-mobile) !important;
        padding: var(--rankly-section-padding-mobile) !important;
        border: 0 !important;
        border-radius: var(--rankly-section-radius-mobile, 0px) !important;
        box-shadow: none !important;
    }

    /* ---------- Mobile cards ---------- */

    body.rankly-cards-archive .theme-archive-layout > article.post > .post-item,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-grid-wrapper > .post-item,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post > .post-item {
        padding: var(--rankly-card-padding-mobile) !important;
        padding-bottom: calc(var(--rankly-card-padding-mobile) + 7px) !important;
        background: var(--rankly-card-bg-mobile) !important;
        border-radius: var(--rankly-card-radius-mobile) !important;
    }

    /* ---------- Mobile images ---------- */

    body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image,
    body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image > a,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image > a,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image > a,
    body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image img,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image img,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image img {
        border-radius: var(--rankly-image-radius-mobile) !important;
    }

    body.rankly-cards-archive .theme-archive-layout > article.post .post-item-image > a,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-item-image > a,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-item-image > a {
        aspect-ratio: var(--rankly-image-ratio-mobile);
    }

    /* ---------- Mobile title ---------- */

    body.rankly-cards-archive .theme-archive-layout > article.post .entry-title,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-title,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-title {
        color: var(--rankly-title-color-mobile) !important;
        font-size: var(--rankly-title-size-mobile) !important;
        font-weight: var(--rankly-title-weight-mobile) !important;
        -webkit-line-clamp: var(--rankly-title-lines-mobile);
        min-height: calc(var(--rankly-title-lines-mobile) * 1.15em);
    }

    /* ---------- Mobile meta ---------- */

    body.rankly-cards-archive .theme-archive-layout > article.post .entry-meta,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .entry-meta,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .entry-meta {
        color: var(--rankly-meta-color-mobile) !important;
        font-size: var(--rankly-meta-size-mobile) !important;
    }

    /* ---------- Mobile excerpt ---------- */

    body.rankly-cards-archive .theme-archive-layout > article.post .post-content,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-content,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-content {
        color: var(--rankly-text-color-mobile) !important;
        font-size: var(--rankly-text-size-mobile) !important;
    }

    body.rankly-cards-archive .theme-archive-layout > article.post .post-content p,
    body.rankly-cards-front-grid #blooming_blog_pro_posts_grid_section .post-content p,
    body.rankly-cards-related .related-posts .theme-archive-layout > article.post .post-content p {
        -webkit-line-clamp: var(--rankly-excerpt-lines-mobile);
        min-height: calc(var(--rankly-excerpt-lines-mobile) * 1.48em);
    }

    /* Desktop carousel navigation must never appear on mobile. */
    .rankly-article-carousel-nav {
        display: none !important;
    }
}

/* ==========================================================
   14. NATIVE MOBILE SWIPE CAROUSELS
   ========================================================== */

@media (max-width: 767px) {

    body.rankly-cards-archive.rankly-carousel-archive .theme-archive-layout,
    body.rankly-cards-front-grid.rankly-carousel-front-grid #blooming_blog_pro_posts_grid_section .post-grid-wrapper,
    body.rankly-cards-related.rankly-carousel-related .related-posts .theme-archive-layout {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: var(--rankly-gap-mobile) !important;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc(15px + var(--rankly-section-padding-mobile));
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.rankly-cards-archive.rankly-carousel-archive .theme-archive-layout::-webkit-scrollbar,
    body.rankly-cards-front-grid.rankly-carousel-front-grid #blooming_blog_pro_posts_grid_section .post-grid-wrapper::-webkit-scrollbar,
    body.rankly-cards-related.rankly-carousel-related .related-posts .theme-archive-layout::-webkit-scrollbar {
        display: none;
    }

    body.rankly-cards-archive.rankly-carousel-archive .theme-archive-layout > article.post,
    body.rankly-cards-related.rankly-carousel-related .related-posts .theme-archive-layout > article.post,
    body.rankly-cards-front-grid.rankly-carousel-front-grid #blooming_blog_pro_posts_grid_section .post-grid-wrapper > .post-item {
        flex: 0 0 var(--rankly-mobile-card-width) !important;
        width: var(--rankly-mobile-card-width) !important;
        max-width: var(--rankly-mobile-card-width) !important;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
}