/* One page for six categories. Product photography carries the color. */
.taste-showcase {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  height: calc(100svh - 81px - env(safe-area-inset-bottom));
  height: calc(100dvh - 81px - env(safe-area-inset-bottom));
  min-height: 0; overflow: hidden; background: var(--bg);
}
.taste-header { position: absolute; inset: 22px 24px auto; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.taste-header h2 { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--brand-ink); }
.taste-header-hint { font-size: 10px; letter-spacing: .04em; color: #55594f; }
.taste-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; cursor: grab; }
.taste-stage.is-dragging { cursor: grabbing; }
.taste-stage:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -4px; }
.taste-scenes, .taste-cones { position: absolute; inset: 0; pointer-events: none; }
.taste-scenes { z-index: 0; }
.taste-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: 0; transition: opacity 380ms ease; }
.taste-scene.is-active { opacity: 1; }
.taste-scenes::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(233,233,231,.85), rgba(233,233,231,.05) 25%, rgba(233,233,231,.08) 58%, var(--bg) 100%); }
.taste-cones { inset: 52px 0 -2px; z-index: 1; }
.taste-cone-slot {
  position: absolute; top: 0; left: 50%; width: min(58%, 248px); height: 100%;
  transform: translateX(calc(-50% + var(--taste-offset, 0px))) scale(var(--taste-scale, 1));
  transform-origin: center 65%; opacity: var(--taste-opacity, 0); will-change: transform;
}
.taste-cone { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 14px 13px rgba(50,41,24,.12)); }
.taste-details { position: relative; z-index: 2; flex: 0 0 auto; text-align: center; padding: 12px 24px 0; }
.taste-name { margin: 0; font-size: clamp(26px, 7vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: .12em; }
.taste-english { font: 500 10px/1.8 Arial, sans-serif; letter-spacing: .2em; color: var(--brand-ink); margin-top: 5px; }
.taste-description { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.taste-order { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; gap: 24px; width: min(64%, 248px); min-height: 46px; margin-top: 18px; border-radius: var(--radius-control); background: var(--brand-ink); color: #fff; font-size: 14px; letter-spacing: .06em; }
.taste-order svg { width: 19px; height: 19px; }
.taste-next { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 14px 24px 3px; font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.taste-next svg { width: 14px; height: 14px; }
.taste-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.home-content { min-height: calc(100dvh - 81px - env(safe-area-inset-bottom)); }
@media (max-width: 360px) {
  .taste-header { inset: 18px 20px auto; }
  .taste-details { padding-top: 7px; }
  .taste-description { margin-top: 5px; }
  .taste-order { margin-top: 12px; }
}
@media (max-height: 680px) {
  .taste-cones { top: 42px; }
  .taste-header { top: 14px; }
  .taste-details { padding-top: 4px; }
  .taste-name { font-size: 25px; }
  .taste-english { margin-top: 2px; }
  .taste-description { margin-top: 3px; }
  .taste-order { margin-top: 9px; min-height: 44px; }
  .taste-next { min-height: 36px; margin-bottom: 0; }
}
@media (max-height: 540px) and (min-width: 540px) {
  .taste-showcase { min-height: 0; display: grid; grid-template-columns: 52% 48%; grid-template-rows: 1fr auto auto; }
  .taste-stage { grid-column: 1; grid-row: 1 / -1; }
  .taste-header { inset: 12px auto auto 18px; }
  .taste-header-hint { display: none; }
  .taste-cones { top: 34px; }
  .taste-cone-slot { width: 65%; }
  .taste-details { grid-column: 2; align-self: end; padding: 12px 14px 0; }
  .taste-name { font-size: 24px; letter-spacing: .06em; }
  .taste-order { grid-column: 2; justify-self: center; width: 84%; }
  .taste-next { grid-column: 2; margin-inline: 8px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .taste-scene { transition: none; } }