/**
 * Hardware Parts Direct
 * Divi Product Filters
 *
 * File:
 * /inc/hpd-divi-product-filters/hpd-divi-product-filters.css
 *
 * Independent visual styling for Divi department-page filters.
 * Does NOT modify the locked WooCommerce Super Filter.
 */


/* =========================================================
   1. MAIN FILTER AREA
   ========================================================= */

.hpd-divi-product-filters {
    width: 100%;
    max-width: 1080px;

    margin: 0 auto 20px auto;
    padding: 0;

    font-family: inherit;

    box-sizing: border-box;
}


/* =========================================================
   2. FILTER HEADER
   ========================================================= */

.hpd-divi-product-filters__header {
    display: flex;
    align-items: center;

    width: 100%;

    background: #0e2a47;

    padding: 6px 14px;
    min-height: 35px;

    border: 0;
    border-radius: 6px 6px 0 0;

    box-sizing: border-box;
}


/* =========================================================
   3. FILTER TITLE
   ========================================================= */

.hpd-divi-product-filters__title {
    margin: 0;
    padding: 0;

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 500;
}

.hpd-divi-product-filters__title span {
    color: #ff8a00;
    font-weight: 500;
}


/* =========================================================
   4. FILTER BODY
   ========================================================= */

.hpd-divi-product-filters__body {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr))
        auto;

    align-items: center;

    gap: 9px;

    padding: 7px 14px 3px 14px;

    background: #ffffff;

    border: 0;
    border-radius: 0;

    box-sizing: border-box;
}


/* =========================================================
   5. INDIVIDUAL FILTER
   ========================================================= */

.hpd-divi-product-filter {
    min-width: 0;

    margin: 0;
    padding: 0;
}

.hpd-divi-product-filter label {
    display: none;
}


/* =========================================================
   6. SELECT DROPDOWNS
   ========================================================= */

.hpd-divi-product-filter select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    display: block;

    width: 100%;
    height: 38px;

    margin: 0;

    padding:
        0
        34px
        0
        11px;

    background-color: #ffffff;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #0e2a47 50%
        ),
        linear-gradient(
            135deg,
            #0e2a47 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 16px) 16px,
        calc(100% - 11px) 16px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;

    color: #25384a;

    border: 1px solid #c9d4df;
    border-radius: 4px;

    font-family: inherit;
    font-size: 13px;
    line-height: 38px;
    font-weight: 500;

    cursor: pointer;

    box-shadow: none;

    box-sizing: border-box;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.hpd-divi-product-filter select:hover {
    border-color: #8ea3b7;
}

.hpd-divi-product-filter select:focus {
    border-color: #ff8a00;

    outline: none;

    box-shadow:
        0 0 0 2px
        rgba(255, 138, 0, 0.12);
}


/* =========================================================
   7. ACTIVE FILTER
   ========================================================= */

.hpd-divi-product-filter.is-active select {
    border-color: #ff8a00;
    background-color: #fffaf4;
}


/* =========================================================
   8. CLEAR ALL BUTTON
   ========================================================= */

.hpd-divi-product-filters__clear {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 38px;
    min-height: 38px;

    margin: 0;

    padding: 0 14px;

    background: #ff8a00;
    color: #ffffff;

    border: 1px solid #ff8a00;
    border-radius: 4px;

    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.hpd-divi-product-filters__clear:hover,
.hpd-divi-product-filters__clear:focus {
    background: #e87900;
    border-color: #e87900;

    color: #ffffff;
}


/* =========================================================
   9. FILTER FOOTER / RESULTS / SORT
   ========================================================= */

.hpd-divi-product-filters__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-top: 8px;
}

.hpd-divi-product-filters__results {
    color: #53677a;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

.hpd-divi-product-filters__sort {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-left: auto;
}

.hpd-divi-product-filters__sort label {
    margin: 0;

    color: #0e2a47;

    font-size: 13px;
    font-weight: 700;
}

.hpd-divi-product-filters__sort select {
    min-width: 185px;
    height: 38px;

    padding: 0 34px 0 11px;

    background: #ffffff;

    color: #25384a;

    border: 1px solid #c9d4df;
    border-radius: 4px;

    font-family: inherit;
    font-size: 13px;

    cursor: pointer;

    box-sizing: border-box;
}


/* =========================================================
   10. MOBILE TOGGLE
   ========================================================= */

.hpd-divi-product-filters__mobile-toggle {
    display: none;
}


/* =========================================================
   11. TABLET
   ========================================================= */

@media (max-width: 980px) {

    .hpd-divi-product-filters {
        width: calc(100% - 30px);

        margin-left: auto;
        margin-right: auto;
    }

    .hpd-divi-product-filters__body {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;

        padding: 9px 0;
    }

    .hpd-divi-product-filters__clear {
        width: 100%;
    }

    .hpd-divi-product-filters__footer {
        flex-wrap: wrap;
    }
}


/* =========================================================
   12. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hpd-divi-product-filters {
        width: calc(100% - 24px);

        margin-bottom: 18px;
    }

    .hpd-divi-product-filters__header {
        padding: 6px 12px;

        min-height: 35px;

        border-radius: 6px 6px 0 0;
    }

    .hpd-divi-product-filters__title {
        font-size: 14px;
        font-weight: 500;
    }

    .hpd-divi-product-filters__title span {
        font-weight: 500;
    }


    /* MOBILE FILTER BUTTON */

    .hpd-divi-product-filters__mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        margin: 0;

        padding: 10px 12px;

        background: #0e2a47;
        color: #ffffff;

        border: 0;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.15);

        font-family: inherit;
        font-size: 14px;
        font-weight: 700;

        cursor: pointer;
    }

    .hpd-divi-product-filters__mobile-toggle::after {
        content: "+";

        color: #ff8a00;

        font-size: 21px;
        line-height: 1;
        font-weight: 700;
    }

    .hpd-divi-product-filters.is-open
    .hpd-divi-product-filters__mobile-toggle::after {
        content: "−";
    }


    /* MOBILE FILTER PANEL */

    .hpd-divi-product-filters__body {
        display: none;

        grid-template-columns: 1fr;

        gap: 9px;

        padding: 10px 0;

        background: #ffffff;

        border: 0;
    }

    .hpd-divi-product-filters.is-open
    .hpd-divi-product-filters__body {
        display: grid;
    }

    .hpd-divi-product-filter select {
        height: 44px;

        padding-left: 12px;

        font-size: 16px;
        line-height: 44px;

        background-position:
            calc(100% - 17px) 19px,
            calc(100% - 12px) 19px;
    }

    .hpd-divi-product-filters__clear {
        width: 100%;

        height: 42px;
        min-height: 42px;

        font-size: 13px;
    }

    .hpd-divi-product-filters__footer {
        flex-direction: column;
        align-items: stretch;

        gap: 10px;
    }

    .hpd-divi-product-filters__results {
        text-align: center;
    }

    .hpd-divi-product-filters__sort {
        width: 100%;

        margin-left: 0;
    }

    .hpd-divi-product-filters__sort select {
        flex: 1;

        min-width: 0;
    }
}


/* =========================================================
   13. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .hpd-divi-product-filters__title {
        font-size: 13px;
    }
}


/* =========================================================
   14. DIVI PRODUCT CATALOG GRID
   HPD STANDARD PRODUCT PRESENTATION
   ========================================================= */

.hpd-divi-product-filters-catalog .hpd-divi-products-catalog {
    width: 100%;
    max-width: 1080px;
    margin: 24px auto 0 auto;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   PRODUCT GRID — DESKTOP 4 COLUMNS
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products {
    display: grid !important;

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

    column-gap: 28px !important;
    row-gap: 38px !important;

    width: 100% !important;

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

    list-style: none !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* REMOVE WOO / DIVI CLEARFIX */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products::before,
.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   PRODUCT ITEM
   Clean HPD / WooCommerce style
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product {
    display: block !important;

    float: none !important;
    clear: none !important;

    width: 100% !important;
    max-width: none !important;

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

    list-style: none !important;

    position: relative !important;

    background: transparent !important;

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

    box-shadow: none !important;

    overflow: visible !important;

    transform: none !important;

    box-sizing: border-box !important;
}


/* NO CARD MOVEMENT / CARD SHADOW */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product:hover {
    transform: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* REMOVE DIVI/THEME LIST BULLETS */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product::before,
.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   PRODUCT LINK
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
a.woocommerce-LoopProduct-link {
    display: block !important;

    width: 100% !important;

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

    text-decoration: none !important;
}


/* =========================================================
   PRODUCT IMAGE AREA
   Larger HPD-style presentation
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.et_shop_image {
    display: flex !important;

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

    position: relative !important;

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

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

    background: #ffffff !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PRODUCT IMAGE
   Do NOT stretch image to fill container
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.et_shop_image img,
.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
img {
    display: block !important;

    width: auto !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: 255px !important;

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

    object-fit: contain !important;

    box-shadow: none !important;
}


/* =========================================================
   PRODUCT TITLE
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.woocommerce-loop-product__title {
    min-height: 0 !important;

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

    background: transparent !important;

    color: #17202a !important;

    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    display: block !important;

    overflow: visible !important;

    text-decoration: none !important;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product:hover
.woocommerce-loop-product__title {
    color: #0e2a47 !important;
}


/* =========================================================
   SKU
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.hpd-product-sku,
.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.hpd-loop-sku {
    display: block !important;

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

    background: transparent !important;

    color: #68737d !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.hpd-loop-sku strong,
.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.hpd-product-sku strong {
    color: #0e2a47 !important;
    font-weight: 600 !important;
}


/* =========================================================
   PRODUCT PRICE
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.price {
    display: block !important;

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

    background: transparent !important;

    color: #1f5ebe !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.price .woocommerce-Price-amount {
    color: #1f5ebe !important;
    font-weight: 700 !important;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.price del {
    color: #7b858e !important;
    font-weight: 400 !important;
    opacity: 0.7;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.price ins {
    color: #1f5ebe !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}


/* =========================================================
   PRODUCT RATING
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.star-rating {
    margin: 0 0 7px 0 !important;

    color: #ff8a00 !important;

    font-size: 13px !important;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.star-rating::before {
    color: #d6dce2 !important;
}


/* =========================================================
   SALE BADGE
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
span.onsale {
    top: 10px !important;
    left: 10px !important;

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

    padding: 6px 9px !important;

    background-color: #ff8a00 !important;
    color: #ffffff !important;

    border-radius: 4px !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}


/* =========================================================
   REMOVE DEFAULT PRODUCT BUTTONS
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-catalog
ul.products
li.product
.button {
    display: none !important;
}


/* =========================================================
   15. NO RESULTS
   ========================================================= */

.hpd-divi-product-filters-catalog
.hpd-divi-products-empty {
    width: 100%;
    max-width: 1080px;

    margin: 18px auto 28px auto;
    padding: 24px 26px;

    background: #f3f7fb;

    border-left: 4px solid #0e2a47;
    border-radius: 4px;

    box-sizing: border-box;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-empty
strong {
    display: block;

    margin: 0 0 7px 0;

    color: #0e2a47;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-empty
p {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;

    color: #53677a;

    font-size: 14px;
    line-height: 1.55;
}


/* VIEW ALL PRODUCTS */

.hpd-divi-product-filters-catalog
.hpd-divi-products-empty
a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 18px;

    background: #ff8a00;
    color: #ffffff !important;

    border: 1px solid #ff8a00;
    border-radius: 4px;

    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;

    text-decoration: none !important;
}


.hpd-divi-product-filters-catalog
.hpd-divi-products-empty
a:hover,
.hpd-divi-product-filters-catalog
.hpd-divi-products-empty
a:focus {
    background: #e87900;
    border-color: #e87900;

    color: #ffffff !important;
}


/* =========================================================
   16. PRODUCT GRID — TABLET
   ========================================================= */

@media (max-width: 980px) {

    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog {
        width: calc(100% - 30px);
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 22px !important;
        row-gap: 32px !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    .et_shop_image {
        height: 260px !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    .et_shop_image img,
    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    img {
        max-height: 260px !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-empty {
        width: calc(100% - 30px);
        padding: 22px;
    }
}


/* =========================================================
   17. PRODUCT GRID — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog {
        width: calc(100% - 24px);
        margin-top: 20px;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 14px !important;
        row-gap: 28px !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    .et_shop_image {
        height: 180px !important;
        margin-bottom: 12px !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    .et_shop_image img,
    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    img {
        max-height: 180px !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    .woocommerce-loop-product__title {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-empty {
        width: calc(100% - 24px);

        margin-top: 14px;
        margin-bottom: 22px;

        padding: 20px 18px;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-empty
    strong {
        font-size: 17px;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-empty
    a {
        width: 100%;
        min-height: 44px;
    }
}


/* =========================================================
   18. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products {
        grid-template-columns: 1fr !important;
        row-gap: 30px !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    .et_shop_image {
        height: 260px !important;
    }


    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    .et_shop_image img,
    .hpd-divi-product-filters-catalog
    .hpd-divi-products-catalog
    ul.products
    li.product
    img {
        max-height: 260px !important;
    }
}


/* =========================================================
   19. SORT BY — DISABLED
   Keep sorting functionality in PHP; hide UI only.
   ========================================================= */

.hpd-divi-product-filters__sort {
    display: none !important;
}