/* =========================================================
   Product Card - Custom List Layout
   Image | SKU | Description | Price + Stock | Button
   Desktop only version
   ========================================================= */


/* =========================================================
   WooCommerce list reset
   ========================================================= */

/* Hide sorting block */
.storefront-sorting {
    display: none !important;
}

/* Product list wrapper - exclue related products */
body:not(.single-product) .woocommerce ul.products {
    margin: 0 !important;
    padding: 0 !important;
}

/* One product per row */
body:not(.single-product) .woocommerce ul.products li.product {
    width: 100% !important;
    float: none !important;
    clear: both !important;

    display: block !important;
    box-sizing: border-box !important;

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

    border-bottom: 1px solid #eee;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Remove old theme/grid/list layout effects */
body:not(.single-product) .woocommerce ul.products li.product .woocommerce-LoopProduct-link,
body:not(.single-product) .woocommerce ul.products li.product .product-thumbnail,
body:not(.single-product) .woocommerce ul.products li.product .product-image,
body:not(.single-product) .woocommerce ul.products li.product .image-wrap {
    position: static !important;
    float: none !important;
    z-index: auto !important;
}

/* Neutralize theme floats/positioning inside our card */
.cim-card,
.cim-card * {
    position: static !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Let body children join the main grid directly */
.cim-card__body {
    display: contents !important;
}


/* =========================================================
   Main product card layout
   ========================================================= */

.cim-card {
    width: 100%;
    display: grid !important;

    /*
      Image | SKU | Description | Price/Stock | Button
    */
    grid-template-columns: 150px 190px minmax(320px, 1fr) 350px 190px;

    column-gap: 24px;
    row-gap: 0;

    align-items: center;

    min-height: 105px;
    height: auto !important;
    max-height: none !important;

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

    transform: none !important;
}


/* =========================================================
   Image column
   ========================================================= */

.cim-card__media {
    grid-column: 1;
    grid-row: 1;

    justify-self: center;
    align-self: center;

    width: 140px !important;
    min-width: 140px !important;
    height: 100px !important;
    min-height: 100px !important;

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

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

.cim-card__media img {
    display: block !important;

    width: 130px !important;
    height: 95px !important;

    object-fit: contain !important;

    max-width: 130px !important;
    max-height: 95px !important;

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


/* =========================================================
   SKU / title column
   ========================================================= */

.cim-card__title {
    grid-column: 2;
    grid-row: 1;

    justify-self: start;
    align-self: center;

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

    text-align: left;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cim-card__title a {
    text-decoration: none;
}


/* =========================================================
   Description column
   ========================================================= */

.cim-card__desc {
    grid-column: 3;
    grid-row: 1;

    justify-self: start;
    align-self: center;

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

    text-align: left;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cim-card__desc p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3;
}


/* =========================================================
   Price + stock column
   Price is vertically centered beside the 3 stock rows
   ========================================================= */

.cim-card__pricecol {
    grid-column: 4;
    grid-row: 1;

    justify-self: end;
    align-self: center;

    width: 350px !important;
    max-width: 350px !important;

    display: grid !important;
    grid-template-columns: 115px 225px;
    column-gap: 10px;
    align-items: center;

    text-align: left;

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

    transform: none !important;
}

/* Price on left, middle of stock list */
.cim-card__pricecol .cim-card__price {
    grid-column: 1;
    grid-row: 1;

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

    text-align: right;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

/* Remove old fake price column */
.cim-card__pricecol .cim-card__price::before {
    content: none !important;
    display: none !important;
}

/* Stock block on right */
.cim-card__stockwrap {
    grid-column: 2;
    grid-row: 1;

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

    transform: none !important;
}

/* Branch stock wrapper */
.cim-branch-stock {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px;
    line-height: 1.3;
}

/* Each stock row */
.cim-branch-stock__row {
    display: grid !important;
    grid-template-columns: 145px 72px;
    column-gap: 8px;

    align-items: center;
    white-space: nowrap;

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

/* Branch name */
.cim-branch-stock__row span {
    text-align: right;
    color: #333;
}

/* Stock status */
.cim-branch-stock__row strong {
    text-align: left;
    font-weight: 600;
}

.cim-branch-stock__row.has-stock strong {
    color: #2e7d32 !important;
}

.cim-branch-stock__row.no-stock strong {
    color: #c62828 !important;
}


/* =========================================================
   Old Woo stock fallback
   ========================================================= */

.cim-card__stockwrap .stock {
    margin: 2px 0 0 0 !important;
    padding: 0 !important;

    font-size: 13px;
    line-height: 1.2;
}

.cim-card__stockwrap .stock.in-stock {
    color: #2e7d32 !important;
}

.cim-card__stockwrap .stock.out-of-stock {
    color: #c62828 !important;
}


/* =========================================================
   Button column
   ========================================================= */

.cim-card__actions {
    grid-column: 5;
    grid-row: 1;

    justify-self: end;
    align-self: center;

    width: 190px !important;
    max-width: 190px !important;

    text-align: right;

    display: grid !important;
    grid-auto-flow: row !important;
    justify-items: end !important;
    row-gap: 0 !important;

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

    overflow: visible !important;
    transform: none !important;
}

.cim-card__actions>.button,
.cim-card__actions>a.button,
.cim-card__actions>button,
.cim-card__actions>input[type="submit"] {
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cim-card__actions .button,
.cim-card__actions button,
.cim-card__actions input[type="submit"] {
    width: 190px !important;
    max-width: 190px !important;

    min-height: 44px !important;
    height: 44px !important;

    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;

    margin: 0 !important;
    padding: 0 12px !important;
}


/* =========================================================
   Quantity + button cleanup
   ========================================================= */

.cim-card__actions .quantity {
    margin: 0 !important;
    padding: 0 !important;
}

.cim-card__actions .quantity input.qty {
    width: 64px !important;
    height: 40px !important;

    text-align: center;

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

/* Hide extra WooCommerce added-to-cart link */
.cim-card__actions .added_to_cart,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
    display: none !important;
}

/* Hide Grid/List plugin extra wrapper link if it appears */
.cim-card__actions .gridlist-buttonwrap .added_to_cart {
    display: none !important;
}

/* Grid/list button wrapper cleanup */
.cim-card__actions .gridlist-buttonwrap {
    display: grid !important;
    justify-items: end !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cim-card__actions .gridlist-buttonwrap .button {
    margin: 0 !important;
}

/* Hide second button if gridlist plugin outputs duplicate buttons */
.cim-card__actions .gridlist-buttonwrap .button+.button {
    display: none !important;
}


/* =========================================================
   Remove Feature Image in posts
   ========================================================= */

body.single-post img.wp-post-image,
body.single-post .post-thumbnail {
    display: none !important;
}

/* selling_status = 1: not sellable */
.cim-card__actions.product-not-sellable .button,
.cim-card__actions.product-not-sellable a.button,
.cim-card__actions.product-not-sellable .cim-read-more-button {
    background-color: #eeeeee !important;
    border-color: #eeeeee !important;
    color: #111111 !important;
}

.cim-card__actions.product-not-sellable .button:hover,
.cim-card__actions.product-not-sellable a.button:hover,
.cim-card__actions.product-not-sellable .cim-read-more-button:hover {
    background-color: #dddddd !important;
    border-color: #dddddd !important;
    color: #111111 !important;
}

/* =========================================================
   Product list button colour by customer's branch stock
   ========================================================= */

/* Branch has stock = black Add to cart */
.cim-card__actions.branch-has-stock .button,
.cim-card__actions.branch-has-stock a.button,
.cim-card__actions.branch-has-stock button,
.cim-card__actions.branch-has-stock input[type="submit"],
.cim-card__actions.branch-has-stock .jj-add-to-cart-branch-stock-button {
    background-color: #2f2f2f !important;
    border-color: #2f2f2f !important;
    color: #ffffff !important;
}

/* Branch no stock = orange Backorder */
.cim-card__actions.branch-no-stock .button,
.cim-card__actions.branch-no-stock a.button,
.cim-card__actions.branch-no-stock button,
.cim-card__actions.branch-no-stock input[type="submit"],
.cim-card__actions.branch-no-stock .jj-add-to-backorder-button {
    background-color: #f37429 !important;
    border-color: #f37429 !important;
    color: #ffffff !important;
}

/* Not sellable = grey Read more */
.cim-card__actions.product-not-sellable .button,
.cim-card__actions.product-not-sellable a.button,
.cim-card__actions.product-not-sellable .cim-read-more-button,
.cim-card__actions.product-not-sellable .jj-product-not-sellable-button {
    background-color: #eeeeee !important;
    border-color: #eeeeee !important;
    color: #111111 !important;
}

/* Hover: branch has stock */
.cim-card__actions.branch-has-stock .button:hover,
.cim-card__actions.branch-has-stock a.button:hover,
.cim-card__actions.branch-has-stock button:hover,
.cim-card__actions.branch-has-stock input[type="submit"]:hover,
.cim-card__actions.branch-has-stock .jj-add-to-cart-branch-stock-button:hover {
    background-color: #1f1f1f !important;
    border-color: #1f1f1f !important;
    color: #ffffff !important;
}

/* Hover: branch no stock */
.cim-card__actions.branch-no-stock .button:hover,
.cim-card__actions.branch-no-stock a.button:hover,
.cim-card__actions.branch-no-stock button:hover,
.cim-card__actions.branch-no-stock input[type="submit"]:hover,
.cim-card__actions.branch-no-stock .jj-add-to-backorder-button:hover {
    background-color: #e8661f !important;
    border-color: #e8661f !important;
    color: #ffffff !important;
}

/* Hover: not sellable */
.cim-card__actions.product-not-sellable .button:hover,
.cim-card__actions.product-not-sellable a.button:hover,
.cim-card__actions.product-not-sellable .cim-read-more-button:hover,
.cim-card__actions.product-not-sellable .jj-product-not-sellable-button:hover {
    background-color: #dddddd !important;
    border-color: #dddddd !important;
    color: #111111 !important;
}


/* =========================================================
   Product List Desktop - Reduce Row Gap
   ========================================================= */
@media screen and (min-width: 801px) {

    body:not(.single-product) .site-main ul.products,
    body:not(.single-product) .woocommerce ul.products {
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.single-product) .site-main ul.products.columns-5 li.product,
    body:not(.single-product) .site-main ul.products li.product,
    body:not(.single-product) .woocommerce ul.products li.product {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        display: block !important;

        margin: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;

        min-height: 105px !important;
        height: auto !important;
        max-height: none !important;

        border-bottom: 1px solid #eee !important;
    }

    body:not(.single-product) .cim-card {
        min-height: 105px !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        align-items: center !important;
    }

    body:not(.single-product) .cim-card__media {
        height: 95px !important;
        min-height: 95px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.single-product) .cim-card__media img {
        width: 120px !important;
        height: 88px !important;
        max-width: 120px !important;
        max-height: 88px !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.single-product) .cim-card__title,
    body:not(.single-product) .cim-card__desc,
    body:not(.single-product) .cim-card__pricecol,
    body:not(.single-product) .cim-card__actions {
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body:not(.single-product) .cim-card__actions,
    body:not(.single-product) .cim-card__actions form,
    body:not(.single-product) .cim-card__actions .cart,
    body:not(.single-product) .cim-card__actions .quantity,
    body:not(.single-product) .cim-card__actions .button {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   Single Product - Related Products Desktop Fix
   ========================================================= */
@media screen and (min-width: 801px) {

    body.single-product .related.products ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 40px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-top: none !important;
    }

    body.single-product .related.products ul.products::before,
    body.single-product .related.products ul.products::after {
        display: none !important;
        content: none !important;
    }

    body.single-product .related.products ul.products li.product,
    body.single-product .related.products ul.products li.product.first,
    body.single-product .related.products ul.products li.product.last {
        width: auto !important;
        float: none !important;
        clear: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        text-align: center !important;
    }

    body.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link {
        display: block !important;
        text-align: center !important;
    }

    body.single-product .related.products ul.products li.product img {
        width: 220px !important;
        height: 220px !important;
        max-width: 220px !important;
        max-height: 220px !important;
        object-fit: contain !important;
        margin: 0 auto 15px auto !important;
        display: block !important;
    }

    body.single-product .related.products .woocommerce-loop-product__title {
        text-align: center !important;
        margin: 0 0 8px 0 !important;
    }

    body.single-product .related.products .price {
        display: block !important;
        text-align: center !important;
        margin: 0 0 14px 0 !important;
    }

    body.single-product .related.products form.cart {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    body.single-product .related.products form.cart .quantity {
        display: block !important;
        width: 70px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.single-product .related.products form.cart .quantity input.qty {
        width: 70px !important;
        height: 44px !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.single-product .related.products form.cart .button,
    body.single-product .related.products form.cart button,
    body.single-product .related.products form.cart input[type="submit"] {
        width: auto !important;
        min-width: 120px !important;
        height: 44px !important;
        line-height: 44px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}