.taste-validity {
  --calendar-paper: #fffdf8;
  --calendar-red: #862638;
  --calendar-ink: #291b1b;
  --calendar-year: #645a55;
  --calendar-edge: #d9c9c2;
  inline-size: min(100%, 13.5rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.taste-validity .taste-validity__label {
  color: inherit;
}

.taste-validity .taste-validity__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.35rem, 2vw, .65rem);
}

.taste-validity .taste-validity__dates > .taste-validity__date {
  display: grid;
  gap: .25rem;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.taste-validity .taste-validity__date > time {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  min-inline-size: 0;
  min-block-size: 4.65rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--calendar-edge);
  border-radius: .55rem;
  background: var(--calendar-paper);
  color: var(--calendar-ink);
  box-shadow: 0 .2rem .45rem #291b1b23;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.taste-validity .taste-validity__date > time > .taste-calendar-month {
  display: grid;
  justify-content: center;
  gap: .18rem;
  padding: .31rem .16rem .24rem;
  background: var(--calendar-red);
  color: var(--calendar-paper);
  font-size: clamp(.59rem, 2.7vw, .72rem);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.taste-calendar-month small {
  font-size: .83em;
  letter-spacing: .1em;
}

.taste-validity .taste-validity__date > time > .taste-calendar-day {
  display: block;
  align-self: center;
  padding-block: .16rem .06rem;
  font-size: clamp(1.95rem, 8vw, 2.85rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
}

.taste-validity .taste-validity__date > time > .taste-validity__year {
  display: block;
  margin: 0;
  padding-block: .09rem .32rem;
  color: var(--calendar-year);
  font-size: .73rem;
  font-weight: 650;
  line-height: 1;
}

.taste-occasion .taste-hero-period-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  width: min(100%, 17rem);
}

.taste-occasion .taste-hero-period-links a {
  padding: 0;
  border: 0;
}

.taste-occasion .taste-hero-period-links a:hover .taste-validity__label {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.taste-validity--compact {
  inline-size: 100%;
  gap: .32rem;
  margin: 0;
}

.taste-validity--compact .taste-validity__label {
  font-size: .72rem;
  letter-spacing: .055em;
}

.taste-validity--compact .taste-validity__label::after {
  content: " ↓" / "";
}

.taste-validity--compact .taste-validity__dates {
  gap: .3rem;
}

.taste-validity--compact .taste-validity__date > time {
  aspect-ratio: auto;
  min-block-size: 3.7rem;
  border-radius: .38rem;
}

.taste-validity--compact .taste-validity__date > time > .taste-calendar-month {
  grid-auto-flow: column;
  align-items: center;
  padding-block: .22rem;
  font-size: .59rem;
}

.taste-calendar-month abbr {
  text-decoration: none;
}

.taste-validity--compact .taste-validity__date > time > .taste-calendar-day {
  padding: 0;
  font-size: 1.72rem;
}

.taste-validity--compact .taste-validity__date > time > .taste-validity__year {
  padding-block: 0 .15rem;
  font-size: .63rem;
}

@media (forced-colors: active) {
  .taste-validity .taste-validity__date > time,
  .taste-validity__date > time > :is(.taste-calendar-month, .taste-validity__year) {
    background: Canvas;
    color: CanvasText;
  }

  .taste-validity .taste-validity__date > time {
    border-color: CanvasText;
    box-shadow: none;
  }

  .taste-validity__date > time > .taste-calendar-month {
    border-block-end: 1px solid CanvasText;
  }
}

@media print {
  .taste-validity .taste-validity__date > time {
    box-shadow: none;
    break-inside: avoid;
  }
}