/* Image Hotspots widget */
.hs-title{font-size:clamp(2.4rem,5vw,4.4rem)}
.hs-lead{max-width:36rem;margin:1rem auto 0;color:var(--muted)}
.hs{position:relative;max-width:1240px;margin:0 auto}
.hs-frame{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(var(--gold-rgb),.16)}
.hs-img{width:100%;height:auto}
.hs-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(14,10,7,.35));pointer-events:none}
.hs-spots{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.hs-spot{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2}
.hs-spot.is-open{z-index:10}

/* the dot: 44px touch target, 24px visible */
.hs-dot{-webkit-appearance:none;appearance:none;position:absolute;left:-22px;top:-22px;width:44px;height:44px;margin:0;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;pointer-events:auto;color:#0a1628;-webkit-tap-highlight-color:transparent}
.hs-dot::before{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:rgba(var(--gold-rgb),.55);animation:hs-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:var(--d,0s)}
.hs-core{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--gold);border:2px solid rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
.hs-core::before,.hs-core::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;background:#0a1628;border-radius:1px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hs-core::after{transform:rotate(90deg)}
.hs-dot:hover .hs-core{transform:scale(1.12)}
.hs-spot.is-open .hs-core{transform:rotate(135deg) scale(1.08);background:#fff}
.hs-spot.is-open .hs-dot::before{animation:none;opacity:0}
.hs-dot:focus-visible{outline:none}
.hs-dot:focus-visible .hs-core{box-shadow:0 0 0 3px rgba(14,10,7,.8),0 0 0 5px #fff}
@keyframes hs-pulse{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(2.6);opacity:0}}

/* the card */
.hs-card{--shift:0px;position:absolute;left:0;bottom:24px;width:min(300px,calc(100vw - 24px));padding:1.15rem 1.25rem 1.1rem;border-radius:12px;background:rgba(8,20,40,.96);border:1px solid rgba(var(--gold-rgb),.35);box-shadow:0 30px 60px -20px rgba(0,0,0,.85);color:var(--cream);pointer-events:auto;text-align:left;
  transform:translateX(calc(-50% + var(--shift))) translateY(6px);opacity:0;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.hs-card[hidden]{display:none}
.hs-spot.is-open .hs-card{opacity:1;transform:translateX(calc(-50% + var(--shift)))}
.hs-card::before{content:"";position:absolute;left:0;right:0;top:100%;height:4px}   /* hover bridge: closes the gap to the dot's 44px hit area */
.hs-card::after{content:"";position:absolute;left:calc(50% - var(--shift));top:100%;width:12px;height:12px;margin:-6px 0 0 -6px;background:inherit;border:inherit;border-top:0;border-left:0;transform:rotate(45deg)}
.hs-spot.is-below .hs-card{bottom:auto;top:24px;transform:translateX(calc(-50% + var(--shift))) translateY(-6px)}
.hs-spot.is-below.is-open .hs-card{transform:translateX(calc(-50% + var(--shift)))}
.hs-spot.is-below .hs-card::before{top:auto;bottom:100%;height:4px}
.hs-spot.is-below .hs-card::after{top:0;transform:rotate(225deg)}
.hs-cat{margin:0 0 .35rem;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.hs-name{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.55rem;line-height:1.08;margin:0 0 .45rem}
.hs-desc{margin:0 0 .8rem;font-size:.86rem;line-height:1.5;color:var(--muted)}
.hs-price{display:flex;align-items:center;gap:.7rem;margin:0;font-family:var(--serif);font-size:1.3rem;color:var(--gold2)}
.hs-price::before{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--gold-rgb),.05),rgba(var(--gold-rgb),.45))}
.hs-note{text-align:center;color:var(--muted);font-size:.88rem;margin:1.6rem auto 0;max-width:40rem}

/* light theme */
.theme-light .hs-frame{box-shadow:0 40px 80px -40px rgba(var(--shadow-rgb),.35),0 0 0 1px rgba(30,23,17,.08)}
.theme-light .hs-frame::after{background:none}
.theme-light .hs-core{background:#fff;border-color:var(--gold)}
.theme-light .hs-dot::before{background:rgba(255,255,255,.75)}
.theme-light .hs-core::before,.theme-light .hs-core::after{background:var(--gold2)}
.theme-light .hs-spot.is-open .hs-core{background:var(--gold);border-color:#fff}
.theme-light .hs-spot.is-open .hs-core::before,.theme-light .hs-spot.is-open .hs-core::after{background:#fff}
.theme-light .hs-card{background:rgba(255,255,255,.98);border-color:rgba(var(--gold-rgb),.35);box-shadow:0 30px 60px -24px rgba(var(--shadow-rgb),.45),0 2px 8px rgba(var(--shadow-rgb),.08);color:#1e1711}
.theme-light .hs-price::before{background:linear-gradient(90deg,rgba(var(--gold-rgb),.05),rgba(var(--gold-rgb),.45))}

@media (max-width:760px){
  .hs-frame{border-radius:10px}
  .hs-dot::before,.hs-core{width:22px;height:22px;margin:-11px 0 0 -11px}
  .hs-name{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){.hs-dot::before{animation:none;opacity:.5}.hs-card,.hs-core{transition:none}}

/* keep the whole image in view on short desktop screens */
@media (min-width:761px){.hs{max-width:min(1240px,max(620px,calc((100vh - 280px) * 1.5)))}}