/* Frameshift — Product coverflow (3D on desktop with full motion; scroll-snap rail otherwise) */
.cflow__app { display: block; outline-offset: -2px; }
.cflow__app:focus-visible { outline: 2px solid var(--c-accent); }

/* Rail fallback (default: mobile, reduced motion, no JS) */
.cflow__stage { position: relative; }
.cflow__track { list-style: none; margin: 0; padding: 0 var(--gutter) 1rem; display: flex; gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.cflow__track::-webkit-scrollbar { display: none; }
.cflow__item { flex: none; inline-size: min(72vw, 300px); scroll-snap-align: start; }
.cflow__photo { display: none; }
.cflow__btn, .cflow__details { display: none; }
.cflow__demo { display: grid; grid-auto-flow: column; grid-auto-columns: min(60vw, 260px); gap: 1rem; overflow: hidden; justify-content: center; margin-block-end: 1.5rem; }
.cflow__demo-item { aspect-ratio: 4 / 5; }

/* Coverflow mode */
.cflow__app.is-flow { --w: clamp(240px, 24vw, 380px); --step: calc(var(--w) * 0.56); }
.cflow__app.is-flow .cflow__stage { perspective: 1600px; perspective-origin: 50% 40%; block-size: calc(var(--w) * 1.32); overflow: clip; overflow-clip-margin: 0; }
.cflow__app.is-flow .cflow__track { display: block; position: absolute; inset: 0; padding: 0; overflow: visible; transform-style: preserve-3d; cursor: grab; touch-action: pan-y; }
.cflow__app.is-flow .cflow__track.is-dragging { cursor: grabbing; }
.cflow__app.is-flow .cflow__item {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: var(--w);
  margin-inline-start: calc(var(--w) / -2);
  block-size: calc(var(--w) * 1.25);
  transform: translate3d(calc(var(--o, 0) * var(--step) * var(--dir, 1) + var(--sign, 0) * var(--w) * 0.14 * var(--dir, 1)), 0, calc(var(--ao, 0) * -170px)) rotateY(calc(var(--sign, 0) * -48deg * var(--dir, 1))) scale(calc(1 - var(--ao, 0) * 0.04));
  opacity: calc(1 - var(--ao, 0) * 0.22);
  filter: brightness(calc(1 - var(--ao, 0) * 0.28));
  transition: transform 640ms var(--ease-out), opacity 400ms, filter 400ms;
  scroll-snap-align: none;
}
.cflow__app.is-flow .cflow__item[data-far] { opacity: 0; pointer-events: none; }
.cflow__app.is-flow .cflow__track.is-dragging .cflow__item { transition-duration: 220ms; }
.cflow__app.is-flow .cflow__railcard { display: none; }
.cflow__app.is-flow .cflow__photo { display: block; inline-size: 100%; block-size: 100%; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.08); user-select: none; -webkit-user-drag: none; }
.cflow__app.is-flow .cflow__photo img { pointer-events: none; }
.cflow__app.is-flow .cflow__item.is-active .cflow__photo { box-shadow: 0 50px 100px -30px rgb(0 0 0 / 0.9), 0 0 0 1px var(--c-accent), 0 0 60px -10px rgb(var(--c-accent-rgb) / calc(0.6 * var(--glow, 0.4))); }
.cflow__shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.14) 48%, transparent 60%); mix-blend-mode: overlay; opacity: calc(1 - var(--ao, 0)); }
/* reflection under the active cover */
.cflow__app.is-flow .cflow__item::after { content: ''; position: absolute; inset-inline: 6%; inset-block-end: -28px; block-size: 24px; background: radial-gradient(ellipse at 50% 0, rgb(var(--c-accent-rgb) / calc(0.35 * var(--glow, 0.4))), transparent 70%); filter: blur(6px); opacity: calc(1 - var(--ao, 0)); }

.cflow__app.is-flow .cflow__btn { display: grid; position: absolute; inset-block-start: 45%; z-index: 20; background: rgb(var(--c-bg-rgb) / 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cflow__btn--prev { inset-inline-start: var(--gutter); }
.cflow__btn--next { inset-inline-end: var(--gutter); }
.cflow__app.is-flow .cflow__details { display: grid; gap: 0.8rem; justify-items: center; text-align: center; margin-block-start: clamp(2rem, 4vw, 3rem); }
.cflow__detail { display: grid; gap: 0.7rem; justify-items: center; }
.cflow__detail[hidden] { display: none; }
html[data-fx='full'] .cflow__detail:not([hidden]) { animation: cflow-in var(--dur-3) var(--ease-out); }
@keyframes cflow-in { from { opacity: 0; transform: translateY(14px); } }
.cflow__title { max-inline-size: 22ch; }
.cflow__title a { text-decoration: none; }
.cflow__title a:hover { color: var(--c-accent); }
.cflow__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: center; margin-block-start: 0.4rem; }
.cflow__counter { margin: 0.6rem 0 0; }
.cflow__item .badges { z-index: 6; }

@media (prefers-reduced-motion: reduce) { .cflow__app.is-flow .cflow__item { transition-duration: 0.01ms; } }