/**
 * Drops teaser: the next arrivals as cards with a status pill.
 */
.drops-teaser__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.drops-teaser__eyebrow {
  margin-bottom: var(--space-2);
}
.drops-teaser__heading { margin: 0; }

@media screen and (max-width: 749px) {
  .drops-teaser__head { flex-direction: column; align-items: flex-start; }
}

.drops-teaser__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.drop-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-line);
  /* One colour language per card. The stripe used to encode the state too -
     cyan for a pre-order, green for shipping, purple for the rest - while the
     chip in the foot said the same thing in a different palette. A row of
     four cards could therefore carry six colours and read as a rainbow. The
     stripe is now structure, not status: the same quiet ink edge on every
     card, with the chip left as the only thing that carries state. */
  border-left: 3px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
  border-radius: var(--radius-m);
  background-color: var(--color-surface);
}

/* The month is metadata, not the point of the card, and in brand purple on
   every card it spent the accent four times over - leaving the one chip that
   IS the accent, the open pre-order, nothing to stand out against. */
.drop-card__period { margin: 0; color: var(--color-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.drop-card__title { margin: 0; }
.drop-card__text { margin: 0; color: var(--color-muted); }

.drop-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}


.drop-card__link { color: var(--color-ink); text-decoration: none; font-weight: 600; }
.drop-card__link:hover { text-decoration: underline; }