/* =========================================
   PRODUITS — carte en médaillon, fiche produit, sélecteur de quantité (« Le ciel de Mateda », D-033)
   Carte : photo ronde à double anneau (comme le pain et le croissant du logo), deux étincelles,
   nom en Gloock, prix en Quicksand, bouton rond « + » ciel.
   ========================================= */

/* --- Grille des produits : plus d'air entre les médaillons --- */
.grid:has(> .product-card) {
    gap: var(--space-xl) var(--space-lg);
}

/* --- Carte : le lien du titre couvre toute la carte (::after), le bouton passe au-dessus --- */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3xs);
    text-align: center;
}

.product-card__media {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-sm);
}

.product-card__media img,
.product-card__media:not(:has(img))::before {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    object-fit: cover;
    background-color: var(--crumb);
    box-shadow: var(--ring-product);
    transition: transform var(--transition-base);
}

.product-card__media:not(:has(img))::before {
    content: "";
}

.product-card:hover .product-card__media img {
    transform: scale(var(--hover-zoom));
}

/* Étincelles autour du médaillon */
.product-card__spark {
    position: absolute;
    top: 2%;
    right: 8%;
    width: var(--spark-md);
    height: var(--spark-md);
    fill: currentColor;
    color: var(--sky);
}

.product-card__spark--small {
    top: auto;
    right: auto;
    bottom: 10%;
    left: 0;
    width: var(--spark-sm);
    height: var(--spark-sm);
}

.product-card__badge {
    position: absolute;
    top: var(--space-2xs);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.product-card__category {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
}

.product-card__title {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
}

.product-card__link {
    color: var(--color-text);
    text-decoration: none;
}

.product-card__link:hover {
    color: var(--color-link);
}

.product-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.product-card__link:focus-visible {
    outline: none;
}

.product-card:has(.product-card__link:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-lg);
}

.product-card__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.product-card__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-2xs);
}

.product-card__price {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.product-card__format {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}

/* --- Bouton rond « + » (ajout au panier) : ciel à double anneau --- */
.add-button {
    position: relative; /* au-dessus du lien étendu */
    z-index: var(--z-overlay);
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--add-size);
    height: var(--add-size);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-action);
    box-shadow: var(--ring-button-sky);
    color: var(--color-on-action);
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.add-button:hover {
    background-color: var(--color-action-hover);
}

.add-button.is-added {
    background-color: var(--night);
}

@media (max-width: 640px) {
    /* Deux produits par ligne sur mobile (accueil, La carte) : la description est masquée */
    .grid:has(> .product-card) {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg) var(--space-md);
    }

    .product-card__text {
        display: none;
    }

    .product-card__title {
        font-size: var(--text-lg);
    }

    .product-card__foot {
        gap: var(--space-xs);
    }
}

/* --- Rangée de produits centrée (rayons de La carte, « Dans le même rayon ») : 1 à 3 produits restent au milieu --- */
.product-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.product-row > .product-card {
    width: calc((100% - 3 * var(--space-lg)) / 4);
}

@media (max-width: 900px) {
    .product-row > .product-card {
        width: calc((100% - var(--space-lg)) / 2);
    }
}

@media (max-width: 640px) {
    .product-row > .product-card {
        width: calc((100% - var(--space-md)) / 2);
    }
}

/* --- Fiche produit : sur le ciel étoilé, grand médaillon et infos d'achat --- */
.product-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-lg) calc(var(--horizon-height) + var(--space-2xl));
}

.product-hero .container {
    position: relative;
    z-index: var(--z-raised);
}

.product-hero .back-link a {
    color: var(--crumb);
    font-weight: var(--weight-semibold);
}

.product-hero .back-link a:hover {
    color: var(--white);
}

.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-2xl);
}

.product__media {
    position: relative;
    width: 100%;
    max-width: var(--medallion-size);
    margin-inline: auto;
}

.product__media img,
.product__media:not(:has(img))::before {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    object-fit: cover;
    background-color: var(--night);
    box-shadow: var(--ring-photo);
}

.product__media:not(:has(img))::before {
    content: "";
}

.product__badge {
    position: absolute;
    top: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
}

.product__info {
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
}

.product__title {
    color: var(--white);
    font-size: var(--display-section);
    line-height: var(--leading-display);
}

.product__lead {
    color: var(--crumb);
    font-size: var(--text-lg);
}

/* Prix en grand : le blé sur ciel est réservé aux grands textes (4:1) */
.product__price {
    margin-top: var(--space-2xs);
    color: var(--wheat);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}

.product__format {
    margin-left: var(--space-2xs);
    color: var(--crumb);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.product__order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-xs);
}

/* Quantité sur le ciel : contour mie, chiffres blancs */
.product-hero .quantity {
    border-color: var(--crumb);
    background-color: transparent;
}

.product-hero .quantity__button,
.product-hero .quantity__input {
    color: var(--white);
}

.product-hero .quantity__button:hover {
    background-color: var(--crumb-hover);
}

.product-hero .quantity:has(:focus-visible) {
    outline: var(--focus-ring-on-dark);
}

.product-hero .quantity .quantity__button:focus-visible,
.product-hero .quantity .quantity__input:focus-visible {
    background-color: var(--crumb-hover);
}

.product__feedback:empty {
    display: none;
}

.product__feedback {
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius-lg);
    background-color: var(--night-glass);
    box-shadow: var(--ring-today);
    color: var(--white);
    font-size: var(--text-sm);
}

.product__feedback a {
    color: var(--wheat);
    font-weight: var(--weight-bold);
}

/* --- Sous le ciel : détails dans une carte mie, description à côté --- */
.product__more {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-min-lg), 1fr));
    align-items: start;
    gap: var(--space-xl);
    max-width: calc(var(--container-narrow) + 2 * var(--page-gutter));
}

.product__details {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-card);
    background-color: var(--crumb);
}

.product__details dt {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
}

.product__details dd {
    color: var(--color-text);
}

.product__photos {
    margin-top: var(--space-2xl);
}

@media (max-width: 900px) {
    .product {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 640px) {
    .product__order {
        display: grid;
        width: 100%;
    }

    .product__order .quantity {
        justify-self: start;
    }
}

/* Formulaire du bouton « + » (ouvre Ma commande sans JS) : transparent pour la mise en page de la carte */
.add-form {
    display: contents;
}

/* --- Sélecteur de quantité (fiche, page Ma commande) : pilule à contour ciel --- */
.quantity {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: var(--border-width-strong) solid var(--color-action);
    border-radius: var(--radius-full);
    background-color: var(--color-card);
}

.quantity__button {
    width: var(--quantity-size);
    min-height: var(--quantity-size);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-action);
}

.quantity__button:hover {
    background-color: var(--sky-tint);
}

/* Focus clavier : `overflow: hidden` couperait le contour des boutons, il entoure donc toute la pilule,
   et l'élément actif se teinte. Sélecteurs renforcés pour passer devant le focus des surfaces de ciel (theme.css). */
.quantity:has(:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.quantity .quantity__button:focus-visible,
.quantity .quantity__input:focus-visible {
    outline: none;
    background-color: var(--sky-tint);
}

.quantity__input {
    width: var(--quantity-size);
    border: 0;
    background: transparent;
    color: var(--color-text);
    text-align: center;
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Sans JS, les boutons − et + ne font rien : on garde seulement le champ, que l'on remplit au clavier */
html:not(.js) .quantity__button {
    display: none;
}