/* =========================================================================
   Gas Strainer Store — Cart & Checkout Shared Styles (Phase 5)
   -------------------------------------------------------------------------
   Covers the cart line-item list, the order-summary panel pattern (used
   by both Cart totals and Checkout order summary), and the checkout
   form layout. Quantity stepper is shared from catalog.css.
   ========================================================================= */

.shop-flow {
    padding-block: var(--space-6) var(--space-8);
}

/* -------------------------------------------------------------------------
   Cart line items
   ------------------------------------------------------------------------- */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-7);
    align-items: start;
}

.cart-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cart-item {
    display: grid;
    grid-template-columns: 88px 1fr auto auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-mesh-silver);
    border-radius: var(--radius-lg);
}

.cart-item__media {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-flame-tint);
    flex-shrink: 0;
}
.cart-item__media svg {
    width: 55%;
    height: 55%;
    color: var(--color-flame);
}

.cart-item__info a {
    color: var(--color-graphite);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-md);
}
.cart-item__info a:hover { color: var(--color-flame); }

.cart-item__category {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-slate);
    margin: var(--space-1) 0 0;
}

.cart-item__unit-price {
    font-size: var(--text-sm);
    color: var(--color-slate);
    margin-top: var(--space-2);
}

.cart-item__line-total {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--color-graphite);
    white-space: nowrap;
}

.cart-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-mesh-silver-dk);
    color: var(--color-slate);
}
.cart-item__remove:hover { color: var(--color-danger); border-color: var(--color-danger); }
.cart-item__remove svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
   Order summary panel (reused by Cart totals + Checkout summary)
   ------------------------------------------------------------------------- */
.order-summary {
    position: sticky;
    top: calc(var(--header-topbar-height) + var(--header-nav-height) + var(--space-4));
    background-color: var(--color-surface);
    border: 1px solid var(--color-mesh-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.order-summary__title {
    font-size: var(--text-md);
    margin-bottom: var(--space-4);
}

.order-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--color-slate);
    padding-block: var(--space-2);
}

.order-summary__row span:last-child {
    font-family: var(--font-mono);
    color: var(--color-graphite);
}

.order-summary__row--total {
    border-top: 1px solid var(--color-mesh-silver);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
}

.order-summary__row--total span:first-child {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--color-graphite);
}

.order-summary__row--total span:last-child {
    font-size: var(--text-lg);
    font-weight: 700;
}

.order-summary__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.order-summary__note {
    font-size: var(--text-xs);
    color: var(--color-slate);
    margin-top: var(--space-3);
    margin-bottom: 0;
}

.cart-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Checkout form
   ------------------------------------------------------------------------- */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-7);
    align-items: start;
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.form-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-mesh-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.form-section__title {
    font-size: var(--text-md);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-section__title .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background-color: var(--color-flame-tint);
    color: var(--color-flame);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-grid .form-field--full {
    grid-column: 1 / -1;
}

.form-field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-graphite);
    margin-bottom: var(--space-2);
}

.form-field .form-input {
    width: 100%;
}

.order-summary__items {
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.order-summary__item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.order-summary__item-name {
    color: var(--color-graphite);
}

.order-summary__item-qty {
    color: var(--color-slate);
    font-family: var(--font-mono);
}

.order-summary__item-total {
    font-family: var(--font-mono);
    color: var(--color-graphite);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    .order-summary {
        position: static;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .cart-item {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "media info"
            "media qty"
            "total total"
            "remove remove";
        row-gap: var(--space-2);
    }
    .cart-item__media { grid-area: media; width: 64px; height: 64px; }
    .cart-item__info { grid-area: info; }
    .cart-item__qty { grid-area: qty; }
    .cart-item__line-total { grid-area: total; text-align: left; }
    .cart-item__remove { grid-area: remove; justify-self: start; }
}