/* gallery3d.css — loaded only by product pages that carry a flat print in slot 1 (build.cjs faceAttrs). */
/* ── Product gallery: liquid-glass arrows + slot 1 as a turnable wooden board (CC #21962, Ivan c:8241866c) ──
 * Arrows follow the hub's liquid-glass recipe (04_design_system §Glass Shine Gradient): the site's floating-chrome
 * glass (--glass-*), a top-half shine, a crisp light rim; they float over the photo and fade out at the ends.
 * The board reuses the studio slab (studio.css .st-slab) and its ply textures. */
.gallery .g-nav { position: absolute; z-index: 4; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--ink, #16181b); overflow: hidden; isolation: isolate;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 -1px 0 rgba(255, 255, 255, .25);
  opacity: 0; transform: scale(.92); transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), background .25s; }
.gallery .g-nav::after { content: ''; position: absolute; inset: 0 0 50% 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.gallery .g-nav svg { width: 20px; height: 20px; position: relative; stroke-width: 2.6; }   /* CC #21962 (#23051 re-grade 0006): a bolder chevron, the 1.8 line vanished on a pale glass circle when scaled down */
.gallery .g-nav.prev { left: 14px; } .gallery .g-nav.next { right: 14px; }
.gallery.has-nav .g-nav { opacity: .92; transform: none; }
.gallery .g-nav:hover { opacity: 1; background: rgba(255, 253, 249, .78); transform: scale(1.05); }
.gallery .g-nav:active { transform: scale(.94); }
.gallery .g-nav:focus-visible { outline: 2px solid var(--ink, #16181b); outline-offset: 2px; opacity: 1; }
.gallery .g-nav[disabled] { opacity: 0; pointer-events: none; transform: scale(.85); }
@media (hover: hover) and (min-width: 980px) { .gallery.has-nav .g-nav { opacity: 0; } .gallery.has-nav:hover .g-nav:not([disabled]) { opacity: .95; } .gallery .g-nav { width: 48px; height: 48px; margin-top: -24px; } .gallery .g-nav.prev { left: 18px; } .gallery .g-nav.next { right: 18px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gallery .g-nav { background: rgba(255, 253, 249, .94); } }

.b3d { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; perspective: 1500px; perspective-origin: 50% 42%;
  background: radial-gradient(120% 90% at 50% 18%, #fbf8f3 0%, #efe8de 58%, #e4dacc 100%); opacity: 0;
  touch-action: pan-y pinch-zoom; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.b3d.is-on { opacity: 1; }
.b3d.is-dragging { cursor: grabbing; }
.b3d img, .b3d-slab, .b3d-slab * { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.gallery-track .b3d img { position: static; }
.b3d-slab { position: relative; transform-style: preserve-3d; will-change: transform; }
.b3d-slab > * { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.b3d-front { inset: 0; transform: translateZ(calc(var(--t) / 2)); overflow: hidden; background: #e6d6bd; }
.b3d-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b3d-light { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,0) 45%, rgba(40,25,10,.12)); mix-blend-mode: soft-light; will-change: opacity; }
.b3d-sheen { position: absolute; inset: -80%; mix-blend-mode: soft-light; background: linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 58%); will-change: transform; }
.b3d-back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); background: #cdb697 url(/img/studio/ply-face.jpg) 0 0 / 900px auto repeat; filter: brightness(.8); }
.b3d-e-l, .b3d-e-r { top: 0; height: 100%; width: var(--t); left: calc(50% - var(--t) / 2); background: url(/img/studio/ply-dark-v.jpg) 0 0 / 100% auto repeat-y; }
.b3d-e-t, .b3d-e-b { left: 0; width: 100%; height: var(--t); top: calc(50% - var(--t) / 2); background: url(/img/studio/ply-dark-h.jpg) 0 0 / auto 100% repeat-x; }
.b3d-e-r { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); filter: brightness(.9); }
.b3d-e-l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); filter: brightness(.72); }
.b3d-e-t { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); filter: brightness(1.06); }
.b3d-e-b { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); filter: brightness(.66); }
.b3d-shadow { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 4px; background: rgba(60,40,20,.38); filter: blur(24px); pointer-events: none; will-change: transform; }
.b3d-hint { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; font: 500 12px/1 var(--font, system-ui); color: rgba(22,24,27,.6); padding: 8px 12px; border-radius: 999px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); transition: opacity .4s; pointer-events: none; }
.b3d.was-turned .b3d-hint { opacity: 0; }
/* while turning, nothing with a backdrop-filter sits over the moving board (rev 2) */
.gallery.is-turning .g-nav, .b3d.is-dragging .b3d-hint { opacity: 0 !important; visibility: hidden; transition: none; }
@media (prefers-reduced-motion: reduce) { .b3d, .gallery .g-nav { transition: none; } }
/* CC #21962 (Ivan 19:51Z via #23051): edges are the approved dark walnut edge (texture cut from #21996's kantenmakro render,
   the dark-edge recipe live since release 1644), matte; a tight contact shadow under the soft one. Phone: arrows on the 3D slide only. */
.b3d-e-l, .b3d-e-r, .b3d-e-t, .b3d-e-b { background-color: #3d2618; }
.b3d-shadow { background: rgba(48, 30, 16, .44); filter: blur(13px); }   /* tighter, darker contact shadow (was .38 / 24px); never a filter on the slab, which would flatten the 3D */
@media (max-width: 979px) { .gallery.g-past-first .g-nav { opacity: 0 !important; pointer-events: none; } }

/* rev 3 (Ivan 22:02Z): the slot-1 photo must never appear before the board. This stylesheet is render-blocking, so from
 * the first paint a slot that carries a print (data-face) hides its photo and blurred photo preview and shows the
 * resting board drawn in CSS (same size and pose as the real slab); gallery3d.js then mounts the real board over it.
 * If 3D cannot run, the script adds .g3d-off and the photo returns at once; if the script never runs, it returns
 * after 4 s. Nothing here changes layout: every layer is absolute inside the square slide. */
.gallery-track figure[data-face] { background: radial-gradient(120% 90% at 50% 18%, #fbf8f3 0%, #efe8de 58%, #e4dacc 100%); }
.gallery-track figure[data-face]::before { display: none; }
.gallery-track figure[data-face] > img { opacity: 0; animation: g3d-photo-back 0s 4s forwards; }
/* CC #21962 rev 3b all pages: the resting board is a real element (.g3d-pre, emitted by build.cjs), not ::after, so the
 * browser's largest-contentful-paint timing counts it when it paints - a pseudo-element is never an LCP candidate. It is drawn
 * 0.2% taller than the script's board (under one pixel at phone size), so the identical board the script mounts a moment
 * later is not a LARGER new candidate: LCP then reports when the visitor first sees the board, not when it is re-mounted. */
.gallery-track figure[data-face] > .g3d-pre { display: block; position: absolute; left: 50%; top: 50%; height: 70.2%; aspect-ratio: var(--ar, 420 / 594);
  translate: -50% -42%; transform: perspective(1500px) rotateX(6deg) rotateY(-22deg); background: var(--face, none) center / cover no-repeat, #e6d6bd;
  box-shadow: 6px 0 0 #b89a74, 0 18px 34px rgba(60,40,20,.28); pointer-events: none; }
.gallery-track figure.g3d-on > img { opacity: 0; animation: none; }
.gallery-track figure.g3d-on > .g3d-pre { display: none; }
.gallery-track figure.g3d-off { background: var(--paper-2); }
.gallery-track figure.g3d-off::before { display: block; }
.gallery-track figure.g3d-off > .g3d-pre { display: none; }
.gallery-track figure.g3d-off > img { opacity: 1; animation: none; }
@keyframes g3d-photo-back { to { opacity: 1; } }