/* =========================================
   MA COMMANDE — « Le ciel de Mateda » (D-033)
   Trois étapes numérotées (articles, retrait, coordonnées) dans des cartes blanches ; récapitulatif collant
   sur ciel étoilé (total en blé, bouton blé) ; confirmation centrée sous une étoile.
   ========================================= */

.order {
    display: grid;
    grid-template-columns: 1fr var(--summary-width);
    align-items: start;
    gap: var(--space-xl);
    counter-reset: order-step;
}

/* « Les champs marqués d'un * sont obligatoires » : au-dessus des deux colonnes. Dans la grille, la mention prenait
   la première colonne et repoussait les étapes dans celle du récapitulatif (22rem), le récapitulatif passant dessous. */
.order > .form__required-note {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.order__main {
    display: grid;
    gap: var(--space-lg);
}

.order__step {
    display: grid;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-xl) var(--space-lg);
    border: 0;
    border-radius: var(--radius-card);
    background-color: var(--color-card);
    box-shadow: var(--shadow-sm);
    counter-increment: order-step;
}

/* Titre d'étape : son numéro dans un petit médaillon de ciel */
.order__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    float: left;
    width: 100%;
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-heading);
    line-height: var(--leading-tight);
}

.order__title + * {
    clear: both;
}

.order__title::before {
    content: counter(order-step);
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--quantity-size);
    height: var(--quantity-size);
    border-radius: var(--radius-full);
    background-color: var(--sky);
    box-shadow: var(--ring-button-sky);
    color: var(--crumb);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
}

.order__empty {
    color: var(--color-text-muted);
}

.order__step > .link-arrow {
    justify-self: start;
}

/* Articles : vignette ronde, nom en Gloock */
.order-item {
    display: grid;
    grid-template-columns: var(--thumb-size) 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    border-bottom: var(--border-width) solid var(--color-border);
}

.order-item:last-child {
    border-bottom: 0;
}

.order-item[hidden] {
    display: none;
}

.order-item__media img,
.order-item__media:not(:has(img)) {
    display: block;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: var(--radius-full);
    object-fit: cover;
    background-color: var(--crumb);
    box-shadow: var(--ring-thumb);
}

.order-item__name {
    display: block;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    text-decoration: none;
}

.order-item__name:hover {
    color: var(--color-link);
}

.order-item__price {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.order-item__remove {
    min-height: var(--toggle-size); /* cible tactile de 44 px */
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

.order-item__remove:hover {
    color: var(--color-error);
}

/* Message d'erreur d'une quantité (mateda.js) : sur toute la largeur de la ligne */
.order-item .field__error {
    grid-column: 1 / -1;
}

/* Récapitulatif : un morceau de ciel étoilé */
.order__summary {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
}

.order-summary {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
}

.order-summary__title {
    color: var(--white);
    font-size: var(--text-2xl);
}

.order-summary__line,
.order-summary__total {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    font-variant-numeric: tabular-nums;
}

.order-summary__line {
    font-size: var(--text-sm);
    color: var(--crumb);
}

.order-summary__total {
    align-items: baseline;
    margin-block: var(--space-2xs);
    padding-top: var(--space-sm);
    border-top: var(--border-width) solid var(--wheat-line);
    color: var(--white);
    font-weight: var(--weight-bold);
}

/* Le montant en grand : le blé sur ciel est réservé aux grands textes */
.order-summary__total span:last-child {
    color: var(--wheat);
    font-size: var(--text-2xl);
}

.order-summary__note {
    font-size: var(--text-xs);
    color: var(--crumb);
}

/* Confirmation : centrée, sous une étoile blé */
.order-confirmation {
    display: grid;
    justify-items: center;
    gap: var(--space-md);
    text-align: center;
}

.order-confirmation .lead {
    margin-inline: auto;
}

.order-confirmation__star {
    width: var(--constellation-star);
    height: var(--constellation-star);
    color: var(--sky);
}

.order-confirmation .order-summary {
    width: 100%;
    text-align: left;
}

@media (max-width: 900px) {
    .order {
        grid-template-columns: 1fr;
    }

    .order__summary {
        position: static;
    }
}

@media (max-width: 640px) {
    .order__step {
        padding: var(--space-lg) var(--space-md);
    }

    .order-item {
        grid-template-columns: var(--thumb-size) 1fr;
    }

    .order-item .quantity,
    .order-item__remove {
        grid-column: 2;
        justify-self: start;
    }
}

/* Sans JS, le récapitulatif ne se calcule pas : une phrase remplace le total estimé (resterait à 0 €) */
html:not(.js) [data-order-lines],
html:not(.js) [data-order-total-row],
.js .order-summary__no-js {
    display: none;
}