/* Static first: machine and completed vanilla serving render without JavaScript. */
.flavour-dietary { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.dietary-badge { width: 86px; height: 86px; flex: 0 0 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; background: var(--cream); color: var(--ink); border: 2px solid var(--yellow); font-size: 13px; font-weight: 800; line-height: 1.2; box-sizing: border-box; }
@media (max-width: 767px) { .machine-layout .flavour-dietary { grid-column: 1 / -1; grid-row: 6; justify-content: center; margin: 10px 0; } .machine-layout .machine-hint { grid-row: 7 !important; } }
.machine-layout .flavour-stage { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 18px 70px; padding-block: 66px; }
.machine-layout .flavour-copy { grid-column: 1; grid-row: 1 / 3; max-width: 470px; }
.machine-layout .flavour-cup-wrap { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; perspective: none; touch-action: pan-y; user-select: none; }
.machine-layout .flavour-cup { display: none; }
.machine-layout .flavour-controls { grid-column: 2; grid-row: 2; width: min(100%, 420px); justify-self: center; gap: 16px; }
.machine-display { width: 100%; max-width: 480px; margin: auto; position: relative; }
.machine-display::before { content: ''; position: absolute; inset: 12% -4% 0; border: 1px solid #ffffff1c; border-radius: 50%; pointer-events: none; }
.machine-art { --froyo-colour: #fffdf1; width: 100%; height: auto; display: block; overflow: visible; position: relative; }
.machine-stream { opacity: 0; }
.machine-label { font: 800 19px Arial, sans-serif; fill: var(--ink); text-anchor: middle; }
.machine-small-label { font: 700 9px Arial, sans-serif; letter-spacing: 2px; text-anchor: middle; fill: var(--ink); }
.flavour-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.flavour-choice { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; border: 1px solid #ffffff66; border-radius: 100px; color: var(--white); text-decoration: none; font-size: .94rem; font-weight: 700; transition: background-color .2s, transform .2s; }
.flavour-choice::before { content: ''; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--swatch); border: 1px solid #ffffff77; }
.flavour-choice:hover { background: #ffffff18; transform: translateY(-1px); }
.flavour-choice[aria-current="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.flavour-choice:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.machine-hint { color: #ffffffb8; font-size: .84rem; margin: 20px 0 0; }
.flavour-fallback { grid-column: 1 / -1; border-top: 1px solid #ffffff55; padding-top: 24px; }
.flavour-fallback article { padding: 20px 0; scroll-margin-top: 140px; }
.flavour-fallback h3 { color: var(--white); }
.machine-enhanced .flavour-fallback, .selector-ready .flavour-fallback { display: none; }
.machine-disabled .machine-display { display: none; }
.machine-disabled .flavour-cup { display: block; }
.machine-disabled .flavour-cup-wrap { min-height: 460px; }
.machine-disabled .machine-hint { display: none; }
/* Fruit is photographic, at a readable scale, and confined to visual areas. */
.floating-topping:not(.topping-bubble) { width: 64px; height: 64px; background: none; border: 0; box-shadow: none; filter: none; opacity: 1; }
.floating-topping > img, .hero-media .floating-topping > img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.hero-media .topping-strawberry { width: 82px; height: 82px; top: 7%; left: -38px; }
.hero-media .topping-blueberries { width: 66px; height: 66px; right: -32px; top: 39%; }
.hero-media .topping-mango { width: 76px; height: 76px; left: -26px; bottom: 9%; }
#how-it-works .floating-topping { width: 45px; height: 45px; }
#how-it-works .topping-strawberry { left: -12px; top: 18%; }
#how-it-works .topping-blueberries { right: -12px; top: 35%; }
#how-it-works .topping-mango { left: 32%; top: 47%; }
@media (max-width: 900px) {
  .machine-layout .flavour-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 42px; }
  .machine-layout .flavour-copy { grid-column: 1; grid-row: 1; max-width: 620px; margin-inline: auto; order: 0; }
  .machine-layout .flavour-cup-wrap { grid-column: 1; grid-row: 2; width: 100%; order: 0; }
  .machine-layout .flavour-controls { grid-column: 1; grid-row: 3; }
  .machine-layout .flavour-description { min-height: 4.5em; }
  .machine-layout .flavour-stats { margin-top: 18px; }
  .flavour-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
  .flavour-choice { justify-content: center; gap: 7px; padding: 10px 8px; }
  .machine-display { max-width: 430px; }
}
@media (max-width: 767px) {
  .hero-media .floating-topping:nth-child(2) { display: block; }
  .hero-media .topping-strawberry { width: 56px; height: 56px; left: 2px; top: 6%; }
  .hero-media .topping-blueberries { width: 48px; height: 48px; right: 2px; top: 39%; }
  .hero-media .topping-mango { display: none; }
  .machine-layout .flavour-stage { gap: 18px; }
  .machine-layout .flavour-copy { display: contents; }
  .machine-layout .flavour-copy > .eyebrow { display: none; }
  .machine-layout .flavour-copy h2 { grid-column: 1; grid-row: 1; margin: 0; text-align: center; }
  .machine-layout .flavour-cup-wrap { grid-row: 2; }
  .machine-layout .flavour-controls { grid-row: 3; }
  .machine-layout .flavour-navigation { grid-column: 1; grid-row: 4; margin-top: 4px; }
  .machine-layout .flavour-description { grid-column: 1; grid-row: 5; margin: 0; }
  .machine-layout .machine-hint { grid-column: 1; grid-row: 6; }
  .machine-layout .flavour-copy h2 { font-size: clamp(32px, 9vw, 48px); }
  .machine-layout .flavour-description { font-size: 1rem; }
  .machine-layout .flavour-stats { display: none; }
  .machine-layout .machine-hint { margin-top: 14px; }
  .machine-display { max-width: 310px; }
  .flavour-choice { font-size: .8rem; }
  .flavour-choice::before { width: 7px; height: 7px; flex-basis: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .flavour-choice { transition: none; }
}