/* StringPhoto v7.15 (v7.14 + one wall lamp centered on each of the two left panels), every page.
   1. Highlight color = the pink of the logo's strings.
   2. Shape buttons: outline icons (filled only when chosen); each button gets its own outline when the shape is missing.
   3. "Start designing" / "Create your String Art" look switched off until everything needed is chosen.
   4. Home page card: the digital file's own shape / nails / width. */
:root{--accent:#E0207A;--accent-soft:rgba(224,32,122,.08)}
::selection{background:rgba(224,32,122,.18)}

.st-shape-ic{box-sizing:border-box;width:14px;height:14px;background:transparent!important;border:2px solid currentColor}
.st-seg button[aria-checked="true"] .st-shape-ic{background:currentColor!important}
#st-free .st-seg{gap:8px}
.st-missing{box-shadow:0 0 0 2px #D9622B!important}
input.st-missing{border-color:#D9622B!important}
.st-start-go:disabled,.st-start-go[aria-disabled="true"]{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}
.st-start-hint{margin:16px 0 -8px;font-size:.84rem;color:var(--text-2,#57514a);text-align:center}

.hall-copy .hc-go.is-off{opacity:.4;cursor:not-allowed}
.hall-copy .hc-hint{margin:0 0 8px;font-size:.8rem;color:var(--text-2,#57514a);text-align:center}
.hall-copy .hc-hint.hc-shake{animation:hcShake .45s}
@keyframes hcShake{0%,100%{transform:none}25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.hall-copy .hc-off{display:none!important}
.hc-dig{display:grid;gap:8px;margin:2px 0 6px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#FBF8F3}
.hc-dig[hidden]{display:none}
.hc-dig-t{margin:0;font:600 .78rem var(--sans);color:var(--text)}
.hc-dig-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hc-dig-seg button{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;border:1.5px solid rgba(21,18,15,.16);border-radius:10px;background:#fff;font:600 .85rem var(--sans);color:var(--text);cursor:pointer}
.hc-dig-seg button[aria-checked="true"]{background:var(--text);border-color:var(--text);color:#fff}
.hc-ic{box-sizing:border-box;width:13px;height:13px;border:2px solid currentColor;border-radius:50%}
.hc-ic.sq{border-radius:2px}
.hc-dig-seg button[aria-checked="true"] .hc-ic{background:currentColor}
.hc-dig-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hc-dig-row label{display:grid;gap:3px;font:600 .74rem var(--sans);color:var(--text)}
.hc-dig-row input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:500 .92rem var(--sans);background:#fff;color:var(--text)}
@media(max-width:900px),(orientation:portrait) and (max-width:1100px){.hc-dig{padding:8px 10px;gap:6px}.hc-dig-seg button{padding:6px}.hc-dig-row input{padding:6px 8px}}

/* v7.11: tip on the switched-off "Start designing" / "Create your String Art" buttons */
.st-go-wrap{position:relative;display:block}
.st-go-wrap .st-start-go:disabled{pointer-events:none}
.st-go-wrap[data-tip]:hover::after,.st-go-wrap[data-tip]:focus-within::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:max-content;max-width:min(320px,86vw);padding:9px 13px;border-radius:12px;background:#15120F;color:#fff;font:500 .8rem/1.4 var(--sans);text-align:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);z-index:20;pointer-events:none}
.st-go-wrap[data-tip]:hover::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);border:6px solid transparent;border-top-color:#15120F;border-bottom:0;z-index:20}
.st-go-wrap .st-start-go{margin-top:0}
#st-start .st-go-wrap{margin-top:22px}
.hall-copy .hc-go-wrap{display:block}

/* v7.12: new wall sconces (opal glass globes): the warm glow sits on the globe */
.hall-sconce .sc-glow{left:60%;top:50%;width:300%;height:150%;background:radial-gradient(closest-side,rgba(255,228,175,.62),rgba(255,228,175,.2) 45%,rgba(255,228,175,0))}
.hall-sconce.sc-r .sc-glow{left:40%}
.hall-sconce.sc-d .sc-g1{left:20%;width:210%}
.hall-sconce.sc-d .sc-g2{left:80%;width:210%}
.hall-sconce svg{filter:drop-shadow(2px 5px 5px rgba(50,35,20,.25))}

/* v7.13: wall lamps are curved LED tubes on a brass rail: the glow sits on the curve */
.hall-sconce .sc-glow{left:57%;top:50%;width:260%;height:120%}
.hall-sconce.sc-r .sc-glow{left:43%}
.hall-sconce.sc-d .sc-g1{left:28%;width:190%}
.hall-sconce.sc-d .sc-g2{left:72%;width:190%}
.hall-sconce svg{filter:none}

/* v7.13: page-load intro in the logo's layout: STRING on top, PH left, TO right, the string ring as the O.
   When the ring flies to the frame, the words fade and only the ring moves. */
.intro7-logo{position:relative;width:min(58vh,86vw);aspect-ratio:600/417}
.intro7-logo .intro7-ring{position:absolute;left:26.17%;top:25.78%;width:47.5%;height:auto}
.intro7-logo .i7-words{position:absolute;inset:0;transition:opacity .35s ease}
.intro7-logo .i7-words img{position:absolute;display:block;height:auto;opacity:0;animation:i7word .55s cubic-bezier(.2,.7,.2,1) forwards}
.intro7-logo .i7-string{left:21.5%;top:9.83%;width:56.83%;--dx:0;--dy:-14px;animation-delay:1.25s!important}
.intro7-logo .i7-ph{left:2.67%;top:34.53%;width:25.33%;--dx:-18px;--dy:0;animation-delay:1.4s!important}
.intro7-logo .i7-to{left:69%;top:34.53%;width:28.33%;--dx:18px;--dy:0;animation-delay:1.4s!important}
@keyframes i7word{from{opacity:0;transform:translate(var(--dx),var(--dy))}to{opacity:1;transform:none}}
.intro7.fly .i7-words{opacity:0}
.intro7-name{display:none!important}
.hc-dig-l{margin:0;font:600 .72rem var(--sans);color:var(--text-2)}

/* v7.14: S-curve LED wall lamps winding around a brass rod */
.hall-sconce .sc-glow{left:50%;top:50%;width:230%;height:110%}
.hall-sconce.sc-r .sc-glow{left:50%}
.hall-sconce.sc-d .sc-g1{left:29%;width:160%}
.hall-sconce.sc-d .sc-g2{left:71%;width:160%}
/* v7.14 phones: a close-up of the frame when the panel leaves little room */
@media(max-width:900px),(orientation:portrait) and (max-width:1100px){
  .hall-room.hall-compact .hall-sofa,.hall-room.hall-compact .hall-lamp,.hall-room.hall-compact .hall-pool,.hall-room.hall-compact .hall-sconce,
  .hall-room.hall-compact .hm-arch,.hall-room.hall-compact .hall-rug,.hall-room.hall-compact .hall-label,.hall-room.hall-compact .hm-rail{display:none!important}
  .hall-copy.hc-digital .hc-more{display:none!important}
  .hall-copy.hc-digital .hc-dig-t{display:none}
}

/* v7.15: the two panels on the left each get their own lamp, centered on the panel (instead of a pair on the line between them) */
.hall-sconce.sc-p1{left:calc((var(--g) + (var(--cl) - var(--g)) / 2) / 2)}
.hall-sconce.sc-p2{left:calc(((var(--cl) - var(--g)) / 2 + var(--cl)) / 2)}
@media(max-width:900px),(orientation:portrait) and (max-width:1100px){.hall-mould .sc-p1,.hall-mould .sc-p2{display:none}}

/* v7.16 phones: no frame-only close-up any more (the whole room scales instead), and a tighter bottom panel */
@media(max-width:900px),(orientation:portrait) and (max-width:1100px){
  .hall-room.hall-nolabel .hall-label{visibility:hidden}
  .hall-copy.hc-tight .hc-more.on{transition:none!important;max-height:0!important;padding-top:0!important;padding-bottom:0!important}
  .hall-copy{padding-top:12px!important;padding-bottom:12px!important}
  .hall-copy h2{font-size:clamp(1.25rem,5.6vw,1.6rem)!important;margin-bottom:8px!important}
  .hall-copy .hc-way{padding-top:7px!important;padding-bottom:7px!important}
  .hall-copy .hc-more.on{padding-top:2px;padding-bottom:0}
  .hall-copy .hc-more span{font-size:.7rem;line-height:1.45}
  .hall-copy .wv-tabs{margin-top:6px!important;margin-bottom:6px!important}
  .hall-copy .hc-hint{margin-bottom:5px;font-size:.76rem}
  .hall-copy .hc-go{padding-top:12px!important;padding-bottom:12px!important}
}