/*
 * Mobile cart and checkout corrections.
 * Scope is intentionally limited to these two WooCommerce journeys; the
 * incumbent shop design and desktop layouts remain untouched.
 */
@media (max-width: 767px) {
	body.ofs-shop-v2.woocommerce-cart .site-main .entry-content,
	body.ofs-shop-v2.woocommerce-checkout .site-main .entry-content {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		margin-inline: 0 !important;
		padding: 16px 12px;
	}

	body.ofs-shop-v2.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
	body.ofs-shop-v2.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide,
	body.ofs-shop-v2.woocommerce-cart .wc-block-components-sidebar-layout,
	body.ofs-shop-v2.woocommerce-checkout .wc-block-components-sidebar-layout {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-inline: 0 !important;
	}

	body.ofs-shop-v2.woocommerce-cart .wc-block-components-sidebar-layout,
	body.ofs-shop-v2.woocommerce-checkout .wc-block-components-sidebar-layout {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px;
	}

	body.ofs-shop-v2.woocommerce-cart .wc-block-components-main,
	body.ofs-shop-v2.woocommerce-cart .wc-block-components-sidebar,
	body.ofs-shop-v2.woocommerce-checkout .wc-block-components-main,
	body.ofs-shop-v2.woocommerce-checkout .wc-block-components-sidebar {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-inline: 0;
	}

        /* The live WooCommerce cart uses the classic responsive table markup. */
        body.woocommerce-cart .woocommerce-cart-form__contents {
                box-sizing: border-box;
                display: block;
                width: 100%;
                max-width: 100%;
                border-collapse: collapse;
        }

        body.woocommerce-cart .woocommerce-cart-form__contents thead {
                display: none;
        }

        body.woocommerce-cart .woocommerce-cart-form__contents tbody {
                display: block;
                width: 100%;
                max-width: 100%;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item,
        body.woocommerce-cart .woocommerce-cart-form__contents tr.cart_item {
                box-sizing: border-box;
                display: grid !important;
                grid-template-columns: 64px minmax(0, 1fr);
                grid-template-areas:
                        "image name"
                        "image price"
                        "image quantity"
                        "image subtotal"
                        "remove remove";
                align-items: start;
                column-gap: 12px;
                row-gap: 8px;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                padding-block: 14px;
                border-bottom: 1px solid #d7e2ef;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > td {
                box-sizing: border-box;
                position: static !important;
                display: block !important;
                float: none !important;
                width: auto !important;
                max-width: 100%;
                min-width: 0;
                padding: 4px 0 !important;
                border: 0 !important;
                text-align: left !important;
                vertical-align: top;
                overflow-wrap: anywhere;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-thumbnail {
                grid-area: image;
                width: 64px !important;
                padding-inline: 0 !important;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-thumbnail img {
                display: block;
                width: 64px;
                max-width: 100%;
                height: auto;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-name {
                grid-area: name;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-price {
                grid-area: price;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-quantity {
                grid-area: quantity;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-subtotal {
                grid-area: subtotal;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-remove {
                grid-area: remove;
                justify-self: end;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > td[data-title]::before {
                display: block;
                float: none;
                margin: 0 0 3px;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-thumbnail::before,
        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-name::before,
        body.woocommerce-cart .woocommerce-cart-form__cart-item > .product-remove::before {
                display: none !important;
        }

        body.woocommerce-cart .woocommerce-cart-form__cart-item .product-name a,
        body.woocommerce-cart .woocommerce-cart-form__cart-item .product-price .amount,
        body.woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal .amount,
        body.woocommerce-cart .woocommerce-cart-form__cart-item .variation,
        body.woocommerce-cart .woocommerce-cart-form__cart-item dd,
        body.woocommerce-cart .woocommerce-cart-form__cart-item dt {
                box-sizing: border-box;
                max-width: 100%;
                min-width: 0;
                white-space: normal;
                overflow-wrap: anywhere;
        }

        body.woocommerce-cart .woocommerce-cart-form__contents tr:not(.cart_item) {
                display: block;
                width: 100%;
                max-width: 100%;
        }

        body.woocommerce-cart .woocommerce-cart-form__contents td.actions {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                width: 100%;
                max-width: 100%;
        }

        /* Keep each cart line inside the viewport and give its text usable width. */
	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-items {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		table-layout: fixed !important;
	}

	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-items__row {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		display: grid !important;
		grid-template-columns: 64px minmax(0, 1fr) !important;
		grid-template-areas:
			"image product"
			"image total";
		grid-template-rows: auto auto;
		align-items: start;
		column-gap: 12px;
		row-gap: 10px;
		padding-block: 14px;
	}

	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-items__row > .wc-block-cart-item__image,
	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-items__row > .wc-block-cart-item__product,
	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-items__row > .wc-block-cart-item__total {
		box-sizing: border-box;
		position: static !important;
		float: none !important;
		display: block !important;
		min-width: 0;
		max-width: 100%;
	}

	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-items__row > .wc-block-cart-item__image {
		grid-area: image;
		width: 64px;
	}

	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-items__row > .wc-block-cart-item__product {
		grid-area: product;
		width: 100%;
		overflow-wrap: anywhere;
	}

	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-items__row > .wc-block-cart-item__total {
		grid-area: total;
		width: 100%;
		justify-self: start;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-item__product-name,
	body.ofs-shop-v2.woocommerce-cart .wc-block-components-product-name,
	body.ofs-shop-v2.woocommerce-cart .wc-block-cart-item__prices,
	body.ofs-shop-v2.woocommerce-cart .wc-block-components-product-price,
	body.ofs-shop-v2.woocommerce-cart .wc-block-components-product-metadata {
		box-sizing: border-box;
		max-width: 100%;
		min-width: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* Prevent long product names from collapsing the checkout summary column. */
	body.woocommerce-checkout .wc-block-components-order-summary-item {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		align-items: start;
		column-gap: 12px;
		row-gap: 8px;
	}

	body.woocommerce-checkout .wc-block-components-order-summary-item__image {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 48px;
		max-width: 100%;
	}

	body.woocommerce-checkout .wc-block-components-order-summary-item__description {
		grid-column: 2;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
		grid-column: 2;
		min-width: 0;
		margin: 0;
		text-align: left;
	}

	body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
	body.woocommerce-cart .wc-block-cart__submit-button {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	/* Floating contact widgets obscure the order summary on narrow screens. */
	body.woocommerce-cart .of2-whatsapp,
	body.woocommerce-checkout .of2-whatsapp,
	body.woocommerce-cart .ofs-shell-whatsapp,
	body.woocommerce-checkout .ofs-shell-whatsapp {
		display: none !important;
	}

	/* Classic WooCommerce checkout remains usable if Blocks are unavailable. */
	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout #order_review,
	body.woocommerce-checkout .woocommerce-checkout-review-order {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		float: none;
	}

	body.woocommerce-checkout .shop_table {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
	}

	body.woocommerce-checkout .shop_table th,
	body.woocommerce-checkout .shop_table td {
		overflow-wrap: anywhere;
	}
}