/* =========================================================
   TopiaryTree — shoppable scene (scene.css)
   A photograph with a numbered dot over each piece; hover, tap or tab to a
   dot and the piece names and prices itself. Markup from TT_Scene (tt-core).
   Loaded only where a scene renders.
   ========================================================= */
.tt-scene{margin:var(--tt-s6) 0;font-family:var(--tt-sans);}
.tt-scene__head{margin-bottom:var(--tt-s4);}
.tt-scene__h{font-family:var(--tt-serif);font-weight:600;font-size:var(--tt-t-lg);line-height:1.16;
  margin:0 0 6px;color:var(--tt-ink);text-wrap:balance;}
.tt-scene__intro{margin:0;color:var(--tt-muted);font-size:var(--tt-t-sm);}

.tt-scene__stage{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--tt-line);
  box-shadow:0 2px 10px rgba(29,36,32,.10);background:var(--tt-bg-alt);}
.tt-scene__img{display:block;width:100%;height:auto;}

/* The dots. Sized for a thumb, numbered to match the list underneath. */
.tt-scene__dot{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;
  border:0;background:transparent;cursor:pointer;padding:0;z-index:3;}
.tt-scene__dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.35);
  animation:tt-scene-pulse 2.4s ease-out infinite;}
.tt-scene__n{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  margin:auto;border-radius:50%;background:#fff;color:var(--tt-ink);font:600 11px/1 var(--tt-sans);
  box-shadow:0 0 0 2px rgba(29,36,32,.55),0 2px 6px rgba(0,0,0,.35);transition:transform .16s;}
.tt-scene__dot:hover .tt-scene__n,.tt-scene__dot:focus-visible .tt-scene__n{transform:scale(1.2);}
.tt-scene__dot:focus-visible{outline:3px solid var(--tt-brass);outline-offset:3px;}
.tt-scene__dot[aria-expanded="true"] .tt-scene__n{background:var(--tt-brass);color:#fff;
  box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.4);}
@keyframes tt-scene-pulse{0%{transform:scale(.5);opacity:.85}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tt-scene__dot::before{animation:none;}}

/* The card that opens beside a dot. */
.tt-scene__tip{position:absolute;z-index:5;width:260px;max-width:calc(100% - 16px);background:var(--tt-paper);
  border:1px solid var(--tt-line);border-radius:6px;box-shadow:0 8px 24px rgba(29,36,32,.16);padding:12px;
  display:flex;gap:11px;text-align:left;}
.tt-scene__tip[hidden]{display:none;}
.tt-scene__tip img{width:64px;height:64px;object-fit:cover;border-radius:4px;flex:0 0 auto;background:var(--tt-bg-alt);}
.tt-scene__tip-name{font-family:var(--tt-serif);font-size:14px;font-weight:600;line-height:1.25;margin:0 0 3px;color:var(--tt-ink);}
.tt-scene__tip-price{font-size:14px;font-weight:700;color:var(--tt-green-900);margin:0;}
.tt-scene__tip-price--quote{font-size:12.5px;font-weight:600;color:var(--tt-brass);}
.tt-scene__tip-note{font-size:11.5px;color:var(--tt-muted);margin:3px 0 7px;}
.tt-scene__tip-link{font-size:12.5px;color:var(--tt-green-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* What everyone gets, script or not: the same pieces, numbered like the dots. */
.tt-scene__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 28px;
  margin:var(--tt-s3) 0 0;padding:0;list-style:decimal inside;font-size:var(--tt-t-sm);color:var(--tt-muted);}
.tt-scene__list li{display:list-item;margin:0;padding:0;}
.tt-scene__list a{color:var(--tt-ink);}
.tt-scene__price{margin-left:6px;color:var(--tt-green-900);font-weight:600;}
.tt-scene__price--quote{color:var(--tt-brass);}

/* On a category the scene sits in the long-description column. */
.tt-scene-wrap{max-width:1080px;margin:var(--tt-s7) auto 0;padding-inline:clamp(20px,5vw,56px);}
.tt-scene-wrap .tt-scene{margin:0;}

@media (max-width:720px){
  .tt-scene__tip{width:214px;}
  .tt-scene__dot{width:42px;height:42px;}
}