/* v1.43.0 — preserve Elementor column ratios and keep cards full-width inside them */
.cps-wrapper {
    /* Use exactly the width supplied by the Elementor/parent container.
       Never cap or shrink the plugin wrapper itself. */
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    font-family: var(--cps-font-family, inherit);
}

.cps-grid {
    display: grid;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    grid-template-columns: repeat(var(--cps-columns, 3), minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
}

/* Uniform service-card geometry: the grid owns width and spacing. Per-card
   saved pixel widths/margins are ignored on the front end so every service
   card follows the same column width and outer gap. */
.cps-grid > .cps-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch;
}

/* IMPORTANT: preserve the width ratio configured in Elementor.
   If the parent columns are 70/30, they stay 70/30; if the next row is
   30/70, it stays 30/70. The plugin only makes the card fill its own parent. */
/* Keep card inner spacing consistent across Highlight and Classic/Overlay. */
.cps-card-body,
.cps-card-highlight-content {
    box-sizing: border-box;
    padding: 32px !important;
}

/* Keep Highlight cards inside the same grid column as every other card. */
.cps-card-highlight {
    grid-column: auto !important;
}

/* Keep the Highlight split usable at equal column widths. */
.cps-card-highlight-content,
.cps-card-highlight-image {
    min-width: 0;
}

/* Keep cards stretchable within their CSS Grid row. JavaScript only applies
   an explicit height to cards that are side-by-side in the same row. */
.cps-grid > .cps-card {
    height: auto !important;
    align-self: stretch;
    min-height: 0;
    box-sizing: border-box;
}

.cps-grid.cps-equalized > .cps-card {
    align-self: stretch;
}

/* Gallery mode gets compact photo-grid spacing. */
.cps-grid:has(.cps-card-gallery) {
    column-gap: var(--cps-gallery-gap, 12px);
    row-gap: var(--cps-gallery-gap, 12px);
}

/* Gallery render mode: the grid owns the spacing. Do not let per-card
   pixel width/margins create the unwanted outer edges shown in the layout. */
.cps-grid-mode-gallery > .cps-card {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 900px) {
    .cps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 18px;
    }

    .cps-grid > .cps-card {
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .cps-card-body,
    .cps-card-highlight-content {
        padding: 24px !important;
    }

    .cps-card-title {
        font-size: min(var(--cps-card-title-size, 22px), 20px);
        line-height: 1.3;
        margin-bottom: 9px;
    }

    .cps-card-desc {
        margin-bottom: 15px;
        line-height: 1.55;
    }
}

@media (max-width: 600px) {
    .cps-grid {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 14px;
    }

    .cps-card-body,
    .cps-card-highlight-content {
        padding: 18px !important;
    }

    .cps-card-title {
        font-size: min(var(--cps-card-title-size, 22px), 19px);
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .cps-card-desc {
        font-size: var(--cps-card-desc-size, 15px);
        line-height: 1.5;
        margin-bottom: 13px;
    }

    .cps-stage-row {
        gap: 8px;
    }

    .cps-zoom-icon {
        width: 32px;
        height: 32px;
        right: 10px;
        bottom: 10px;
    }
}

.cps-card {
    --cps-card-bg-default: #eef4fb;
    --cps-card-radius-default: 14px;
    --cps-card-shadow-default: 0 2px 10px rgba(20, 40, 80, 0.06);
    background: var(--cps-card-background, var(--cps-card-bg-default));
    border-radius: var(--cps-card-radius, var(--cps-card-radius-default));
    overflow: hidden;
    position: relative;
    box-shadow: var(--cps-card-shadow, var(--cps-card-shadow-default));
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: var(--cps-card-margin_top, 0px);
    margin-right: var(--cps-card-gap-horizontal-local, var(--cps-card-margin_right, 0px));
    margin-bottom: var(--cps-card-gap-vertical-local, var(--cps-card-margin_bottom, 0px));
    margin-left: var(--cps-card-margin_left, 0px);
    padding: var(--cps-card-padding_top, 0px) var(--cps-card-padding_right, 0px) var(--cps-card-padding_bottom, 0px) var(--cps-card-padding_left, 0px);
    border: var(--cps-card-border_width, var(--cps-card-hover-border-width, 0px)) var(--cps-card-border_style, solid) var(--cps-card-border_color, transparent);
    transition: transform var(--cps-card-hover-duration, 0.3s) ease,
                box-shadow var(--cps-card-hover-duration, 0.3s) ease,
                border-color var(--cps-card-hover-duration, 0.3s) ease,
                background-color var(--cps-card-hover-duration, 0.3s) ease,
                border-radius var(--cps-card-hover-duration, 0.3s) ease;
}

/* ---- Card hover effect (all layouts). Toggle + values come from
   Settings > Card Hover Effect; entirely inert when turned off. ---- */
.cps-card:hover {
    transform: var(--cps-card-hover-transform, none);
    background: var(--cps-card-hover-background, var(--cps-card-background, var(--cps-card-bg-default)));
    box-shadow: var(--cps-card-hover-shadow, none);
    border-width: var(--cps-card-hover-border-width, 0px);
    border-style: var(--cps-card-hover-border-style, var(--cps-card-border_style, solid));
    border-color: var(--cps-card-hover-border-color, transparent);
    border-radius: var(--cps-card-hover-radius, var(--cps-card-radius, var(--cps-card-radius-default)));
}

.cps-card.cps-card-is-active {
    background: var(--cps-card-active-background, var(--cps-card-hover-background, var(--cps-card-background, var(--cps-card-bg-default))));
    box-shadow: var(--cps-card-active-shadow, var(--cps-card-hover-shadow, var(--cps-card-shadow, var(--cps-card-shadow-default))));
    border-width: var(--cps-card-active-border-width, var(--cps-card-hover-border-width, var(--cps-card-border_width, 0px)));
    border-style: var(--cps-card-active-border-style, var(--cps-card-hover-border-style, var(--cps-card-border_style, solid)));
    border-color: var(--cps-card-active-border-color, var(--cps-card-hover-border-color, var(--cps-card-border_color, transparent)));
    border-radius: var(--cps-card-active-radius, var(--cps-card-hover-radius, var(--cps-card-radius, var(--cps-card-radius-default))));
    transform: var(--cps-card-active-transform, none);
}

/* ---- Active card: while this card's popup is open, it can blink on the
   grid so visitors can see which one they opened. Settings > Active Card Blink. ---- */
.cps-card.cps-card-is-active {
    --cps-blink-color: var(--cps-card-active-blink-color, #1d4ed8);
    animation: var(--cps-card-active-anim, none);
}

.cps-card-image-wrap {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.cps-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.cps-card-image-wrap:hover img {
    transform: scale(1.04);
}

/* Badge custom positions are controlled per card from the card dashboard. */
.cps-card .cps-badge-on-image {
    position: absolute;
    top: var(--cps-badge-top, 34px);
    right: var(--cps-badge-right, auto);
    bottom: var(--cps-badge-bottom, auto);
    left: var(--cps-badge-left, 32px);
    transform: var(--cps-badge-position-transform, none);
    z-index: 20;
    margin: 0;
    pointer-events: none;
}

.cps-zoom-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cps-zoom-icon svg path {
    stroke: var(--cps-accent, #1d4ed8);
}

.cps-card-body {
    padding: 22px 22px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.cps-card-title {
    margin: 0 0 10px;
    font-size: var(--cps-card-title-size, 22px);
    font-weight: 700;
    color: var(--cps-card-title-color, #1b2b4b);
}

.cps-card-desc {
    margin: 0 0 18px;
    color: var(--cps-card-desc-color, #5b6472);
    font-size: var(--cps-card-desc-size, 15px);
    line-height: 1.6;
    flex: 1;
}

.cps-card-footer {
    display: block;
    padding-top: 0;
    margin-top: auto;
}

.cps-stage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cps-stage-block {
    display: block;
}

.cps-stage-block-highlight {
    margin-top: 14px;
}

.cps-stage-block-overlay {
    margin-top: 12px;
}

.cps-stage-divider {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.cps-stage-label {
    display: inline-block;
    font-weight: var(--cps-stage-weight, 700);
    letter-spacing: var(--cps-stage-letter-spacing, 0.5px);
    color: var(--cps-stage-color, var(--cps-accent, #1d4ed8));
    background: var(--cps-stage-background, transparent);
    font-size: var(--cps-stage-font-size, 13px);
    padding: var(--cps-stage-padding-y, 0px) var(--cps-stage-padding-x, 0px);
    border-radius: var(--cps-stage-radius, 0px);
    box-sizing: border-box;
}

.cps-card-highlight .cps-stage-label,
.cps-card-overlay .cps-stage-label {
    align-self: flex-start;
}

.cps-arrow {
    color: var(--cps-accent, #1d4ed8);
    font-size: 18px;
}

/* Modal / Popup */
.cps-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(var(--cps-backdrop-blur, 10px));
    backdrop-filter: blur(var(--cps-backdrop-blur, 10px));
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000 !important;
    padding: 20px;
    box-sizing: border-box;
    font-family: var(--cps-font-family, inherit);
}

.cps-modal-overlay.cps-open {
    display: flex !important;
}

/* From here down, rules are scoped under the #cps-modal-overlay ID.
   An ID selector always outranks a theme's plain class rules, so this
   layout can't be silently collapsed by page/theme CSS loading after
   ours. If you still see it broken after updating, a caching plugin
   or CDN is very likely serving an old copy of this file — purge it. */
#cps-modal-overlay .cps-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 900px !important;
    width: 100% !important;
    position: relative;
    box-sizing: border-box !important;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* The scrolling area lives inside the shell so the close (X) button can stay
   pinned in place — and even overhang the popup corner — while content scrolls. */
#cps-modal-overlay .cps-modal-scroll {
    max-height: 88vh;
    overflow-y: auto;
    border-radius: inherit;
}

/* .cps-modal-content is what actually gets filled (by JS) with
   .cps-popup-image + .cps-popup-info, so the grid belongs here —
   image column left, details column right. Column width is
   controlled from Settings via --cps-image-width. */
#cps-modal-overlay .cps-modal-content {
    display: grid !important;
    grid-template-columns: var(--cps-image-width, 42%) 1fr !important;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

#cps-modal-overlay .cps-modal-content:empty {
    display: block !important;
}

@media (max-width: 700px) {
    #cps-modal-overlay .cps-modal-content {
        grid-template-columns: 1fr !important;
    }
}

#cps-modal-overlay .cps-modal-close {
    --cps-blink-color: var(--cps-close-blink-color, #1d4ed8);
    position: absolute;
    top: var(--cps-close-top, 14px);
    right: var(--cps-close-right, 16px);
    left: var(--cps-close-left, auto);
    width: var(--cps-close-size, 36px);
    height: var(--cps-close-size, 36px);
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background: var(--cps-close-bg, rgba(255, 255, 255, 0.95));
    color: var(--cps-close-icon-color, #333);
    border: var(--cps-close-border-width, 0) solid var(--cps-close-border-color, #e2e8f0);
    border-radius: var(--cps-close-radius, 50%);
    filter: var(--cps-close-shadow, none);
    cursor: pointer;
    z-index: 5;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    animation: var(--cps-close-anim, none);
    -webkit-appearance: none;
    appearance: none;
}

#cps-modal-overlay .cps-modal-close svg {
    width: var(--cps-close-icon-size, 16px);
    height: var(--cps-close-icon-size, 16px);
    stroke-width: var(--cps-close-icon-weight, 2.2);
    transition: transform 0.25s ease;
    pointer-events: none;
}

#cps-modal-overlay .cps-modal-close:hover,
#cps-modal-overlay .cps-modal-close:focus-visible {
    background: var(--cps-close-hover-bg, var(--cps-accent, #1d4ed8));
    color: var(--cps-close-hover-icon-color, #fff);
    transform: scale(var(--cps-close-hover-scale, 1.1));
    animation: none;
    outline: none;
}

#cps-modal-overlay .cps-modal-close:hover svg,
#cps-modal-overlay .cps-modal-close:focus-visible svg {
    transform: rotate(var(--cps-close-hover-rotate, 90deg));
}

#cps-modal-overlay .cps-popup-image {
    position: relative;
    min-height: 260px;
    height: 100%;
    overflow: hidden;
    background: #eef4fb;
}

#cps-modal-overlay .cps-popup-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* default = "cover" mode fallback */
}

@media (max-width: 700px) {
    #cps-modal-overlay .cps-popup-image {
        height: 260px;
    }
}

/* ---- Popup left-side image display modes (set from Settings).
   Applies to the plain .cps-popup-image AND to .cps-popup-gallery-main,
   so a card with Extra Gallery Images gets the same display mode.
   IMPORTANT: the per-card media box must use the whole available left column.
   The card's own padding/margin is the only intentional gap. ---- */

#cps-modal-overlay .cps-popup-gallery-main {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* All non-mobile popup media modes occupy the usable left column.
   The selected per-card Fit option controls how the actual image/video is
   rendered inside this full-size media box. */
#cps-modal-overlay.cps-img-mode-full .cps-popup-gallery-main,
#cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main,
#cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main,
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

#cps-modal-overlay.cps-img-mode-full .cps-popup-gallery-main img,
#cps-modal-overlay.cps-img-mode-full .cps-popup-gallery-main video,
#cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main img,
#cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main video,
#cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main img,
#cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main video,
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main img,
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main video {
    width: 100% !important;
    height: 100% !important;
}

/* When thumbnails exist they are pinned to the bottom. Reserve their strip
   inside the left column so the main media never overlaps the gallery. */
#cps-modal-overlay .cps-popup-gallery.has-thumbs .cps-popup-gallery-main {
    /* The thumbnail strip is a real flex item at the bottom. Do not reserve
       its height again with margin-bottom, otherwise a large empty gap
       appears between the main image and the thumbnails. */
    height: auto !important;
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
}


/* Full: image column stretches to the full height of the popup, cropped to fill (no gaps). */
#cps-modal-overlay.cps-img-mode-full .cps-popup-image,
#cps-modal-overlay.cps-img-mode-full .cps-popup-gallery-main {
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}
#cps-modal-overlay.cps-img-mode-full .cps-popup-image img,
#cps-modal-overlay.cps-img-mode-full .cps-popup-gallery-main img {
    object-fit: cover;
    height: 100%;
}

/* Cover: fixed-height image band, cropped to fill without distortion. */
#cps-modal-overlay.cps-img-mode-cover .cps-popup-image,
#cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main {
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}
#cps-modal-overlay.cps-img-mode-cover .cps-popup-image img,
#cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main img {
    object-fit: cover;
    height: 100%;
}
@media (max-width: 700px) {
    #cps-modal-overlay.cps-img-mode-cover .cps-popup-image {
        height: 220px;
    }
    #cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Auto: shows the whole image at its natural proportions, no cropping (may letterbox). */
#cps-modal-overlay.cps-img-mode-auto .cps-popup-image,
#cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main {
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cps-modal-overlay.cps-img-mode-auto .cps-popup-image img,
#cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: none;
}

/* Stretch: image is forced to fill the box exactly, ignoring aspect ratio. */
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-image,
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main {
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-image img,
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main img {
    object-fit: fill;
    height: 100%;
}

#cps-modal-overlay .cps-popup-image-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    box-sizing: border-box;
    padding: 56px 22px 22px;
    background: linear-gradient(0deg, rgba(5, 18, 31, 0.86) 0%, rgba(5, 18, 31, 0.52) 42%, rgba(5, 18, 31, 0) 100%);
    color: #fff;
    pointer-events: none;
}

#cps-modal-overlay .cps-popup-stage {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 5px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 1.35px;
    text-transform: uppercase;
    opacity: 1;
}

#cps-modal-overlay .cps-popup-image-caption strong {
    display: block;
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2.15vw, 30px);
    line-height: 1.08;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

#cps-modal-overlay .cps-popup-info {
    padding: 32px 30px;
    min-width: 0;
}

#cps-modal-overlay .cps-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

#cps-modal-overlay .cps-popup-title-logo {
    flex-shrink: 0;
    width: var(--cps-title-logo-width, 40px);
    height: var(--cps-title-logo-width, 40px);
    object-fit: contain;
}

#cps-modal-overlay .cps-popup-label {
    display: inline-block;
    font-size: var(--cps-popup-label-size, 12px);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cps-popup-label-color, #1d4ed8);
    background: var(--cps-popup-label-bg, transparent);
    text-transform: uppercase;
    margin-bottom: 8px;
    padding: var(--cps-popup-label-padding, 0);
    border-radius: 4px;
}

#cps-modal-overlay .cps-popup-title {
    margin: 0 0 14px;
    font-size: var(--cps-popup-title-size, 26px);
    font-weight: 700;
    color: var(--cps-popup-title-color, #1b2b4b);
}

#cps-modal-overlay .cps-popup-header .cps-popup-title {
    margin-bottom: 0;
}

#cps-modal-overlay .cps-popup-desc {
    color: var(--cps-popup-content-color, #5b6472);
    font-size: var(--cps-popup-content-size, 15px);
    line-height: 1.7;
    margin-bottom: 20px;
}

#cps-modal-overlay .cps-popup-desc p:last-child {
    margin-bottom: 0;
}

#cps-modal-overlay .cps-why-box {
    background: var(--cps-why-bg, #eef4fb);
    border-radius: 12px;
    padding: 18px 20px;
}

#cps-modal-overlay .cps-why-box h4 {
    margin: 0 0 10px;
    font-size: 15px;
    color: var(--cps-why-title-color, #1b2b4b);
    display: flex;
    align-items: center;
    gap: 8px;
}

#cps-modal-overlay .cps-why-icon {
    color: var(--cps-accent, #1d4ed8);
    font-size: 12px;
}

#cps-modal-overlay .cps-why-box ul {
    margin: 0;
    padding-left: 18px;
}

#cps-modal-overlay .cps-why-box ul li {
    font-size: 14px;
    color: var(--cps-why-text-color, #5b6472);
    line-height: 1.6;
    margin-bottom: 6px;
}

body.cps-modal-active {
    overflow: hidden;
}

/* ================================================================
   HIGHLIGHT LAYOUT (per-card "Layout Style" = Highlight)
   Card front: badge + title + description + checklist beside a
   large image. Popup: image gallery (main + thumbnails) beside a
   details panel with a checklist and a CTA button.
   ================================================================ */

.cps-card-highlight {
    margin-right: 0 !important;
    flex-direction: row;
    flex-wrap: wrap; /* text + image stack automatically if the card ends up narrow (e.g. inside a small column) */
    background: #fff;
    align-items: stretch;
    /* Always take the FULL width of the grid row, no matter how many columns the grid has
       (so a Highlight card mixed with Classic/Overlay cards is never squeezed into one column). */
    grid-column: 1 / -1;
    width: 100%;
}

.cps-card-highlight-content {
    flex: 58 1 340px;
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Default Highlight badge: render it in normal document flow, directly
   above the title. This prevents any overlap while keeping custom badge
   positions fully free to float anywhere inside the card. */
.cps-card-highlight.cps-badge-default-flow .cps-card-highlight-content > .cps-card-highlight-eyebrow {
    /* Override the shared absolute-position rule for the default Highlight badge. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 14px 0 !important;
    pointer-events: auto;
}

/* The default Highlight badge is part of the content flow, so it always
   occupies its own line immediately before the card title. */
.cps-card-highlight.cps-badge-default-flow .cps-card-highlight-content > .cps-card-highlight-eyebrow + .cps-card-title {
    margin-top: 0;
}

/* ---- Card badge / eyebrow (Classic, Highlight & Overlay). Colors, size and blink
   are stored per card as inline --cps-badge-* variables. ---- */
:root {
    --cps-badge-bg-auto: #eaf2fc;
}

@supports (background: color-mix(in srgb, red 12%, white)) {
    :root {
        --cps-badge-bg-auto: color-mix(in srgb, var(--cps-accent, #1d4ed8) 12%, #fff);
    }
}

.cps-badge {
    --cps-blink-color: var(--cps-badge-blink-color, var(--cps-accent, #1d4ed8));
    display: inline-block;
    align-self: flex-start;
    box-sizing: border-box;
    max-width: 100%;
    font-size: var(--cps-badge-size, 12px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: var(--cps-badge-transform, uppercase);
    color: var(--cps-badge-color, var(--cps-accent, #1d4ed8));
    background: var(--cps-badge-bg, var(--cps-badge-bg-auto, #eaf2fc));
    padding: var(--cps-badge-pad, 6px 12px);
    border-radius: var(--cps-badge-radius, 6px);
    margin-bottom: 14px;
    animation: var(--cps-badge-anim, cps-blink-ring-sm 1.6s ease-in-out infinite);
}

.cps-card-body .cps-badge {
    margin-bottom: 12px;
}

.cps-card-overlay-caption .cps-badge {
    margin-bottom: 8px;
}

.cps-card-highlight-content .cps-card-title {
    margin-bottom: 12px;
}

.cps-card-highlight-content .cps-card-desc {
    margin-bottom: 16px;
    flex: 0 0 auto;
}

.cps-card-highlight-checklist {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
}

.cps-card-highlight-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--cps-card-desc-color, #5b6472);
    line-height: 1.5;
    margin-bottom: 8px;
}

.cps-card-highlight-checklist li:last-child {
    margin-bottom: 0;
}

.cps-check-icon {
    flex-shrink: 0;
    color: var(--cps-accent, #1d4ed8);
    font-weight: 700;
    font-size: 13px;
    margin-top: 2px;
}

.cps-card-highlight-image {
    flex: 42 1 260px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    min-height: 420px;
    min-width: 0;
}

/* Image fills its column completely (never shows at its natural size / cut off). */
.cps-card-highlight-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.cps-card-highlight-image:hover img {
    transform: scale(1.04);
}

@media (max-width: 700px) {
    .elementor-column:has(.cps-wrapper),
    .e-con:has(> .elementor-element .cps-wrapper) {
        width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    .cps-card-highlight {
        grid-column: auto !important;
        margin-right: 0 !important;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .cps-card-highlight-content,
    .cps-card-highlight-image {
        flex: 0 0 auto;
    }
    .cps-card-highlight-image {
        min-height: 220px;
    }
}

/* ---- Highlight popup: gallery column ---- */
#cps-modal-overlay .cps-popup-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #eef4fb;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* Center the main media in the usable left column. When thumbnails exist, reserve
   a small bottom strip so the media remains centered above them while the gallery
   stays pinned to the bottom. */
/* The entire left media column is one continuous media surface.
   Its background reaches the popup edges; only the configured media
   margin/padding creates intentional gaps. */
#cps-modal-overlay .cps-popup-gallery {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--cps-popup-media-bg, #eef4fb);
    overflow: hidden;
}

/* Main media fills all available space above the gallery strip. */
#cps-modal-overlay .cps-popup-gallery-main {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    max-height: none;
    min-height: 0;
    overflow: hidden;
    align-self: stretch;
    box-sizing: border-box;
}

/* Keep the main media itself centered by default. */
#cps-modal-overlay .cps-popup-gallery-main img,
#cps-modal-overlay .cps-popup-gallery-main video {
    width: 100%;
    height: 100%;
    object-position: var(--cps-popup-media-position, center center);
    display: block;
}

/* Gallery thumbnails stay at the very bottom and share the same left-column
   background instead of creating a separate white band. */
#cps-modal-overlay .cps-popup-gallery-thumbs {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    display: flex;
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
    gap: 8px;
    padding: 10px;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    background: inherit;
    z-index: 2;
}

#cps-modal-overlay .cps-popup-gallery-thumb {
    width: 60px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

#cps-modal-overlay .cps-popup-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#cps-modal-overlay .cps-popup-gallery-thumb.is-active {
    border-color: var(--cps-accent, #1d4ed8);
}

@media (max-width: 700px) {
    #cps-modal-overlay .cps-popup-gallery {
        height: auto;
        min-height: 260px;
    }
    #cps-modal-overlay .cps-popup-gallery-main {
        min-height: 220px;
    }
}

/* ---- Highlight popup: info column ---- */
#cps-modal-overlay .cps-popup-info-highlight {
    padding: 34px 32px;
}

/* Divider below the popup title — every value comes from Settings > Popup Title Divider. */
#cps-modal-overlay .cps-popup-divider {
    display: var(--cps-divider-display, none);
    width: var(--cps-divider-width, 56px);
    max-width: 100%;
    height: var(--cps-divider-height, 3px);
    margin: var(--cps-divider-margin, 12px auto 18px 0);
    border-radius: var(--cps-divider-radius, 2px);
    background: var(--cps-divider-bg, var(--cps-accent, #1d4ed8));
    flex: none;
}

#cps-modal-overlay .cps-popup-highlight-underline {
    display: block;
    width: 46px;
    height: 3px;
    background: var(--cps-accent, #1d4ed8);
    margin: 4px 0 16px;
}

#cps-modal-overlay .cps-popup-info-highlight .cps-popup-desc {
    margin-bottom: 18px;
}

#cps-modal-overlay .cps-popup-highlight-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#cps-modal-overlay .cps-popup-highlight-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--cps-popup-content-color, #5b6472);
    line-height: 1.6;
    margin-bottom: 10px;
}

#cps-modal-overlay .cps-popup-highlight-checklist li:last-child {
    margin-bottom: 0;
}

#cps-modal-overlay .cps-popup-cta-button {
    display: block;
    margin-top: 24px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: var(--cps-accent, #1d4ed8);
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

#cps-modal-overlay .cps-popup-cta-button:hover {
    opacity: 0.9;
}

/* ================================================================
   GALLERY LAYOUT
   Compact image-first tiles for factory, portfolio and photo galleries.
   ================================================================ */
.cps-card-gallery {
    /* Gallery tiles are independent image tiles. Ignore classic card sizing
       so a previously saved card width/height cannot turn the tile into a
       narrow vertical card. */
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    box-shadow: none;
    border: 0 !important;
    border-radius: 10px;
    overflow: hidden;
}

.cps-card-gallery-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    background: #e8eef5;
}

.cps-card-gallery-media img,
.cps-card-gallery-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.cps-card-gallery-media:hover img,
.cps-card-gallery-media:hover video,
.cps-card-gallery-media:focus-visible img,
.cps-card-gallery-media:focus-visible video {
    transform: scale(1.045);
}

.cps-card-gallery-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.72) 100%);
    pointer-events: none;
}

 .cps-card-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 28px 10px 9px;
    box-sizing: border-box;
    pointer-events: none;
    text-align: left;
}

.cps-card-gallery-caption .cps-card-gallery-title,
.cps-card-gallery-title {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .15px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.55) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

@media (max-width: 600px) {
    .cps-grid:has(.cps-card-gallery) {
        column-gap: var(--cps-gallery-gap, 8px);
        row-gap: var(--cps-gallery-gap, 8px);
    }
    .cps-card-gallery-media {
        border-radius: 8px;
    }
    .cps-card-gallery-caption {
        width: 100%;
        max-width: 100%;
        padding: 24px 8px 8px;
    }
    .cps-card-gallery-title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
    }
}

/* ================================================================
   OVERLAY LAYOUT (per-card "Layout Style" = Overlay)
   Card front: full-bleed image with the title + description
   captioned directly over a gradient, plus a small round arrow
   badge in the corner. Popup: image on the left, details on the
   right with a "why choose" checklist and a highlighted advisory
   notice box.
   ================================================================ */

.cps-card-overlay {
    background: none;
    box-shadow: none;
}

.cps-card-overlay-image-wrap {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 3 / 4;
    flex: 1 1 auto;
    min-height: 0;
}

.cps-card-overlay-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.cps-card-overlay-image-wrap:hover img {
    transform: scale(1.04);
}

.cps-card-overlay-arrow {
    --cps-blink-color: var(--cps-arrow-blink-color, #fff);
    position: absolute;
    top: var(--cps-arrow-top, 14px);
    right: var(--cps-arrow-right, 14px);
    bottom: var(--cps-arrow-bottom, auto);
    left: var(--cps-arrow-left, auto);
    width: var(--cps-arrow-size, 34px);
    height: var(--cps-arrow-size, 34px);
    box-sizing: border-box;
    border-radius: var(--cps-arrow-radius, 50%);
    background: var(--cps-arrow-bg, rgba(15, 23, 42, 0.55));
    color: var(--cps-arrow-icon-color, #fff);
    border: var(--cps-arrow-border-width, 0) solid var(--cps-arrow-border-color, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    animation: var(--cps-arrow-anim, cps-blink-ring 2.2s ease-in-out infinite);
}

.cps-card-overlay-arrow svg {
    width: var(--cps-arrow-icon-size, 16px);
    height: var(--cps-arrow-icon-size, 16px);
    transition: transform 0.25s ease;
}

.cps-card-overlay-image-wrap:hover .cps-card-overlay-arrow,
.cps-card-overlay-image-wrap:focus-visible .cps-card-overlay-arrow {
    background: var(--cps-arrow-hover-bg, var(--cps-accent, #1d4ed8));
    color: var(--cps-arrow-hover-icon-color, #fff);
    transform: scale(var(--cps-arrow-hover-scale, 1.15));
    animation: none;
}

.cps-card-overlay-image-wrap:hover .cps-card-overlay-arrow svg,
.cps-card-overlay-image-wrap:focus-visible .cps-card-overlay-arrow svg {
    transform: rotate(var(--cps-arrow-hover-rotate, 45deg));
}

/* ---- Shared blink animations (arrow badge + popup close button).
   Each element sets --cps-blink-color; the effect is picked in Settings. ---- */
@keyframes cps-blink-ring {
    0% {
        box-shadow: 0 0 0 0 var(--cps-blink-color, rgba(255, 255, 255, 0.6));
    }
    70%, 100% {
        box-shadow: 0 0 0 11px transparent;
    }
}

@keyframes cps-blink-flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        background: var(--cps-blink-color, #fff);
        opacity: 0.85;
    }
}

@keyframes cps-blink-glow {
    0%, 100% {
        box-shadow: 0 0 3px 0 var(--cps-blink-color, #fff);
    }
    50% {
        box-shadow: 0 0 16px 5px var(--cps-blink-color, #fff);
    }
}

/* Smaller variants used by the card badge. */
@keyframes cps-blink-ring-sm {
    0% {
        box-shadow: 0 0 0 0 var(--cps-blink-color, #1d4ed8);
    }
    70%, 100% {
        box-shadow: 0 0 0 7px transparent;
    }
}

@keyframes cps-blink-flash-badge {
    0%, 100% {
        opacity: 1;
    }
    50% {
        background: var(--cps-blink-color, #1d4ed8);
        color: #fff;
    }
}

@keyframes cps-blink-glow-sm {
    0%, 100% {
        box-shadow: 0 0 2px 0 var(--cps-blink-color, #1d4ed8);
    }
    50% {
        box-shadow: 0 0 10px 3px var(--cps-blink-color, #1d4ed8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cps-badge,
    .cps-card-overlay-arrow,
    .cps-card.cps-card-is-active,
    #cps-modal-overlay .cps-modal-close {
        animation: none !important;
    }
}

.cps-card-overlay-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 18px 18px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
}

.cps-card-overlay-title {
    margin: 0 0 4px;
    font-size: var(--cps-card-title-size, 20px);
    font-weight: 700;
    color: var(--cps-overlay-title-color, #5eb1ff);
}

.cps-card-overlay-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
}

/* ---- Overlay popup: info column ---- */
#cps-modal-overlay .cps-popup-info-overlay {
    padding: 34px 32px;
}

#cps-modal-overlay .cps-popup-overlay-eyebrow {
    display: inline-block;
    font-size: var(--cps-popup-label-size, 12px);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cps-popup-label-color, #1d4ed8);
    margin-bottom: 8px;
}

#cps-modal-overlay .cps-popup-overlay-divider {
    display: block;
    width: 46px;
    height: 3px;
    background: var(--cps-accent, #1d4ed8);
    margin: 0 0 16px;
}

#cps-modal-overlay .cps-popup-info-overlay .cps-popup-title {
    margin-bottom: 16px;
}

#cps-modal-overlay .cps-popup-info-overlay .cps-popup-desc {
    margin-bottom: 22px;
}

#cps-modal-overlay .cps-popup-why-heading {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--cps-why-title-color, #1b2b4b);
}

#cps-modal-overlay .cps-popup-overlay-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#cps-modal-overlay .cps-popup-overlay-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--cps-popup-content-color, #5b6472);
    line-height: 1.6;
    margin-bottom: 10px;
}

#cps-modal-overlay .cps-popup-overlay-checklist li:last-child {
    margin-bottom: 0;
}

#cps-modal-overlay .cps-advisory-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
    background: var(--cps-advisory-bg, #fffbeb);
    border: var(--cps-advisory-border-width, 1px) solid var(--cps-advisory-border, #fde9b0);
    border-radius: var(--cps-advisory-radius, 12px);
    padding: 16px 18px;
    box-sizing: border-box;
}

#cps-modal-overlay .cps-advisory-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cps-advisory-icon-bg, #fdebb4);
    color: var(--cps-advisory-icon-color, #b45309);
    display: flex;
    align-items: center;
    justify-content: center;
}

#cps-modal-overlay .cps-advisory-icon svg {
    display: block;
}

#cps-modal-overlay .cps-advisory-body {
    min-width: 0;
    flex: 1;
}

#cps-modal-overlay .cps-advisory-title {
    display: block;
    font-size: var(--cps-advisory-title-size, 12px);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--cps-advisory-title-color, #9a3412);
    margin-bottom: 4px;
}

#cps-modal-overlay .cps-advisory-text {
    margin: 0;
    font-size: var(--cps-advisory-text-size, 14px);
    line-height: 1.6;
    color: var(--cps-advisory-text-color, #a1470f);
}


/* Per-card popup media defaults: a clean 4:3 presentation that crops oversized images
   without distortion. Individual cards can override ratio, fit and radius from the editor. */
#cps-modal-overlay .cps-card-popup-media-main img,
#cps-modal-overlay .cps-card-popup-media-main video,
.cps-card-popup-media-main img,
.cps-card-popup-media-main video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--cps-popup-media-position, center center);
}
#cps-modal-overlay .cps-card-popup-media-main.cps-media-fit-contain img,
#cps-modal-overlay .cps-card-popup-media-main.cps-media-fit-contain video {
    object-fit: contain;
    object-position: var(--cps-popup-media-position, center center);
    background: var(--cps-popup-media-bg, #111827);
}
#cps-modal-overlay .cps-card-popup-media-main.cps-media-fit-fill img,
#cps-modal-overlay .cps-card-popup-media-main.cps-media-fit-fill video {
    object-fit: fill;
    object-position: var(--cps-popup-media-position, center center);
}
.cps-card-video-source video { background:#111827; }
.cps-card-image-source img, .cps-card-video-source video { border-radius:8px; }
#cps-modal-overlay .cps-card-popup-media-main { border:1px solid #e2e8f0; box-sizing:border-box; }


/* Nexus media-column final sizing fix:
   Cover/Fit/Auto/Stretch all use the complete available left column, while
   the gallery remains pinned to the bottom. */
@media (min-width: 701px) {
    #cps-modal-overlay .cps-popup-gallery {
        height: 100% !important;
        min-height: 100% !important;
    }

    #cps-modal-overlay .cps-popup-gallery-main,
    #cps-modal-overlay.cps-img-mode-full .cps-popup-gallery-main,
    #cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main,
    #cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main,
    #cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        width: 100% !important;
    }

    #cps-modal-overlay .cps-popup-gallery-thumbs {
        position: relative !important;
        bottom: auto !important;
        flex: 0 0 80px !important;
        min-height: 80px !important;
        width: 100% !important;
        background: inherit !important;
    }

    #cps-modal-overlay .cps-popup-gallery:not(.has-thumbs) .cps-popup-gallery-main {
        flex: 1 1 100% !important;
    }
}

/* The user's selected media fit controls how the image/video fills the
   now-full-height main media area. */
#cps-modal-overlay .cps-popup-gallery-main.cps-media-fit-cover img,
#cps-modal-overlay .cps-popup-gallery-main.cps-media-fit-cover video,
#cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main img,
#cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main video {
    object-fit: cover !important;
}

#cps-modal-overlay .cps-popup-gallery-main.cps-media-fit-contain img,
#cps-modal-overlay .cps-popup-gallery-main.cps-media-fit-contain video,
#cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main img,
#cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main video {
    object-fit: contain !important;
}

#cps-modal-overlay .cps-popup-gallery-main.cps-media-fit-fill img,
#cps-modal-overlay .cps-popup-gallery-main.cps-media-fit-fill video,
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main img,
#cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main video {
    object-fit: fill !important;
}

#cps-modal-overlay .cps-popup-gallery-main img,
#cps-modal-overlay .cps-popup-gallery-main video {
    object-position: var(--cps-popup-media-position, center center) !important;
}

/* Final fix: keep thumbnails directly below the main image.
   Do not let the main media flex-grow and create a large empty gap. */
@media (min-width: 701px) {
    #cps-modal-overlay .cps-popup-gallery {
        justify-content: flex-start !important;
    }

    #cps-modal-overlay .cps-popup-gallery-main,
    #cps-modal-overlay.cps-img-mode-full .cps-popup-gallery-main,
    #cps-modal-overlay.cps-img-mode-cover .cps-popup-gallery-main,
    #cps-modal-overlay.cps-img-mode-auto .cps-popup-gallery-main,
    #cps-modal-overlay.cps-img-mode-stretch .cps-popup-gallery-main {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 0 !important;
    }

    #cps-modal-overlay .cps-popup-gallery-thumbs {
        flex: 0 0 80px !important;
        min-height: 80px !important;
        margin-top: 0 !important;
    }
}


/* Responsive equal-height cleanup.
 * JS applies the final row height; these rules make the row/spacing predictable
 * across Elementor desktop, tablet and mobile breakpoints. */
.cps-grid .cps-card {
    box-sizing: border-box;
    min-width: 0;
}

@media (min-width: 901px) {
    .cps-grid {
        column-gap: 24px;
        row-gap: 24px;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .cps-grid {
        column-gap: 18px;
        row-gap: 18px;
    }
    .cps-card-body {
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .cps-grid {
        column-gap: 0;
        row-gap: 14px;
    }
    .cps-grid .cps-card {
        width: 100%;
        max-width: 100%;
    }
}