@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
:root {
    /* Typeface */
    --font-heading: 'Public Sans', sans-serif;
    --font-body: 'Public Sans', sans-serif;
    --color-heading: var(--mystic-text-dark);
    /* ===========================
     Headings
     =========================== */
    --h1-size: 56px;
    --h1-line-height: 105%;
    --h1-weight: 500;
    --h1-letter-spacing: -0.03em;
    --h2-size: 48px;
    --h2-line-height: 105%;
    --h2-weight: 500;
    --h2-letter-spacing: -0.03em;
    --h3-size: 40px;
    --h3-line-height: 125%;
    --h3-weight: 500;
    --h3-letter-spacing: -0.03em;
    --h4-size: 32px;
    --h4-line-height: 120%;
    --h4-weight: 600;
    --h4-letter-spacing: -0.02em;
    --h5-size: 24px;
    --h5-line-height: 130%;
    --h5-weight: 500;
    --h5-letter-spacing: 0em;
    --h6-size: 20px;
    --h6-line-height: 130%;
    --h6-weight: 500;
    --h6-letter-spacing: 0em;
    /* ===========================
     Title
     =========================== */
    --t1-size: 20px;
    --t1-line-height: 130%;
    --t1-weight: 600;
    --t1-letter-spacing: 0em;
    --t2-size: 18px;
    --t2-line-height: 130%;
    --t2-weight: 600;
    --t2-letter-spacing: 0em;
    /* ===========================
     Headline
     =========================== */
    --headline-medium-size: 20px;
    --headline-medium-line-height: 130%;
    --headline-medium-weight: 500;
    --headline-medium-letter-spacing: 0em;
    --headline-large-size: 20px;
    --headline-large-line-height: 130%;
    --headline-large-weight: 500;
    --headline-large-letter-spacing: 0em;
    /* ===========================
     Paragraphs
     =========================== */
    --p1-regular-size: 16px;
    --p1-regular-line-height: 160%;
    --p1-regular-weight: 400;
    --p1-regular-letter-spacing: 0.01em;
    --p1-medium-size: 16px;
    --p1-medium-line-height: 150%;
    --p1-medium-weight: 500;
    --p1-medium-letter-spacing: 0em;
    --p1-semibold-size: 16px;
    --p1-semibold-line-height: 150%;
    --p1-semibold-weight: 600;
    --p1-semibold-letter-spacing: 0em;
    --p2-regular-size: 14px;
    --p2-regular-line-height: 150%;
    --p2-regular-weight: 400;
    --p2-regular-letter-spacing: 0em;
    --p2-medium-size: 14px;
    --p2-medium-line-height: 150%;
    --p2-medium-weight: 500;
    --p2-medium-letter-spacing: 0em;
    --p2-semibold-size: 14px;
    --p2-semibold-line-height: 150%;
    --p2-semibold-weight: 600;
    --p2-semibold-letter-spacing: 0em;
    /* ===========================
     Caption
     =========================== */
    --caption-size: 12px;
    --caption-line-height: 120%;
    --caption-weight: 600;
    --caption-letter-spacing: 0.02em;
    --caption-transform: uppercase;
    /* ===========================
     Button
     =========================== */
    --button-size: 16px;
    --button-line-height: 150%;
    --button-weight: 600;
    --button-letter-spacing: 0em;
    --button-transform: none;
    /* ===========================
     color
     =========================== */
}
/* ===========================
   Styles
   =========================== */
/* Headline */
.headline-medium {
    --headline-medium-size: 28px;
    --headline-medium-line-height: 125%;
    --headline-medium-weight: 500;
    --headline-medium-letter-spacing: 0em;
}
.headline-large {
    --headline-large-size: 32px;
    --headline-large-line-height: 125%;
    --headline-large-weight: 500;
    --headline-large-letter-spacing: 0em;
}
/* Title */
.t1 {
    font-family: var(--font-heading);
    font-size: var(--t1-size);
    line-height: var(--t1-line-height);
    font-weight: var(--t1-weight);
    letter-spacing: var(--t1-letter-spacing);
    color: var(--color-heading);
}
.t2 {
    font-family: var(--font-heading);
    font-size: var(--t2-size);
    line-height: var(--t2-line-height);
    font-weight: var(--t2-weight);
    letter-spacing: var(--t2X-letter-spacing);
    color: var(--color-heading);
}

    
/* Paragraphs */
.p1-regular {
    font-family: var(--font-body);
    font-size: var(--p1-regular-size);
    line-height: var(--p1-regular-line-height);
    font-weight: var(--p1-regular-weight);
    letter-spacing: var(--p1-regular-letter-spacing);
}
.p1-medium {
    font-family: var(--font-body);
    font-size: var(--p1-medium-size);
    line-height: var(--p1-medium-line-height);
    font-weight: var(--p1-medium-weight);
    letter-spacing: var(--p1-medium-letter-spacing);
}
.p1-semibold {
    font-family: var(--font-body);
    font-size: var(--p1-semibold-size);
    line-height: var(--p1-semibold-line-height);
    font-weight: var(--p1-semibold-weight);
    letter-spacing: var(--p1-semibold-letter-spacing);
}
.p2-regular {
    font-family: var(--font-body);
    font-size: var(--p2-regular-size);
    line-height: var(--p2-regular-line-height);
    font-weight: var(--p2-regular-weight);
    letter-spacing: var(--p2-regular-letter-spacing);
}
.p2-medium {
    font-family: var(--font-body);
    font-size: var(--p2-medium-size);
    line-height: var(--p2-medium-line-height);
    font-weight: var(--p2-medium-weight);
    letter-spacing: var(--p2-medium-letter-spacing);
}
.p2-semibold {
    font-family: var(--font-body);
    font-size: var(--p2-semibold-size);
    line-height: var(--p2-semibold-line-height);
    font-weight: var(--p2-semibold-weight);
    letter-spacing: var(--p2-semibold-letter-spacing);
}
h6 {
    font-family: var(--font-heading);
    font-size: var(--t1-size);
    line-height: var(--t1-line-height);
    font-weight: var(--t1-weight);
    letter-spacing: var(--t1-letter-spacing);
}

.mystic-faq-section-item-answer ul {
	padding-left: 0;
}

.mystic-faq-section-item-answer ul li:first-child {
    padding-top: 0;
}

.mystic-faq-section-item-answer ul li {
    padding: 6px 0 6px 32px;
    list-style: none;
    position: relative;
}
.mystic-faq-section-item-answer ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    display: block;
    width: 16px;
    background-image: url(../images/checklist-green.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 12px;
}

/* FAQ answer list style: dots (same file as check marks; !important for staging/cache/load order) */
.mystic-faq-section--list-dots .mystic-faq-section-item-answer ul,
.mystic-faq-section[data-answer-list-style="dots"] .mystic-faq-section-item-answer ul {
    padding-left: 0 !important;
}
.mystic-faq-section--list-dots .mystic-faq-section-item-answer ul li,
.mystic-faq-section[data-answer-list-style="dots"] .mystic-faq-section-item-answer ul li {
    list-style: none !important;
    padding-left: 0 !important;
}
.mystic-faq-section--list-dots .mystic-faq-section-item-answer ul li::before,
.mystic-faq-section[data-answer-list-style="dots"] .mystic-faq-section-item-answer ul li::before {
    display: none !important;
    background-image: none !important;
    content: none !important;
}

.mystic-disclaimer-component--default a {
    color: var(--ios-blue-01);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 170%;
    letter-spacing: 0.16px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    transition: var(--transition-fast);
}
.xclean-accordion-component.layout_dots .num_key {
    display: none;
}
.xclean-accordion-component.layout_number {
    max-width: 100%;
}
.layout_number .advanced-accordion-header {
    justify-content: space-between;
}

.layout_number .mystic-accordion-header {
    background-color: var(--mystic-bg-white);
    border-bottom-color: var(--mystic-border-light);
    display: flex;
    width: 100%;
    height: 64px;
    padding: 8px 24px;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.2s 
ease;
}
.layout_number .mystic-accordion-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.layout_number .mystic-accordion-header[aria-expanded=true] {
    border-radius: 16px 16px 0 0;
}
.layout_number .mystic-accordion-content.expanded {
    padding: 24px 16px;
    background-color: var(--mystic-bg-white);
    border-top: 1px solid var(--mystic-border-light);
    transition: all 0.3s 
ease;
    border-radius: 0 0 16px 16px;
    margin-bottom: 16px;
}
.layout_number .mystic-accordion-item {
    border-radius: 16px;
    background: var(--mystic-bg-white);
    border: none;
    margin-bottom: 16px;
}
.layout_number span.mystic-accordion-title {
    font-weight: 700;
    position: relative;
    padding-left: 12px !important;
}
.layout_number span.mystic-accordion-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: var(--mystic-border-light);
}
.hero01__header a {
    color: #0f557d;
    text-decoration: underline;
}
.ss-steps-layout .step-icon i, .ss-steps-layout .step-icon svg {
    width: 28px;
    height: 28px;
    color: var(--blue-600);
    fill: #0F7EBA;
}
.step-icon {
    display: flex;
    padding: 14px;
    justify-content: center;
    align-items: center;
    border-radius: 84px;
    border: 1px solid var(--mystic-border-light);
    background-color: transparent;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.ss-steps-layout .step-label {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
}
.elementor-widget-mystic_news_section .news-section {
    padding: 64px 24px;
}

/* Member Mail PDF cards – file icon, download icon, professional layout */

/* Preview image on member mail cards */
.news-card-new-image--mm,
.news-card-image-container--mm {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    aspect-ratio: 314 / 264;
    background: #f0f3f6;
    width: 100%;
    max-width: 100%;
}
.news-card-new-image--mm img,
.news-card-image-container--mm img,
.news-card-new--member-mail .news-card-new-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}
/* Default/fallback image – slightly desaturated to distinguish */
.news-card-new-img--default {
    filter: saturate(0.85);
}

.news-card-new--member-mail .news-card-new-content,
.news-card--member-mail .news-card-content,
.news-card--member-mail .news-card-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.news-card-new-member-mail-icon-wrap,
.news-card-member-mail-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: var(--color-heading, #141414);
}
.xclean-member-mail-icon {
    width: 4.25rem;
    height: 4.25rem;
    flex-shrink: 0;
}
.xclean-member-mail-icon--file {
    opacity: 0.85;
}
.news-card-new--member-mail .news-card-new-date--small,
.news-card--member-mail .news-card-date--small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mystic-gray-500);
    margin-bottom: 0.25rem;
}
.news-card-new-download-pdf,
.news-card-download-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.01rem;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0b71a8;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease, gap 0.2s ease;
}
/* Keep icon on the LEFT (override any global link/icon rules) */
.news-card-new--member-mail .news-card-new-download-pdf,
.news-card--member-mail .news-card-download-pdf {
    flex-direction: row-reverse !important;
}
.news-card-new--member-mail .news-card-new-download-pdf .xclean-member-mail-icon--download,
.news-card--member-mail .news-card-download-pdf .xclean-member-mail-icon--download {
    order: 0 !important;
    margin-right: 0.5rem;
    margin-left: 0;
}
.news-card-new--member-mail .news-card-new-download-pdf span,
.news-card--member-mail .news-card-download-pdf span {
    order: 1 !important;
}
.news-card-new-download-pdf:hover,
.news-card-download-pdf:hover {
    color: var(--blue-600);
    text-decoration: underline;
}
.news-card-new-download-pdf .xclean-member-mail-icon--download,
.news-card-download-pdf .xclean-member-mail-icon--download {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: currentColor;
}
/* Fallback purple dot for Member Mail cards when no term dot is available */
.news-mm-dot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: #c53adf;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}
@media (max-width: 767px) {
    .news-card-new-member-mail-icon-wrap .xclean-member-mail-icon,
    .news-card-member-mail-icon-wrap .xclean-member-mail-icon {
        width: 2rem;
        height: 2rem;
    }
}

.elementor-widget-xclean-accordion-component {
    width: 100%
}
.check__list__point ul[style="list-style-type: disc;"] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}
.check__list__point ul[style="list-style-type: disc;"] li {
    list-style: disc;
    padding-left: 0;
    padding: 5px 0;
}
.check__list__point ul[style="list-style-type: disc;"] li::before {
    display: none;
}
.mystic-heading-bullet-list li a {
    color: #0f557d;
    text-decoration: underline;
}
.elementor .elementor-widget-mystic-icon-text .mystic-icon-text-text a {
    color: #0b71a8 !important;
}
table.mystic-data-table__table .header-empty .mystic-table-main-content {
    display: none;
}
@media all and (max-width: 999px) {
    .ss-tab-images.desktop {
        display: none;
    }
    /* .grid-column-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    } */
    .grid-column-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grid-column-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mystic-faq-section-item-header {
        padding: 10px 0px;
    }
    .mystic-no-bg-card {
        width: auto;
    }
  
}
@media all and (max-width: 767px) {
    .xclean-card-partner .dgrid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .mystic-faq-section-item-header {
        padding: 10px 0px;
    }
    .xclean-card-text-icon .dgrid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .ss-steps-layout .steps-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 20px 16px;
    }
}

/* xclean Our News – search */
.xclean-news-section-wrapper .xclean-news-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}
.xclean-news-section-wrapper.xclean-news-has-external-search .xclean-news-section-header {
    display: none !important;
}

/* External shell – sits above the tabs wrapper */
.xclean-news-external-shell {
    position: relative;
    margin-bottom: 1rem;
}
/* Standalone (no tabs): full width and aligned with section content */
.xclean-news-external-shell--standalone {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.xclean-news-external-shell--standalone .xclean-news-external-top-row {
    align-items: center;
    width: 100%;
}
.xclean-news-external-shell--standalone + .xclean-news-external-filters {
    width: 100%;
    box-sizing: border-box;
}
/* Step-2: hide tabs row */
.xclean-news-tabs-hidden {
    display: none !important;
}

.xclean-news-external-top-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    min-height: 44px;
}
.xclean-news-external-input-row{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

/* Back arrow – Figma: outlined rounded square */
.xclean-news-external-back {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-height: 44px;
    order: 1;
    align-self: center;
    border: 1.5px solid #b5cfe0;
    border-radius: 8px;
    background: #fff;
    color: #1b4f75;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}
.xclean-news-external-back:hover {
    background: #f0f7ff;
}

/* Mobile: keep back button in row and vertically aligned (prevent it “going up”) */
@media (max-width: 767px) {
    .xclean-news-external-top-row {
        flex-wrap: nowrap;
        align-items: center;
    }
    .xclean-news-external-back {
        align-self: center;
        flex-shrink: 0;
    }
}

/* Search input wrapper – stretches to fill row */
.xclean-news-external-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
}
.xclean-news-external-search-btn {
    order: 3;
    flex-shrink: 0;
}

/* Input – Figma: light border, search icon (14×14, stroke #141414), ×/clear right */
.xclean-news-external-input {
    width: 100%;
    height: 44px;
    padding: 0 2.2rem 0 2.125rem;
    border: 1.5px solid #ced5dd;
    border-radius: 8px;
    font-size: 0.9375rem;
    line-height: 1;
    color: #1d2733;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M6.15474 11.6122C9.1672 11.6122 11.6093 9.17013 11.6093 6.15767C11.6093 3.14521 9.1672 0.703125 6.15474 0.703125C3.14228 0.703125 0.700195 3.14521 0.700195 6.15767C0.700195 9.17013 3.14228 11.6122 6.15474 11.6122Z' stroke='%23141414' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.7003 12.7003L11.6094 11.6094' stroke='%23141414' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0.6rem center;
    background-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.xclean-news-external-input:focus {
    border-color: #7ab0cc;
}
.xclean-news-external-input::placeholder {
    color: #9aaab8;
}
/* Hide native browser search-cancel button (type="search" fallback) */
.xclean-news-external-input::-webkit-search-cancel-button,
.xclean-news-external-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Clear × button inside input */
.xclean-news-external-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    font-size: 1.0625rem;
    line-height: 1;
    color: #8a9baa;
    cursor: pointer;
    padding: 0;
}
.xclean-news-external-clear:hover {
    color: #1d2733;
}

/* Search button – Figma: #f4c534 yellow, arrow → */
.xclean-news-external-search-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 100px;
    height: 44px;
    padding: 0 1.125rem;
    border: none;
    border-radius: 8px;
    background: #F7CD46;
    color: #431B05;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s;
}
.xclean-news-external-search-btn:hover {
    filter: brightness(0.96);
}

/* Suggestions dropdown – OVERLAYS content (position absolute) */
.xclean-news-external-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    border: none;
    border-radius: 8px;
    background: #fff;
    max-height: 260px;
    overflow-y: auto;
    padding: 12px;
    /* box-shadow: 0 4px 16px rgba(15, 30, 50, 0.1); */
    box-shadow: 0px -1px 15.2px 0px #0000000D;
}
.xclean-news-external-suggestion-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    border: none;
    border-bottom: none;
    background: transparent;
    text-align: left;
    height: 48px;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    /* color: #431B05; */
    color: #141414B2;
    font-size: 0.9375rem;
    line-height: 1;
}
/* .xclean-news-external-suggestion-item:last-child {
    border-bottom: none;
}
.xclean-news-external-suggestion-item:first-child {
    border-radius: 8px 8px 0 0;
} */
.xclean-news-external-suggestion-item:hover,
.xclean-news-external-suggestion-item:focus {
    background: #FEFBEC;
    outline: none;
    color: #431B05;
}
.xclean-news-external-suggestion-item span:first-child {
    color: #9aaab8;
    font-size: 0.875rem;
}

/* Filters row (step 2) – chips + vendor */
.xclean-news-external-filters {
    margin-top: 0.875rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 10px;
}
.xclean-news-external-date-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 4px;
    background-color: #F7F7F8;
    border-radius: 12px;
}

/* Chip buttons – Figma: pill-ish rounded corners, subtle fill */
.xclean-news-external-date-filter {
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #13496A;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.8rem 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.xclean-news-external-date-filter:hover {
    background: #e3eaf2;
}
.xclean-news-external-date-filter.is-active {
    background: #fff;
    border-color: transparent;
    font-weight: 600;
}

/* ── Vendor multi-select dropdown ────────────────────────────────────── */
.xclean-vendor-dropdown {
    position: relative;
    flex-shrink: 0;
    min-width: 152px;
}

/* Trigger button */
.xclean-vendor-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    padding: 0 0.875rem;
    border: 1.5px solid #ced5dd;
    border-radius: 8px;
    background: #fff;
    font-size: 0.875rem;
    color: #2e3f50;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
    justify-content: space-between;
}
.xclean-vendor-trigger:hover,
.xclean-vendor-dropdown.is-open .xclean-vendor-trigger {
    border-color: #7ab0cc;
}
.xclean-vendor-funnel {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #607080;
}

/* Dropdown panel */
.xclean-vendor-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10000;
    width: 280px;
    background: #fff;
    border: 1.5px solid #dde3eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 30, 50, 0.12);
    display: flex;
    flex-direction: column;
}
.xclean-vendor-panel[hidden] {
    display: none;
}

/* Panel search row */
.xclean-vendor-panel-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #eef1f5;
}
.xclean-vendor-panel-search-wrap svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #8a9baa;
}
.xclean-vendor-panel-search {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: #1d2733;
    background: transparent;
}
.xclean-vendor-panel-search::placeholder {
    color: #9aaab8;
}
/* Hide browser’s native search clear (×) so only our one clear button shows */
.xclean-vendor-panel-search::-webkit-search-cancel-button,
.xclean-vendor-panel-search::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.xclean-vendor-panel-search[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
.xclean-vendor-panel-search-clear {
    border: none;
    background: transparent;
    color: #8a9baa;
    font-size: 1.0625rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.xclean-vendor-panel-search-clear:hover {
    color: #1d2733;
}

/* Selected count */
.xclean-vendor-count {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #445260;
    border-bottom: 1px solid #f0f3f6;
}

/* Scrollable list */
.xclean-vendor-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.375rem 0;
}
.xclean-vendor-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: #2e3f50;
    cursor: pointer;
    transition: background 0.1s;
}
.xclean-vendor-item:hover {
    background: #f5f7fa;
}
.xclean-vendor-item.is-checked {
    background: #f0f7ff;
}
.xclean-vendor-cb {
    accent-color: #1b4f75;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Footer */
.xclean-vendor-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid #eef1f5;
}
.xclean-vendor-apply {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: #0f3d5c;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.xclean-vendor-apply:hover {
    background: #0a2c45;
}
.xclean-vendor-clear-all {
    border: none;
    background: transparent;
    color: #c0392b;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.xclean-vendor-clear-all:hover {
    color: #96281b;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .xclean-news-external-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .xclean-news-external-vendor {
        min-width: 0;
    }
    .xclean-news-external-vendor-select {
        width: 100%;
    }
}
.xclean-news-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    max-width: 760px;
    width: 100%;
}
/* Search input – Figma search icon (14×14, stroke #141414) */
.xclean-news-search-input {
    width: calc(100% - 140px);
    min-height: 42px;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border: 1px solid #d6dbe2;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M6.15474 11.6122C9.1672 11.6122 11.6093 9.17013 11.6093 6.15767C11.6093 3.14521 9.1672 0.703125 6.15474 0.703125C3.14228 0.703125 0.700195 3.14521 0.700195 6.15767C0.700195 9.17013 3.14228 11.6122 6.15474 11.6122Z' stroke='%23141414' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.7003 12.7003L11.6094 11.6094' stroke='%23141414' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0.6rem center;
    background-size: 14px;
}
.xclean-news-search-btn {
    min-width: 120px;
    min-height: 42px;
    padding: 0.5rem 1rem;
    border: 1px solid #e6bf2f;
    border-radius: 8px;
    background: #F7CD46; /* Figma approved */
    color: #1d1d1d;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.xclean-news-search-btn:hover {
    filter: brightness(0.97);
}
.xclean-news-search-input::placeholder {
    color: var(--mystic-gray-500);
}
.xclean-news-date-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}
.xclean-news-date-filter {
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f2f5f8;
    color: #1b4f75;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
}
.xclean-news-date-filter:hover {
    background: #eaf0f5;
}
.xclean-news-date-filter.is-active {
    background: #ffffff;
    border-color: #d6dbe2;
    color: #0f557d;
}
.xclean-news-has-search.xclean-news-search-loading .xclean-news-search-input {
    opacity: 0.8;
}
.xclean-news-pagination-hidden {
    display: none !important;
}
.xclean-news-section-wrapper.xclean-news-pagination-loading .xclean-news-grid-content {
    opacity: 0.6;
    pointer-events: none;
}
.xclean-news-section-wrapper.xclean-news-pagination-loading .mystic-news-pagination {
    opacity: 0.7;
    pointer-events: none;
}
.xclean-news-grid-content{
    width: 100%;
}

/* Tab active state when synced from URL (e.g. after pagination) */
a.xclean-news-tab-active {
    font-weight: 600;
    text-decoration: underline;
}

/* Pagination: compact (Prev 1 … N Next) and mobile-friendly */
.xclean-news-section-wrapper .mystic-news-pagination {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.xclean-news-section-wrapper .mystic-news-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
}
.xclean-news-section-wrapper .mystic-news-pagination .page-numbers li {
    list-style: none;
    margin: 0;
}
.xclean-news-section-wrapper .mystic-news-pagination a.page-numbers,
.xclean-news-section-wrapper .mystic-news-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.4rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    color: #13496A;
    border: 1px solid transparent;
}
.xclean-news-section-wrapper .mystic-news-pagination .mystic-news-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.xclean-news-section-wrapper .mystic-news-pagination .mystic-news-chevron svg {
    width: 1em;
    height: 1em;
    color: inherit;
}
.xclean-news-section-wrapper .mystic-news-pagination a.page-numbers:hover {
    background: #f4f7fa;
}
.xclean-news-section-wrapper .mystic-news-pagination span.page-numbers.current {
    border-color: #14141433;
    background: transparent;
    color: #13496A;
}
@media (max-width: 767px) {
    .xclean-news-external-top-row,
    .xclean-news-external-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .xclean-news-external-search-btn,
    .xclean-news-external-vendor-select {
        width: 100%;
    }
    .xclean-news-search-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }
    .xclean-news-search-input {
        width: 100%;
    }
    .xclean-news-search-btn {
        width: 100%;
    }
    .xclean-news-section-wrapper .mystic-news-pagination .page-numbers {
        gap: 0.25rem;
    }
    .xclean-news-section-wrapper .mystic-news-pagination a.page-numbers,
    .xclean-news-section-wrapper .mystic-news-pagination span.page-numbers {
        min-width: 2rem;
        height: 2rem;
        padding: 0 0.35rem;
        font-size: 0.8125rem;
    }
    .xclean-news-section-wrapper .mystic-news-pagination .prev.page-numbers,
    .xclean-news-section-wrapper .mystic-news-pagination .next.page-numbers {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
.xclean-news-no-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--mystic-gray-500);
}
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}