@media (min-width: 820px) {

}

/* --- La grille des creneaux --------------------------------------------- */

.public-producer-pickup__slots-intro {
    margin-block: var(--ui-space-2) var(--ui-space-1);
    color: var(--ui-color-muted);
    font-size: var(--ui-font-xs);
}

/* Une journee se replie nativement : <details> fait ce geste sans script, et
   le fait aussi quand le script echoue. */
.public-producer-pickup__day {
    margin-top: var(--ui-space-1);
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-color-line);
    border-radius: var(--ui-radius-card);
    background: var(--ui-plan-card);
}

.public-producer-pickup__day > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-2);
    min-height: var(--tap-size, 44px);
    cursor: pointer;
    list-style: none;
}

.public-producer-pickup__day > summary::-webkit-details-marker {
    display: none;
}

.public-producer-pickup__day-label {
    font-family: var(--ui-font-display);
    font-size: var(--ui-font-sm);
    font-weight: 600;
}

.public-producer-pickup__day-range {
    color: var(--ui-color-muted);
    font-size: var(--ui-font-xs);
    font-variant-numeric: tabular-nums;
}

/* Quatre colonnes : la mesure de la cible, et la largeur ou une heure au
   format HH:MM tient sans se couper. */
.public-producer-pickup__slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: var(--ui-space-1) 0 0;
    padding: 0;
    list-style: none;
}

.public-producer-pickup__slot {
    padding: 6px 2px;
    border: 1px solid var(--ui-color-line);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-plan-card);
    text-align: center;
}

.public-producer-pickup__slot-hour {
    display: block;
    font-size: var(--ui-font-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.public-producer-pickup__slot small {
    display: block;
    color: var(--ui-color-accent-dark);
    font-size: .66rem;
    font-weight: 500;
}

.public-producer-pickup__slots-more {
    margin-top: var(--ui-space-1);
    color: var(--ui-color-muted);
    font-size: var(--ui-font-xs);
}