/*---------------------------------------------------------------
    Custom overrides - loaded after style.css so it wins.
    Keep site-wide tweaks here instead of editing the compiled
    style.css (which is generated from /public/assets/scss).
----------------------------------------------------------------*/

/*-- Product grids: spacing, equal height cards, visible add to cart --*/
.shop-product-wrap .row,
.home-shop-grid {
    margin-right: -12px;
    margin-left: -12px;
}

.shop-product-wrap .product-col,
.home-shop-grid .product-col {
    display: flex;
    padding-right: 12px;
    padding-left: 12px;
    margin-bottom: 30px;
}

.shop-product-wrap .product-col > .single-product-wrap,
.home-shop-grid .product-col > .single-product-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 15px;
}

.shop-product-wrap .product-col .product-content,
.home-shop-grid .product-col .product-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 12px;
}

.shop-product-wrap .product-col .product-name,
.home-shop-grid .product-col .product-name {
    margin-bottom: 15px;
    min-height: 42px;
    line-height: 1.4;
}

/*-- Keep product images on a consistent baseline --*/
.shop-product-wrap .product-col .product-image ._image,
.home-shop-grid .product-col .product-image ._image {
    height: 190px;
    width: 100%;
    object-fit: contain;
    padding: 12px;
}

/*-- "Add to cart" is hover-only in the theme; show it always in grids
     so it is reachable on touch devices too. --*/
.shop-product-wrap .single-product-wrap .product-button-action,
.home-shop-grid .single-product-wrap .product-button-action {
    height: auto;
    margin-top: auto;
    opacity: 1;
    filter: alpha(opacity=100);
}

.shop-product-wrap .single-product-wrap:hover,
.home-shop-grid .single-product-wrap:hover {
    margin-bottom: 0;
}

.shop-product-wrap .single-product-wrap .product-button-action .add-to-cart,
.home-shop-grid .single-product-wrap .product-button-action .add-to-cart,
.shop-product-wrap .single-product-wrap .product-button-action .out-of-stock,
.home-shop-grid .single-product-wrap .product-button-action .out-of-stock {
    display: block;
    width: 100%;
    padding: 0 10px;
}

/*-- 5 across on wide screens for the home grid (matches Follymart).
     Listing pages stay at 4 across so the cards keep room to breathe. --*/
@media (min-width: 1200px) {
    .home-shop-grid > .product-col {
        flex: 0 0 auto;
        width: 20%;
        max-width: 20%;
    }
}

/*-- 2 across on phones instead of one full width card --*/
@media (max-width: 575.98px) {
    .home-shop-grid > .product-col,
    .shop-product-wrap .product-col {
        flex: 0 0 auto;
        width: 50%;
        max-width: 50%;
    }

    .shop-product-wrap .product-col .product-image ._image,
    .home-shop-grid .product-col .product-image ._image {
        height: 140px;
    }

    .shop-product-wrap .single-product-wrap .product-button-action .add-to-cart,
    .home-shop-grid .single-product-wrap .product-button-action .add-to-cart {
        padding: 0 6px;
        font-size: 13px;
    }
}

/*-- "View all" link under the home shop grid --*/
.home-shop-more {
    display: inline-block;
    background: #985714;
    color: #ffffff;
    border-radius: 3px;
    padding: 0 32px;
    height: 44px;
    line-height: 44px;
    font-weight: 500;
    text-transform: capitalize;
    transition: 0.3s ease;
}

.home-shop-more:hover {
    background: #590103;
    color: #ffffff;
}

/*-- Testimonials: heading (was scoped to the removed left panel) --*/
.or-testimonial-section-3 .or-section-title-4 span {
    display: block;
    color: #010148;
    font-weight: 700;
}

.or-testimonial-section-3 .or-section-title-4 h2 {
    padding-top: 10px;
    padding-bottom: 45px;
    position: relative;
}

.or-testimonial-section-3 .or-section-title-4 h2:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    width: 50px;
    height: 3px;
    margin: 0 auto;
    background-color: #985714;
}

/*-- Testimonials: a single row of boxes --*/
.testimonial-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: -12px;
    margin-left: -12px;
}

.testimonial-row .testimonial-col {
    display: flex;
    padding: 0 12px;
    margin-bottom: 24px;
    flex: 0 0 auto;
    width: 100%;
}

.testimonial-row .testimonial-box {
    background: #ffffff;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 28px 24px 45px;
    width: 100%;
    height: 100%;
    align-self: stretch;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: 0.3s ease;
}

.testimonial-row .testimonial-box:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.testimonial-row .testimonial-box p {
    color: #555555;
    margin-bottom: 18px;
    line-height: 1.7;
}

.testimonial-row .testimonial-box h3 {
    color: #590103;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.testimonial-row .testimonial-box .testimonial-icon {
    position: absolute;
    right: 20px;
    bottom: 18px;
    color: #985714;
    opacity: 0.25;
    font-size: 22px;
}

@media (min-width: 768px) {
    .testimonial-row .testimonial-col {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .testimonial-row .testimonial-col {
        width: 33.3333%;
    }
}

@media (min-width: 1200px) {
    .testimonial-row .testimonial-col {
        width: 20%;
    }
}