/*
 * The cart page (functions/webshop/winkelwagentje): the page header, the cart
 * lines, the order summary, the way back to the shop, and the cross-sell.
 *
 * Below 1024px one column, in that order: the summary and its action directly
 * after the lines, the cross-sell last - never between the lines and the
 * action. From 1024px the lines take two thirds and the summary the rest,
 * beside them and staying in view (sticky) while the lines scroll; the
 * cross-sell follows the lines in their column.
 *
 * The sticky bar (below 1024px): the total and the action, compact, at the
 * foot of the screen - shown by sticky-action-bar.js only while the summary's own
 * action is out of view, so the two never show at once. Rendered only when
 * the order may continue. Decision 22.
 */

.cart-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--shop-rhythm-subsection);
    padding-block: var(--shop-rhythm-heading) var(--shop-rhythm-section);
}

.cart-page__lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-page__continue {
    display: inline-flex;
    align-items: center;
    gap: var(--shop-space-1);
    justify-self: start;
    min-height: var(--shop-tap);
    color: var(--shop-accent);
    font-weight: var(--shop-weight-semibold);
    text-decoration: none;
}

.cart-page__continue:hover,
.cart-page__continue:focus {
    color: var(--shop-accent-strong);
    text-decoration: underline;
}

.cart-page__continue svg {
    width: 18px;
    height: 18px;
}

/* Cross-sell ----------------------------------------------------------------
   Detailed product cards without their description (the Accessoires card),
   in a row that scrolls sideways on a phone and tablet and a grid from
   1024px. */
.cart-page__cross-sell {
    display: grid;
    gap: var(--shop-space-4);
    min-width: 0;
}

/* combined.css sets h2 in its own size and weight; answered here. */
.cart-page__cross-sell-title {
    margin: 0;
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-tight);
}

/* Empty cart ------------------------------------------------------------------
   The message and the way to the shop, then the cross-sell below it. */
.cart-page__empty {
    display: grid;
    justify-items: start;
    gap: var(--shop-space-4);
    padding: var(--shop-space-6);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-panel);
    background: var(--shop-surface-subtle);
}

.cart-page__empty-title {
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-bold);
}

.cart-page__empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--shop-space-3) var(--shop-space-5);
}

/* Sticky bar ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .cart-page {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
        gap: var(--shop-rhythm-subsection) var(--shop-space-10);
        align-items: start;
    }

    .cart-page > .page-header {
        grid-column: 1 / -1;
    }

    .cart-page > :not(.page-header, .order-summary) {
        grid-column: 1;
    }

    .cart-page > .order-summary {
        grid-column: 2;
        grid-row: 2 / span 3;
    }

    /* An empty cart has no summary to sit beside: one column, the
       cross-sell across the container. */
    .cart-page--empty {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The summary stays in view only where it fits: a summary with its notes can
   be taller than a short screen, and a sticky box taller than the screen cuts
   its own end off. */
@media (min-width: 1024px) and (min-height: 760px) {
    .cart-page > .order-summary {
        position: sticky;
        top: var(--shop-space-4);
    }

    /* The rates open over the page (shipping-info.js), so the summary never
       grows past the screen. Without JavaScript they open in place, taller than
       any screen: then, and only then, the summary scrolls with the page. */
    html:not(.has-shipping-dialog) .cart-page > .order-summary:has(.shipping-info[open]) {
        position: static;
    }
}