/*
    Carrello, cassa e pagine dell'Order. Si aggiunge a shop-storefront.css e ne usa le --shop-*.
    Pensato prima per il telefono: una colonna sola, due solo da 48rem.
*/
.shop-sale__notice { margin: .5rem 0; padding: .5rem .75rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-fill); overflow-wrap: anywhere; }
.shop-sale__notice--error { border-color: #c0392b; }
.shop-sale__notice--ok { border-color: #2e8b57; }
.shop-sale__hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shop-sale__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }
.shop-sale__section { margin: 1.5rem 0; }
.shop-sale__section h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.shop-sale__muted { color: var(--shop-muted); font-size: .9rem; }

.shop-lines { list-style: none; margin: 0; padding: 0; }
.shop-line { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--shop-line); }
.shop-line--compact { grid-template-columns: minmax(0, 1fr) auto; }
.shop-line__picture { display: block; width: 4rem; height: 4rem; object-fit: cover; background: var(--shop-fill); border-radius: calc(var(--shop-radius) / 2); }
.shop-line__body { min-width: 0; }
.shop-line__name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.shop-line__option { display: block; font-size: .9rem; color: var(--shop-muted); overflow-wrap: anywhere; }
.shop-line__amount { font-weight: 600; white-space: nowrap; }
.shop-line__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.shop-line__quantity { display: flex; gap: .5rem; }
.shop-line__quantity input { width: 4.5rem; min-height: 2.75rem; padding: .4rem .5rem; font: inherit; color: inherit; background: var(--shop-fill); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); }

.shop-totals { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--shop-line); }
.shop-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.shop-totals dt { font-weight: 400; }
.shop-totals dd { margin: 0; white-space: nowrap; }
.shop-totals__total { font-size: 1.15rem; font-weight: 600; }
.shop-totals__minor { font-size: .9rem; color: var(--shop-muted); }

.shop-form { display: grid; gap: .75rem; }
.shop-field { display: grid; gap: .25rem; min-width: 0; }
.shop-field input, .shop-field select, .shop-field textarea { width: 100%; min-height: 2.75rem; padding: .4rem .6rem; font: inherit; color: inherit; background: var(--shop-fill); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); }
.shop-field option { color: #111; background: #fff; }
.shop-field__error { color: #c0392b; font-size: .9rem; }
.shop-check { display: flex; align-items: flex-start; gap: .5rem; }
.shop-check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; }
.shop-details summary { cursor: pointer; }
.shop-details[open] summary { margin-bottom: .75rem; }

.shop-checkout { display: grid; gap: 1.5rem; }
.shop-checkout__summary { min-width: 0; }
.shop-pay { width: 100%; }

.shop-status { display: inline-block; padding: .15rem .6rem; border: 1px solid currentColor; border-radius: 999px; font-size: .9rem; }

.shop-orders { list-style: none; margin: 0; padding: 0; }
.shop-orders li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .75rem 0; border-top: 1px solid var(--shop-line); }

@media (min-width: 48rem) {
    .shop-checkout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 2.5rem; }
    .shop-form--two { grid-template-columns: 1fr 1fr; }
    .shop-field--wide { grid-column: 1 / -1; }
    .shop-pay { width: auto; }
}