/**
 * woocommerce/cart block styles.
 *
 * The main column (cart items) follows madrasthemes/emart's cart.css: one root
 * selector wins over WooCommerce's own cart stylesheet on specificity alone,
 *
 *   .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main
 *   table.wc-block-cart-items
 *
 * and at the wide cart (WooCommerce's `@container (min-width: 700px)`) the
 * header and every item row share one grid -- remove, image, name, price,
 * quantity, total -- with Price and Quantity labels in the header.
 *
 * Sections:
 *   1. Cart items (main column)
 *   2. Order summary (sidebar)
 *   3. Page layout
 *   4. Wide cart items (container query)
 */

.wp-block-woocommerce-cart .wc-block-cart {

    /* --------------------------------------------------------------------------
	 * 1. Cart items (main column)
	 *
	 * The main column is the container the line items measure themselves
	 * against, so the six columns only switch on when the table itself is wide
	 * enough -- not when the whole cart (main column plus sidebar) is.
	 * ----------------------------------------------------------------------- */

    .wc-block-components-main {
        container-type: inline-size;
    }

    .wc-block-components-main table.wc-block-cart-items {
        --sportiq-cart-col-remove: 42px;
        --sportiq-cart-col-image: 100px;
        --sportiq-cart-col-price: 110px;
        --sportiq-cart-col-quantity: 130px;
        --sportiq-cart-col-subtotal: 100px;
        --sportiq-cart-columns:
            var(--sportiq-cart-col-remove) var(--sportiq-cart-col-image) minmax(0, 1fr) var(--sportiq-cart-col-price) var(--sportiq-cart-col-quantity) var(--sportiq-cart-col-subtotal);
        --sportiq-cart-gap: 15px;
        --sportiq-cart-padding-inline: 8px 30px;

        /* Separate borders so the header row can show its rounded corners. */
        border-collapse: separate;
        border-spacing: 0;
        border-bottom-color: var(--wp--preset--color--gray-100);

        thead th,
        .wc-block-cart-items__header th {
            width: auto;
            padding: 0;
            border: 0;
            font-size: 15px;
            font-weight: 500;
            line-height: 26px;
            color: var(--wp--preset--color--contrast);
            text-align: start;
            text-transform: uppercase;
            white-space: nowrap;
        }

        /* WooCommerce hides "Details" with a span; keep the cell, drop the text. */
        .wc-block-cart-items__header .wc-block-cart-items__header-product {
            visibility: visible;

            span {
                display: none;
            }
        }

        tbody tr td {
            padding: 0;
            border: 0;
        }

        .wc-block-cart-items__row {
            padding-block: 30px;
            border-bottom: 1px solid var(--wp--preset--color--gray-100);
        }

        .wc-block-cart-items__row:last-child {
            border-bottom: 0;
        }

        .wc-block-cart-item__image a {
            display: flex;
        }

        .wc-block-cart-item__image img {
            width: var(--sportiq-cart-col-image);
            height: var(--sportiq-cart-col-image);
            max-width: 100%;
            object-fit: cover;
            aspect-ratio: 1;
        }

        .wc-block-cart-item__wrap {
            gap: 6px;
        }

        .wc-block-components-product-name {
            display: block;
            margin-bottom: 0;
            font-size: 15px;
            font-weight: 400;
            line-height: 26px;
            color: var(--wp--preset--color--contrast);
        }

        .wc-block-components-product-metadata {
            margin-bottom: 0;
        }

        /* Only the short description is hidden; variation attributes stay. */
        .wc-block-components-product-metadata__description {
            display: none;
        }

        /* Its loading-skeleton line goes with it. */
        .wc-block-cart-item__wrap>.wc-block-components-skeleton__element+.wc-block-components-skeleton__element {
            display: none;
        }

        /* Sale price stacks (old over new) so the price column stays narrow. */
        .wc-block-cart-item__prices .price.wc-block-components-product-price {
            margin-bottom: 0 !important;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            font-size: 15px;
            font-weight: 400;
            color: var(--wp--preset--color--contrast);

            del {
                font-size: 13px;
                line-height: 18px;
                color: var(--wp--preset--color--gray-200);
            }
        }

        .wc-block-cart-item__total {
            display: flex;
            justify-content: flex-end;
            font-size: 15px;
            line-height: 1.8;
        }

        .wc-block-cart-item__total .price.wc-block-components-product-price {
            margin-bottom: 0 !important;
            font-size: 15px;
            font-weight: 400;
            color: var(--wp--preset--color--contrast);
        }

        .wc-block-cart-item__total-price-and-sale-badge-wrapper {
            position: relative;

            .wc-block-components-product-badge {
                float: right;
            }
        }

        /* Quantity pill with round buttons; order matches the single product page: + 1 −. */
        .wc-block-components-quantity-selector {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0px 10px;
            border: 1px solid var(--wp--preset--color--gray-100);
            border-radius: 120px;

            input.wc-block-components-quantity-selector__input {
                order: 0;
                min-width: 37px;
                padding: 0;
                border-width: 0;
                border-radius: 0;
                background-color: transparent !important;
                font-size: 15px;
                font-weight: 400;
                line-height: 26px;
                color: var(--wp--preset--color--contrast);
            }

            .wc-block-components-quantity-selector__button {
                flex-shrink: 0;
                width: 30px;
                height: 30px;
                min-width: 0;
                margin: 0;
                padding: 0;
                border-width: 0;
                border-radius: 50%;
                background: rgba(32, 32, 37, 0.05);
                color: var(--wp--preset--color--gray-200);
                font-size: 0;
                opacity: 1;
                cursor: pointer;
                transition: background-color 0.2s ease;

                &::before {
                    content: "";
                    display: block;
                    margin: auto;
                    background-color: currentcolor;
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: contain;
                }
            }

            .wc-block-components-quantity-selector__button--plus {
                order: -1;

                &::before {
                    width: 7px;
                    height: 7px;
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M0 3.795V2.73H2.865V0H3.99V2.73H6.855V3.795H3.99V6.54H2.865V3.795H0Z'/%3E%3C/svg%3E");
                }
            }

            .wc-block-components-quantity-selector__button--minus {
                order: 1;

                &::before {
                    width: 6px;
                    height: 2px;
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2' viewBox='0 0 6 2'%3E%3Cpath d='M0 1.065V0H5.94V1.065H0Z'/%3E%3C/svg%3E");
                }
            }

            .wc-block-components-quantity-selector__button:disabled {
                opacity: 0.5;
                cursor: default;
            }

            .wc-block-components-quantity-selector__button:hover:not(:disabled),
            .wc-block-components-quantity-selector__button:focus-visible:not(:disabled) {
                background: rgba(32, 32, 37, 0.15);
            }
        }

        /* Remove: small bordered circle with a cross. */
        .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            min-width: 20px;
            padding: 0;
            border: 1px solid #ececec;
            border-radius: 120px;
            background: transparent;

            &::after {
                content: "";
                display: inline-block;
                width: 6px;
                height: 6px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Cpath d='M0 0.550454L0.396248 0.1612L5.94371 5.61075L5.54747 6L0 0.550454Z' fill='%23202025'/%3E%3Cpath d='M5.60375 0L6 0.389253L0.452534 5.8388L0.0562868 5.44955L5.60375 0Z' fill='%23202025'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
            }

            svg {
                display: none;
            }
        }
    }

    /* --------------------------------------------------------------------------
	 * 2. Order summary (sidebar) -- unchanged.
	 * ----------------------------------------------------------------------- */

    .wc-block-cart__sidebar {
        .wp-block-woocommerce-cart-order-summary-block {
            border: 0;
        }

        .wc-block-components-totals-coupon__form {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 0;
            width: 100%;

            input[type="text"],
            button[type="submit"] {
                height: 45px;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .wc-block-components-text-input {
                label {
                    transform: translateY(-62%);
                    font-size: 15px;
                    line-height: 26px;
                }

                &.is-active {
                    label {
                        transform: translateY(-19px) scale(0.875);
                    }

                    input {
                        padding-left: 20px;
                        font-size: 14px;
                    }
                }

                input:focus {
                    box-shadow: none;
                }
            }
        }

        .wc-block-components-totals-item {
            gap: 0;
        }

        .wc-block-components-totals-footer-item {

            .wc-block-components-totals-item__value,
            .wc-block-components-totals-item__label {
                font-size: 17px;
                font-weight: 500;
                line-height: 32px;
            }
        }
    }
}

/* --------------------------------------------------------------------------
 * 3. Page layout -- unchanged.
 * ----------------------------------------------------------------------- */

@media (width >=64rem) {
    .wc-block-components-sidebar-layout {
        display: grid;
        grid-template-columns: 1fr minmax(min(400px, 35%), 400px);
        column-gap: 76px;

        .wc-block-components-main {
            width: 100%;
            padding: 0;
        }
    }

    .wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
        margin-bottom: 0;
        border-bottom: 0;
        font-size: 15px;
        font-weight: 400;
        line-height: 26px;
    }

    .wc-block-cart .wc-block-cart__totals-title {
        font-size: 18px;
        text-align: left;
        text-transform: uppercase;
        line-height: 24px;
        font-weight: 500;
        padding: 0 0 9px 0;
    }

    .wc-block-components-totals-wrapper {
        padding: 13px 0;
        border-color: var(--wp--preset--color--gray-100);

        &.wp-block-woocommerce-cart-order-summary-coupon-form-block {
            border: none;
        }
    }

    .wp-block-woocommerce-cart-order-summary-totals-block {
        padding: 0;
        border: none;

        .wc-block-components-totals-wrapper {
            padding: 13px 0;
            border-top: 1px solid var(--wp--preset--color--gray-100);
        }
    }

    .wc-block-components-sidebar {
        width: 100%;
        padding: 34px 40px 40px;
        border-radius: 4px;
        border: 1px solid var(--wp--preset--color--gray-100);
        align-self: flex-start;

        .wc-block-cart__submit {
            margin-top: 10px;
            margin-bottom: 0;
        }
    }
}

/* --------------------------------------------------------------------------
 * 4a. Narrow cart items
 *
 * Below WooCommerce's 700px switch-over the row is WooCommerce's own grid:
 * fixed tracks (image, 132px) plus implicit ones for the product overflow and
 * the total, which cannot shrink, so on a phone the row ran past the
 * container. Three tracks that fit the width instead: image, product
 * (shrinks), total.
 * ----------------------------------------------------------------------- */

@container (max-width: 699.98px) {

    .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items {

        .wc-block-cart-items__row {
            grid-template-columns: 50px minmax(0, 1fr) auto;
        }

        .wc-block-cart-items__row .wc-block-cart-item__product {
            grid-column: 2 / 3;
        }

        .wc-block-cart-items__row .wc-block-cart-item__total {
            grid-column: 3;
        }

        /* Square thumbnail that fills its track (the base 100px height would crop it to a strip). */
        .wc-block-cart-items__row .wc-block-cart-item__image img {
            width: 100%;
            height: auto;
            aspect-ratio: 1;
        }
    }
}

/* Tablet-width cart: room for WooCommerce's 80px thumbnail. */
@container (min-width: 480px) and (max-width: 699.98px) {

    .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__row {
        grid-template-columns: 80px minmax(0, 1fr) auto;
    }
}

/* --------------------------------------------------------------------------
 * 4. Wide cart items
 *
 * WooCommerce switches its cart table on at `@container (min-width: 700px)`;
 * the six-column grid turns on at the same width, measured against the main
 * column (section 1). Below it WooCommerce's narrow layout is kept.
 * ----------------------------------------------------------------------- */

@container (min-width: 700px) {

    .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items {

        thead,
        tbody {
            display: block;
        }

        .wc-block-cart-items__header,
        .wc-block-cart-items__row {
            display: grid;
            grid-template-columns: var(--sportiq-cart-columns);
            align-items: center;
            column-gap: var(--sportiq-cart-gap);
            padding-inline: var(--sportiq-cart-padding-inline);
        }

        .wc-block-cart-items__header {
            min-height: 54px;
            border-radius: 4px;
            background-color: rgba(32, 32, 37, 0.05);
        }

        /*
		 * WooCommerce's header has a visible "Product", a hidden "Details" and a
		 * visible "Total". "Product" spans the remove, image and name columns;
		 * the "Details" cell carries the Price and Quantity labels. The label text
		 * comes from sportiq_cart_label_styles() so it can be translated.
		 */
        .wc-block-cart-items__header th.wc-block-cart-items__header-image {
            grid-column: 1 / 4;
            padding-inline-start: calc(var(--sportiq-cart-col-remove) + var(--sportiq-cart-gap));
        }

        .wc-block-cart-items__header th.wc-block-cart-items__header-product {
            display: grid;
            grid-column: 4 / 6;
            grid-template-columns: var(--sportiq-cart-col-price) var(--sportiq-cart-col-quantity);
            column-gap: var(--sportiq-cart-gap);

            &::before {
                content: var(--sportiq-cart-label-price, "Price");
            }

            &::after {
                content: var(--sportiq-cart-label-quantity, "Quantity");
                text-align: center;
            }
        }

        .wc-block-cart-items__header th.wc-block-cart-items__header-total {
            grid-column: 6;
            text-align: end;
        }

        /* Flatten the product cell so name, price and quantity become columns. */
        .wc-block-cart-item__product,
        .wc-block-cart-item__wrap,
        .wc-block-cart-item__quantity {
            display: contents;
        }

        /* Anything else WooCommerce adds to the cell stacks under the name. */
        .wc-block-cart-item__wrap>* {
            grid-column: 3;
        }

        .wc-block-cart-item__remove-link,
        .wc-block-cart-item__image,
        .wc-block-cart-item__prices,
        .wc-block-components-quantity-selector,
        .wc-block-cart-item__total {
            grid-row: 1 / -1;
        }

        .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
            grid-column: 1;
        }

        .wc-block-cart-item__image {
            grid-column: 2;
        }

        .wc-block-components-product-name {
            grid-column: 3;
            grid-row: 1;
        }

        .wc-block-cart-item__prices {
            grid-column: 4;
        }

        .wc-block-components-quantity-selector {
            grid-column: 5;
        }

        .wc-block-cart-item__total {
            grid-column: 6;
            justify-content: flex-end;
        }

        /* Variation data opens a second grid row under the name. */
        .wc-block-cart-items__row:has(.wc-block-components-product-metadata > *:not(.wc-block-components-product-metadata__description)) {
            grid-template-rows: 1fr 1fr;

            .wc-block-components-product-name {
                align-self: end;
            }

            .wc-block-components-product-metadata {
                align-self: start;
            }
        }
    }
}