/**
 * QI Shop V2
 * Compact commerce-first layout.
 */


/* =========================================================
   ROOT / REMOVE FLATSOME ARCHIVE CHROME
   ========================================================= */

body.post-type-archive-product #main,
body.tax-product_cat #main {

    background:
        #ffffff;
}


/*
 * QI renders its own breadcrumb / toolbar.
 */

body.post-type-archive-product
.shop-page-title,

body.tax-product_cat
.shop-page-title {

    display:
        none !important;
}


/*
 * Kill empty Shop Sidebar completely.
 */

body.post-type-archive-product
.shop-sidebar,

body.tax-product_cat
.shop-sidebar,

body.post-type-archive-product
.category-page-row > .large-3,

body.tax-product_cat
.category-page-row > .large-3 {

    display:
        none !important;
}


body.post-type-archive-product
.category-page-row > .large-9,

body.tax-product_cat
.category-page-row > .large-9 {

    flex-basis:
        100% !important;

    width:
        100% !important;

    max-width:
        100% !important;
}


/*
 * No useless mobile filter without sidebar.
 */

body.post-type-archive-product
.filter-button,

body.tax-product_cat
.filter-button {

    display:
        none !important;
}


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

body.post-type-archive-product
.category-page-row,

body.tax-product_cat
.category-page-row {

    padding-top:
        0 !important;
}


body.post-type-archive-product
.shop-container,

body.tax-product_cat
.shop-container {

    padding-bottom:
        54px;
}


/* =========================================================
   SHOP V2
   ========================================================= */

.qi-shop-v2 {

    margin:
        30px 0 24px;
}


/* Breadcrumb */

.qi-shop-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        15px;

    color:
        var(--qi-muted, #6D8189);

    font-size:
        11px;

    line-height:
        1.5;
}


.qi-shop-breadcrumb a {

    color:
        var(--qi-muted, #6D8189);

    text-decoration:
        none;
}


.qi-shop-breadcrumb a:hover {

    color:
        var(--qi-primary, #0F9693);
}


.qi-shop-breadcrumb span:last-child {

    color:
        var(--qi-text, #173B4A);

    font-weight:
        650;
}


/* =========================================================
   COMPACT SUMMARY
   ========================================================= */

.qi-shop-summary {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr) 310px;

    gap:
        30px;

    align-items:
        center;

    padding:
        25px 28px;

    border:
        1px solid
        var(--qi-border, #D8E6E9);

    border-radius:
        14px;

    background:
        linear-gradient(
            125deg,
            #F8FCFC 0%,
            #F0F8F8 100%
        );
}


.qi-shop-kicker {

    margin-bottom:
        6px;

    color:
        var(--qi-primary, #0F9693);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.qi-shop-summary h1 {

    margin:
        0;

    color:
        var(--qi-dark, #0D2F43);

    font-size:
        clamp(25px, 2.5vw, 34px);

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        -.025em;
}


.qi-shop-summary-main > p {

    max-width:
        720px;

    margin:
        9px 0 0;

    color:
        var(--qi-muted, #6D8189);

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   CATEGORY NAV
   ========================================================= */

.qi-shop-category-nav {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        15px;
}


.qi-shop-category-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        0 13px;

    border:
        1px solid
        var(--qi-border, #D8E6E9);

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--qi-text, #173B4A);

    font-size:
        10px;

    font-weight:
        650;

    text-decoration:
        none !important;
}


.qi-shop-category-link:hover {

    border-color:
        var(--qi-primary, #0F9693);

    color:
        var(--qi-primary, #0F9693);
}


.qi-shop-category-link.is-active {

    border-color:
        var(--qi-primary, #0F9693);

    background:
        var(--qi-primary, #0F9693);

    color:
        #ffffff !important;
}


/* =========================================================
   ASSURANCE
   ========================================================= */

.qi-shop-assurance {

    display:
        grid;

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

    gap:
        9px;
}


.qi-shop-assurance > div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        40px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(216,230,233,.95);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.75);

    color:
        var(--qi-text, #173B4A);

    font-size:
        10px;

    font-weight:
        650;
}


.qi-shop-assurance svg {

    flex:
        0 0 16px;

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        var(--qi-primary, #0F9693);

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.qi-shop-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    min-height:
        58px;

    margin-top:
        10px;

    border-bottom:
        1px solid
        var(--qi-border, #D8E6E9);
}


.qi-shop-count {

    color:
        var(--qi-muted, #6D8189);

    font-size:
        11px;

    font-weight:
        500;
}


.qi-shop-ordering {

    margin:
        0;
}


.qi-shop-ordering select {

    min-width:
        154px;

    height:
        38px;

    margin:
        0 !important;

    padding:
        0 35px 0 12px;

    border:
        1px solid
        var(--qi-border, #D8E6E9) !important;

    border-radius:
        8px;

    background-color:
        #ffffff;

    color:
        var(--qi-text, #173B4A);

    font-size:
        11px;

    box-shadow:
        none !important;
}


/* =========================================================
   HIDE ANY LEFTOVER NATIVE TOOLBAR
   ========================================================= */

body.post-type-archive-product
.shop-container
> .woocommerce-result-count,

body.post-type-archive-product
.shop-container
> .woocommerce-ordering,

body.tax-product_cat
.shop-container
> .woocommerce-result-count,

body.tax-product_cat
.shop-container
> .woocommerce-ordering {

    display:
        none !important;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

body.post-type-archive-product
.products.row,

body.tax-product_cat
.products.row {

    display:
        grid !important;

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

    gap:
        16px;

    margin:
        20px 0 0 !important;
}


body.post-type-archive-product
.products.row > .product-small,

body.tax-product_cat
.products.row > .product-small {

    width:
        auto !important;

    max-width:
        none !important;

    flex-basis:
        auto !important;

    padding:
        0 !important;

    margin:
        0 !important;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

body.post-type-archive-product
.product-small .box,

body.tax-product_cat
.product-small .box {

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        var(--qi-border, #D8E6E9);

    border-radius:
        12px;

    background:
        #ffffff;

    box-shadow:
        0 3px 13px
        rgba(13,47,67,.035);

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}


body.post-type-archive-product
.product-small .box:hover,

body.tax-product_cat
.product-small .box:hover {

    transform:
        translateY(-2px);

    border-color:
        #B9D6D9;

    box-shadow:
        0 10px 28px
        rgba(13,47,67,.075);
}


/* Image */

body.post-type-archive-product
.product-small .box-image,

body.tax-product_cat
.product-small .box-image {

    aspect-ratio:
        1 / 1;

    background:
        var(--qi-surface, #F6FAFB);
}


body.post-type-archive-product
.product-small .box-image img,

body.tax-product_cat
.product-small .box-image img {

    width:
        100%;

    height:
        100%;

    padding:
        17px;

    object-fit:
        contain;
}


/* Text */

body.post-type-archive-product
.product-small .box-text,

body.tax-product_cat
.product-small .box-text {

    padding:
        14px 14px 16px !important;

    text-align:
        left !important;
}


body.post-type-archive-product
.product-small .category,

body.tax-product_cat
.product-small .category {

    margin-bottom:
        5px !important;

    color:
        var(--qi-muted, #6D8189) !important;

    font-size:
        9px !important;

    font-weight:
        550;

    text-transform:
        none !important;
}


body.post-type-archive-product
.product-small .product-title a,

body.tax-product_cat
.product-small .product-title a {

    color:
        var(--qi-text, #173B4A) !important;

    font-size:
        12px !important;

    font-weight:
        750;

    line-height:
        1.5;
}


body.post-type-archive-product
.product-small .product-title a:hover,

body.tax-product_cat
.product-small .product-title a:hover {

    color:
        var(--qi-primary, #0F9693) !important;
}


body.post-type-archive-product
.product-small .price-wrapper,

body.tax-product_cat
.product-small .price-wrapper {

    margin-top:
        7px;
}


body.post-type-archive-product
.product-small .price,

body.tax-product_cat
.product-small .price {

    color:
        var(--qi-dark, #0D2F43) !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;
}


body.post-type-archive-product
.product-small .price .amount,

body.tax-product_cat
.product-small .price .amount {

    color:
        inherit !important;

    font-weight:
        inherit !important;
}


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

@media (max-width: 1099px) and (min-width: 550px) {

    .qi-shop-summary {

        grid-template-columns:
            minmax(0,1fr) 260px;
    }


    body.post-type-archive-product
    .products.row,

    body.tax-product_cat
    .products.row {

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

}


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

@media (max-width: 549px) {

    body.post-type-archive-product
    .shop-container,

    body.tax-product_cat
    .shop-container {

        padding-bottom:
            30px;
    }


    .qi-shop-v2 {

        margin:
            18px 0 20px;
    }


    .qi-shop-breadcrumb {

        margin-bottom:
            11px;

        font-size:
            10px;
    }


    .qi-shop-summary {

        display:
            block;

        padding:
            18px 15px;

        border-radius:
            11px;
    }


    .qi-shop-kicker {

        font-size:
            8px;
    }


    .qi-shop-summary h1 {

        font-size:
            22px;

        line-height:
            1.28;
    }


    .qi-shop-summary-main > p {

        margin-top:
            7px;

        font-size:
            11px;

        line-height:
            1.65;
    }


    .qi-shop-category-nav {

        gap:
            6px;

        margin-top:
            13px;
    }


    .qi-shop-category-link {

        min-height:
            30px;

        padding:
            0 11px;

        font-size:
            9px;
    }


    .qi-shop-assurance {

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

        gap:
            7px;

        margin-top:
            15px;

        padding-top:
            13px;

        border-top:
            1px solid
            var(--qi-border, #D8E6E9);
    }


    .qi-shop-assurance > div {

        min-height:
            32px;

        padding:
            0;

        border:
            0;

        background:
            transparent;

        font-size:
            9px;
    }


    .qi-shop-assurance svg {

        width:
            14px;

        height:
            14px;

        flex-basis:
            14px;
    }


    /*
     * Toolbar directly beneath summary.
     */

    .qi-shop-toolbar {

        min-height:
            55px;

        margin-top:
            5px;
    }


    .qi-shop-count {

        font-size:
            10px;
    }


    .qi-shop-ordering select {

        min-width:
            126px;

        height:
            36px;

        padding-left:
            9px;

        font-size:
            10px;
    }


    /*
     * Normal state = two products per row.
     */

    body.post-type-archive-product
    .products.row,

    body.tax-product_cat
    .products.row {

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

        gap:
            10px;

        margin-top:
            14px !important;
    }


    body.post-type-archive-product
    .product-small .box-image img,

    body.tax-product_cat
    .product-small .box-image img {

        padding:
            10px;
    }


    body.post-type-archive-product
    .product-small .box-text,

    body.tax-product_cat
    .product-small .box-text {

        padding:
            10px 10px 12px !important;
    }


    body.post-type-archive-product
    .product-small .category,

    body.tax-product_cat
    .product-small .category {

        font-size:
            8px !important;
    }


    body.post-type-archive-product
    .product-small .product-title a,

    body.tax-product_cat
    .product-small .product-title a {

        font-size:
            10.5px !important;
    }


    body.post-type-archive-product
    .product-small .price,

    body.tax-product_cat
    .product-small .price {

        font-size:
            12px !important;
    }


    /*
     * SPECIAL CASE:
     * If currently only one product exists,
     * do not leave half the mobile screen empty.
     */

    body.post-type-archive-product
    .products.row
    > .product-small:first-child:last-child,

    body.tax-product_cat
    .products.row
    > .product-small:first-child:last-child {

        grid-column:
            1 / -1;
    }


    body.post-type-archive-product
    .products.row
    > .product-small:first-child:last-child
    .box,

    body.tax-product_cat
    .products.row
    > .product-small:first-child:last-child
    .box {

        display:
            grid;

        grid-template-columns:
            42% 58%;

        align-items:
            stretch;
    }


    body.post-type-archive-product
    .products.row
    > .product-small:first-child:last-child
    .box-image,

    body.tax-product_cat
    .products.row
    > .product-small:first-child:last-child
    .box-image {

        aspect-ratio:
            auto;

        min-height:
            155px;
    }


    body.post-type-archive-product
    .products.row
    > .product-small:first-child:last-child
    .box-text,

    body.tax-product_cat
    .products.row
    > .product-small:first-child:last-child
    .box-text {

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        padding:
            14px !important;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    body.post-type-archive-product
    .products.row,

    body.tax-product_cat
    .products.row {

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

}

/* === QI SHOP V2.1 FINAL POLISH START === */

/* Prevent Chinese product wording from breaking mid-word */
.qi-shop-summary h1 {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* Give headline more usable desktop width */
@media (min-width: 1100px) {

    .qi-shop-summary {
        grid-template-columns:
            minmax(0, 1fr) 280px !important;

        gap:
            24px !important;
    }

    .qi-shop-summary h1 {
        font-size:
            32px !important;
    }

}

/* Keep the complete phrase together on mobile */
@media (max-width: 549px) {

    .qi-shop-summary h1 {
        font-size:
            21px !important;

        line-height:
            1.32 !important;
    }

}

/* === QI SHOP V2.1 FINAL POLISH END === */