/* Exact screenshot regions are lifted with CSS; the supplied bitmap stays unchanged. */
.shop-walkthrough { --shop-accent:#47683b; --target-x:2.05%; --target-y:18.65%; --target-w:8.55%; --target-h:4.15%; --lift-image-width:1169.59%; --lift-image-x:-2.05%; --lift-image-y:-18.65%; --label-x:2.05%; --label-y:24%; border:1px solid #ccd7c1; border-radius:12px; background:#f1f4eb; padding:26px; box-shadow:0 3px 0 #e0e6d7,0 20px 50px -36px #40563355; }
.shop-guide-top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.shop-guide-top .guide-kicker { font-size:.625rem; letter-spacing:.1em; }
.shop-guide-top h3 { font-size:1.5rem; font-weight:500; letter-spacing:-.035em; margin-top:8px; }
.shop-guide-tag { font-size:.6875rem; color:#607552; border:1px solid #cfdcc3; background:#fafdF5; border-radius:4px; padding:5px 9px; white-space:nowrap; }
.shop-step-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:24px 0 28px; }
.shop-step { position:relative; display:flex; gap:9px; align-items:center; text-align:left; background:#f9fbf5; border:1px solid #d4deca; border-radius:5px; padding:13px 10px 16px; color:#6f7b64; overflow:hidden; transition:background 200ms,border-color 200ms,transform 200ms; }
.shop-step>span { font-size:.625rem; font-variant-numeric:tabular-nums; color:#81916f; }
.shop-step>strong { font-size:.8125rem; font-weight:500; }
.shop-step i { position:absolute; height:3px; bottom:0; left:0; right:0; background:#728e5b; transform-origin:left; transform:scaleX(0); }
.shop-step.is-complete i { transform:scaleX(1); background:#b3c59e; }
.shop-step[aria-pressed="true"] { color:#304f27; background:#e5edda; border-color:#8ca674; box-shadow:0 2px 0 #d8e3ca; }
.shop-step[aria-pressed="true"]>span { color:#526f3e; }
.shop-step[aria-pressed="true"] i { transform:scaleX(var(--step-progress,0)); }
.shop-step:hover { border-color:#849c6e; transform:translateY(-2px); }
.shop-exhibit { position:relative; perspective:1500px; }
.shop-screen-plane { position:relative; border:1px solid #b9c8aa; border-radius:9px; background:#f7faf2; box-shadow:0 4px 0 #cfdbc1,0 20px 25px -20px #31432860; transform:rotateX(3deg) rotateY(-1.5deg); transform-origin:center 70%; transform-style:preserve-3d; transition:transform 650ms cubic-bezier(.22,1,.36,1); }
.shop-screen-chrome { display:flex; gap:12px; justify-content:space-between; align-items:center; color:#69775d; font-size:.5625rem; padding:10px 12px; border-bottom:1px solid #d3ddc9; background:#e7eedf; border-radius:8px 8px 0 0; }
.shop-screen-chrome>span:first-child { font-size:.5rem; letter-spacing:2px; color:#9caf8b; }
.shop-screen-chrome>span:last-child { font-size:.5rem; }
.shop-screen-canvas { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:var(--canvas-ratio); background:#e3e9de; }
.shop-screenshot { position:relative; width:var(--photo-width,100%); aspect-ratio:var(--photo-ratio); overflow:hidden; background:#edf3e9; }
.shop-walkthrough + .shop-walkthrough { margin-top:42px; }
.shop-original { display:block; width:100%; height:auto; }
.shop-spotlight { position:absolute; top:var(--target-y); left:var(--target-x); width:var(--target-w); height:var(--target-h); box-shadow:0 0 0 1600px #22322773; border-radius:3px; opacity:0; transition:left 650ms cubic-bezier(.22,1,.36,1),top 650ms cubic-bezier(.22,1,.36,1),width 650ms cubic-bezier(.22,1,.36,1),height 650ms cubic-bezier(.22,1,.36,1),opacity 350ms; pointer-events:none; }
.shop-lift { position:absolute; top:var(--target-y); left:var(--target-x); width:var(--target-w); height:var(--target-h); overflow:hidden; outline:2px solid #7d9b5d; outline-offset:2px; border-radius:3px; background:white; box-shadow:0 4px 0 #46643066,0 13px 24px -4px #15251173; transform:translateY(-3px) scale(1.035); z-index:2; opacity:0; }
.shop-lift>img { display:block; width:var(--lift-image-width); max-width:none; height:auto; transform:translate(var(--lift-image-x),var(--lift-image-y)); pointer-events:none; }
.shop-cursor { position:absolute; right:5%; bottom:10%; width:18px; height:22px; filter:drop-shadow(0 2px 1px #33442235); }
.shop-cursor svg { display:block; width:100%; height:100%; }
.shop-target-label { position:absolute; left:var(--label-x); top:var(--label-y); color:#f9fff2; background:#405e31; border:1px solid #a1b785; border-radius:3px; padding:3px 6px; font-size:.5625rem; white-space:nowrap; transform:translateY(5px); z-index:3; opacity:0; }
.shop-enhanced .shop-spotlight,.shop-enhanced .shop-lift,.shop-enhanced .shop-target-label { opacity:1; }
.shop-screen-base { display:flex; gap:12px; justify-content:space-between; padding:8px 12px; color:#687a5b; font-size:.5rem; border-top:1px solid #d8e1cf; border-radius:0 0 8px 8px; background:#e9efdf; }
.shop-detail-stack { display:grid; position:relative; }
.shop-enhanced .shop-detail { grid-area:1/1; }
/* Inactive panels reserve the tallest step's space, but remain inert and hidden to AT. */
.shop-enhanced .shop-detail.is-inactive { visibility:hidden; pointer-events:none; }
.shop-detail { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); border:1px solid #b3c7a0; border-radius:9px; background:#fcfef8; margin-top:10px; box-shadow:0 4px 0 #d7e2cc,0 19px 32px -23px #344c2460; min-width:0; overflow:hidden; }
.shop-detail-visual { display:flex; flex-direction:column; justify-content:center; padding:22px; background:#e9f0df; border-right:1px solid #d3dfc7; min-width:0; }
.shop-detail-label { color:#657e51; font-size:.5625rem; letter-spacing:.11em; margin-bottom:21px; }
.shop-crop-frame { width:100%; align-self:center; padding:8px; border:1px solid #d0ddc2; background:#f8fbf2; border-radius:7px; transform:perspective(800px) rotateY(-3deg) rotateX(3deg); box-shadow:3px 4px 0 #c6d6b6,0 13px 22px -12px #37512350; }
.shop-crop { position:relative; width:100%; aspect-ratio:var(--crop-ratio); overflow:hidden; border-radius:4px; background:#f2f7ec; }
.shop-crop>img { display:block; width:var(--crop-width); max-width:none; height:auto; transform:translate(var(--crop-x),var(--crop-y)); }
.shop-detail-location { font-size:.625rem; color:#657959; margin-top:20px; line-height:1.9; }
.shop-detail-copy { padding:24px 25px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.shop-detail-index { font-size:.625rem; color:#507837; letter-spacing:.1em; }
.shop-detail-index>span { color:#99a68b; padding-left:8px; }
.shop-detail h4 { font-size:1.35rem; line-height:1.55; font-weight:550; letter-spacing:-.035em; margin:11px 0 13px; color:#2c4527; }
.shop-detail-copy>p { font-size:1rem; line-height:1.9; color:#5b6d4e; }
.shop-takeaway { display:flex; gap:10px; align-items:start; border-top:1px solid #dce5d3; margin-top:18px; padding-top:14px; font-size:.8125rem; font-weight:500; color:#496d34; line-height:1.9; }
.shop-takeaway>span { font-size:1.15rem; line-height:1.3; }
.shop-guide-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:13px; padding-top:23px; }
.shop-play-status { font-size:.6875rem; color:#637852; }
.shop-guide-introduction { font-size:.875rem; color:#66785a; line-height:1.9; margin-top:14px; }
.shop-original-gallery { display:flex; flex-wrap:wrap; gap:4px 20px; }
.shop-play-controls { display:flex; flex-wrap:wrap; gap:8px; }
.shop-play-controls button { background:#fbfdf7; border:1px solid #c6d6b8; border-radius:4px; color:#4c6a3c; padding:7px 10px; font-size:.6875rem; min-height:36px; transition:border-color 180ms,background 180ms; }
.shop-play-controls button:hover { background:#e7f0dc; border-color:#8ca772; }
.shop-play-controls button:disabled { opacity:.4; cursor:default; }
.shop-guide-footnote { font-size:.6875rem; line-height:1.85; color:#75816b; padding-top:16px; margin-top:17px; border-top:1px solid #d7e1cd; }
.shop-view-original { display:inline-flex; align-items:center; gap:12px; color:#547445; font-size:.75rem; padding-top:11px; text-decoration:underline; text-underline-offset:4px; }
.shop-view-original>img { display:none; }
.shop-walkthrough.is-playing .shop-cursor { animation:shop-point 2400ms ease-in-out infinite; }
.shop-walkthrough:not(.is-in-view) .shop-cursor { animation-play-state:paused; }
@keyframes shop-point { 0%,35%,100% { transform:translate(2px,3px); } 50%,65% { transform:translate(0,0) scale(.88); } }
@media(max-width:1100px) { .shop-walkthrough { padding:20px; } .shop-step { padding-inline:8px; gap:7px; } .shop-step strong { font-size:.75rem; } .shop-detail-copy { padding:21px; } .shop-detail-visual { padding:18px; } .shop-detail h4 { font-size:1.2rem; } }
@media(max-width:650px) {
  .shop-walkthrough { padding:16px; border-radius:8px; }
  .shop-guide-top { flex-wrap:wrap; gap:10px; }
  .shop-guide-top h3 { font-size:1.3rem; } .shop-guide-tag { font-size:.625rem; }
  .shop-step-controls { grid-template-columns:1fr 1fr; margin-block:20px; }
  .shop-step { min-height:49px; padding:11px; } .shop-step strong { font-size:.8125rem; }
  .shop-screen-plane { transform:none; }
  .shop-screen-chrome { padding:7px; gap:7px; font-size:.4375rem; }
  .shop-screen-chrome>span:first-child,.shop-screen-chrome>span:last-child { display:none; }
  .shop-screen-base { padding:6px; font-size:.4375rem; } .shop-screen-base>span:last-child { display:none; }
  .shop-target-label { font-size:.4375rem; padding:1px 3px; }
  .shop-lift { outline-width:1px; outline-offset:1px; box-shadow:0 4px 6px #18341055; }
  .shop-cursor { width:10px; height:12px; }
  .shop-detail { grid-template-columns:1fr; }
  .shop-detail-visual { border-right:0; border-bottom:1px solid #d3dfc7; padding:19px; }
  .shop-detail-label { margin-bottom:14px; font-size:.625rem; }
  .shop-crop-frame { max-width:280px; }
  .shop-detail-location { margin-top:14px; font-size:.6875rem; }
  .shop-detail-copy { padding:20px; } .shop-detail h4 { font-size:1.25rem; } .shop-detail-copy>p { font-size:1rem; }
  .shop-play-controls { width:100%; } .shop-play-controls button { flex:1; min-height:42px; font-size:.75rem; }
  .shop-guide-footnote { font-size:.75rem; }
}
.large-guide-text .shop-detail { grid-template-columns:1fr; }
.large-guide-text .shop-step-controls { grid-template-columns:1fr 1fr; }
.large-guide-text .shop-step { flex-wrap:wrap; }
.large-guide-text .shop-crop-frame { max-width:420px; }
.large-guide-text .shop-guide-top { flex-wrap:wrap; }
/* Keep the active picture, instructions and controls in one reading area.
   The original stacked cards remain the no-JavaScript fallback. */
.shop-enhanced { container:shop-guide / inline-size; --shop-picture-height:clamp(120px,26dvh,260px); }
.shop-enhanced .shop-player { padding:18px; border:1px solid #bccdac; border-radius:9px; background:#fcfef8; box-shadow:0 4px 0 #d7e2cc; scroll-margin-top:calc(var(--guide-header-height,88px) + 90px); }
.shop-enhanced .shop-exhibit { display:grid; gap:18px; align-items:center; perspective:none; }
.shop-visual-stage { min-width:0; }
.shop-enhanced .shop-visual-stage { display:grid; grid-template-rows:auto 1fr; }
.shop-enhanced .shop-image-stack,.shop-enhanced .shop-focus-stack { grid-area:2/1; align-self:center; }
.shop-enhanced .shop-image-stack.is-inactive,.shop-enhanced .shop-focus-stack.is-inactive { visibility:hidden; pointer-events:none; }
.shop-view-controls { display:flex; gap:4px; margin-bottom:10px; padding:3px; border:1px solid #d6e0ce; border-radius:6px; background:#edf2e7; }
.shop-view-controls button { flex:1; min-height:36px; padding:6px 10px; border:0; border-radius:4px; background:transparent; font-size:.8125rem; color:#66775a; }
.shop-view-controls button[aria-pressed="true"] { background:#fff; color:#355728; box-shadow:0 1px 4px #31432818; }
.shop-enhanced .shop-screen-plane { transform:none; box-shadow:none; }
.shop-enhanced .shop-screen-chrome { padding:8px; }
.shop-enhanced .shop-screen-chrome>span:first-child { display:none; }
.shop-enhanced .shop-screen-canvas { height:var(--shop-picture-height); aspect-ratio:auto; }
.shop-enhanced .shop-screenshot { width:min(100%,calc(var(--shop-picture-height) * var(--photo-ratio))); flex-shrink:0; }
.shop-enhanced .shop-screen-base { padding:7px 8px; }
.shop-enhanced .shop-screen-base>span:last-child { display:none; }
.shop-enhanced .shop-detail { display:block; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.shop-enhanced .shop-detail-copy { padding:0; }
.shop-enhanced .shop-detail h4 { font-size:1.2rem; line-height:1.5; margin:9px 0 12px; }
.shop-enhanced .shop-detail-copy>p { font-size:1rem; line-height:1.8; }
.shop-enhanced .shop-takeaway { margin-top:14px; padding-top:12px; line-height:1.7; }
.shop-focus-stack { display:grid; }
.shop-enhanced .shop-detail-visual { grid-area:1/1; padding:12px; border:1px solid #d3dfc7; border-radius:8px; min-width:0; }
.shop-enhanced .shop-detail-visual.is-inactive { visibility:hidden; pointer-events:none; }
.shop-enhanced .shop-detail-label { margin-bottom:10px; font-size:.625rem; }
.shop-enhanced .shop-crop-frame { display:flex; align-items:center; justify-content:center; height:var(--shop-picture-height); padding:0; border:0; box-shadow:none; transform:none; background:transparent; }
.shop-enhanced .shop-crop { width:min(100%,calc(var(--shop-picture-height) * var(--crop-ratio))); flex-shrink:0; }
.shop-enhanced .shop-detail-location { margin-top:10px; font-size:.6875rem; line-height:1.6; }
.shop-enhanced .shop-guide-footer { margin-top:18px; padding-top:14px; border-top:1px solid #dce5d3; gap:10px; }
.shop-enhanced .shop-play-controls button { min-height:40px; font-size:.75rem; }
/* Reserve two status lines so a pause message cannot change viewport eligibility. */
.shop-enhanced .shop-play-status { flex:1 1 13rem; line-height:1.6; min-height:3.2em; display:flex; align-items:center; }
@container shop-guide (min-width:620px) {
  .shop-enhanced .shop-exhibit { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; }
}
@container shop-guide (max-width:619px) {
  .shop-enhanced .shop-visual-stage { --shop-picture-height:clamp(90px,16dvh,160px); }
  .shop-enhanced .shop-player { padding:14px; }
  .shop-enhanced .shop-screen-chrome>span:last-child { display:none; }
  .shop-enhanced .shop-play-controls { width:100%; }
  .shop-enhanced .shop-play-controls button { flex:1; padding-inline:6px; }
  .shop-enhanced .shop-play-controls button span { display:none; }
  .shop-enhanced .shop-guide-footer { gap:8px; margin-top:14px; padding-top:12px; }
}
.large-guide-text .shop-enhanced .shop-exhibit { grid-template-columns:1fr; }
@media(prefers-reduced-motion:reduce) { .shop-screen-plane,.shop-crop-frame { transform:none; } .shop-lift { transform:none; } }