/* MotaFresca: homepage introduction and Flavors-page previews, using existing tokens. */
.mf-section { --mf-gutter: clamp(1.25rem, 5vw, 5rem); background: var(--ink, #122e1e); color: var(--paper, #fffaf0); scroll-margin-top: calc(var(--header-height, 104px) + 16px); }
.mf-section::before { content: ""; display: block; height: 6px; background: linear-gradient(to right,#ad2540 0 20%,#dbc093 20% 40%,#a9be38 40% 60%,#bf6429 60% 80%,#dc6681 80%); }
.mf-inner { max-width: 1680px; margin-inline: auto; padding: clamp(2.75rem, 6vw, 6rem) var(--mf-gutter); }
.mf-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.mf-section .mf-eyebrow { color: var(--cream, #e6cd9f); font-size: .875rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 1rem; }
.mf-heading h2 { margin: 0; font-size: clamp(2.8rem, 6vw, 6rem); line-height: .98; letter-spacing: -.035em; overflow-wrap: normal; }
.mf-heading h2 span { display: block; }
.mf-heading > p { max-width: 31ch; margin: 0 0 .2rem auto; color: #e8dfd0; font-size: 1.0625rem; line-height: 1.6; }
.mf-hero { margin: 0; }
.mf-hero img { display: block; width: 100%; height: auto; }
.mf-flavor-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 2.25rem 1.1rem; }
.mf-flavor-head p { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mf-controls { display: none; gap: .5rem; }
.mf-controls button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #a7b49d; border-radius: 50%; color: var(--paper,#fffaf0); background: transparent; cursor: pointer; }
.mf-controls button:hover { color: var(--ink,#122e1e); background: var(--cream,#e6cd9f); }
.mf-controls button:disabled { opacity: .35; cursor: default; }
.mf-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mf-gallery { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(.75rem,1.5vw,1.5rem); margin: 0; padding: 0; list-style: none; }
.mf-card { min-width: 0; margin: 0; }
.mf-card img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: contain; background: #e9dfd0; }
.mf-card h3 { margin: 1rem 0 .5rem; font-size: clamp(1.2rem, 1.7vw, 1.85rem); line-height: 1.1; letter-spacing: -.015em; overflow-wrap: normal; }
.mf-card p { margin: 0; color: var(--cream,#e6cd9f); font-size: .875rem; }
.mf-notice { border-top: 1px solid #516954; margin: 2.25rem 0 0; padding-top: 1.2rem; font-size: .875rem; color: #d6d9ce; }
.mf-section :focus-visible { outline: 3px solid var(--cream,#e6cd9f); outline-offset: 4px; box-shadow: none; }
.mf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  .mf-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .mf-heading > p { margin: 0; max-width: 40ch; }
  .mf-heading h2 span { display: inline; }
  .mf-gallery { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-color: #c7b88e #2d4735; padding: 4px 4px 1.15rem; margin-inline: -4px; }
  .mf-card { flex: 0 0 42%; scroll-snap-align: start; }
  .mf-card h3 { font-size: 1.6rem; }
  .mf-section[data-enhanced] .mf-controls { display: flex; }
}
@media (max-width: 600px) {
  .mf-heading { margin-bottom: 1.75rem; }
  .mf-heading h2 { font-size: clamp(2.45rem, 10.4vw, 3.8rem); }
  .mf-heading h2 span { display: block; }
  .mf-heading > p { font-size: 1rem; }
  .mf-card { flex-basis: 84%; }
  .mf-flavor-head { padding-top: 1.5rem; }
  .mf-flavor-head p { max-width: 15ch; }
  .mf-notice { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .mf-gallery { scroll-behavior: auto; } }

/* The homepage links to the full collection instead of repeating its portraits. */
.mf-home-actions { margin-top: 2rem; }
.mf-home-actions .button { max-width: 100%; text-align: center; }
.mf-collection .mf-flavor-head { padding-top: 0; }

/* Shared card treatment, with a distinct heading for each product line. */
.flavor-collection-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 1.5rem; padding: 2rem clamp(1.25rem,5vw,5rem); color: var(--ink); background: var(--paper); }
.flavor-collection-heading h2 { margin: 0; font-size: clamp(2rem,3.5vw,3.4rem); line-height: 1; }
.flavor-collection-heading .eyebrow { margin: 0 0 .6rem; }
.flavor-collection-heading > p { margin: 0 0 0 auto; max-width: 34ch; font-size: 1rem; line-height: 1.5; }
.flavor-catalog { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.flavor-catalog > li { display: flex; min-width: 0; flex-direction: column; margin: 0; color: var(--ink); }
.flavor-catalog picture { height: auto; padding: 2rem 1.5rem 0; }
.flavor-catalog img { width: 100%; height: 380px; aspect-ratio: auto; object-fit: contain; background: transparent; }
.flavor-catalog .visual-flavor-card > div,
.flavor-catalog .mf-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-height: 220px; padding: clamp(1.3rem,3vw,2.5rem); }
.flavor-catalog .eyebrow { margin: 0 0 .85rem; color: var(--ink); font-size: .73rem; font-weight: 900; letter-spacing: .12em; line-height: 1.4; }
.flavor-catalog h3 { margin: 0 0 1rem; font-size: clamp(2rem,3.3vw,3.7rem); line-height: .98; letter-spacing: -.035em; overflow-wrap: normal; word-break: normal; hyphens: none; }
.flavor-catalog .mf-coming-soon { margin: auto 0 0; padding: .45rem .75rem; border: 1px solid currentColor; border-radius: 2rem; color: var(--ink); font-size: .875rem; font-weight: 650; }
.flavor-catalog .mf-preview-1 { background: #dc746a; }
.flavor-catalog .mf-preview-2 { background: #e6cd9f; }
.flavor-catalog .mf-preview-3 { background: #b4c844; }
.flavor-catalog .mf-preview-4 { background: #d08a52; }
.flavor-catalog .mf-preview-5 { background: #ec98af; }
.mf-flavor-collection { scroll-margin-top: calc(var(--header-height,104px) + 16px); }
.flavor-catalog-section > .mf-notice { margin: 0; padding: 1.5rem clamp(1.25rem,5vw,5rem); border: 0; background: var(--ink); }
@media (min-width: 1121px) {
  .flavor-catalog .visual-flavor-card > div,
  .flavor-catalog .mf-card-copy { padding: clamp(1rem,1.7vw,1.75rem); }
  .flavor-catalog h3 { font-size: clamp(1.6rem,2.5vw,2.8rem); line-height: 1.04; }
}
@media (max-width: 1120px) { .flavor-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) {
  .flavor-collection-heading { grid-template-columns: 1fr; gap: .75rem; padding-block: 1.5rem; }
  .flavor-collection-heading > p { margin: 0; }
}
@media (max-width: 760px) { .flavor-catalog img { height: 360px; } }
@media (max-width: 600px) {
  .flavor-catalog { grid-template-columns: 1fr; }
  .flavor-catalog .visual-flavor-card > div, .flavor-catalog .mf-card-copy { min-height: 180px; }
}

/* Keep the fifth card balanced on tablets, with the same can scale as its neighbors. */
@media (min-width: 601px) and (max-width: 1120px) {
  .flavor-catalog > li:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; }
  .flavor-catalog > li:last-child picture { padding-bottom: 2rem; }
  .flavor-catalog > li:last-child > div { min-height: 260px; }
}