/* ==========================================================
   Remote Products Grid
========================================================== */

.remote-products {
    display: grid;

    grid-template-columns:
        repeat(
            var(--remote-columns, 4),
            minmax(0, 1fr)
        );

    gap: 20px;
}


/* ==========================================================
   Product Card
========================================================== */

.remote-product-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e2e2e2;
}


/* ==========================================================
   Product Image
========================================================== */

.remote-product-card__image {
    width: 100%;

    overflow: hidden;

    background: #fff;
}


.remote-product-card__image img {
    display: block;

    width: 100%;

    height: 180px !important;

    margin: 0;

    object-fit: contain;

    object-position: center;
}


/* ==========================================================
   Product Content
========================================================== */

.remote-product-card__content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 16px;
}


/* ==========================================================
   Product Title
========================================================== */

.remote-product-card__title {
    margin: 0 0 14px;

    padding: 0;

    font-size: 16px;

    line-height: 1.35;

    font-weight: 700;

    text-align: left;

    color: rgb(24, 24, 24);
}


/* ==========================================================
   Product Buttons Container
========================================================== */

.remote-product-card__actions {
    display: grid;

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

    gap: 8px;

    margin-top: auto;
}


/* ==========================================================
   Product Buttons
========================================================== */

.remote-product-card__button {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 42px;

    padding: 8px 10px;

    border-radius: 0;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 700;

    text-align: center;

    text-decoration: none;

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


.remote-product-card__button:hover,
.remote-product-card__button:focus {
    text-decoration: none;
}


/* ==========================================================
   Get a Quote
========================================================== */

.remote-product-card__button--quote {
    background: #ff5412;

    border: 1px solid #ff5412;

    color: #fff;
}


/*
 * Hover:
 * White background
 * Dark text
 * Orange border
 */
.remote-product-card__button--quote:hover,
.remote-product-card__button--quote:focus {
    background: #fff;

    border-color: #ff5412;

    color: rgb(24, 24, 24);
}


/* ==========================================================
   Call Now
========================================================== */

.remote-product-card__button--call {
    background: #fff;

    border: 1px solid #dedede;

    color: rgb(24, 24, 24);
}


/*
 * Hover:
 * Orange background
 * White text
 */
.remote-product-card__button--call:hover,
.remote-product-card__button--call:focus {
    background: #ff5412;

    border-color: #ff5412;

    color: #fff;
}


/* ==========================================================
   Load More Wrapper
========================================================== */

.remote-load-more-wrapper {
    margin: 30px auto 20px;

    text-align: center;
}


/* ==========================================================
   Load More Button
========================================================== */

button.remote-load-more {
    min-width: 150px;

    padding: 11px 28px;

    background: #fff;

    border: 1px solid #ff5412;

    border-radius: 0;

    color: rgb(24, 24, 24);

    font-size: 14px;

    line-height: 1.2;

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}


/*
 * Load More Hover
 */
button.remote-load-more:hover,
button.remote-load-more:focus {
    background: #ff5412;

    border-color: #ff5412;

    color: #fff;
}


/*
 * Loading state
 */
button.remote-load-more:disabled {
    opacity: 0.6;

    cursor: wait;

    background: #fff;

    border-color: #ff5412;

    color: rgb(24, 24, 24);
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 1024px) {

    .remote-products {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap: 10px;
    }


    .remote-product-card__content {
        padding: 14px;
    }


    .remote-product-card__image img {
        height: 180px !important;
    }
}


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

@media screen and (max-width: 768px) {

    .remote-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 8px;
    }


    .remote-product-card__content {
        padding: 12px;
    }


    .remote-product-card__title {
        margin-bottom: 12px;

        font-size: 14px;

        line-height: 1.3;
    }


    .remote-product-card__image img {
        height: 150px !important;
    }


    .remote-product-card__actions {
        grid-template-columns: 1fr;

        gap: 6px;
    }


    .remote-product-card__button {
        min-height: 38px;

        padding: 8px;

        font-size: 12px;
    }
}


/* ==========================================================
   Small Mobile
========================================================== */

@media screen and (max-width: 480px) {

    .remote-products {
        gap: 7px;
    }


    .remote-product-card__content {
        padding: 10px;
    }


    .remote-product-card__image img {
        height: 130px !important;
    }


    .remote-product-card__title {
        font-size: 13px;
    }


    .remote-product-card__button {
        min-height: 36px;

        font-size: 11px;
    }


    button.remote-load-more {
        min-width: 140px;

        padding: 10px 20px;

        font-size: 13px;
    }
}