/* Premium Cuts guide: each figure shows Kalai's cut illustration first, then the real Ninan's dish.
   The dish stays in normal flow and sets the frame's size, so without JavaScript the page looks exactly as before.
   Illustrations sit on top, hidden until the script marks one active. */
.cuts-page .cut-rotator-frame { position: relative; overflow: hidden; border-radius: 12px; clip-path: inset(0 round 12px); isolation: isolate; background: #ebe2d6; }
.cuts-page .cut-rotator .cut-rotator-frame img { border-radius: 0; box-shadow: none; }
/* Only the chosen cut's dish photo shows; the card rules set display: block on every image. */
.cuts-page .cut-rotator .cut-rotator-frame img.cut-rotator-dish[hidden] { display: none; }
.cuts-page .cut-rotator .cut-rotator-frame img.cut-dish-tbone { object-position: 50% 68%; }
.cuts-page .cut-rotator .cut-rotator-dish { opacity: 1; transition: opacity 650ms cubic-bezier(.4, 0, .2, 1); }
.cuts-page .cut-rotator[data-view="cut"] .cut-rotator-dish { opacity: 0; }
/* Keep the light backdrop separate from the blurred illustration for WebKit compositing. */
.cuts-page .cut-rotator-panel { position: absolute; inset: 0; background: #ebe2d6; opacity: 0; transition: opacity 650ms cubic-bezier(.4, 0, .2, 1); }
.cuts-page .cut-rotator-panel.is-active { opacity: 1; }
.cuts-page .cut-rotator-progress {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 24px; height: 24px; pointer-events: none; color: #fff;
  fill: none; stroke: currentColor; stroke-width: 2.5;
}
.cuts-page .cut-rotator-progress[hidden] { display: none; }
.cuts-page .cut-progress-track { opacity: .22; }
.cuts-page .cut-progress-fill { stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.cuts-page .cut-rotator .cut-rotator-frame img.cut-rotator-cut {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 9%;
  opacity: 0;
  filter: blur(4px);
  transform: scale(1.02);
  transition: filter 650ms cubic-bezier(.4, 0, .2, 1), transform 900ms cubic-bezier(.23, 1, .32, 1);
}
.cuts-page .cut-rotator .cut-rotator-panel img.cut-rotator-cut { opacity: 1; }
.cuts-page .cut-rotator .cut-rotator-frame img.cut-rotator-cut.is-active { opacity: 1; filter: none; transform: none; }
.cuts-page .cut-rotator figcaption { min-height: 1.5em; }
.cuts-page .cut-rotator-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cuts-page .cut-rotator-switch button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #ebe2d6;
  color: #3b2a22;
  font: 600 14px/1 "Cabinet Grotesk", "Libre Franklin", Arial, sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.cuts-page .cut-rotator-switch button[aria-pressed="true"] { background: #5d0b0e; color: #f8f2ea; }
.cuts-page .cut-rotator-switch button:active { transform: scale(.97); }
.cuts-page .cut-rotator-switch button:focus-visible { outline: 3px solid #5d0b0e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cuts-page .cut-rotator .cut-rotator-frame img.cut-rotator-cut,
  .cuts-page .cut-rotator .cut-rotator-frame img.cut-rotator-dish,
  .cuts-page .cut-rotator-panel,
  .cuts-page .cut-rotator-switch button { transition: none; filter: none; transform: none; }
  .cuts-page .cut-rotator-progress { display: none; animation: none; }
}