/* =========================================================
   Product Card Mobile CSS
   File: productCard-mobile.css
   ========================================================= */

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

    html,
    body {
        overflow-x: hidden !important;
    }

    body:not(.single-product) .woocommerce ul.products {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #e5e5e5;
    }

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

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

        border-bottom: 1px solid #e5e5e5;

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

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

        display: grid !important;

        grid-template-columns: 95px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto !important;

        column-gap: 10px !important;
        row-gap: 8px !important;

        align-items: start !important;

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

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

        transform: none !important;
    }

    .cim-card__body {
        display: contents !important;
    }

    /* Image: row 1 left */
    .cim-card__media {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 90px !important;
        min-width: 90px !important;
        height: 90px !important;
        min-height: 90px !important;

        justify-self: start !important;
        align-self: start !important;

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

    .cim-card__media img {
        width: 88px !important;
        height: 88px !important;
        max-width: 88px !important;
        max-height: 88px !important;
        object-fit: contain !important;

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

    /* SKU/title: row 1 right */
    .cim-card__title {
        grid-column: 2 !important;
        grid-row: 1 !important;

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

        width: 100% !important;
        max-width: 100% !important;

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

        text-align: left !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

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

    /* Description: row 2 full width */
    .cim-card__desc {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: 100% !important;

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

        text-align: left !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

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

    /* Price + stock: row 3 full width */
    .cim-card__pricecol {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;
        grid-template-columns: 95px minmax(0, 1fr) !important;
        column-gap: 8px !important;
        align-items: center !important;

        justify-self: stretch !important;
        align-self: start !important;

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

        text-align: left !important;

        transform: none !important;
    }

    .cim-card__pricecol .cim-card__price {
        grid-column: 1 !important;
        grid-row: 1 !important;

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

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

    .cim-card__pricecol .cim-card__price::before {
        content: none !important;
        display: none !important;
    }

    .cim-card__stockwrap {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

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

        transform: none !important;
    }

    .cim-branch-stock {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .cim-branch-stock__row {
        display: grid !important;
        grid-template-columns: 130px 70px !important;
        column-gap: 6px !important;

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

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

    .cim-branch-stock__row span {
        text-align: right !important;
        color: #333 !important;
    }

    .cim-branch-stock__row strong {
        text-align: left !important;
        font-weight: 600 !important;
    }

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

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

    /* Button: row 4 full width */
    .cim-card__actions {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;

        width: 100% !important;
        max-width: 100% !important;

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

        justify-self: stretch !important;
        align-self: start !important;

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

        text-align: center !important;

        transform: none !important;
    }

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

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

        text-align: center !important;

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

    .cim-card__actions .button,
    .cim-card__actions button,
    .cim-card__actions input[type="submit"] {
        width: 100% !important;
        max-width: 100% !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;
    }

    .cim-card__actions .added_to_cart,
    .cim-card__actions .gridlist-buttonwrap .button+.button {
        display: none !important;
    }


    /* =========================================================
    Single Product - Related Products Mobile
    Force 3 products per row
    ========================================================= */

    .single-product .related.products {
        margin-top: 20px !important;
    }

    .single-product .related.products h2 {
        font-size: 22px !important;
        margin: 0 0 14px 0 !important;
    }

    .single-product .related.products ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px 8px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        border-top: none !important;
    }

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

    .single-product .related.products ul.products li.product,
    .single-product .related.products ul.products li.product.first,
    .single-product .related.products ul.products li.product.last {
        width: auto !important;
        max-width: none !important;

        float: none !important;
        clear: none !important;

        display: block !important;

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

        border-bottom: none !important;
        text-align: center !important;
    }

    .single-product .related.products ul.products li.product:nth-child(2n),
    .single-product .related.products ul.products li.product:nth-child(2n+1),
    .single-product .related.products ul.products li.product:nth-child(3n),
    .single-product .related.products ul.products li.product:nth-child(3n+1) {
        clear: none !important;
        float: none !important;
        margin-right: 0 !important;
    }

    .single-product .related.products ul.products li.product img {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;

        object-fit: contain !important;

        margin: 0 auto 6px auto !important;
        padding: 0 !important;
    }

    .single-product .related.products .woocommerce-loop-product__title {
        font-size: 11px !important;
        line-height: 1.2 !important;

        min-height: 28px !important;

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

        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    .single-product .related.products .price {
        display: block !important;

        font-size: 11px !important;
        line-height: 1.2 !important;

        margin: 0 0 8px 0 !important;

        text-align: center !important;
    }

    .single-product .related.products .quantity {
        display: none !important;
    }

    .single-product .related.products .button,
    .single-product .related.products button,
    .single-product .related.products input[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;

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

        font-size: 10px !important;
        line-height: 34px !important;

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

        text-align: center !important;
        white-space: nowrap !important;
    }
}

/*
*/