/* Blog listing page */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --blog-navy: #173158;
    --blog-pink: #E83161;
    --blog-muted: #5D6F8A;
    --blog-light: #F7F8F9;
    --blog-border: #EDEFF2;
}

/* ---------- Banner: outer bounds 1630x400 from Figma ---------- */
.blog-breadcrumb-section {
    padding-top: 0;
    padding-bottom: 0;
}

.blog-banner-section .hero-split-wrap {
    max-width: 1630px;
    height: 400px !important;
}

.blog-banner-section .hero-split-left,
.blog-banner-section .hero-split-right {
    height: 400px !important;
    min-height: 0 !important;
}

@media (min-width: 1200px) {
    .blog-banner-section .hero-split-wrap {
        max-width: 1640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        --bs-gutter-x: 0 !important;
        gap: 10px !important;
    }

    .blog-banner-section .col-lg-8 {
        width: 1230px !important;
        flex: 0 0 1230px !important;
        max-width: 1230px !important;
    }

    .blog-banner-section .col-lg-4 {
        width: 400px !important;
        flex: 0 0 400px !important;
        max-width: 400px !important;
    }

    .blog-banner-section .hero-side-image {
        width: 400px !important;
        height: 400px !important;
        object-fit: cover !important;
    }
}

.blog-banner-section .blog-banner-left {
    overflow: hidden;
}

/* Title @ 48 bold */
.blog-banner-section .hero-split-left h1 {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 25px;
}

/* Description box: 676x120 */
.blog-banner-section .blog-banner-desc-box {
    width: 676px;
    max-width: 100%;
    height: 120px;
    margin-bottom: 30px;
}

.blog-banner-section .hero-split-left .hero-desc,
.blog-banner-section .hero-split-left .hero-sub-desc {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 25px;
}

.blog-banner-section .hero-split-left .hero-sub-desc {
    margin-bottom: 0;
}

.blog-banner-section .blog-banner-left .hero-text {
    position: relative;
    z-index: 2;
}

/* Decorative pluses inside the gradient card */
.blog-banner-section .blog-banner-left .blog-banner-shape {
    position: absolute;
    right: -1px;
    bottom: -2px;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

.blog-banner-section .blog-banner-left .blog-banner-shape svg {
    display: block;
    height: auto;
    max-height: 100%;
}

/* CTA button — 260x60 */
.blog-banner-section .blog-banner-btn {
    width: 260px;
    height: 60px;
    font-size: 16px;
    border: 2px solid transparent;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.blog-banner-section .blog-banner-btn:hover,
.blog-banner-section .blog-banner-btn:focus {
    background: #fff !important;
    color: #173158 !important;
    /* border-color: #E83161 !important; */
    text-decoration: none;
}

.blog-banner-section .blog-banner-btn:hover svg path,
.blog-banner-section .blog-banner-btn:focus svg path {
    fill: #E83161 !important;
}

.blog-banner-section .blog-banner-btn svg {
    position: absolute;
    left: 24px;
}

.blog-listing {
    font-family: 'Poppins', 'Inter', sans-serif;
    padding: 80px 0;
    background: #fff;
}

/* Header: title + category filter */
.blog-listing-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
}

.blog-listing-title {
    margin: 0;
    color: #173158;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.15;
    flex-shrink: 0;
}

/* ─── Category filter dropdown (matches brands/products) ─── */
.blog-cat-filter-wrap.cat-filter-dropdown-wrap {
    --cat-font: 'Poppins', 'Inter', sans-serif;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.blog-cat-filter-wrap .cat-filter-btn {
    width: 300px;
    height: 48px;
    min-width: 300px;
    flex: 0 0 300px;
    padding: 0 18px;
    border: 1px solid #BAC2CD;
    border-radius: 0 !important;
    background: #fff;
    color: #183158;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--cat-font);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.blog-cat-filter-wrap .cat-filter-btn:hover,
.blog-cat-filter-wrap .cat-filter-btn.is-open {
    border-color: #BAC2CD;
    background: #fff;
}

.blog-cat-filter-wrap .cat-filter-btn.is-open {
    border-bottom-color: transparent !important;
    z-index: 601;
}

.blog-cat-filter-wrap .cat-filter-toggle .cat-filter-icon {
    display: inline-block;
    flex-shrink: 0;
}

.blog-cat-filter-wrap .cat-filter-toggle .cat-icon-minus {
    display: none;
}

.blog-cat-filter-wrap .cat-filter-toggle.is-open .cat-icon-plus {
    display: none;
}

.blog-cat-filter-wrap .cat-filter-toggle.is-open .cat-icon-minus {
    display: inline-block;
}

.blog-cat-filter-wrap .cat-filter-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 100%;
    background: #fff;
    border: 1px solid #BAC2CD;
    border-top: none;
    border-radius: 0 !important;
    z-index: 600;
}

.blog-cat-filter-wrap--desktop .cat-filter-dropdown-menu {
    margin-top: -1px;
}

.blog-cat-filter-wrap .cat-fdd-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #F7F8F9;
    margin: 12px 16px 8px;
    border-bottom: none;
}

.blog-cat-filter-wrap .cat-fdd-count-text {
    font-size: 14px;
    color: #183158;
    font-family: var(--cat-font);
    font-weight: 400;
}

.blog-cat-filter-wrap .cat-fdd-count {
    font-weight: 500;
    color: #E83161;
    font-size: 16px;
    margin-right: 2px;
}

.blog-cat-filter-wrap .cat-fdd-reset {
    font-size: 14px;
    font-weight: 500;
    color: #E83161;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--cat-font);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.blog-cat-filter-wrap .cat-fdd-reset:hover {
    text-decoration: underline;
}

.blog-cat-filter-wrap .cat-fdd-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0 6px;
}

.blog-cat-filter-wrap .cat-fdd-list::-webkit-scrollbar {
    width: 4px;
}

.blog-cat-filter-wrap .cat-fdd-list::-webkit-scrollbar-track {
    background: #F7F8F9;
}

.blog-cat-filter-wrap .cat-fdd-list::-webkit-scrollbar-thumb {
    background: #BAC2CD;
}

.blog-cat-filter-wrap .cat-fdd-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
    transition: background 0.12s;
}

.blog-cat-filter-wrap .cat-fdd-item:hover {
    background: #F7F8F9;
}

.blog-cat-filter-wrap .cat-fdd-item:hover .cat-fdd-item-label {
    color: #E83161;
}

.blog-cat-filter-wrap .cat-fdd-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.blog-cat-filter-wrap .cat-fdd-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid #BAC2CD;
    background: #fff;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.blog-cat-filter-wrap .cat-fdd-checkbox:checked+.cat-fdd-box {
    background: #fff;
    border-color: #E83161;
}

.blog-cat-filter-wrap .cat-fdd-checkbox:checked+.cat-fdd-box::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #E83161;
}

.blog-cat-filter-wrap .cat-fdd-item-label {
    font-size: 14px;
    color: #183158;
    font-family: var(--cat-font);
    transition: color 0.15s;
    line-height: 1.45;
    flex: 1;
    min-width: 0;
}

/* Mobile: same filter component, full width */
.blog-cat-filter-wrap--mobile {
    width: 100%;
    display: block;
    position: relative;
    z-index: 80;
}

.blog-cat-filter-wrap--mobile .cat-filter-btn {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    height: 48px;
    font-size: 14px;
}

.blog-cat-filter-wrap--mobile .cat-filter-dropdown-menu {
    width: 100%;
    min-width: 100%;
    left: 0;
    right: 0;
    margin-top: -1px;
    z-index: 650;
}

.blog-cat-filter-wrap--mobile .cat-filter-btn.is-open {
    position: relative;
    z-index: 651;
}

.blog-cat-filter-wrap--mobile .cat-fdd-meta {
    margin: 12px 12px 8px;
}

.blog-cat-filter-wrap--mobile .cat-fdd-item {
    padding: 9px 12px;
}

.blog-cat-filter-wrap--mobile .cat-fdd-item-label {
    font-size: 13px;
}

.kp-mobile-blog-listing .mb-4,
.kp-mobile-blog-listing .blog-cat-filter-wrap--mobile {
    overflow: visible;
}

.blog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.blog-tab {
    appearance: none;
    background: #F7F8F9;
    color: #183158;
    border-radius: 0;
    padding: 10px 20px;
    font-size: 16px;
    height: 48px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-tab.is-active {
    background: #173158;
    border-color: #173158;
    color: #fff;
}

/* Card grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-bottom: 50px;
}

.blog-card-image {
    display: block;
    width: 520px;
    max-width: 100%;
    height: 520px;
    overflow: hidden;
    background: var(--blog-light);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: none;
}

.blog-card:hover .blog-card-image img {
    transform: none;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 18px 0 10px;
    color: var(--blog-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.blog-card-date {
    color: #5D6F8A;
}

.blog-card-sep {
    color: var(--blog-border);
}

.blog-card-category {
    color: #183158;
    font-weight: 500;
}

.blog-card-title {
    margin: 0 0 50px;
    color: #183158;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    width: 450px;
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 148px;
    height: 42px;
    padding: 0 14px;
    border: 2px solid #E83161;
    background: #fff;
    color: #E83161;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: none;
}

.blog-card-btn:hover {
    background: #E83161;
    color: #fff;
}

.blog-card-btn:hover svg path {
    fill: #fff;
}

.blog-card-btn svg {
    flex-shrink: 0;
    transition: none;
}

/* Tablet */
@media (max-width: 1199.98px) {
    .blog-listing {
        padding: 40px 0 60px;
    }

    .blog-listing-title {
        font-size: 36px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .blog-card-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .blog-card-title {
        font-size: 20px;
    }
}

/* Mobile */
@media (max-width: 711.98px) {
    .blog-listing {
        padding: 30px 0 50px;
    }

    .blog-listing-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 24px;
    }

    .blog-listing-title {
        font-size: 28px;
    }

    .blog-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .blog-tab {
        flex-shrink: 0;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .blog-card-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .blog-card-title {
        font-size: 18px;
    }

    .blog-card-btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Laptop Screen Overrides (992px to 1639.98px)
   Mirrors the same range used by /categories, /brands, /products,
   /offers, /about-us, /contact-us, /help-center and /careers so the
   blog banner and listing grid fit the laptop viewport without being
   clipped by the global 1640px .kp-container width. PC (≥1640px) and
   mobile (<768px) layouts are not touched.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1639.98px) {

    /* Containers: make fluid for the laptop range. */
    .kp-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* Banner — override the in-file @media (min-width: 1200px) rule that
       forces .blog-banner-section .col-lg-8 to 1230px and .col-lg-4 to
       400px. Same specificity + !important and later source order, so it
       wins inside the 1200–1639.98 overlap. */
    .blog-banner-section .hero-split-wrap {
        max-width: 100% !important;
        height: 380px !important;
        gap: 10px !important;
        --bs-gutter-x: 0 !important;
    }

    .blog-banner-section .col-lg-8 {
        width: auto !important;
        flex: 1 1 0% !important;
        max-width: none !important;
    }

    .blog-banner-section .col-lg-4 {
        width: 350px !important;
        flex: 0 0 350px !important;
        max-width: 350px !important;
    }

    .blog-banner-section .hero-split-left,
    .blog-banner-section .hero-split-right {
        height: 380px !important;
        min-height: 0 !important;
    }

    .blog-banner-section .blog-banner-left {
        padding: 40px 40px !important;
    }

    .blog-banner-section .hero-split-left h1 {
        font-size: 38px !important;
        line-height: 1.12 !important;
        margin-bottom: 16px !important;
    }

    .blog-banner-section .blog-banner-desc-box {
        /* width: 100% !important; */
        max-width: 500px !important;
        height: auto !important;
        margin-bottom: 1rem !important;
    }

    .blog-banner-section .hero-split-left .hero-desc,
    .blog-banner-section .hero-split-left .hero-sub-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .blog-banner-section .blog-banner-btn {
        width: 220px !important;
        height: 52px !important;
        font-size: 15px !important;
    }

    .blog-banner-section .hero-side-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .blog-banner-section .blog-banner-shape svg {
        max-width: 320px !important;
        max-height: 320px !important;
    }
}

/* Listing grid + cards: at 1200–1639 the default `.blog-grid` is
   `repeat(3, minmax(0, 1fr))` (already fluid) but `.blog-card-image`
   has a fixed `height: 520px` and `width: 520px`. The existing
   (max-width: 1199.98px) rule converts the card image to a 1:1
   aspect-ratio block, but only below 1200. Extend that same fluid
   behaviour into the laptop PC sub-range. */
@media (min-width: 1200px) and (max-width: 1639.98px) {
    .blog-listing-title {
        font-size: 40px !important;
    }

    .blog-grid {
        gap: 28px !important;
    }

    .blog-card-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .blog-card-title {
        font-size: 22px !important;
    }
}

/* ───────── Shift Breakpoint for Blog Page (apply mobile until 712px, then tablet) ───────── */
@media (min-width: 712px) and (max-width: 767.98px) {

    /* Hide Mobile Layout */
    .d-md-none {
        display: none !important;
    }

    /* Show Tablet/Desktop Layout */
    .d-none.d-md-block {
        display: block !important;
    }

    .d-none.d-md-flex {
        display: flex !important;
    }

    .d-none.d-md-inline {
        display: inline !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Tablet Screen Overrides (712px to 991.98px)
   The global .kp-container is 1640px with no responsive fallback in
   this range, so the blog banner was being clipped on tablet widths
   and the banner image col was hidden by markup. The existing
   `(max-width: 1199.98px)` rule already switches `.blog-grid` to
   2-column and converts card images to a 1:1 aspect ratio, so this
   block fills the remaining gap (container + banner).

   Mobile <712 keeps the existing `(max-width: 711.98px)` rules, and
   laptop 992–1639.98 keeps its own block. PC ≥1640 is not touched.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 712px) and (max-width: 991.98px) {

    /* Containers: make fluid for the tablet range. */
    .kp-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .breadcrumb-nav {
        top: 85px !important;
    }

    /* Banner — the image col (`col-12 col-lg-4 d-none d-lg-block`) is
       hidden below lg in markup. Force it visible at tablet and shrink
       both columns into a fluid flex split. */
    .blog-banner-section .hero-split-wrap {
        max-width: 100% !important;
        height: 320px !important;
        gap: 10px !important;
        --bs-gutter-x: 0 !important;
    }

    .blog-banner-section .hero-split-wrap>.col-lg-8,
    .blog-banner-section .hero-split-wrap>.col-lg-4 {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        width: calc(50% - 5px) !important;
    }

    /* Override the markup `d-none d-lg-block` so the image col becomes
       visible inside the tablet range. */
    .blog-banner-section .hero-split-wrap>.col-lg-4 {
        display: block !important;
    }

    .blog-banner-section .hero-split-left,
    .blog-banner-section .hero-split-right {
        height: 320px !important;
        min-height: 0 !important;
    }

    .blog-banner-section .blog-banner-left {
        padding: 28px 28px !important;
    }

    .blog-banner-section .hero-split-left h1 {
        font-size: 28px !important;
        line-height: 1.15 !important;
        margin-bottom: 12px !important;
    }

    .blog-banner-section .blog-banner-desc-box {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-bottom: 0.75rem !important;
    }

    .blog-banner-section .hero-split-left .hero-desc,
    .blog-banner-section .hero-split-left .hero-sub-desc {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .blog-banner-section .blog-banner-btn {
        width: 200px !important;
        height: 44px !important;
        font-size: 13px !important;
    }

    /* Decorative pluses SVG inside the gradient card — clamp so it
       doesn't dominate the narrower tablet card. */
    .blog-banner-section .blog-banner-left .blog-banner-shape svg {
        max-width: 220px !important;
        max-height: 220px !important;
        opacity: 0.45 !important;
        display: none !important;
    }

    /* Right image col content */
    .blog-banner-section .hero-side-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .blog-banner-section .hero-arrow-chip-image {
        top: 12px !important;
        left: 12px !important;
    }

    .blog-banner-section .hero-arrow-chip-image svg {
        width: 38px !important;
        height: 38px !important;
    }

    /* Listing section — existing `(max-width: 1199.98px)` already sets
       `.blog-grid` to 2-column and `.blog-card-image` to aspect-ratio
       1/1. Polish a few sizes for the tablet sub-range. */
    .blog-listing {
        padding: 36px 0 56px !important;
    }

    .blog-listing-title {
        font-size: 28px !important;
    }

    .blog-tabs {
        gap: 8px !important;
    }

    .blog-tab {
        height: 40px !important;
        font-size: 13px !important;
        padding: 8px 14px !important;
    }

    .blog-grid {
        gap: 20px !important;
    }

    .blog-card-meta {
        font-size: 13px !important;
        margin: 14px 0 8px !important;
    }

    .blog-card-title {
        font-size: 18px !important;
        margin-bottom: 16px !important;
        line-height: 1.3 !important;
        max-width: 380px !important;
    }

    .blog-card-btn {
        width: 140px !important;
        height: 38px !important;
        font-size: 13px !important;
    }
}

/* ─── Sticky Breadcrumb ─── */
.blog-breadcrumb-sticky {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); */
}

/* ─── Empty State — Desktop ─── */
.blog-empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 60px 0 80px;
}

.blog-empty-icon {
    width: 72px;
    height: 72px;
    background: #F7F8F9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 3px solid #E83161;
}

.blog-empty-title {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #173158;
    margin: 0;
    line-height: 1.2;
}

.blog-empty-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #5D6F8A;
    margin: 0;
    line-height: 1.6;
    white-space: nowrap;
}

.blog-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 0 24px;
    height: 52px;
    background: #173158;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.22s ease;
}

.blog-empty-btn:hover {
    background: #E83161;
    color: #fff;
}

/* ─── Empty State — Mobile ─── */
.blog-empty-state-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 0 40px;
}

.blog-empty-mobile-icon {
    width: 52px;
    height: 52px;
    background: #F7F8F9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px solid #E83161;
}

.blog-empty-mobile-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #173158;
    margin: 0;
    line-height: 1.3;
}

.blog-empty-mobile-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #5D6F8A;
    margin: 0;
    line-height: 1.5;
}

.blog-empty-mobile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 0 18px;
    height: 40px;
    background: #173158;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.22s ease;
}

.blog-empty-mobile-btn:hover {
    background: #E83161;
    color: #fff;
}

/* Banner split right image color layer opacity override */
.blog-banner-section .hero-split-right::before {
    background: #173158;
    opacity: 0.2;
}

/* Sticky Breadcrumb styling */
.blog-breadcrumb-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--nav-mega-top, 140px) !important;
    z-index: 950 !important;
    background: #ffffff !important;
    padding: 20px 0 !important;
}

/* Mobile Banner CTA Button Hover */
.blog-mob-cta-btn {
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.blog-mob-cta-btn:hover {
    background-color: #ffffff !important;
    color: #173158 !important;
    box-shadow: 0 6px 20px rgba(23, 49, 88, 0.3);
}

.blog-mob-cta-btn:hover svg path {
    fill: #E83161 !important;
    transition: fill 0.25s ease;
}

/* Filter loader spinner */
@keyframes blogFilterSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Tablet sticky breadcrumb — must come after .hc-breadcrumb-sticky base rule */
@media (min-width: 712px) and (max-width: 991.98px) {
    .blog-breadcrumb-sticky {
        top: 85px !important;
    }
}