/*
 * Phone layout fixes shared by every storefront theme (no theme, Velo,
 * CarParts, Accessories). Plain CSS so no Encore build is needed.
 */
@media (max-width: 767.98px) {

    /* ---- Checkout -------------------------------------------------------
       Sylius stacks the steps vertically below 576px and lets "Back to store"
       keep its own width at the start of the row, so the page read as hugging
       one edge. Steps become a centred row, titles are centred and both
       actions span the width. */
    body[data-route^="sylius_shop_checkout"] .steps {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .35rem 0;
        text-align: center;
    }

    body[data-route^="sylius_shop_checkout"] .steps .steps-item:not(:last-child)::after {
        content: '›';
        padding: 0 .75rem;
        color: var(--bs-gray-500, #adb5bd);
    }

    [dir="rtl"] body[data-route^="sylius_shop_checkout"] .steps .steps-item:not(:last-child)::after,
    body.rtl[data-route^="sylius_shop_checkout"] .steps .steps-item:not(:last-child)::after {
        content: '‹';
    }

    body[data-route^="sylius_shop_checkout"] .h2.mb-4,
    body[data-route^="sylius_shop_checkout"] h1 {
        text-align: center;
    }

    body[data-route^="sylius_shop_checkout"] form .d-flex.justify-content-between > .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* ---- Cart -----------------------------------------------------------
       The items table was a sideways-scrolling six-column table. Each row
       becomes a card: product on top, remove button in the corner, then the
       other columns as label/value lines (labels copied from the table head
       by shop-mobile.js). */
    body[data-route="sylius_shop_cart_summary"] .table-responsive {
        overflow: visible;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table,
    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody,
    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr,
    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > thead {
        display: none;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr {
        position: relative;
        padding: 1rem 0;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr > td {
        border: 0;
        padding: .3rem 0;
        background: transparent;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr > td:first-child {
        position: absolute;
        top: .75rem;
        inset-inline-end: 0;
        width: auto;
        padding: 0;
        z-index: 1;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr > td:nth-child(2) {
        padding-inline-end: 2.5rem;
        padding-bottom: .6rem;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr > td:nth-child(n+3) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: end;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr > td[data-label]:nth-child(n+3)::before {
        content: attr(data-label);
        color: var(--bs-secondary-color, #6c757d);
        font-size: .875rem;
        text-align: start;
    }

    /* A column with nothing to say for this item (e.g. "Subscription" on an
       ordinary product, which only shows a cross) is left out. */
    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr > td[data-empty] {
        display: none;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive > table > tbody > tr > td:last-child {
        font-weight: 600;
    }

    body[data-route="sylius_shop_cart_summary"] .table-responsive input[type="number"] {
        max-width: 6rem;
    }

    body[data-route="sylius_shop_cart_summary"] h1,
    body[data-route="sylius_shop_cart_summary"] .h1 {
        text-align: center;
    }
}