/*
 * Saviswood employer-original catalog filter polish.
 * Presentation-only override for /prodz.php.
 * Locked employer source remains untouched.
 */

/* =========================================================
   FILTER CONTAINER
   ========================================================= */

html.exact-employer-catalog body .flt {
    box-sizing: border-box !important;
    direction: rtl !important;

    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: flex !important;
    flex-direction: column !important;

    width: min(900px, calc(100% - 32px)) !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 26px auto 32px !important;
    padding: 22px 26px 18px !important;

    border: 1px solid #55a72e !important;
    border-radius: 16px !important;

    background: #fff !important;

    box-shadow:
        0 8px 28px rgba(57, 91, 35, 0.06) !important;

    overflow: hidden !important;

    list-style: none !important;
}
/* =========================================================
   TITLES
   ========================================================= */

html.exact-employer-catalog body .flt > .f-1,
html.exact-employer-catalog body .flt > .f-22 {
    box-sizing: border-box !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    list-style: none !important;
    text-align: right !important;
}

html.exact-employer-catalog body .flt > .f-1 {
    padding: 0 0 15px !important;

    border-bottom:
        1px solid rgba(80, 103, 67, 0.16) !important;

    color: #283126 !important;

    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.7 !important;
}

html.exact-employer-catalog body .flt > .f-22 {
    padding: 12px 0 0 !important;

    color: #3e463a !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;
}

/* =========================================================
   PRICE RANGE AREA
   ========================================================= */

html.exact-employer-catalog body .flt > .pos {
    box-sizing: border-box !important;

    position: relative !important;
    inset: auto !important;
    transform: none !important;

    width: min(520px, 100%) !important;
    height: 116px !important;

    margin: 0 auto 6px !important;
    padding: 0 !important;

    overflow: hidden !important;
}

html.exact-employer-catalog body .flt > .pos iframe {
    display: block !important;

    position: absolute !important;
    top: -34px !important;
    right: 50% !important;

    width: 420px !important;
    max-width: 100% !important;
    height: 170px !important;

    margin: 0 !important;

    border: 0 !important;

    transform: translateX(50%) !important;
}

/* =========================================================
   FILTER ROWS
   ========================================================= */

html.exact-employer-catalog body .flt > .align {
    box-sizing: border-box !important;

    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    width: 100% !important;
    min-height: 44px !important;

    gap: 18px !important;

    margin: 0 !important;
    padding: 9px 2px !important;

    border: 0 !important;
    border-top:
        1px solid rgba(80, 103, 67, 0.12) !important;

    color: #32382f !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;

    list-style: none !important;
}

/* First status row gets a touch more breathing room */

html.exact-employer-catalog body .flt > .align:first-of-type {
    min-height: 48px !important;
}

/* Remove old translated positioning */

html.exact-employer-catalog body .flt #cal,
html.exact-employer-catalog body .flt .icz {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

html.exact-employer-catalog body .flt #cal {
    grid-column: 1 !important;

    color: #30382c !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}

html.exact-employer-catalog body .flt .icz {
    grid-column: 2 !important;
    justify-self: end !important;

    padding: 4px 10px !important;

    border-radius: 999px !important;

    background:
        rgba(85, 167, 46, 0.09) !important;

    color: #477b2d !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}

/* =========================================================
   SWITCHES
   ========================================================= */

html.exact-employer-catalog
body
.flt
> .align
> .circ12 {
    box-sizing: border-box !important;

    grid-column: 2 !important;
    justify-self: end !important;

    display: block !important;

    position: relative !important;
    inset: auto !important;
    transform: none !important;

    width: 40px !important;
    min-width: 40px !important;
    height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #d4d8d1 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(44, 56, 39, 0.04) !important;

    cursor: pointer !important;

    transition:
        background 160ms ease,
        box-shadow 160ms ease !important;
}

html.exact-employer-catalog
body
.flt
> .align
> .circ12
> .mode2 {
    box-sizing: border-box !important;

    position: absolute !important;

    top: 2px !important;
    left: 2px !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;

    background: #fff !important;

    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.2) !important;

    transform: none !important;

    transition:
        transform 160ms ease !important;
}

html.exact-employer-catalog
body
.flt
> .align
> .circ12.active {
    background: #49ad56 !important;

    box-shadow:
        0 0 0 3px
        rgba(73, 173, 86, 0.09) !important;
}

html.exact-employer-catalog
body
.flt
> .align
> .circ12.active
> .mode2 {
    transform: translateX(18px) !important;
}

/* =========================================================
   INTERACTION
   ========================================================= */

html.exact-employer-catalog
body
.flt
> .align:hover {
    background:
        rgba(85, 167, 46, 0.025) !important;
}

html.exact-employer-catalog
body
.flt
> .align
> .circ12:focus-visible {
    outline:
        3px solid
        rgba(73, 173, 86, 0.18) !important;

    outline-offset: 3px !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 760px) {

    html.exact-employer-catalog body .flt {
        width:
            calc(100% - 20px) !important;

        margin:
            18px auto 26px !important;

        padding:
            18px 18px 14px !important;

        border-radius:
            14px !important;
    }

    html.exact-employer-catalog
    body
    .flt
    > .f-1 {
        padding-bottom:
            12px !important;

        font-size:
            16px !important;
    }

    html.exact-employer-catalog
    body
    .flt
    > .f-22 {
        padding-top:
            10px !important;
    }

    html.exact-employer-catalog
    body
    .flt
    > .pos {
        height:
            110px !important;
    }

    html.exact-employer-catalog
    body
    .flt
    > .pos
    iframe {
        width:
            360px !important;

        top:
            -36px !important;
    }

    html.exact-employer-catalog
    body
    .flt
    > .align {
        min-height:
            46px !important;

        padding:
            10px 2px !important;

        gap:
            12px !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    html.exact-employer-catalog body .flt {
        width:
            calc(100% - 16px) !important;

        padding:
            16px 14px 12px !important;
    }

    html.exact-employer-catalog
    body
    .flt
    > .pos {
        width:
            100% !important;

        height:
            106px !important;
    }

    html.exact-employer-catalog
    body
    .flt
    > .pos
    iframe {
        width:
            320px !important;

        max-width:
            100% !important;
    }

    html.exact-employer-catalog
    body
    .flt
    > .align {
        font-size:
            12px !important;
    }
}


/* =========================================================
   SAVISWOOD_CATALOG_PRODUCT_LAYOUT_V1
   Preserve employer card identity, normalize legacy layout.
   ========================================================= */

html.exact-employer-catalog body .wrpz {
    box-sizing: border-box !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    float: none !important;

    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(220px, 1fr)) !important;

    align-items: stretch !important;
    justify-content: center !important;

    gap: 22px !important;

    width:
        min(1060px, calc(100% - 40px)) !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 22px auto 28px !important;
    padding: 0 !important;
}

html.exact-employer-catalog body a.s,
html.exact-employer-catalog body a.s2 {
    box-sizing: border-box !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;
}

html.exact-employer-catalog body a.s[hidden],
html.exact-employer-catalog body a.s2[hidden] {
    display: none !important;
}

html.exact-employer-catalog body
a.s:not([hidden]),
html.exact-employer-catalog body
a.s2:not([hidden]) {
    display: block !important;
}

html.exact-employer-catalog body .cardz {
    box-sizing: border-box !important;

    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 330px !important;

    margin: 0 !important;
    padding: 9px !important;

    overflow: hidden !important;

    border:
        1px solid #55a72e !important;

    border-radius:
        16px !important;

    background:
        #ffffff !important;
}

html.exact-employer-catalog body .cardz .pica {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: block !important;

    width: 100% !important;
    height: 190px !important;

    margin: 0 0 10px !important;

    border-radius:
        11px !important;

    object-fit: cover !important;
}

html.exact-employer-catalog body .cardz .sa {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 4px 6px !important;

    text-align: center !important;
    line-height: 1.8 !important;
}

html.exact-employer-catalog body .cardz .z3,
html.exact-employer-catalog body .cardz .prag {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: auto !important;
    height: auto !important;
}

html.exact-employer-catalog body .cardz .prag {
    margin:
        auto 6px 8px !important;

    text-align:
        right !important;
}

html.exact-employer-catalog body .cardz .heart {
    position: absolute !important;

    right: auto !important;
    left: 12px !important;
    top: auto !important;
    bottom: 48px !important;

    transform: none !important;
}

html.exact-employer-catalog body .cardz .c-sel {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    height: auto !important;

    margin-top: auto !important;
}

html.exact-employer-catalog body .cardz .pro1 {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: fit-content !important;
    height: auto !important;

    margin: 0 0 0 auto !important;
    padding: 6px 12px !important;

    border-radius:
        999px !important;
}

/* One-result categories should not leave the product
   floating against the far edge. */
html.exact-employer-catalog body .wrpz:has(
    > a.s:not([hidden]):only-child
),
html.exact-employer-catalog body .wrpz:has(
    > a.s2:not([hidden]):only-child
) {
    grid-template-columns:
        minmax(240px, 340px) !important;

    justify-content:
        center !important;
}

@media (max-width: 900px) {
    html.exact-employer-catalog body .wrpz {
        grid-template-columns:
            repeat(2, minmax(210px, 1fr)) !important;

        width:
            calc(100% - 28px) !important;

        gap:
            16px !important;
    }
}

@media (max-width: 600px) {
    html.exact-employer-catalog body .wrpz {
        grid-template-columns:
            minmax(0, 1fr) !important;

        width:
            calc(100% - 20px) !important;

        gap:
            14px !important;

        margin:
            16px auto 22px !important;
    }

    html.exact-employer-catalog body .cardz {
        min-height:
            0 !important;
    }

    html.exact-employer-catalog body .cardz .pica {
        height:
            clamp(190px, 58vw, 280px) !important;
    }
}


/* =========================================================
   SAVISWOOD_CATALOG_SINGLE_CARD_CENTER_V1
   Center a lone backend-bound legacy card.
   ========================================================= */

html.exact-employer-catalog
body
.wrpz:has(> .cardz) {
    grid-template-columns:
        minmax(260px, 340px) !important;

    justify-content:
        center !important;

    justify-items:
        stretch !important;
}

html.exact-employer-catalog
body
.wrpz:has(> .cardz)
> .cardz {
    width:
        100% !important;

    max-width:
        340px !important;

    justify-self:
        center !important;
}

@media (max-width: 600px) {
    html.exact-employer-catalog
    body
    .wrpz:has(> .cardz) {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    html.exact-employer-catalog
    body
    .wrpz:has(> .cardz)
    > .cardz {
        max-width:
            420px !important;
    }
}


/* =========================================================
   SAVISWOOD_CATALOG_AUTOFIT_GRID_V1
   Center 1-3 visible backend products automatically.
   ========================================================= */

html.exact-employer-catalog body .wrpz {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 320px)
        ) !important;

    justify-content:
        center !important;

    justify-items:
        stretch !important;

    align-items:
        stretch !important;
}

html.exact-employer-catalog
body
.wrpz > a.s,
html.exact-employer-catalog
body
.wrpz > a.s2,
html.exact-employer-catalog
body
.wrpz > .cardz {
    width:
        100% !important;

    max-width:
        320px !important;

    justify-self:
        center !important;
}

html.exact-employer-catalog
body
a.s2[data-backend-product]
> .wrpz {
    grid-template-columns:
        minmax(260px, 320px) !important;

    justify-content:
        center !important;
}

html.exact-employer-catalog
body
a.s2[data-backend-product]
> .wrpz
> .cardz {
    width:
        100% !important;

    max-width:
        320px !important;

    justify-self:
        center !important;
}

@media (max-width: 600px) {

    html.exact-employer-catalog body .wrpz {
        grid-template-columns:
            minmax(0, 420px) !important;

        width:
            calc(100% - 20px) !important;
    }

    html.exact-employer-catalog
    body
    .wrpz > a.s,
    html.exact-employer-catalog
    body
    .wrpz > a.s2,
    html.exact-employer-catalog
    body
    .wrpz > .cardz,
    html.exact-employer-catalog
    body
    a.s2[data-backend-product]
    > .wrpz
    > .cardz {
        max-width:
            420px !important;
    }
}
body[data-catalog-backend-connected="true"]
    .sw-catalog-live-state,
.sw-catalog-live-state {
    flex: 1 0 100%;
    width: 100%;
    min-height: 220px;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 28px 20px;
    border: 1px dashed rgba(35, 65, 6, 0.28);
    border-radius: 18px;
    background: rgba(246, 249, 242, 0.92);
    color: #234106;
    text-align: center;
}

.sw-catalog-live-state[hidden] {
    display: none !important;
}

.sw-catalog-live-state strong {
    font-size: 1.15rem;
}

.sw-catalog-live-state p {
    max-width: 520px;
    margin: 0;
    color: #5f6b55;
    line-height: 1.9;
}

.sw-catalog-live-state.is-error {
    border-color: rgba(181, 74, 63, 0.35);
    background: #fff7f6;
    color: #8e342c;
}

/* SAVISWOOD_CATALOG_EMPTY_STATE_LAYOUT_FIX_V1 */
.sw-catalog-live-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

.sw-catalog-live-state strong,
.sw-catalog-live-state p {
    position: static !important;
    inset: auto !important;
    float: none !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.sw-catalog-live-state strong {
    line-height: 1.8 !important;
}

.sw-catalog-live-state p {
    line-height: 2 !important;
    max-width: 520px !important;
}

.sw-catalog-live-state[hidden] {
    display: none !important;
}