.about-flavors-portrait { padding-bottom: 110px; }
.about-flavors-portrait .about-flavors-heading { padding-top: 64px; }
.portrait-rail { display: flex; gap: 24px; min-width: 0; overflow-x: auto; padding: 0 40px 30px 0; align-items: flex-start; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c4c4c4 transparent; }
.portrait-product { display: block; flex: 0 0 clamp(260px, 24vw, 370px); min-width: 0; color: #111; text-decoration: none; scroll-snap-align: start; }
.portrait-product:nth-child(even) { margin-top: 64px; }
.portrait-photo { aspect-ratio: 3 / 4; overflow: hidden; background: #ededed; }
.portrait-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; transition: transform 450ms ease; }
.portrait-product:hover img { transform: scale(1.045); }
.portrait-caption { display: flex; align-items: baseline; gap: 12px; padding-top: 18px; }
.portrait-caption h3 { flex: 1; margin: 0; font-family: var(--title); font-size: clamp(23px, 2vw, 30px); font-weight: 400; line-height: 1.2; }
.portrait-caption span { font-size: 12px; }
.portrait-controls { display: flex; gap: 22px; margin-top: 34px; }
.portrait-controls button { padding: 8px 2px; border: 0; background: none; color: #111; font: 28px var(--sans); cursor: pointer; }
.portrait-controls button:disabled { opacity: .25; cursor: default; }
.portrait-view-all { display: inline-block; margin-top: 24px; font-size: 12px; letter-spacing: .06em; text-decoration: none; }
.portrait-product:focus-visible, .portrait-controls button:focus-visible, .portrait-view-all:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
@media (max-width: 900px) {
  .about-flavors-portrait { display: block; padding: 70px 0; }
  .about-flavors-portrait .about-flavors-heading { padding: 0 24px 32px; }
  .portrait-rail { padding: 0 24px 24px; gap: 18px; }
  .portrait-product { flex-basis: min(67vw, 340px); }
  .portrait-product:nth-child(even) { margin-top: 38px; }
  .portrait-controls { margin-top: 18px; }
  .portrait-view-all { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .portrait-photo img { transition: none; } }