/*
 * Cart line (Tts\Ui\Cart\CartLine): the product, its quantity, its total and
 * its removal. On a phone the image and the product side by side, then the
 * quantity and the total on one line, then "remove"; from 640px the quantity
 * and the total sit in columns of their own, level with the name. Removal is
 * a quiet text button under the product details, away from the quantity
 * control, so neither is hit for the other. Decision 22.
 */

.cart-line {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    /* The quantity and total run under the image too: beside it, at 320px,
       the control and the total do not fit side by side. */
    grid-template-areas:
        "image details details"
        "quantity quantity total"
        "remove remove remove"
        "notice notice notice";
    gap: var(--shop-space-3) var(--shop-space-4);
    padding-block: var(--shop-space-5);
    border-block-end: 1px solid var(--shop-border);
}

.cart-line:first-child {
    border-block-start: 1px solid var(--shop-border);
}

.cart-line__image {
    grid-area: image;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--shop-radius-sm);
    background: var(--shop-surface-subtle);
    object-fit: cover;
}

.cart-line__details {
    display: grid;
    grid-area: details;
    align-content: start;
    gap: 2px;
    min-width: 0;
}

/* combined.css sets h2 in its own size and weight; answered here. */
.cart-line__name {
    margin: 0 0 var(--shop-space-1);
    color: var(--shop-ink);
    font-size: var(--shop-text-base);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-snug);
    overflow-wrap: anywhere;
}

.cart-line__name a,
.cart-line__name a:hover,
.cart-line__name a:focus {
    color: inherit;
    text-decoration: none;
}

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

.cart-line__meta,
.cart-line__unit-price {
    color: var(--shop-text);
    font-size: var(--shop-text-sm);
    line-height: var(--shop-leading-snug);
}

.cart-line__unit-price {
    margin-block-start: var(--shop-space-1);
    color: var(--shop-text-soft);
}

.cart-line__quantity {
    grid-area: quantity;
    align-self: end;
}

.cart-line__total {
    grid-area: total;
    align-self: end;
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-tap);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cart-line__remove {
    grid-area: remove;
    margin: 0;
}

button.cart-line__remove-button,
button.cart-line__remove-button:hover,
button.cart-line__remove-button:focus {
    display: inline-flex;
    align-items: center;
    gap: var(--shop-space-1);
    min-height: var(--shop-tap);
    color: var(--shop-text);
    font-size: var(--shop-text-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
}

button.cart-line__remove-button:hover {
    color: var(--shop-accent);
}

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

.cart-line__notice {
    grid-area: notice;
    margin: 0;
}

@media (min-width: 640px) {
    .cart-line {
        grid-template-columns: 6rem minmax(0, 1fr) auto 7rem;
        grid-template-areas:
            "image details quantity total"
            "image remove quantity total"
            "notice notice notice notice";
    }

    .cart-line__quantity,
    .cart-line__total {
        align-self: start;
    }

    .cart-line__total {
        text-align: end;
    }

    .cart-line__remove {
        align-self: end;
    }
}

/* A partij line holding other tiles than its lot: the lot, offered under the
   notice's text. */
.cart-line__fix {
    margin: var(--shop-space-2) 0 0;
}