/* Let the shared woodland photograph continue around the studio and material selector. */
.product-show {
  --pv-text:var(--wood-type); --pv-muted:var(--wood-muted); --pv-gold:var(--wood-gold);
  --pv-panel:rgb(15 33 24 / .95); --pv-line:rgb(204 219 189 / .39); --pv-control-line:#899e88;
  color:var(--pv-text);
  padding-block:clamp(18px,2.8vw,38px) clamp(44px,6vw,84px);
}
.product-show .in-crumb {
  margin-bottom:clamp(18px,2.4vw,30px); width:fit-content;
  color:var(--pv-text); background:rgb(13 29 22 / .90);
  padding:6px 10px; border-radius:5px; max-width:100%; line-height:1.45;
}
.product-layout {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); grid-template-rows:auto 1fr;
  grid-template-areas:"viewer intro" "viewer details"; align-items:start;
  gap:0 clamp(20px,3.8vw,56px);
}
.product-intro,.product-layout .in-detail { padding:clamp(18px,2vw,30px); background:var(--pv-panel); border:1px solid var(--pv-line); }
.product-intro { grid-area:intro; border-bottom:0; border-radius:12px 12px 0 0; padding-bottom:12px; }
.product-intro .eyebrow { color:var(--pv-gold); letter-spacing:.1em; }
.product-intro h1 { font:600 clamp(2.15rem,3.4vw,3.85rem)/1.1 var(--serif); letter-spacing:-.035em; color:var(--pv-text); margin:.18em 0 .28em; }
.product-intro .in-lead { color:var(--pv-muted); font-size:1rem; }
.product-layout .in-detail { grid-area:details; border-top:0; border-radius:0 0 12px 12px; padding-top:12px; }
.product-layout .in-detail h2 { font:600 1.25rem/1.35 var(--serif); color:var(--pv-text); }
.product-layout .in-dl { margin:8px 0 17px; }
.product-layout .in-dl div { padding:9px 0; border-color:var(--pv-line); }
.product-layout .in-dl dt { color:var(--pv-muted); }
.product-layout .in-dl dd { color:var(--pv-text); }
.product-layout .in-dl a,.pv figcaption a { color:var(--pv-gold); text-decoration:underline; text-underline-offset:3px; }
.product-layout .in-dl a:hover,.pv figcaption a:hover { color:#fff; }
.product-layout .in-pill { color:var(--pv-text); background:#284637; border-color:var(--pv-line); }
.product-layout .in-pill:hover { background:#385a41; }
.product-layout .in-actions { margin-top:18px; }
.pv { grid-area:viewer; min-width:0; padding-bottom:12px; background:var(--pv-panel); border:1px solid var(--pv-line); border-radius:12px; }
.pv [hidden] { display:none !important; }
.pv-frame { overflow:hidden; isolation:isolate; border-radius:11px 11px 0 0; }
.pv-head,.pv-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:8px 12px; }
.pv-head { border-bottom:1px solid var(--pv-line); color:var(--pv-text); background:#203b2b; }
.pv-kicker { display:inline-flex; align-items:center; gap:7px; font:650 .84rem/1.35 var(--body); letter-spacing:.045em; color:inherit; }
.pv-kicker svg { width:18px; height:18px; }
.pv-modes,.pv-angles,.pv-tools { display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.pv-modes { padding:2px; background:#142e22; border:1px solid var(--pv-line); border-radius:6px; }
.pv button { border:0; background:transparent; color:var(--pv-text); border-radius:4px; font:600 .875rem/1.3 var(--body); }
.pv button:focus-visible,.pv canvas:focus-visible { outline:2px solid #f9ce7a; outline-offset:-3px; }
.pv button:hover { background:#3e5944; }
.pv button[aria-pressed="true"] { background:var(--pv-gold); color:#203423; }
.pv .pv-modes button { min-height:36px; padding:6px 12px; }
.pv-stage {
  position:relative; isolation:isolate; height:clamp(330px,35vw,500px); overflow:hidden;
  --pv-glade:url("../explorer/textures/forest-stage.webp");
  background:#acb398;
}
/* The back of the stone supports the low-profile formats, the front seats taller bags. */
.pv[data-display="model"] .pv-stage {
  background:var(--pv-glade) center top / auto 106% no-repeat #acb398;
}
@media(min-width:701px) and (max-width:850px) {
  .pv[data-display="model"] .pv-stage { background-size:cover; }
}
.pv-stage canvas,.pv-stage .in-art-large { position:absolute; z-index:2; inset:0; width:100%; height:100%; max-height:none; border-radius:0; }
/* Sun and leaves sit behind the transparent canvas so they never wash over the print. */
@media(prefers-reduced-motion:no-preference) {
  .pv[data-display="model"] .pv-stage::before,.pv[data-display="model"] .pv-stage::after {
    content:""; position:absolute; pointer-events:none; inset:0; z-index:0;
    background-position:inherit; background-size:inherit; background-repeat:no-repeat;
  }
  .pv[data-display="model"] .pv-stage::before {
    background-image:var(--pv-glade); transform-origin:6% 0;
    mask-image:radial-gradient(ellipse 33% 35% at 3% 0%,#000 36%,transparent 96%);
    animation:pv-leaves 6.8s ease-in-out infinite alternate;
  }
  .pv[data-display="model"] .pv-stage::after {
    background-image:url("../explorer/textures/canopy-light.webp"); opacity:.12;
    animation:pv-sunbreak 17.5s ease-in-out infinite;
  }
  .pv[data-display="model"] .pv-stage:not([data-motion-in-view])::before,
  .pv[data-display="model"] .pv-stage:not([data-motion-in-view])::after {
    animation-play-state:paused;
  }
}
@keyframes pv-leaves {
  0%,100% { transform:rotate(0); }
  39% { transform:rotate(.55deg) skewX(-.36deg); }
  72% { transform:rotate(-.26deg); }
}
@keyframes pv-sunbreak {
  0%,15%,46%,74%,100% { opacity:.08; }
  29% { opacity:.83; }
  58% { opacity:.36; }
  87% { opacity:.63; }
}
.pv-stage canvas { display:block; cursor:grab; touch-action:pan-y; }
.pv-stage .pv-sample { background:#1e3528; }
.pv-stage .pv-sample img { width:100%; height:100%; object-fit:scale-down; }
.pv[data-display="model"] .pv-photo-caption { display:none; }
.pv-stage canvas:active { cursor:grabbing; }
.pv-controls { border-bottom:1px solid var(--pv-line); background:#1b3427; padding-block:6px; }
.pv-angles button { min-height:44px; padding:4px 9px; }
.pv-tools { flex-wrap:nowrap; }
.pv-tools button { display:grid; place-items:center; min-width:44px; height:44px; font-size:1.18rem; border:1px solid var(--pv-control-line); background:#203d2e; }
.pv-tools svg { width:18px; height:18px; }
.pv .pv-caption,.pv .pv-status,.pv figcaption { margin:9px 12px 0; font-size:.9rem; line-height:1.55; color:var(--pv-muted); }
.pv-caption b { font-weight:600; }
@media(max-width:850px) {
  .product-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "viewer" "details"; gap:17px; }
  .product-intro,.product-layout .in-detail { border:1px solid var(--pv-line); border-radius:10px; padding:16px; }
  .product-intro .eyebrow { margin-bottom:7px; }
  .pv-stage { height:clamp(280px,71vw,420px); }
  .pv-head,.pv-controls { padding-inline:8px; }
}
@media(max-width:390px) {
  .pv-angles,.pv-tools { gap:2px; }
  .pv-tools button { min-width:44px; }
  .pv-angles button { padding-inline:6px; }
  .pv-modes button { padding-inline:8px; }
}

.sg-catalog-link {
  display:inline-flex; align-items:center; gap:6px; min-height:36px; margin-top:6px;
  color:var(--pv-text); text-decoration:underline; text-underline-offset:4px; font-weight:650;
}
.sg-catalog-link::after { content:"↓"; }
.sg { min-width:0; margin-bottom:22px; padding:0 0 18px; border-bottom:1px solid var(--pv-line); }
.sg-head,.sg-controls { display:flex; align-items:center; gap:8px; }
.sg-head { justify-content:space-between; }
.sg-controls[hidden] { display:none; }
.sg-controls button {
  min-height:36px; min-width:36px; border:1px solid var(--pv-control-line); border-radius:5px;
  background:#1d382b; color:var(--pv-text); font-size:1.1rem;
}
.sg-controls button:disabled { opacity:.42; cursor:default; }
.sg-count { min-width:4ch; color:var(--pv-muted); font-variant-numeric:tabular-nums; font-size:.88rem; text-align:center; }
.sg-cue { margin:4px 0; line-height:1.55; color:var(--pv-text); }
.sg-help { color:var(--pv-muted); font-size:.875rem; margin:3px 0 10px; }
.sg-list {
  position:relative; overflow-y:auto; scroll-snap-type:y mandatory;
  height:clamp(232px,18vw,282px); margin:0; padding:0; list-style:none;
  border:1px solid var(--pv-line); border-radius:6px 20px 6px 6px;
  background:#172c21; scrollbar-color:#8caa93 #172c21;
}
.sg-list:focus-visible,.sg-controls button:focus-visible { outline:2px solid var(--pv-gold); outline-offset:2px; }
.sg-item {
  height:100%; min-width:0; scroll-snap-align:start; display:grid; grid-template-rows:minmax(0,1fr) auto;
  background:#21392c;
}
.sg-item > a {
  display:grid; padding:7px; place-items:center; min-height:0; cursor:zoom-in;
  background:radial-gradient(ellipse at 50% 38%,#526c56,#2c4736 60%,#203728);
}
.sg-item a:focus-visible { outline-offset:-3px; }
.sg-item img { width:100%; height:100%; min-height:0; object-fit:contain; }
.sg-caption { padding:6px 12px 8px; background:#152c20; line-height:1.35; }
.sg-caption span,.sg-caption strong { display:block; overflow-wrap:anywhere; }
.sg-caption span { color:var(--pv-muted); font-size:.8rem; }
.sg-caption strong { font-size:.94rem; margin-top:3px; color:var(--pv-text); }
.sg-source-note { color:var(--pv-muted); font-size:.82rem; line-height:1.45; margin-top:8px; }
@media(max-width:850px) {
  .sg-controls button { min-width:44px; min-height:44px; }
  .sg-list { height:260px; }
}
@media(max-width:850px) and (orientation:portrait) {
  /* Leave room for both the whole specimen and its enquiry link. */
  .sg-list { height:clamp(300px, min(88vw, 52svh), 390px); }
}