/* ======
============------> Responsive-Css
============------> Global Type + Layout Tokens
====== */


/* ======
============------> Extra-Large-Screens
============------> 1400px and below
====== */
@media only screen and (max-width: 1399.98px) {
    :root {
        --heading-h1: clamp(2.4rem, 4.8vw, 4rem);
        --heading-h2: clamp(1.98rem, 3.9vw, 2.95rem);
        --heading-h3: clamp(1.48rem, 2.8vw, 2.05rem);
        --heading-h4: clamp(1.22rem, 2vw, 1.45rem);
        --heading-h5: clamp(1.08rem, 1.5vw, 1.2rem);
        --heading-h6: 1rem;

        --type-hero-title: var(--heading-h1);
        --type-section-title: var(--heading-h2);
        --type-card-title: var(--text-lg);
        --type-card-title-lg: var(--text-xl);
    }
}

/* ======
============------> Large-Screens
============------> 1200px and below
====== */
@media only screen and (max-width: 1199.98px) {
    :root {
        --heading-h1: clamp(2.18rem, 4.35vw, 3.45rem);
        --heading-h2: clamp(1.82rem, 3.5vw, 2.55rem);
        --heading-h3: clamp(1.42rem, 2.7vw, 1.85rem);
        --heading-h4: clamp(1.2rem, 2vw, 1.38rem);
        --heading-h5: clamp(1.05rem, 1.5vw, 1.18rem);
        --heading-h6: 1rem;

        --body-text: 0.96875rem;
        --small-text: 0.875rem;
        --caption-text: 0.75rem;
        --overline-text: 0.625rem;

        --type-hero-title: var(--heading-h1);
        --type-section-title: var(--heading-h2);
        --type-card-title: var(--text-md);
        --type-card-title-lg: var(--text-lg);
        --type-body: var(--body-text);
        --type-body-sm: var(--small-text);
        --type-button: var(--text-sm);
        --type-nav: var(--text-sm);
        --type-badge: var(--caption-text);
    }

    svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }
}

/* ======
============------> Medium-Screens
============------> 992px and below
====== */
@media only screen and (max-width: 991.98px) {
    :root {
        --heading-h1: clamp(2rem, 6vw, 2.95rem);
        --heading-h2: clamp(1.7rem, 4.8vw, 2.3rem);
        --heading-h3: clamp(1.35rem, 3.8vw, 1.72rem);
        --heading-h4: clamp(1.18rem, 3vw, 1.35rem);
        --heading-h5: clamp(1.05rem, 2.2vw, 1.16rem);
        --heading-h6: 1rem;

        --body-text: 0.9375rem;
        --small-text: 0.875rem;
        --caption-text: 0.75rem;
        --overline-text: 0.625rem;

        --type-hero-title: var(--heading-h1);
        --type-section-title: var(--heading-h2);
        --type-card-title: var(--text-md);
        --type-card-title-lg: var(--text-lg);
        --type-body: var(--body-text);
        --type-body-sm: var(--small-text);
        --type-button: var(--text-sm);
        --type-nav: var(--text-sm);
        --type-badge: var(--caption-text);

        --container-padding: 20px;
        --section-padding-y: 70px;
    }

    header {
        z-index: 9999;
    }
}

/* ======
============------> Tablet-Screens
============------> 768px and below
====== */
@media only screen and (max-width: 767.98px) {
    :root {
        --heading-h1: clamp(1.85rem, 8vw, 2.5rem);
        --heading-h2: clamp(1.58rem, 6vw, 2.05rem);
        --heading-h3: clamp(1.28rem, 4.5vw, 1.58rem);
        --heading-h4: clamp(1.12rem, 3.4vw, 1.3rem);
        --heading-h5: clamp(1rem, 2.8vw, 1.12rem);
        --heading-h6: 0.9375rem;

        --body-text: 0.9375rem;
        --small-text: 0.8125rem;
        --caption-text: 0.75rem;
        --overline-text: 0.625rem;

        --type-hero-title: var(--heading-h1);
        --type-section-title: var(--heading-h2);
        --type-card-title: var(--text-md);
        --type-card-title-lg: var(--text-lg);
        --type-body: var(--body-text);
        --type-body-sm: var(--small-text);
        --type-button: var(--small-text);
        --type-nav: var(--small-text);
        --type-badge: var(--caption-text);
    }

    svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
}

/* ======
============------> Mobile-Screens
============------> 576px and below
====== */
@media only screen and (max-width: 575.98px) {
    :root {
        --heading-h1: clamp(1.68rem, 8.5vw, 2.18rem);
        --heading-h2: clamp(1.44rem, 7vw, 1.82rem);
        --heading-h3: clamp(1.18rem, 5.4vw, 1.44rem);
        --heading-h4: clamp(1.05rem, 4vw, 1.18rem);
        --heading-h5: 1rem;
        --heading-h6: 0.9375rem;

        --body-text: 0.875rem;
        --small-text: 0.8125rem;
        --caption-text: 0.6875rem;
        --overline-text: 0.625rem;

        --type-hero-title: var(--heading-h1);
        --type-section-title: var(--heading-h2);
        --type-card-title: var(--text-base);
        --type-card-title-lg: var(--text-md);
        --type-body: var(--body-text);
        --type-body-sm: var(--small-text);
        --type-button: var(--small-text);
        --type-nav: var(--small-text);
        --type-badge: var(--caption-text);

        --container-padding: 16px;
        --section-padding-y: 56px;
    }

    html,
    body {
        overflow-x: hidden;
    }

    .web_imagebox {
        min-height: 16px;
    }

    .btn_primary,
    .btn_secondary {
        min-height: 44px;
        padding: 13px 20px;
    }
}

/* ======
============------> Small-Mobile-Screens
============------> 480px and below
====== */
@media only screen and (max-width: 479.98px) {
    :root {
        --heading-h1: clamp(1.58rem, 9vw, 1.98rem);
        --heading-h2: clamp(1.34rem, 7.5vw, 1.65rem);
        --heading-h3: clamp(1.12rem, 5.8vw, 1.32rem);
        --heading-h4: 1.0625rem;
        --heading-h5: 1rem;
        --heading-h6: 0.875rem;

        --body-text: 0.875rem;
        --small-text: 0.8125rem;
        --caption-text: 0.6875rem;
        --overline-text: 0.625rem;

        --type-hero-title: var(--heading-h1);
        --type-section-title: var(--heading-h2);
        --type-card-title: var(--text-base);
        --type-card-title-lg: var(--text-md);
        --type-body: var(--body-text);
        --type-body-sm: var(--small-text);
        --type-button: var(--small-text);
        --type-nav: var(--small-text);
        --type-badge: var(--caption-text);
    }

    svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }
}

/* ======
============------> Extra-Small-Mobile-Screens
============------> 390px and below
====== */
@media only screen and (max-width: 389.98px) {
    :root {
        --heading-h1: clamp(1.46rem, 9.5vw, 1.78rem);
        --heading-h2: clamp(1.26rem, 8vw, 1.48rem);
        --heading-h3: clamp(1.06rem, 6vw, 1.2rem);
        --heading-h4: 1rem;
        --heading-h5: 0.9375rem;
        --heading-h6: 0.875rem;

        --body-text: 0.8125rem;
        --small-text: 0.75rem;
        --caption-text: 0.6875rem;
        --overline-text: 0.625rem;

        --type-hero-title: var(--heading-h1);
        --type-section-title: var(--heading-h2);
        --type-card-title: var(--text-sm);
        --type-card-title-lg: var(--text-base);
        --type-body: var(--body-text);
        --type-body-sm: var(--small-text);
        --type-button: var(--small-text);
        --type-nav: var(--small-text);
        --type-badge: var(--caption-text);
    }
}

/* ======
============------> Very-Small-Mobile-Screens
============------> 360px and below
====== */
@media only screen and (max-width: 359.98px) {
    :root {
        --heading-h1: 1.42rem;
        --heading-h2: 1.24rem;
        --heading-h3: 1.06rem;
        --heading-h4: 1rem;
        --heading-h5: 0.9375rem;
        --heading-h6: 0.875rem;

        --body-text: 0.8125rem;
        --small-text: 0.75rem;
        --caption-text: 0.6875rem;
        --overline-text: 0.625rem;

        --type-hero-title: var(--heading-h1);
        --type-section-title: var(--heading-h2);
        --type-card-title: var(--text-sm);
        --type-card-title-lg: var(--text-base);
        --type-body: var(--body-text);
        --type-body-sm: var(--small-text);
        --type-button: var(--small-text);
        --type-nav: var(--small-text);
        --type-badge: var(--caption-text);
    }

    svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }
}









/* ============================================================
   NEW CLONE HEADER RESPONSIVE
   Layout:
   - Desktop: Top bar + main logo row + bottom nav rail
   - Mobile: Top bar hidden, compact header + drawer
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-hdr-logo-img {
        height: 40px !important;
        max-width: 200px !important;
    }

    .sbx2-hdr .sbx2-hdr-inner {
        gap: 18px !important;
    }

    .sbx2-hdr-nav-row {
        gap: 14px !important;
    }

    .sbx2-hdr-nav-link {
        padding-left: 11px !important;
        padding-right: 11px !important;
        font-size: var(--caption-text) !important;
    }

    .sbx2-search-toggle {
        min-width: 108px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .sbx2-hdr-btn,
    .sbx2-hdr .btn-primary {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-hdr-top {
        display: none !important;
    }

    .sbx2-hdr .sbx2-hdr-inner {
        min-height: 72px !important;
        padding: 11px 0 !important;
    }

    .sbx2-hdr-logo-img {
        height: 36px !important;
        max-width: 170px !important;
    }

    .sbx2-hdr-logo-text {
        font-size: var(--text-md) !important;
    }

    .sbx2-hdr-logo::after {
        width: 34px !important;
        height: 2px !important;
        bottom: -1px !important;
    }

    .sbx2-hdr-nav-row {
        display: none !important;
    }

    .sbx2-hdr-burger {
        display: inline-flex !important;
    }

    .sbx2-search-toggle {
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        padding: 0 !important;
        border-radius: var(--radius-sm) !important;
    }

    .sbx2-search-toggle small {
        display: none !important;
    }

    .sbx2-search-toggle .search_ic {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }

    .sbx2-hdr-btn,
    .sbx2-hdr .btn-primary {
        display: none !important;
    }

    .sbx2-hdr-mobile-nav {
        top: 72px !important;
        height: calc(100vh - 72px) !important;
        padding-top: 18px !important;
        padding-bottom: 28px !important;
        z-index: 10040 !important;
    }

    .sbx2-search-panel {
        position: fixed !important;
        top: 82px !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        z-index: 10060 !important;
        border-radius: var(--radius-xl) !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-hdr-logo-img {
        height: 34px !important;
        max-width: 155px !important;
    }

    .sbx2-hdr-logo-text {
        font-size: var(--text-base) !important;
    }

    .sbx2-search-panel {
        top: 80px !important;
        left: 14px !important;
        right: 14px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-hdr-mobile-nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .sbx2-hdr-mobile-head {
        padding: 16px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-hdr-mobile-list {
        padding: 9px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-hdr-mobile-link {
        min-height: 56px !important;
        padding: 14px 50px 14px 16px !important;
        font-size: var(--type-body) !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-hdr-mobile-link::after {
        right: 12px !important;
        width: 29px !important;
        height: 29px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-hdr .sbx2-hdr-inner {
        min-height: 68px !important;
    }

    .sbx2-hdr-logo-img {
        height: 31px !important;
        max-width: 138px !important;
    }

    .sbx2-hdr-logo-text {
        font-size: var(--text-base) !important;
    }

    .sbx2-search-toggle,
    .sbx2-hdr-burger {
        width: 39px !important;
        height: 39px !important;
        flex: 0 0 39px !important;
    }

    .sbx2-hdr-actions {
        gap: 8px !important;
    }

    .sbx2-hdr-mobile-nav {
        top: 68px !important;
        height: calc(100vh - 68px) !important;
        padding-top: 16px !important;
        padding-bottom: 24px !important;
    }

    .sbx2-hdr-mobile-head {
        margin-bottom: 10px !important;
        padding: 15px !important;
    }

    .sbx2-hdr-mobile-list {
        padding: 8px !important;
        gap: 7px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-hdr-mobile-link {
        min-height: 54px !important;
        padding: 14px 48px 14px 15px !important;
        font-size: var(--type-body) !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-hdr-mobile-link::before {
        width: 7px !important;
        height: 7px !important;
        flex-basis: 7px !important;
        margin-right: 11px !important;
    }

    .sbx2-hdr-mobile-link::after {
        right: 11px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .sbx2-hdr-mobile-cta {
        min-height: 52px !important;
        margin-top: 10px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-search-panel {
        top: 76px !important;
    }

    .sbx2-search-form {
        min-height: 58px !important;
        padding-left: 16px !important;
        padding-right: 14px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-hdr .sbx2-hdr-inner {
        gap: 10px !important;
    }

    .sbx2-hdr-logo-img {
        height: 30px !important;
        max-width: 132px !important;
    }

    .sbx2-hdr-logo-text {
        font-size: var(--small-text) !important;
    }

    .sbx2-search-toggle,
    .sbx2-hdr-burger {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
    }

    .sbx2-hdr-mobile-nav {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .sbx2-hdr-mobile-head {
        padding: 14px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-hdr-mobile-list {
        padding: 7px !important;
        gap: 6px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-hdr-mobile-link {
        min-height: 52px !important;
        padding: 13px 46px 13px 14px !important;
        border-radius: var(--radius-sm) !important;
    }

    .sbx2-hdr-mobile-link::after {
        right: 9px !important;
        width: 27px !important;
        height: 27px !important;
    }
}




/* ============================================================
   NEW CLONE HERO RESPONSIVE
   Layout:
   - Centered editorial shell
   - Panoramic image panel
   - Highlight rail responsive
   ============================================================ */
   
@media only screen and (min-width: 1200px) {
    .hero-slide-wrapper {
        min-height: 590px !important;
    }
}

@media only screen and (max-width: 1199.98px) {
    .hero-slide-wrapper {
        min-height: 540px !important;
        gap: 44px !important;
    }

    .sbx2-hero-content {
        flex-basis: 520px !important;
        max-width: 520px !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(2.2rem, 4.5vw, 3.9rem) !important;
    }

    .sbx2-hero-image-card {
        min-height: 420px !important;
    }

    .sbx2-hero-img {
        height: 420px !important;
    }

    .sbx2-hero-side-note {
        left: -18px !important;
        bottom: 34px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-hero {
        padding: 30px 0 66px !important;
    }

    .hero-slide-wrapper {
        min-height: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 34px !important;
        padding: 26px 0 38px !important;
    }

    .sbx2-hero-content {
        max-width: 760px !important;
        flex-basis: auto !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .sbx2-hero-kicker,
    .sbx2-hero-ctas,
    .sbx2-hero-highlights {
        justify-content: center !important;
    }

    .sbx2-hero-para {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sbx2-hero-media {
        max-width: 720px !important;
        width: 100% !important;
        margin: 0 auto !important;
        flex-basis: auto !important;
    }

    .sbx2-hero-image-card {
        min-height: 390px !important;
        border-radius: 26px !important;
    }

    .sbx2-hero-img {
        height: 390px !important;
    }

    .sbx2-hero-side-note {
        left: 22px !important;
        bottom: 28px !important;
    }

    .sbx2-hero-dots {
        left: 50% !important;
        bottom: 22px !important;
        justify-content: center !important;
        transform: translateX(-50%) !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-hero {
        padding: 24px 0 58px !important;
    }

    .hero-slide-wrapper {
        gap: 28px !important;
        padding: 22px 0 34px !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(1.85rem, 8vw, 2.65rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.018em !important;
    }

    .sbx2-hero-para {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-loose) !important;
    }

    .sbx2-hero-ctas {
        flex-direction: column !important;
        align-items: stretch !important;
        margin-top: 22px !important;
    }

    .sbx2-btn-hero-primary,
    .sbx2-btn-hero-ghost {
        width: 100% !important;
        min-height: 48px !important;
    }

    .sbx2-hero-highlights {
        gap: 10px !important;
        margin-top: 22px !important;
    }

    .sbx2-hero-highlight {
        flex: 1 1 calc(33.333% - 8px) !important;
        min-width: 120px !important;
        min-height: 70px !important;
        padding: 14px 12px 14px 16px !important;
    }

    .sbx2-hero-image-card {
        min-height: 330px !important;
        border-radius: 24px !important;
    }

    .sbx2-hero-img {
        height: 330px !important;
    }

    .sbx2-hero-image-card::before {
        inset: 10px !important;
        border-radius: 18px !important;
    }

    .sbx2-hero-image-caption {
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
    }

    .sbx2-hero-side-note {
        display: none !important;
    }

    .sbx2-hero-dots {
        bottom: 18px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-hero {
        padding-top: 20px !important;
    }

    .sbx2-hero-kicker {
        min-height: 36px !important;
        padding: 7px 12px !important;
        margin-bottom: 14px !important;
    }

    .sbx2-hero-kicker span {
        font-size: 0.66rem !important;
        letter-spacing: 0.07em !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(1.65rem, 8.5vw, 2.25rem) !important;
    }

    .sbx2-hero-highlight {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        min-height: 58px !important;
    }

    .sbx2-hero-image-card {
        min-height: 285px !important;
        border-radius: 22px !important;
    }

    .sbx2-hero-img {
        height: 285px !important;
    }

    .sbx2-hero-image-caption {
        min-height: 52px !important;
        padding: 12px 13px !important;
        border-radius: 16px !important;
    }

    .sbx2-hero-image-caption small {
        display: none !important;
    }

    .sbx2-hero-dots .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }

    .sbx2-hero-dots .swiper-pagination-bullet-active {
        width: 27px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .hero-slide-wrapper {
        padding-top: 18px !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(1.5rem, 9vw, 2rem) !important;
    }

    .sbx2-hero-ctas {
        margin-top: 20px !important;
    }

    .sbx2-btn-hero-primary,
    .sbx2-btn-hero-ghost {
        min-height: 46px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .sbx2-hero-image-card {
        min-height: 250px !important;
    }

    .sbx2-hero-img {
        height: 250px !important;
    }

    .sbx2-hero-image-caption {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
    }
}




/* ============================================================
   FEATURED GUIDES RESPONSIVE - HUMAN EDITORIAL SPLIT
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-featured-layout {
        gap: 26px !important;
    }

    .sbx2-featured-lead-img {
        height: 350px !important;
    }

    .sbx2-featured-lead-body {
        padding: 25px 26px 24px !important;
    }

    .sbx2-featured-side {
        flex-basis: 42% !important;
    }

    .sbx2-featured-mini {
        gap: 13px !important;
    }

    .sbx2-featured-mini-img {
        flex-basis: 132px !important;
        width: 132px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .featured-section {
        padding: 70px 0 78px !important;
    }

    .featured-section .sbx2-section-hdr {
        margin-bottom: 34px !important;
    }

    .sbx2-featured-layout {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .sbx2-featured-lead,
    .sbx2-featured-side {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    .sbx2-featured-lead-img {
        height: 380px !important;
    }

    .sbx2-featured-side-list {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .sbx2-featured-mini {
        flex: 1 1 calc(50% - 7px) !important;
        min-width: 0 !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .featured-section {
        padding: 58px 0 66px !important;
    }

    .featured-section .sbx2-section-hdr {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 28px !important;
    }

    .featured-section .sbx2-link-arrow {
        min-height: 40px !important;
        padding: 10px 15px !important;
    }

    .sbx2-featured-lead-img {
        height: 310px !important;
    }

    .sbx2-featured-lead-body {
        padding: 22px !important;
    }

    .sbx2-featured-lead-title {
        font-size: clamp(1.45rem, 5vw, 2rem) !important;
    }

    .sbx2-featured-lead-footer {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .sbx2-featured-read {
        width: 100% !important;
    }

    .sbx2-featured-side-head {
        min-height: 58px !important;
        padding: 15px 16px !important;
    }

    .sbx2-featured-side-list {
        flex-direction: column !important;
    }

    .sbx2-featured-mini {
        flex: 1 1 100% !important;
    }

    .sbx2-featured-mini-img {
        flex-basis: 150px !important;
        width: 150px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-featured-lead {
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-featured-lead-img {
        height: 260px !important;
    }

    .sbx2-featured-lead-badge {
        left: 16px !important;
        top: 16px !important;
        min-height: 34px !important;
        padding: 8px 12px !important;
    }

    .sbx2-featured-lead-body {
        padding: 20px !important;
    }

    .sbx2-featured-lead-text {
        margin-bottom: 20px !important;
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-featured-side-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 6px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-featured-mini {
        flex-direction: column !important;
        padding: 12px !important;
    }

    .sbx2-featured-mini-img {
        width: 100% !important;
        flex-basis: auto !important;
        height: 210px !important;
    }

    .sbx2-featured-mini-img img {
        min-height: 210px !important;
    }

    .sbx2-featured-mini-body {
        padding: 4px 2px 2px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .featured-section {
        padding: 52px 0 60px !important;
    }

    .featured-section .sbx2-section-hdr {
        gap: 14px !important;
        margin-bottom: 24px !important;
    }

    .featured-section .sbx2-eyebrow {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-featured-lead-img {
        height: 230px !important;
    }

    .sbx2-featured-lead-body {
        padding: 18px !important;
    }

    .sbx2-featured-mini-img {
        height: 190px !important;
    }

    .sbx2-featured-mini-img img {
        min-height: 190px !important;
    }
}




/* ============================================================
   LATEST SHOPPING GUIDES RESPONSIVE - NUMBERED NEWSROOM STYLE
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-latest-board {
        gap: 22px !important;
    }

    .sbx2-latest-board-note {
        flex-basis: 205px !important;
        padding: 20px !important;
    }

    .latest-section .sbx2-latest-card {
        flex-basis: 100% !important;
    }

    .latest-section .sbx2-latest-img-link {
        flex-basis: 150px !important;
        width: 150px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .latest-section {
        padding: 72px 0 80px !important;
    }

    .latest-section .sbx2-section-hdr {
        margin-bottom: 34px !important;
    }

    .sbx2-latest-board {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .sbx2-latest-board-note {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .sbx2-latest-board-note span {
        margin-bottom: 0 !important;
    }

    .sbx2-latest-board-note small {
        max-width: 420px !important;
        text-align: right !important;
    }

    .latest-section .sbx2-latest-grid {
        gap: 18px !important;
    }

    .latest-section .sbx2-latest-card {
        flex-basis: calc((100% - 18px) / 2) !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    .latest-section .sbx2-latest-img-link {
        flex-basis: 128px !important;
        width: 128px !important;
        min-height: 150px !important;
    }

    .latest-section .sbx2-latest-thumb {
        min-height: 150px !important;
    }

    .sbx2-latest-count {
        flex-basis: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .latest-section {
        padding: 60px 0 68px !important;
    }

    .latest-section .sbx2-section-hdr {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 28px !important;
    }

    .latest-section .sbx2-link-arrow {
        min-height: 40px !important;
        padding: 10px 15px !important;
    }

    .sbx2-latest-board-note {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 18px !important;
    }

    .sbx2-latest-board-note small {
        max-width: 100% !important;
        text-align: left !important;
    }

    .latest-section .sbx2-latest-card {
        flex-basis: 100% !important;
        min-height: 190px !important;
    }

    .latest-section .sbx2-latest-img-link {
        flex-basis: 145px !important;
        width: 145px !important;
        min-height: 145px !important;
    }

    .latest-section .sbx2-latest-thumb {
        min-height: 145px !important;
    }

    .latest-section .sbx2-latest-excerpt {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .latest-section .sbx2-latest-card {
        flex-direction: column !important;
        gap: 14px !important;
        padding: 14px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-latest-count {
        position: absolute !important;
        left: 24px !important;
        top: 24px !important;
        z-index: 4 !important;
        background-color: rgba(255, 250, 243, 0.92) !important;
    }

    .latest-section .sbx2-latest-img-link {
        order: -1 !important;
        width: 100% !important;
        flex-basis: auto !important;
        min-height: 220px !important;
        height: 220px !important;
        border-radius: var(--radius-md) !important;
    }

    .latest-section .sbx2-latest-thumb {
        min-height: 220px !important;
    }

    .latest-section .sbx2-latest-body {
        padding: 2px 2px 2px !important;
    }

    .latest-section .sbx2-latest-read {
        min-height: 38px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .latest-section {
        padding: 52px 0 60px !important;
    }

    .latest-section .sbx2-section-hdr {
        gap: 14px !important;
        margin-bottom: 24px !important;
    }

    .latest-section .sbx2-eyebrow {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .latest-section .sbx2-latest-grid {
        gap: 16px !important;
    }

    .latest-section .sbx2-latest-img-link {
        height: 200px !important;
        min-height: 200px !important;
    }

    .latest-section .sbx2-latest-thumb {
        min-height: 200px !important;
    }

    .latest-section .sbx2-latest-excerpt {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
}




/* ============================================================
   EDITOR PICKS / HOME SLIDER BLOGS RESPONSIVE - DARK STYLE
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-band,
    .editor-picks-section {
        padding: 84px 0 92px !important;
    }

    .sbx2-band-grid {
        gap: 22px !important;
    }

    .sbx2-band-card {
        flex-basis: calc((100% - 44px) / 3) !important;
        border-radius: 24px !important;
    }

    .sbx2-band-img-wrap {
        height: 230px !important;
    }

    .sbx2-band-body {
        padding: 18px 18px 20px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-band,
    .editor-picks-section {
        padding: 74px 0 82px !important;
    }

    .sbx2-band-hdr {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin-bottom: 32px !important;
    }

    .sbx2-band-hdr-content {
        max-width: 100% !important;
    }

    .sbx2-band-grid {
        gap: 22px !important;
    }

    .sbx2-band-card {
        flex-basis: calc((100% - 22px) / 2) !important;
    }

    .sbx2-band-img-wrap {
        height: 240px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-band,
    .editor-picks-section {
        padding: 64px 0 70px !important;
    }

    .sbx2-band::after {
        right: -10px !important;
        bottom: 16px !important;
        font-size: clamp(4.5rem, 24vw, 8rem) !important;
    }

    .sbx2-band-hdr {
        gap: 16px !important;
        margin-bottom: 28px !important;
    }

    .sbx2-band .sbx2-link-arrow {
        min-height: 40px !important;
        padding: 10px 15px !important;
    }

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

    .sbx2-band-card {
        flex-basis: 100% !important;
        border-radius: 22px !important;
    }

    .sbx2-band-img-wrap {
        height: 250px !important;
    }

    .sbx2-band-body {
        padding: 18px 18px 20px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-band,
    .editor-picks-section {
        padding: 58px 0 64px !important;
    }

    .sbx2-band-card {
        border-radius: 20px !important;
    }

    .sbx2-band-img-wrap {
        height: 220px !important;
    }

    .sbx2-band-num {
        top: 14px !important;
        left: 14px !important;
        min-width: 38px !important;
        height: 28px !important;
    }

    .sbx2-band-chip {
        right: 14px !important;
        bottom: 14px !important;
        padding: 7px 10px !important;
        font-size: 9px !important;
    }

    .sbx2-band-body {
        padding: 16px 16px 18px !important;
    }

    .sbx2-band-read {
        width: 100% !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-band-hdr {
        gap: 14px !important;
        margin-bottom: 24px !important;
    }

    .sbx2-band .sbx2-eyebrow {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-band-grid {
        gap: 18px !important;
    }

    .sbx2-band-card {
        border-radius: 18px !important;
    }

    .sbx2-band-img-wrap {
        height: 205px !important;
    }

    .sbx2-band-card-title {
        font-size: var(--type-card-title) !important;
    }

    .sbx2-band-excerpt {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
}




/* ============================================================
   HOME DISCLAIMER RESPONSIVE - DARK DISCLOSURE PANEL
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx-disclaimer-section {
        padding: 70px 0 78px !important;
    }

    .sbx-disclaimer-inner {
        gap: 26px !important;
        padding: 30px !important;
        border-radius: 28px !important;
    }

    .sbx-disclaimer-mark {
        flex-basis: 150px !important;
        padding: 20px !important;
    }

    .sbx-disclaimer-meta {
        flex-basis: 225px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx-disclaimer-section {
        padding: 64px 0 72px !important;
    }

    .sbx-disclaimer-inner {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 22px !important;
        padding: 28px !important;
    }

    .sbx-disclaimer-mark {
        width: 100% !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-direction: row !important;
    }

    .sbx-disclaimer-content {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .sbx-disclaimer-meta {
        width: 100% !important;
        flex: 1 1 auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-self: stretch !important;
    }

    .sbx-disclaimer-meta-item {
        flex: 1 1 calc(33.333% - 8px) !important;
        min-width: 190px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx-disclaimer-section {
        padding: 56px 0 64px !important;
    }

    .sbx-disclaimer-inner {
        padding: 24px !important;
        border-radius: 24px !important;
    }

    .sbx-disclaimer-inner::before {
        left: 12px !important;
        right: 12px !important;
        top: 12px !important;
        bottom: 12px !important;
        border-radius: 18px !important;
    }

    .sbx-disclaimer-mark {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .sbx-disclaimer-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 16px !important;
    }

    .sbx-disclaimer-icon i {
        font-size: 24px !important;
    }

    .sbx2-disclaimer-desc {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-loose) !important;
    }

    .sbx-disclaimer-meta {
        flex-direction: column !important;
    }

    .sbx-disclaimer-meta-item {
        flex: 1 1 auto !important;
        min-width: 100% !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx-disclaimer-section {
        padding: 50px 0 58px !important;
    }

    .sbx-disclaimer-inner {
        gap: 20px !important;
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .sbx-disclaimer-mark {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 17px !important;
    }

    .sbx-disclaimer-content .sbx2-eyebrow {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-disclaimer-title {
        font-size: clamp(1.55rem, 7vw, 2.05rem) !important;
    }

    .sbx-disclaimer-meta-item {
        min-height: 56px !important;
        padding: 12px 13px !important;
        border-radius: 16px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx-disclaimer-section {
        padding: 46px 0 54px !important;
    }

    .sbx-disclaimer-inner {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .sbx-disclaimer-icon {
        width: 46px !important;
        height: 46px !important;
    }

    .sbx-disclaimer-icon i {
        font-size: 22px !important;
    }

    .sbx2-disclaimer-desc {
        font-size: var(--small-text) !important;
    }
}




/* ============================================================
   STORES LISTING PAGE RESPONSIVE - COMPLETE UPDATED
   Purpose:
   - Stores hero responsive
   - Alpha filter responsive
   - Search responsive
   - Compact store cards
   - No bottom white space
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-stores-page-hero {
        padding: 84px 0 132px !important;
    }

    .sbx2-alpha-nav-wrapper {
        margin-top: -40px !important;
        margin-bottom: 52px !important;
    }

    .sbx2-alpha-filter .swiper {
        padding: 11px 54px !important;
    }

    .sbx2-search-container {
        width: min(100%, 390px) !important;
        min-height: 52px !important;
    }

    .sbx2-search-icon {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }

    .sbx2-search-input {
        height: 52px !important;
    }

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

    .sbx2-store-card {
        flex-basis: calc((100% - 100px) / 6) !important;
        min-width: 135px !important;
        min-height: 174px !important;
        padding: 15px 13px 17px !important;
    }

    .sbx2-store-card::before {
        left: 11px !important;
        right: 11px !important;
        top: 11px !important;
        height: 68px !important;
    }

    .sbx2-store-card::after {
        display: none !important;
        content: none !important;
    }

    .sbx2-store-logo-wrapper {
        width: 70px !important;
        height: 70px !important;
        flex-basis: 70px !important;
        margin-top: 19px !important;
        margin-bottom: 13px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-stores-page-hero {
        padding: 78px 0 126px !important;
    }

    .sbx2-stores-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-stores-subtitle {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-alpha-nav-wrapper {
        margin-top: -38px !important;
        margin-bottom: 48px !important;
    }

    .sbx2-alpha-filter .swiper {
        padding: 11px 52px !important;
    }

    .sbx2-alpha-btn {
        min-width: 40px !important;
        height: 38px !important;
        padding: 0 13px !important;
    }

    .sbx2-store-group-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .sbx2-search-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px !important;
    }

    .sbx2-search-icon {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }

    .sbx2-search-input {
        height: 52px !important;
    }

    .sbx2-stores-grid {
        gap: 18px !important;
    }

    .sbx2-store-card {
        flex-basis: calc((100% - 72px) / 5) !important;
        min-width: 130px !important;
        min-height: 170px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-stores-page-hero {
        padding: 66px 0 108px !important;
    }

    .sbx2-stores-page-hero::after {
        right: -24px !important;
        bottom: -12px !important;
        font-size: clamp(5rem, 24vw, 9rem) !important;
    }

    .sbx2-stores-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-stores-subtitle {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-normal) !important;
    }

    .sbx2-stores-directory-section {
        padding-bottom: 72px !important;
    }

    .sbx2-alpha-nav-wrapper {
        margin-top: -34px !important;
        margin-bottom: 42px !important;
    }

    .sbx2-alpha-filter {
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-alpha-filter .swiper {
        padding: 10px 48px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-alpha-btn {
        min-width: 38px !important;
        height: 36px !important;
        padding: 0 12px !important;
    }

    .sbx2-alpha-filter .swiper .swiper-button-prev,
    .sbx2-alpha-filter .swiper .swiper-button-next {
        width: 42px !important;
        height: 42px !important;
    }

    .sbx2-alpha-filter .swiper .swiper-button-prev {
        left: 4px !important;
    }

    .sbx2-alpha-filter .swiper .swiper-button-next {
        right: 4px !important;
    }

    .sbx2-store-group {
        margin-bottom: 48px !important;
    }

    .sbx2-store-group-header {
        gap: 16px !important;
        margin-bottom: 24px !important;
        padding-bottom: 18px !important;
    }

    .sbx2-search-container {
        min-height: 50px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-search-icon {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
    }

    .sbx2-search-icon::before {
        width: 28px !important;
        height: 28px !important;
    }

    .sbx2-search-input {
        height: 50px !important;
        padding-right: 16px !important;
    }

    .sbx2-stores-grid {
        gap: 16px !important;
    }

    .sbx2-store-card {
        flex-basis: calc((100% - 32px) / 3) !important;
        min-width: 0 !important;
        min-height: 166px !important;
        padding: 14px 12px 16px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-store-card::before {
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
        height: 64px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-store-logo-wrapper {
        width: 64px !important;
        height: 64px !important;
        flex-basis: 64px !important;
        margin-top: 19px !important;
        margin-bottom: 12px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-store-count {
        top: 14px !important;
        right: 14px !important;
        min-height: 22px !important;
        padding: 6px 8px !important;
        font-size: 9px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-stores-page-hero {
        padding: 60px 0 98px !important;
    }

    .sbx2-store-group-title {
        font-size: clamp(1.65rem, 8vw, 2.15rem) !important;
    }

    .sbx2-alpha-filter .swiper {
        padding: 10px 44px !important;
    }

    .sbx2-alpha-filter .swiper .swiper-button-prev,
    .sbx2-alpha-filter .swiper .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
    }

    .sbx2-search-container {
        min-height: 48px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-search-icon {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .sbx2-search-input {
        height: 48px !important;
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-stores-grid {
        gap: 14px !important;
    }

    .sbx2-store-card {
        flex-basis: calc((100% - 14px) / 2) !important;
        min-height: 164px !important;
        padding: 13px 11px 15px !important;
    }

    .sbx2-store-logo-wrapper {
        width: 62px !important;
        height: 62px !important;
        flex-basis: 62px !important;
    }

    .sbx2-store-name {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-view-all-btn {
        width: 100% !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-stores-page-hero {
        padding: 58px 0 92px !important;
    }

    .sbx2-stores-badge {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-stores-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-stores-subtitle {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-alpha-nav-wrapper {
        margin-top: -30px !important;
        margin-bottom: 36px !important;
    }

    .sbx2-alpha-filter {
        border-radius: 20px !important;
    }

    .sbx2-alpha-filter .swiper {
        padding: 9px 42px !important;
        border-radius: 20px !important;
    }

    .sbx2-alpha-btn {
        min-width: 36px !important;
        height: 34px !important;
        padding: 0 11px !important;
    }

    .sbx2-store-group {
        margin-bottom: 42px !important;
    }

    .sbx2-store-group-header {
        gap: 16px !important;
        margin-bottom: 22px !important;
        padding-bottom: 16px !important;
    }

    .sbx2-search-container {
        min-height: 46px !important;
        border-radius: 18px !important;
    }

    .sbx2-search-icon {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
    }

    .sbx2-search-icon::before {
        width: 26px !important;
        height: 26px !important;
    }

    .sbx2-search-input {
        height: 46px !important;
        padding-right: 14px !important;
        font-size: 12px !important;
    }

    .sbx2-stores-grid {
        gap: 12px !important;
    }

    .sbx2-store-card {
        min-height: 158px !important;
        padding: 12px 10px 15px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-store-card::before {
        left: 8px !important;
        right: 8px !important;
        top: 8px !important;
        height: 58px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-store-card::after {
        display: none !important;
        content: none !important;
    }

    .sbx2-store-logo-wrapper {
        width: 58px !important;
        height: 58px !important;
        flex-basis: 58px !important;
        padding: 9px !important;
        margin-top: 18px !important;
        margin-bottom: 11px !important;
    }

    .sbx2-store-name {
        min-height: 32px !important;
        margin-bottom: 0 !important;
        font-size: 12px !important;
    }

    .sbx2-store-count {
        top: 11px !important;
        right: 11px !important;
        min-height: 21px !important;
        padding: 5px 7px !important;
        font-size: 8px !important;
    }
}




/* ============================================================
   SINGLE STORE COUPONS RESPONSIVE - UPDATED PREMIUM V2
   Purpose:
   - Store hero responsive
   - Ticket-style coupon cards responsive
   - New coupon buttons responsive
   - Desktop sticky sidebar, mobile normal sidebar
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-single-store-hero {
        padding: 76px 0 112px !important;
    }

    .sbx2-store-hero-card {
        grid-template-columns: 132px minmax(0, 1fr) auto !important;
        gap: 24px !important;
        padding: 32px !important;
    }

    .sbx2-store-hero-logo {
        width: 122px !important;
        height: 122px !important;
        padding: 16px !important;
    }

    .sbx2-store-layout {
        grid-template-columns: minmax(0, 1fr) 310px !important;
        gap: 28px !important;
    }

    /* ===== Coupon Card V2 ===== */

    .sbx2-coupon-card {
        min-height: 170px !important;
    }

    .sbx2-coupon-card::before {
        left: 158px !important;
        top: 20px !important;
        bottom: 20px !important;
    }

    .sbx2-coupon-card::after {
        left: 149px !important;
    }

    .sbx2-coupon-label {
        width: 158px !important;
        min-height: 170px !important;
        flex: 0 0 158px !important;
        padding: 22px !important;
    }

    .sbx2-coupon-label span {
        font-size: var(--text-lg) !important;
    }

    .sbx2-coupon-content {
        padding: 26px 28px 26px 32px !important;
    }

    .sbx2-coupon-cta {
        min-width: 126px !important;
        min-height: 44px !important;
        padding: 12px 17px !important;
    }

    /* ===== Sidebar ===== */

    .sbx2-store-sidebar {
        top: 100px !important;
    }

    .sbx2-store-sidebar .sbx2-side-panel {
        padding: 22px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-single-store-hero {
        padding: 70px 0 110px !important;
    }

    .sbx2-store-hero-card {
        grid-template-columns: 118px minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .sbx2-store-hero-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }

    .sbx2-store-hero-logo {
        width: 110px !important;
        height: 110px !important;
    }

    .sbx2-single-store-title {
        font-size: clamp(2.1rem, 7vw, 3.35rem) !important;
    }

    .sbx2-store-coupons-section {
        padding: 68px 0 86px !important;
    }

    .sbx2-store-layout {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    /* ===== Sidebar Normal On Tablet ===== */

    .sbx2-store-sidebar {
        position: relative !important;
        top: auto !important;
        align-self: auto !important;
        height: auto !important;
        margin-top: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }

    .sbx2-coupon-filters {
        max-width: 100% !important;
    }

    /* ===== Coupon Card V2 ===== */

    .sbx2-coupon-card {
        min-height: 168px !important;
    }

    .sbx2-coupon-card::before {
        left: 150px !important;
    }

    .sbx2-coupon-card::after {
        left: 141px !important;
    }

    .sbx2-coupon-label {
        width: 150px !important;
        min-height: 168px !important;
        flex: 0 0 150px !important;
        padding: 20px !important;
    }

    .sbx2-coupon-label span {
        font-size: var(--text-lg) !important;
    }

    .sbx2-coupon-content {
        padding: 25px 26px 25px 30px !important;
    }

    .sbx2-coupon-cta {
        min-width: 124px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-single-store-hero {
        padding: 58px 0 96px !important;
    }

    .sbx2-single-store-hero::after {
        right: -24px !important;
        bottom: -12px !important;
        font-size: clamp(5rem, 24vw, 9rem) !important;
    }

    .sbx2-store-hero-card {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        justify-items: center !important;
        gap: 24px !important;
        padding: 28px 24px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-store-hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .sbx2-store-meta-top,
    .sbx2-store-hero-stats {
        justify-content: center !important;
    }

    .sbx2-store-hero-actions {
        width: 100% !important;
        justify-content: center !important;
    }

    .sbx2-btn-visit-store {
        width: 100% !important;
    }

    .sbx2-store-coupons-section {
        padding: 58px 0 74px !important;
    }

    .sbx2-coupons-feed {
        margin-top: -42px !important;
    }

    .sbx2-offers-header {
        margin-bottom: 22px !important;
    }

    .sbx2-offer-title {
        font-size: clamp(1.75rem, 8vw, 2.4rem) !important;
    }

    /* ===== Filters Mobile ===== */

    .sbx2-coupon-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: var(--radius-lg) !important;
        padding: 8px !important;
    }

    .sbx2-coupon-filters .filter-tab {
        width: 100% !important;
        min-height: 44px !important;
    }

    /* ===== Coupon Card V2 Mobile ===== */

    .sbx2-coupon-card {
        min-height: auto !important;
        flex-direction: column !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-coupon-card::before,
    .sbx2-coupon-card::after {
        display: none !important;
    }

    .sbx2-coupon-label {
        width: 100% !important;
        min-height: 84px !important;
        flex: 0 0 auto !important;
        padding: 22px !important;
        border-right: 0 !important;
        border-bottom: 1px dashed var(--border-light) !important;
    }

    .sbx2-coupon-label::before {
        display: block !important;
        inset: 12px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-coupon-label::after {
        display: none !important;
    }

    .sbx2-coupon-label span {
        font-size: var(--text-lg) !important;
    }

    .sbx2-coupon-content {
        padding: 24px 22px !important;
    }

    .sbx2-coupon-action-row {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .sbx2-coupon-stats {
        width: 100% !important;
    }

    .sbx2-coupon-cta {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
    }

    /* ===== Sidebar Mobile ===== */

    .sbx2-store-sidebar {
        grid-template-columns: 1fr !important;
    }

    .sbx2-store-sidebar .sbx2-side-panel {
        border-radius: var(--radius-lg) !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-single-store-hero {
        padding: 54px 0 90px !important;
    }

    .sbx2-store-hero-card {
        padding: 26px 22px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-store-hero-logo {
        width: 102px !important;
        height: 102px !important;
        padding: 14px !important;
    }

    .sbx2-single-store-title {
        font-size: clamp(1.95rem, 9vw, 2.55rem) !important;
    }

    .sbx2-store-verified-badge {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-store-hero-stats span {
        min-height: 32px !important;
        padding: 8px 11px !important;
    }

    /* ===== Coupon Card V2 Small Mobile ===== */

    .sbx2-coupon-label {
        min-height: 78px !important;
        padding: 20px !important;
    }

    .sbx2-coupon-label::before {
        inset: 11px !important;
    }

    .sbx2-coupon-content {
        padding: 22px 20px !important;
    }

    .sbx2-coupon-title {
        font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
    }

    .sbx2-coupon-stats {
        gap: 8px 12px !important;
    }

    .sbx2-coupon-cta {
        min-height: 45px !important;
    }

    .sbx2-store-sidebar .sbx2-side-panel {
        padding: 20px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-single-store-hero {
        padding: 50px 0 84px !important;
    }

    .sbx2-store-hero-card {
        padding: 24px 20px !important;
        border-radius: 22px !important;
    }

    .sbx2-store-hero-logo {
        width: 96px !important;
        height: 96px !important;
        padding: 14px !important;
    }

    .sbx2-single-store-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-store-kicker {
        min-height: 28px !important;
        padding: 8px 11px 8px 26px !important;
    }

    .sbx2-store-verified-badge {
        font-size: 13px !important;
    }

    .sbx2-store-hero-stats {
        width: 100% !important;
    }

    .sbx2-store-hero-stats span {
        width: 100% !important;
        justify-content: center !important;
    }

    .sbx2-store-coupons-section {
        padding: 52px 0 66px !important;
    }

    .sbx2-coupons-feed {
        margin-top: -36px !important;
    }

    .sbx2-coupon-filters {
        border-radius: 20px !important;
    }

    /* ===== Coupon Card V2 Extra Small ===== */

    .sbx2-coupon-card {
        border-radius: 22px !important;
    }

    .sbx2-coupon-label {
        min-height: 74px !important;
        padding: 18px !important;
    }

    .sbx2-coupon-label::before {
        inset: 10px !important;
        border-radius: 16px !important;
    }

    .sbx2-coupon-label span {
        font-size: var(--text-base) !important;
    }

    .sbx2-coupon-content {
        padding: 22px 18px !important;
    }

    .sbx2-coupon-title {
        font-size: 1.25rem !important;
    }

    .sbx2-coupon-stats {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .sbx2-coupon-cta {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }

    .sbx2-expired-offers-heading {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .sbx2-store-sidebar .sbx2-side-panel {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sbx2-store-sidebar .similar-store-badge {
        min-height: 30px !important;
        padding: 8px 11px !important;
    }
}




/* ============================================================
   REDIRECT PAGE RESPONSIVE - FINAL PREMIUM V2
   Purpose:
   - Redirect page mobile/tablet polish
   ============================================================ */

@media only screen and (max-width: 767.98px) {
    .sbx2-redirect-wrap {
        padding: 20px !important;
    }

    .sbx2-redirect-wrap::before {
        right: -26px !important;
        bottom: 14px !important;
        font-size: clamp(5rem, 24vw, 9rem) !important;
    }

    .sbx2-redirect-card {
        padding: 44px 28px 38px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-redirect-card::before {
        left: 14px !important;
        right: 14px !important;
        top: 14px !important;
        height: 92px !important;
        border-radius: var(--radius-md) !important;
        opacity: 0.62 !important;
    }

    .sbx2-redirect-card::after {
        top: 32px !important;
        bottom: 32px !important;
    }

    .sbx2-redirect-badge {
        min-height: 30px !important;
        margin-bottom: 24px !important;
        padding: 8px 12px !important;
    }

    .sbx2-redirect-spinner {
        width: 66px !important;
        height: 66px !important;
        margin-bottom: 24px !important;
    }

    .sbx2-redirect-spinner::before {
        inset: 7px !important;
    }

    .sbx2-redirect-title {
        font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
        line-height: 1.12 !important;
    }

    .sbx2-redirect-desc {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-normal) !important;
    }

    .sbx2-redirect-cancel {
        width: 100% !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-redirect-wrap {
        padding: 14px !important;
    }

    .sbx2-redirect-card {
        padding: 40px 22px 32px !important;
        border-radius: 22px !important;
    }

    .sbx2-redirect-card::before {
        height: 78px !important;
        border-radius: 18px !important;
        opacity: 0.58 !important;
    }

    .sbx2-redirect-badge {
        min-height: 28px !important;
        font-size: 9px !important;
        padding: 8px 11px !important;
    }

    .sbx2-redirect-spinner {
        width: 58px !important;
        height: 58px !important;
    }

    .sbx2-redirect-spinner::before {
        inset: 6px !important;
    }

    .sbx2-redirect-spinner::after {
        width: 10px !important;
        height: 10px !important;
    }

    .sbx2-redirect-title {
        font-size: clamp(1.65rem, 9vw, 2.05rem) !important;
        letter-spacing: -0.025em !important;
    }

    .sbx2-redirect-desc {
        font-size: 13px !important;
    }

    .sbx2-redirect-hint {
        font-size: 13px !important;
    }

    .sbx2-redirect-progress {
        height: 8px !important;
    }

    .sbx2-redirect-cancel {
        min-height: 48px !important;
    }
}




/* ============================================================
   COUPON MODAL RESPONSIVE - FINAL PREMIUM V2
   Purpose:
   - Coupon modal mobile/tablet redesign
   - Bottom sheet on mobile
   ============================================================ */

@media only screen and (max-width: 767.98px) {
    .coupon-modal-backdrop {
        align-items: flex-end !important;
        padding: 16px !important;
    }

    .coupon-modal-card {
        width: 100% !important;
        max-height: calc(100vh - 32px) !important;
        overflow-y: auto !important;
        border-radius: 28px !important;
    }

    .coupon-modal-card::-webkit-scrollbar {
        width: 0 !important;
    }

    .coupon-modal-card::before {
        left: 14px !important;
        right: 14px !important;
        top: 14px !important;
        height: 104px !important;
        border-radius: var(--radius-md) !important;
        opacity: 0.62 !important;
    }

    .coupon-modal-card::after {
        top: 32px !important;
        bottom: 32px !important;
    }

    .modal-close {
        top: 14px !important;
        right: 14px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .modal-brand-header {
        padding: 40px 26px 28px !important;
    }

    .modal-logo-wrap {
        width: 76px !important;
        height: 76px !important;
        border-radius: 24px !important;
    }

    .modal-brand-header h3 {
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.018em !important;
    }

    .modal-brand-header p {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-normal) !important;
    }

    .modal-copy-zone {
        padding: 26px 26px 32px !important;
    }

    .code-box {
        min-height: 68px !important;
        border-radius: var(--radius-lg) !important;
    }

    .code-text {
        font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
    }

    .btn-copy-code {
        min-width: 112px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .coupon-modal-backdrop {
        padding: 10px !important;
    }

    .coupon-modal-card {
        max-height: calc(100vh - 20px) !important;
        border-radius: 22px !important;
    }

    .coupon-modal-card::before {
        height: 88px !important;
        border-radius: 18px !important;
        opacity: 0.58 !important;
    }

    .modal-close {
        width: 36px !important;
        height: 36px !important;
    }

    .modal-logo-wrap {
        width: 68px !important;
        height: 68px !important;
        border-radius: 20px !important;
        margin-bottom: 16px !important;
    }

    .modal-kicker {
        min-height: 26px !important;
        padding: 8px 11px 8px 26px !important;
        font-size: 9px !important;
    }

    .modal-brand-header {
        padding: 36px 20px 24px !important;
    }

    .modal-brand-header h3 {
        font-size: clamp(1.35rem, 7vw, 1.65rem) !important;
    }

    .modal-brand-header p {
        font-size: 13px !important;
    }

    .modal-copy-zone {
        padding: 24px 20px 28px !important;
    }

    .modal-copy-zone::before {
        font-size: 9px !important;
    }

    .modal-instruction {
        font-size: 13px !important;
    }

    .code-box {
        flex-direction: column !important;
        gap: 8px !important;
        min-height: auto !important;
        padding: 8px !important;
        border-radius: 18px !important;
    }

    .code-box::before {
        inset: 8px 8px auto 8px !important;
        width: auto !important;
        height: 4px !important;
    }

    .code-text {
        min-height: 58px !important;
        width: 100% !important;
        padding: 16px 14px !important;
        font-size: 1.18rem !important;
        letter-spacing: 0.10em !important;
    }

    .btn-copy-code {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 15px !important;
    }

    .modal-visit-btn {
        min-height: 50px !important;
    }
}




/* ============================================================
   CATEGORIES LISTING PAGE RESPONSIVE - FINAL PREMIUM V2
   Purpose:
   - Categories page responsive
   - Flex based cards
   - Premium subcategory rows
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-categories-page-hero {
        padding: 84px 0 132px !important;
    }

    .sbx2-categories-grid {
        gap: 24px !important;
        margin-top: -68px !important;
    }

    .sbx2-category-card {
        flex-basis: calc((100% - 48px) / 3) !important;
        min-height: 306px !important;
        padding: 22px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-category-card::before {
        left: 12px !important;
        right: 12px !important;
        top: 12px !important;
        height: 88px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-category-icon {
        width: 70px !important;
        height: 70px !important;
        flex-basis: 70px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-categories-page-hero {
        padding: 78px 0 126px !important;
    }

    .sbx2-categories-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-categories-subtitle {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-categories-grid {
        gap: 24px !important;
        margin-top: -64px !important;
    }

    .sbx2-category-card {
        flex-basis: calc((100% - 24px) / 2) !important;
        min-height: 300px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-categories-page-hero {
        padding: 66px 0 108px !important;
    }

    .sbx2-categories-page-hero::after {
        right: -24px !important;
        bottom: -12px !important;
        font-size: clamp(5rem, 24vw, 9rem) !important;
    }

    .sbx2-categories-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-categories-subtitle {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-normal) !important;
    }

    .sbx2-categories-badge {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-categories-list-section {
        padding-bottom: 72px !important;
    }

    .sbx2-categories-grid {
        gap: 22px !important;
        margin-top: -54px !important;
    }

    .sbx2-category-card {
        flex-basis: 100% !important;
        min-height: auto !important;
        padding: 22px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-category-card::before {
        height: 84px !important;
    }

    .sbx2-category-card-top {
        gap: 16px !important;
    }

    .sbx2-category-children a {
        min-height: 40px !important;
    }

    .sbx2-no-sub {
        min-height: 76px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-categories-page-hero {
        padding: 60px 0 98px !important;
    }

    .sbx2-category-card {
        padding: 20px !important;
    }

    .sbx2-category-card::before {
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
        height: 78px !important;
    }

    .sbx2-category-icon {
        width: 64px !important;
        height: 64px !important;
        flex-basis: 64px !important;
        border-width: 3px !important;
    }

    .sbx2-category-card-top {
        gap: 14px !important;
    }

    .sbx2-category-title {
        font-size: var(--text-lg) !important;
    }

    .sbx2-category-divider {
        margin: 22px 0 16px !important;
    }

    .sbx2-category-children {
        gap: 8px !important;
    }

    .sbx2-category-children a {
        padding: 10px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-categories-page-hero {
        padding: 58px 0 92px !important;
    }

    .sbx2-categories-badge {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-categories-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-categories-subtitle {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-categories-grid {
        gap: 20px !important;
        margin-top: -48px !important;
    }

    .sbx2-category-card {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sbx2-category-card::before {
        height: 72px !important;
        border-radius: 18px !important;
    }

    .sbx2-category-card::after {
        top: 22px !important;
        bottom: 22px !important;
    }

    .sbx2-category-icon {
        width: 58px !important;
        height: 58px !important;
        flex-basis: 58px !important;
    }

    .sbx2-category-title {
        font-size: var(--text-base) !important;
    }

    .sbx2-category-count {
        min-height: 24px !important;
        padding: 6px 9px !important;
        font-size: 9px !important;
    }

    .sbx2-category-children a {
        min-height: 38px !important;
        padding: 9px 10px !important;
        font-size: 12px !important;
        border-radius: 14px !important;
    }

    .sbx2-child-name {
        gap: 7px !important;
    }

    .sbx2-child-name i {
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        font-size: 11px !important;
    }

    .sbx2-child-count {
        min-width: 24px !important;
        height: 22px !important;
        padding: 0 7px !important;
    }

    .sbx2-no-sub {
        min-height: 68px !important;
        padding: 16px !important;
        border-radius: 18px !important;
        font-size: 12px !important;
    }
}




/* ============================================================
   BLOG LISTING PAGE RESPONSIVE - FINAL PREMIUM V2
   Purpose:
   - Blog listing hero, editorial cards, sidebar, pagination responsive
   - Desktop sticky sidebar
   - Mobile normal stacked sidebar
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-blog-hero-index {
        padding: 82px 0 106px !important;
    }

    .sbx2-blog-hero-inner {
        padding: 32px !important;
    }

    .sbx2-blog-hero-index + .container.section-padding {
        padding-top: 68px !important;
        padding-bottom: 86px !important;
    }

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

    .sbx2-blog-sidebar {
        width: 310px !important;
        flex-basis: 310px !important;
        top: 100px !important;
    }

    .sbx2-blog-sidebar .sbx2-side-panel {
        padding: 22px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-card {
        min-height: 232px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb {
        width: 245px !important;
        min-height: 232px !important;
        flex-basis: 245px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb img {
        min-height: 232px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-body {
        padding: 28px 30px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-title {
        font-size: clamp(1.35rem, 2.2vw, 1.7rem) !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-item {
        min-height: 78px !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-img {
        width: 66px !important;
        height: 60px !important;
        flex-basis: 66px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-blog-hero-index {
        padding: 74px 0 96px !important;
    }

    .sbx2-blog-title-index {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-blog-subtitle-index {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-blog-hero-index + .container.section-padding {
        padding-top: 64px !important;
        padding-bottom: 82px !important;
    }

    .sbx2-blog-view-grid {
        flex-direction: column !important;
        gap: 34px !important;
    }

    .sbx2-blog-main-column {
        width: 100% !important;
    }

    .sbx2-blog-sidebar {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 22px !important;
    }

    .sbx2-blog-sidebar .sbx2-side-panel {
        flex: 1 1 0 !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-card {
        min-height: 230px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb {
        width: 250px !important;
        flex-basis: 250px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-blog-hero-index {
        padding: 62px 0 84px !important;
    }

    .sbx2-blog-hero-index::after {
        right: -24px !important;
        bottom: -12px !important;
        font-size: clamp(5rem, 24vw, 9rem) !important;
    }

    .sbx2-blog-hero-inner {
        padding: 28px 24px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-blog-title-index {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-blog-subtitle-index {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-normal) !important;
    }

    .sbx2-badge-gold {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-blog-hero-index + .container.section-padding {
        padding-top: 56px !important;
        padding-bottom: 72px !important;
    }

    .sbx2-blog-list-row {
        gap: 22px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-card {
        min-height: auto !important;
        flex-direction: column !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-card::before {
        top: 22px !important;
        bottom: auto !important;
        left: 24px !important;
        width: 88px !important;
        height: 4px !important;
        border-radius: 0 0 var(--radius-pill) var(--radius-pill) !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb {
        width: 100% !important;
        min-height: 245px !important;
        flex: 0 0 auto !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb img {
        min-height: 245px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb::after {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-body {
        padding: 24px 22px 26px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-title {
        font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
        line-height: 1.18 !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-excerpt {
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
    }

    .sbx2-blog-view-grid .sbx2-read-more {
        width: 100% !important;
    }

    .sbx2-blog-sidebar {
        flex-direction: column !important;
    }

    .sbx2-blog-sidebar .sbx2-side-panel {
        flex: 0 0 auto !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-pagination-wrap {
        margin-top: 34px !important;
    }

    .sbx2-pagination-wrap ul,
    .sbx2-pagination-wrap .pagination {
        border-radius: var(--radius-lg) !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-blog-hero-index {
        padding: 56px 0 78px !important;
    }

    .sbx2-blog-hero-inner {
        padding: 26px 22px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-blog-title-index {
        font-size: clamp(1.95rem, 9vw, 2.55rem) !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb {
        min-height: 220px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb img {
        min-height: 220px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-body {
        padding: 22px 20px 24px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-meta {
        gap: 8px 12px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-title {
        font-size: clamp(1.35rem, 7vw, 1.75rem) !important;
    }

    .sbx2-blog-sidebar .sbx2-side-panel {
        padding: 20px !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-item {
        padding: 9px !important;
    }

    .sbx2-pagination-wrap a,
    .sbx2-pagination-wrap span,
    .sbx2-pagination-wrap .page-link {
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 12px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-blog-hero-index {
        padding: 52px 0 72px !important;
    }

    .sbx2-blog-hero-inner {
        padding: 24px 20px !important;
        border-radius: 22px !important;
    }

    .sbx2-badge-gold {
        min-height: 28px !important;
        padding: 8px 11px 8px 26px !important;
    }

    .sbx2-blog-title-index {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-blog-subtitle-index {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-blog-hero-index + .container.section-padding {
        padding-top: 50px !important;
        padding-bottom: 64px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-card {
        border-radius: 22px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb {
        min-height: 205px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb img {
        min-height: 205px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb::after {
        left: 14px !important;
        bottom: 14px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-body {
        padding: 22px 18px 24px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-meta {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-title {
        font-size: 1.25rem !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-excerpt {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    .sbx2-blog-sidebar .sbx2-side-panel {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-item {
        min-height: 76px !important;
        border-radius: 18px !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-img {
        width: 64px !important;
        height: 58px !important;
        flex-basis: 64px !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-title {
        font-size: 13px !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-meta {
        font-size: 11px !important;
    }

    .sbx2-blog-sidebar .sbx2-side-category-list a {
        min-height: 42px !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
        border-radius: 14px !important;
    }

    .sbx2-pagination-wrap ul,
    .sbx2-pagination-wrap .pagination {
        gap: 7px !important;
        padding: 7px !important;
        border-radius: 20px !important;
    }

    .sbx2-pagination-wrap a,
    .sbx2-pagination-wrap span,
    .sbx2-pagination-wrap .page-link {
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 11px !important;
    }
}




/* ============================================================
   SINGLE BLOG DETAIL RESPONSIVE - FINAL PREMIUM V2
   Purpose:
   - Single blog hero, article card, sidebar, share box, navigation responsive
   - Desktop sticky sidebar
   - Mobile normal stacked layout
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-single-blog-hero {
        min-height: 500px !important;
        padding: 86px 0 136px !important;
    }

    .sbx2-single-blog-hero-inner {
        max-width: 900px !important;
        padding: 32px !important;
    }

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

    .sbx2-single-blog-sidebar {
        width: 310px !important;
        flex-basis: 310px !important;
        top: 100px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-side-panel {
        padding: 22px !important;
    }

    .sbx2-blog-main-card {
        margin-top: -82px !important;
    }

    .sbx2-single-blog-sidebar {
        margin-top: -82px !important;
    }

    .sbx2-featured-image,
    .sbx2-featured-image-wrap {
        min-height: 400px !important;
        max-height: 470px !important;
    }

    .sbx2-article-content {
        padding: 50px 54px 40px !important;
    }

    .sbx2-blog-footer {
        padding: 24px 54px 42px !important;
    }

    .sbx2-nav-link {
        min-height: 108px !important;
    }

    .sbx2-nav-thumb,
    .sbx2-nav-icon-wrap {
        width: 70px !important;
        height: 70px !important;
        flex-basis: 70px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-item {
        min-height: 78px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-img {
        width: 66px !important;
        height: 60px !important;
        flex-basis: 66px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-single-blog-hero {
        min-height: auto !important;
        padding: 76px 0 118px !important;
    }

    .sbx2-single-blog-hero-inner {
        max-width: 100% !important;
    }

    .sbx2-blog-title-xl {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-blog-meta-row {
        gap: 10px !important;
    }

    .sbx2-single-blog-grid {
        flex-direction: column !important;
        gap: 34px !important;
    }

    .sbx2-single-blog-main {
        width: 100% !important;
    }

    .sbx2-blog-main-card {
        margin-top: -70px !important;
    }

    .sbx2-single-blog-sidebar {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 22px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-side-panel {
        flex: 1 1 0 !important;
    }

    .sbx2-featured-image,
    .sbx2-featured-image-wrap {
        min-height: 360px !important;
        max-height: 430px !important;
    }

    .sbx2-post-nav-wrapper {
        gap: 18px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-single-blog-hero {
        padding: 64px 0 104px !important;
    }

    .sbx2-single-blog-hero::after {
        right: -24px !important;
        bottom: -12px !important;
        font-size: clamp(5rem, 24vw, 9rem) !important;
    }

    .sbx2-single-blog-hero-inner {
        padding: 28px 24px !important;
        border-radius: var(--radius-xl) !important;
        text-align: center !important;
    }

    .sbx2-blog-hero-badge-wrap {
        justify-content: center !important;
    }

    .sbx2-blog-title-xl {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-blog-meta-row {
        justify-content: center !important;
        gap: 10px !important;
    }

    .sbx2-blog-meta-sep {
        display: none !important;
    }

    .sbx2-blog-meta-item {
        width: 100% !important;
        justify-content: center !important;
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-blog-main-card {
        margin-top: -60px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-blog-main-card::before {
        top: 24px !important;
        bottom: auto !important;
        left: 26px !important;
        width: 88px !important;
        height: 4px !important;
        border-radius: 0 0 var(--radius-pill) var(--radius-pill) !important;
    }

    .sbx2-featured-image,
    .sbx2-featured-image-wrap {
        min-height: 285px !important;
        max-height: 340px !important;
    }

    .sbx2-featured-image-wrap::before {
        left: 18px !important;
        bottom: 18px !important;
    }

    .sbx2-article-content {
        padding: 36px 26px 30px !important;
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-loose) !important;
    }

    .sbx2-article-content h2 {
        font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
    }

    .sbx2-article-content h3 {
        font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
    }

    .sbx2-blog-footer {
        padding: 20px 26px 34px !important;
    }

    .sbx2-share-box {
        align-items: flex-start !important;
        flex-direction: column !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-share-icons {
        width: 100% !important;
    }

    .sbx2-p-social-btn {
        flex: 1 1 0 !important;
    }

    .sbx2-post-nav-wrapper {
        flex-direction: column !important;
    }

    .sbx2-nav-link {
        min-height: auto !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-single-blog-sidebar {
        flex-direction: column !important;
    }

    .sbx2-single-blog-sidebar .sbx2-side-panel {
        flex: 0 0 auto !important;
        border-radius: var(--radius-lg) !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-single-blog-hero {
        padding: 58px 0 94px !important;
    }

    .sbx2-single-blog-hero-inner {
        padding: 26px 22px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-blog-title-xl {
        font-size: clamp(1.95rem, 9vw, 2.55rem) !important;
    }

    .sbx2-blog-badge-alt {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-featured-image,
    .sbx2-featured-image-wrap {
        min-height: 245px !important;
        max-height: 310px !important;
    }

    .sbx2-article-content {
        padding: 32px 22px 28px !important;
    }

    .sbx2-article-content p {
        margin-bottom: 18px !important;
    }

    .sbx2-article-content blockquote {
        padding: 24px 22px 24px 26px !important;
        border-radius: var(--radius-md) !important;
        font-size: var(--type-body) !important;
    }

    .sbx2-blog-footer {
        padding: 18px 22px 30px !important;
    }

    .sbx2-nav-link {
        padding: 14px !important;
    }

    .sbx2-nav-thumb,
    .sbx2-nav-icon-wrap {
        width: 64px !important;
        height: 64px !important;
        flex-basis: 64px !important;
        border-radius: 16px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-side-panel {
        padding: 20px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-item {
        padding: 9px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-single-blog-hero {
        padding: 52px 0 84px !important;
    }

    .sbx2-single-blog-hero-inner {
        padding: 24px 20px !important;
        border-radius: 22px !important;
    }

    .sbx2-blog-badge-alt {
        min-height: 28px !important;
        padding: 8px 11px 8px 26px !important;
        font-size: 9px !important;
    }

    .sbx2-blog-title-xl {
        font-size: clamp(1.8rem, 10vw, 2.35rem) !important;
    }

    .sbx2-blog-meta-item {
        min-height: 32px !important;
        padding: 8px 11px !important;
        font-size: 12px !important;
    }

    .sbx2-blog-main-card {
        margin-top: -52px !important;
        border-radius: 22px !important;
    }

    .sbx2-featured-image,
    .sbx2-featured-image-wrap {
        min-height: 215px !important;
        max-height: 280px !important;
    }

    .sbx2-featured-image-wrap::before {
        left: 14px !important;
        bottom: 14px !important;
        min-height: 28px !important;
        padding: 8px 11px !important;
        font-size: 9px !important;
    }

    .sbx2-article-content {
        padding: 30px 18px 26px !important;
        font-size: 14px !important;
    }

    .sbx2-article-content h2 {
        font-size: 1.55rem !important;
    }

    .sbx2-article-content h3 {
        font-size: 1.3rem !important;
    }

    .sbx2-article-content img {
        border-radius: 18px !important;
    }

    .sbx2-blog-footer {
        padding: 18px 18px 28px !important;
    }

    .sbx2-share-box {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .sbx2-share-label {
        font-size: 11px !important;
    }

    .sbx2-p-social-btn {
        height: 40px !important;
    }

    .sbx2-nav-link {
        align-items: flex-start !important;
        border-radius: 18px !important;
    }

    .sbx2-nav-link.next {
        align-items: flex-start !important;
    }

    .sbx2-nav-thumb,
    .sbx2-nav-icon-wrap {
        width: 60px !important;
        height: 60px !important;
        flex-basis: 60px !important;
        border-radius: 15px !important;
    }

    .sbx2-nav-name {
        font-size: 13px !important;
    }

    .sbx2-nav-dir {
        font-size: 9px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-side-panel {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-item {
        min-height: 76px !important;
        border-radius: 18px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-img {
        width: 64px !important;
        height: 58px !important;
        flex-basis: 64px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-title {
        font-size: 13px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-meta {
        font-size: 11px !important;
    }
}




/* ============================================================
   ABOUT PAGE RESPONSIVE - FINAL PREMIUM V3
   Purpose:
   - About page hero, story, values, promise CTA responsive
   - Title spacing fixed
   - Story card spacing improved
   - Right cards balanced
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-about-hero {
        padding: 82px 0 132px !important;
    }

    .sbx2-about-hero-inner {
        padding: 32px !important;
    }

    .sbx2-about-intro-card {
        gap: 24px !important;
        padding: 16px !important;
    }

    .sbx2-about-intro-left {
        padding: 32px 34px 34px 30px !important;
    }

    .sbx2-about-title {
        max-width: 720px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.018em !important;
        word-spacing: 0.08em !important;
    }

    .sbx2-about-content {
        max-width: 720px !important;
    }

    .sbx2-about-intro-right {
        width: 310px !important;
        flex-basis: 310px !important;
        gap: 18px !important;
    }

    .sbx2-about-stat-card {
        min-height: 174px !important;
        padding: 24px !important;
    }

    .sbx2-about-values {
        gap: 22px !important;
    }

    .sbx2-about-value-card {
        flex-basis: calc((100% - 44px) / 3) !important;
        padding: 26px !important;
    }

    .sbx2-about-promise-card {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 26px !important;
        padding: 38px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-about-hero {
        padding: 74px 0 124px !important;
    }

    .sbx2-about-hero-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-about-hero-subtitle {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-about-intro-card {
        flex-direction: column !important;
        margin-top: -64px !important;
        gap: 18px !important;
    }

    .sbx2-about-intro-left {
        padding: 30px 28px 32px !important;
    }

    .sbx2-about-title {
        max-width: 100% !important;
        line-height: 1.13 !important;
        letter-spacing: -0.016em !important;
        word-spacing: 0.07em !important;
    }

    .sbx2-about-content {
        max-width: 100% !important;
    }

    .sbx2-about-intro-right {
        width: 100% !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        gap: 18px !important;
    }

    .sbx2-about-stat-card {
        flex: 1 1 0 !important;
        min-height: 174px !important;
    }

    .sbx2-about-values {
        gap: 22px !important;
    }

    .sbx2-about-value-card {
        flex-basis: 100% !important;
        min-height: auto !important;
    }

    .sbx2-about-promise-actions {
        width: 100% !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-about-hero {
        padding: 62px 0 108px !important;
    }

    .sbx2-about-hero::after {
        right: -24px !important;
        bottom: -12px !important;
        font-size: clamp(5rem, 24vw, 9rem) !important;
    }

    .sbx2-about-hero-inner {
        padding: 28px 24px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-about-hero-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    .sbx2-about-hero-subtitle {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-normal) !important;
    }

    .sbx2-about-badge {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-about-section {
        padding-bottom: 72px !important;
    }

    .sbx2-about-intro-card {
        margin-top: -54px !important;
        padding: 14px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-about-intro-left {
        padding: 28px 24px 30px !important;
    }

    .sbx2-about-intro-left::before {
        top: 32px !important;
        bottom: 32px !important;
    }

    .sbx2-about-title {
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.012em !important;
        word-spacing: 0.06em !important;
    }

    .sbx2-about-content {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-loose) !important;
    }

    .sbx2-about-intro-right {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .sbx2-about-stat-card {
        min-height: auto !important;
        padding: 24px !important;
    }

    .sbx2-about-values {
        margin-top: 28px !important;
        gap: 20px !important;
    }

    .sbx2-about-value-card {
        padding: 24px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-about-value-card::before {
        height: 76px !important;
    }

    .sbx2-about-value-icon {
        margin-bottom: 36px !important;
    }

    .sbx2-about-promise-card {
        margin-top: 28px !important;
        padding: 30px 28px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-about-promise-content h2 {
        font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.018em !important;
    }

    .sbx2-about-primary-btn,
    .sbx2-about-secondary-btn {
        width: 100% !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-about-hero {
        padding: 56px 0 98px !important;
    }

    .sbx2-about-hero-inner {
        padding: 26px 22px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-about-hero-title {
        font-size: clamp(1.95rem, 9vw, 2.55rem) !important;
    }

    .sbx2-about-intro-card {
        padding: 12px !important;
    }

    .sbx2-about-intro-left {
        padding: 26px 22px 28px !important;
    }

    .sbx2-about-intro-left::before {
        top: 30px !important;
        bottom: 30px !important;
    }

    .sbx2-about-title {
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
        word-spacing: 0.05em !important;
    }

    .sbx2-about-stat-card {
        padding: 22px !important;
    }

    .sbx2-about-value-card {
        padding: 22px !important;
    }

    .sbx2-about-value-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 34px !important;
    }

    .sbx2-about-promise-card {
        padding: 28px 24px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-about-hero {
        padding: 52px 0 90px !important;
    }

    .sbx2-about-hero-inner {
        padding: 24px 20px !important;
        border-radius: 22px !important;
    }

    .sbx2-about-badge {
        min-height: 28px !important;
        padding: 8px 11px 8px 26px !important;
        font-size: 9px !important;
    }

    .sbx2-about-hero-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
        letter-spacing: -0.035em !important;
    }

    .sbx2-about-hero-subtitle {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-about-intro-card {
        margin-top: -46px !important;
        border-radius: 22px !important;
    }

    .sbx2-about-intro-left {
        padding: 24px 20px 26px !important;
    }

    .sbx2-about-intro-left .sbx2-eyebrow,
    .sbx2-about-promise-content .sbx2-eyebrow {
        min-height: 28px !important;
        padding: 8px 11px 8px 26px !important;
        font-size: 9px !important;
    }

    .sbx2-about-title {
        font-size: clamp(1.55rem, 8vw, 2.05rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.006em !important;
        word-spacing: 0.04em !important;
    }

    .sbx2-about-content {
        font-size: 13px !important;
    }

    .sbx2-about-stat-card,
    .sbx2-about-value-card,
    .sbx2-about-promise-card {
        border-radius: 22px !important;
    }

    .sbx2-about-stat-icon,
    .sbx2-about-value-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .sbx2-about-stat-card strong,
    .sbx2-about-value-card h3 {
        font-size: var(--text-lg) !important;
        letter-spacing: -0.01em !important;
    }

    .sbx2-about-value-card::before {
        height: 70px !important;
        border-radius: 16px !important;
    }

    .sbx2-about-value-card p,
    .sbx2-about-stat-card small {
        font-size: 13px !important;
    }

    .sbx2-about-promise-card {
        padding: 26px 20px !important;
    }

    .sbx2-about-promise-content h2 {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.012em !important;
    }

    .sbx2-about-promise-content p {
        font-size: 13px !important;
    }

    .sbx2-about-primary-btn,
    .sbx2-about-secondary-btn {
        min-height: 46px !important;
    }
}




/* ============================================================
   CONTACT PAGE RESPONSIVE - FINAL PREMIUM V2
   Purpose:
   - Contact hero, info card, details, form card responsive
   - Full redesigned layout responsive
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-contact-hero {
        padding: 82px 0 132px !important;
    }

    .sbx2-contact-hero-inner {
        padding: 32px !important;
    }

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

    .sbx2-contact-info {
        padding: 36px !important;
    }

    .sbx2-contact-form-card {
        width: 430px !important;
        flex-basis: 430px !important;
        padding: 32px !important;
    }

    .sbx2-contact-title {
        max-width: 680px !important;
    }

    .sbx2-contact-item {
        flex-basis: 100% !important;
        min-height: auto !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-contact-hero {
        padding: 74px 0 124px !important;
    }

    .sbx2-contact-hero-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-contact-hero-subtitle {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-contact-grid {
        flex-direction: column !important;
        gap: 26px !important;
        margin-top: -64px !important;
    }

    .sbx2-contact-info,
    .sbx2-contact-form-card {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .sbx2-contact-info {
        padding: 34px !important;
    }

    .sbx2-contact-form-card {
        padding: 34px !important;
    }

    .sbx2-contact-details {
        gap: 16px !important;
    }

    .sbx2-contact-item,
    .sbx2-contact-details .sbx2-contact-item:nth-child(3) {
        flex-basis: calc((100% - 16px) / 2) !important;
    }

    .sbx2-contact-details .sbx2-contact-item:last-child:nth-child(odd) {
        flex-basis: 100% !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-contact-hero {
        padding: 62px 0 108px !important;
    }

    .sbx2-contact-hero::after {
        right: -24px !important;
        bottom: -12px !important;
        font-size: clamp(5rem, 24vw, 9rem) !important;
    }

    .sbx2-contact-hero-inner {
        padding: 28px 24px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-contact-hero-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    .sbx2-contact-hero-subtitle {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-normal) !important;
    }

    .sbx2-contact-badge {
        min-height: 30px !important;
        padding: 8px 12px 8px 27px !important;
    }

    .sbx2-contact-section {
        padding-bottom: 72px !important;
    }

    .sbx2-contact-grid {
        margin-top: -54px !important;
        gap: 22px !important;
    }

    .sbx2-contact-info,
    .sbx2-contact-form-card {
        padding: 28px !important;
        border-radius: var(--radius-xl) !important;
    }

    .sbx2-contact-info::after,
    .sbx2-contact-form-card::after {
        top: 32px !important;
        bottom: 32px !important;
    }

    .sbx2-contact-title {
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.012em !important;
        word-spacing: 0.05em !important;
    }

    .sbx2-contact-desc {
        font-size: var(--type-body-sm) !important;
        line-height: var(--leading-loose) !important;
    }

    .sbx2-contact-item,
    .sbx2-contact-details .sbx2-contact-item:nth-child(3),
    .sbx2-contact-details .sbx2-contact-item:last-child:nth-child(odd) {
        flex-basis: 100% !important;
        padding: 17px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-contact-icon {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
    }

    .sbx2-contact-form-header h3 {
        font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
    }

    .sbx2-contact-social {
        margin-top: 28px !important;
        padding-top: 24px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-contact-hero {
        padding: 56px 0 98px !important;
    }

    .sbx2-contact-hero-inner {
        padding: 26px 22px !important;
        border-radius: var(--radius-lg) !important;
    }

    .sbx2-contact-hero-title {
        font-size: clamp(1.95rem, 9vw, 2.55rem) !important;
    }

    .sbx2-contact-info,
    .sbx2-contact-form-card {
        padding: 24px !important;
    }

    .sbx2-contact-item {
        gap: 13px !important;
    }

    .sbx2-contact-text strong {
        font-size: var(--text-lg) !important;
    }

    .sbx2-contact-text small {
        font-size: 13px !important;
    }

    .sbx2-contact-form {
        gap: 14px !important;
    }

    .sbx2-form-group :is(input, textarea) {
        min-height: 50px !important;
        border-radius: 16px !important;
    }

    .sbx2-form-group textarea {
        min-height: 130px !important;
        border-radius: 18px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-contact-hero {
        padding: 52px 0 90px !important;
    }

    .sbx2-contact-hero-inner {
        padding: 24px 20px !important;
        border-radius: 22px !important;
    }

    .sbx2-contact-badge {
        min-height: 28px !important;
        padding: 8px 11px 8px 26px !important;
        font-size: 9px !important;
    }

    .sbx2-contact-hero-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
        letter-spacing: -0.035em !important;
    }

    .sbx2-contact-hero-subtitle {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-contact-grid {
        margin-top: -46px !important;
        gap: 18px !important;
    }

    .sbx2-contact-info,
    .sbx2-contact-form-card {
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .sbx2-contact-info .sbx2-eyebrow,
    .sbx2-contact-form-header .sbx2-eyebrow {
        min-height: 28px !important;
        padding: 8px 11px 8px 26px !important;
        font-size: 9px !important;
    }

    .sbx2-contact-title {
        font-size: clamp(1.55rem, 8vw, 2.05rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.006em !important;
        word-spacing: 0.04em !important;
    }

    .sbx2-contact-desc {
        font-size: 13px !important;
    }

    .sbx2-contact-item {
        flex-direction: column !important;
        gap: 14px !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sbx2-contact-icon {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .sbx2-contact-text strong {
        font-size: var(--text-lg) !important;
    }

    .sbx2-contact-text small {
        font-size: 13px !important;
    }

    .sbx2-contact-social h4 {
        font-size: var(--text-lg) !important;
    }

    .sbx2-contact-social-icons a {
        width: 42px !important;
        height: 42px !important;
    }

    .sbx2-contact-form-header h3 {
        font-size: clamp(1.35rem, 7vw, 1.75rem) !important;
    }

    .sbx2-contact-form-header p {
        font-size: 13px !important;
    }

    .sbx2-form-group label {
        font-size: 11px !important;
    }

    .sbx2-contact-submit {
        min-height: 50px !important;
    }

    .sbx2-alert-success,
    .sbx2-alert-error {
        border-radius: 18px !important;
        font-size: 13px !important;
    }
}




/* ============================================================
   MAIN FOOTER RESPONSIVE - NEW FULL WIDTH EDITORIAL FOOTER
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-footer {
        padding: 68px 0 28px !important;
    }

    .sbx2-footer-newsletter-strip {
        gap: 24px !important;
        margin-bottom: 46px !important;
        padding-bottom: 30px !important;
    }

    .sbx2-footer-main {
        gap: 44px !important;
    }

    .sbx2-footer-brand {
        max-width: 330px !important;
        flex-basis: 330px !important;
    }

    .sbx2-footer-menus {
        gap: 34px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-footer {
        padding: 62px 0 26px !important;
    }

    .sbx2-footer-newsletter-strip {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 22px !important;
        margin-bottom: 42px !important;
    }

    .sbx2-newsletter-form {
        max-width: 520px !important;
    }

    .sbx2-footer-main {
        flex-direction: column !important;
        gap: 38px !important;
        padding-bottom: 38px !important;
    }

    .sbx2-footer-brand {
        max-width: 560px !important;
        flex: 0 1 auto !important;
    }

    .sbx2-footer-desc {
        max-width: 520px !important;
    }

    .sbx2-footer-menus {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 34px !important;
    }

    .sbx2-footer-col {
        flex: 1 1 190px !important;
        min-width: 190px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-footer {
        padding: 56px 0 24px !important;
    }

    .sbx2-footer-newsletter-strip {
        margin-bottom: 36px !important;
        padding: 0 0 28px !important;
    }

    .sbx2-footer-newsletter-copy h3 {
        font-size: clamp(1.55rem, 6vw, 2.15rem) !important;
    }

    .sbx2-footer-logo img {
        height: 44px !important;
    }

    .sbx2-footer-menus {
        flex-direction: column !important;
        gap: 28px !important;
    }

    .sbx2-footer-col {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }

    .sbx2-footer-bottom {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-footer {
        padding: 50px 0 22px !important;
    }

    .sbx2-footer-logo img {
        height: 40px !important;
        max-width: 190px !important;
    }

    .sbx2-footer-social a {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    .sbx2-newsletter-input-group {
        flex-direction: column !important;
        border-radius: 24px !important;
    }

    .sbx2-newsletter-input-group input {
        width: 100% !important;
        height: 50px !important;
    }

    .sbx2-newsletter-input-group button {
        width: 100% !important;
        height: 48px !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-footer {
        padding: 46px 0 22px !important;
    }

    .sbx2-footer-newsletter-strip {
        gap: 20px !important;
        margin-bottom: 32px !important;
    }

    .sbx2-footer-desc,
    .sbx2-footer-newsletter-copy p {
        font-size: var(--type-body-sm) !important;
    }

    .sbx2-footer-title {
        margin-bottom: 16px !important;
    }

    .sbx2-footer-links {
        gap: 10px !important;
    }

    .sbx2-footer-social a {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }
}




/* ============================================================
   BACK TO TOP RESPONSIVE - NEW VERTICAL TOP TAB
   ============================================================ */

@media only screen and (max-width: 767.98px) {
    .sbx-frap {
        right: 18px !important;
        bottom: 18px !important;
        width: 44px !important;
        height: 68px !important;
        flex-basis: 44px !important;
        padding-top: 9px !important;
    }

    .sbx-frap::before {
        font-size: 0.54rem !important;
    }

    .sbx-frap::after {
        width: 26px !important;
        height: 26px !important;
    }

    .sbx-frap i {
        bottom: 12px !important;
        font-size: 15px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx-frap {
        right: 14px !important;
        bottom: 14px !important;
        width: 42px !important;
        height: 64px !important;
        flex-basis: 42px !important;
    }

    .sbx-frap::after {
        width: 24px !important;
        height: 24px !important;
        bottom: 7px !important;
    }

    .sbx-frap i {
        bottom: 11px !important;
        font-size: 14px !important;
    }
}