/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Shop Page
# Single Product
# Cart Page
--------------------------------------------------------------*/

:root {
    --fct-card-btn-bg-color: var(--button-background-color, #253241) !important;
    --fct-direct-btn-bg-color: var(--button-background-color, #253241) !important;
    --fct-card-btn-text-color: var(--button-text-color, #ffffff) !important;
    --fct-direct-btn-text-color: var(--button-text-color, #ffffff) !important;
}

a.checkout-button {
    font-family: inherit;
    font-size: initial;
    color: var(--button-text-color);
    background-color: var(--button-background-color);
    border-radius: var(--button-border-radius) !important;
    padding: 8px 20px;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    line-height: 1.3;
    border: 1px solid var(--button-border-color);
    outline: 0;
    vertical-align: middle;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all linear .2s;
    transition: all linear .2s;
}

a.checkout-button:hover,
a.checkout-button:focus {
    background-color: var(--button-background-hover-color);
    border: 1px solid var(--button-border-hover-color);
    color: var(--button-text-hover-color);
}

.fct_coupon_field button:hover,
.fct_coupon_field button:focus,
.fct_checkout button:hover,
.fct_checkout button:focus {
    background-color: var(--button-background-hover-color);
    border: 1px solid var(--button-border-hover-color);
    color: var(--button-text-hover-color);
}

.fc-product-card button {
    cursor: pointer;
}

/* Category product list */
@media screen and (min-width: 768px) {
    .tax-product-brands .mode-list .fc-product-card .fc-product-card-prices,
    .tax-product-categories .mode-list .fc-product-card .fc-product-card-prices {
        margin-top: -30px
    }
}

@media screen and (max-width: 767px) {
    .tax-product-brands .fc-products-wrapper .fc-products-wrapper-inner,
    .tax-product-categories .fc-products-wrapper .fc-products-wrapper-inner {
        display: block;
    }

    .tax-product-brands .fc-products-wrapper .admin_bar_enabled .fluent-cart-shop-app-filter-wrapper,
    .tax-product-categories .fc-products-wrapper .admin_bar_enabled .fluent-cart-shop-app-filter-wrapper {
        margin-bottom: 20px;
    }
}

/*--------------------------------------------------------------
# Shop Page
--------------------------------------------------------------*/
@media screen and (max-width: 60em) {
    .wp-block-fluent-cart-products {
        margin: 2rem 0;
    }
}

.fc-shop-price-range-wrap input {
    width: 100%;
}

/* Hide FluentCart's duplicate archive title */
.tax-product-categories .fc-archive-header-wrap,
.tax-product-brands .fc-archive-header-wrap {
    display: none !important;
}

/*--------------------------------------------------------------
# Single Product
--------------------------------------------------------------*/
/* Hide duplicate title and featured image */
.single-fluent-products .entry-header .entry-title,
.single-fluent-products .entry-header-post,
.single-fluent-products .post-thumbnail,
.single-fluent-products .featured-wrap {
    display: none !important;
}

/* Ensure proper spacing */
.single-fluent-products .entry-content {
    margin-top: 0;
}

/*--------------------------------------------------------------
# Cart Page
--------------------------------------------------------------*/

.fc-cart-item, 
.fluent-cart-cart-list-item-wrapper {
    background: var(--color-theme-white-box);
    border-color: var(--global-border-color);
}

.fc-cart-item:first-of-type, 
.fluent-cart-cart-list-item-wrapper:first-of-type {
    border-radius: var(--global-border-radius) var(--global-border-radius) 0 0;
}

.fluent-cart-cart-total-wrapper {
    background: var(--color-theme-white-box);
    border-radius: 0 0 var(--global-border-radius) var(--global-border-radius);
}

.fluent-cart-cart-cart-button-wrap {
    margin: 1rem 0;
}

@media screen and (max-width: 480px) {
    .fc-cart-item, 
    .fluent-cart-cart-list-item-wrapper {
        flex-flow: row wrap;
    }
}