/* Four opaque, square-edged photographs in one tactile card stack. */
.workshop-photo { border: 0; border-radius: 0; padding: 0; overflow: hidden; }
.workshop-open { border: 0; border-radius: 0; padding: 0; overflow: hidden; background: transparent; }
.workshop-open img { object-fit: cover; object-position: 50% 50%; border-radius: 0; }
/* The supplied oven photograph contains white rounded corners. A small display
   crop removes those pixels while the unaltered original stays in the gallery. */
.workshop-photo[data-workshop-photo="2"] .workshop-open img { transform: scale(1.08); transform-origin: 50% 50%; }
.workshop-cards-ready .workshop-visual { position: sticky; top: calc(var(--nav-bottom,84px) + 18px); }
.workshop-cards-ready .workshop-photos.product-gallery { position: relative; display: block; height: clamp(390px,calc(100svh - var(--nav-bottom,84px) - 168px),630px); margin: 0; overflow: visible; isolation: isolate; }
.workshop-cards-ready .workshop-photo { position: absolute; inset: 18px 12px 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; opacity: var(--workshop-opacity,0); overflow: hidden; box-shadow: 0 15px 36px #163e4217; transform-origin: 50% 45%; transform: translate3d(var(--workshop-card-drag,0px),var(--workshop-card-offset,0px),0) rotate(calc(var(--workshop-card-rotation,0deg) + var(--workshop-card-drag-rotation,0deg))) scale(var(--workshop-card-scale,1)); transition: transform 380ms cubic-bezier(.22,.72,.2,1); pointer-events: none; }
.workshop-cards-ready .workshop-photo[data-workshop-front="true"] { pointer-events: auto; }
.workshop-cards-ready .workshop-photo:first-child { opacity: var(--workshop-opacity,1); }
.workshop-cards-ready .workshop-open { height: 100%; background: transparent; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.workshop-cards-ready .workshop-open:active { cursor: grabbing; }
.workshop-cards-ready .workshop-open img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.workshop-cards-ready .workshop-photo figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 12px; font: 500 .76rem/1.4 var(--sans,Montserrat,sans-serif); color: var(--ink); background: #f7f8f1; border: 1px solid #163e4226; pointer-events: none; }
.workshop-cards-ready .workshop-photo[data-workshop-front="false"] figcaption { visibility: hidden; }
.is-workshop-dragging .workshop-photo[data-workshop-front="true"] { transition: none; }
.workshop-cards-ready .workshop-scene:last-child { min-height: var(--workshop-view-height,680px); }
.workshop-cards-ready .workshop-nav { margin-top: 12px; }
.workshop-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.workshop-tools[hidden], .workshop-card-help[hidden] { display: none; }
.workshop-tool { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; margin: 0; padding: 10px; border: 1px solid #163e4259; border-radius: 3px; background: #f7f8f1; color: var(--ink); font: 600 .74rem/1.2 var(--sans,Montserrat,sans-serif); cursor: pointer; }
.workshop-tool svg { width: 18px; height: 18px; flex-shrink: 0; }
.workshop-tool-zoom { margin-left: auto; padding-inline: 12px; }
.workshop-tool:hover { background: #dce1d8; }
.workshop-tool:focus-visible, .workshop-cards-ready .workshop-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.workshop-card-counter { font: 500 .73rem/1.2 var(--sans,Montserrat,sans-serif); min-width: 34px; text-align: center; color: var(--muted); }
.workshop-card-help { margin: 10px 0 0; max-width: 100%; font: 400 .72rem/1.45 var(--sans,Montserrat,sans-serif); color: #597174; }
.workshop-card-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.workshop-cards-ready[data-workshop-card-motion="reduced"] .workshop-photo { transition: none; transform: translateY(var(--workshop-card-offset,0px)) scale(var(--workshop-card-scale,1)); }
@media(max-width:760px) {
  /* One opaque stage reaches the menu edge and the viewport sides. Flowing
     chapter text stays behind it, including the gaps around rotated cards. */
  .workshop-cards-ready .workshop-visual { top: var(--nav-bottom,64px); background: #e8e9df; padding-bottom: 16px; z-index: 2; isolation: isolate; }
  .workshop-cards-ready .workshop-visual::before { content: ""; position: absolute; inset: -12px calc(50% - 50vw) -16px; z-index: -1; background: #e8e9df; border-bottom: 1px solid #163e4226; box-shadow: 0 14px 22px -16px #163e4270; pointer-events: none; }
  .workshop-cards-ready .workshop-photos.product-gallery { height: clamp(218px,31svh,296px); }
  .workshop-cards-ready .workshop-photo { inset: 16px 8px 4px; border-radius: 0; }
  .workshop-cards-ready .workshop-photo figcaption { left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: .68rem; padding: 8px 10px; }
  .workshop-cards-ready .workshop-nav { margin-top: 9px; }
  .workshop-tools { gap: 6px; margin-top: 8px; }
  .workshop-tool { padding: 9px; }
  .workshop-tool-zoom { padding-inline: 10px; font-size: .69rem; }
  .workshop-card-counter { min-width: 26px; font-size: .68rem; }
  .workshop-card-help { font-size: .67rem; }
  .workshop-cards-ready .workshop-scene { scroll-margin-top: calc(var(--nav-bottom,64px) + var(--workshop-view-height,425px) + 24px - var(--workshop-scroll-padding,0px)); }
}
@media(prefers-reduced-motion:reduce) {
  .workshop-cards-ready .workshop-photo { transition: none; transform: translateY(var(--workshop-card-offset,0px)) scale(var(--workshop-card-scale,1)); }
}