/* Cornice RÖDALM: unica fonte, usata dalla home (Frames I love), dalla scheda prodotto e dal portfolio (vista Frame). */
.roedalm { position:relative; width:calc(var(--frame-long) * 5 / 7); margin:auto; aspect-ratio:5/7; background:#f4f3ef; box-shadow:0 20px 55px #0008,0 3px 9px #0009; overflow:hidden; }
.roedalm.landscape { aspect-ratio:7/5; width:var(--frame-long); }
.roedalm-print { position:absolute; inset:7.6%; overflow:hidden; background:#edece8; }
.roedalm-print img { width:100%; height:100%; object-fit:contain; transform:translate(var(--print-x,0),var(--print-y,0)) scale(var(--print-zoom,1)); transform-origin:center; transition:none; }
.roedalm-mat { position:absolute; inset:7.2%; pointer-events:none; border:clamp(24px,4vw,48px) solid #f6f5f1; box-shadow:inset 0 0 16px #0002,0 0 3px #0005; }
.roedalm-edge { position:absolute; inset:0; pointer-events:none; border:clamp(10px,1.5vw,18px) solid var(--frame-color,#171717); box-shadow:inset 0 0 0 2px #454545,inset 0 0 14px #000,0 0 0 1px #000; }
@media (max-width:820px) { .roedalm-mat { border-width:clamp(28px,9vw,44px); } }

/* Il quadro nel salotto (scheda prodotto e portfolio): --frame-long lo misura mpBlocks.fitRoomArt sulla stanza. */
.room-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.room-art { position:absolute; left:53%; top:32%; transform:translate(-50%,-50%); }
.room-art .roedalm { box-shadow:0 15px 35px #291b1266,0 3px 7px #291b124f; }
.room-art .roedalm-mat { border-width:clamp(8px,1.6vw,22px); }
.room-art .roedalm-edge { border-width:clamp(4px,.6vw,8px); }
/* senza passe-partout: la foto riempie la cornice */
.no-mat .roedalm-mat { display:none; }
.no-mat .roedalm-print { inset:clamp(10px,1.5vw,18px); }
.no-mat .room-art .roedalm-print { inset:clamp(4px,.6vw,8px); }
.no-mat .roedalm-print img { object-fit:cover; }

/* Testi d'acquisto accanto alla cornice (mpBlocks.printPanel): home (scena finale dell'apertura) e portfolio (vista Frame).
   Con .painted si "dipingono" piano dall'alto verso il basso, uno dopo l'altro: etichetta, poi prezzo e Buy now,
   poi la nota. Una maschera sfumata scende sopra ogni riga e la scopre. */
.ppanel { display:flex; flex-direction:column; justify-content:center; text-align:left; color:#161616; }
.peyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; }
.ppanel h2 { font-family:var(--serif); font-weight:400; font-size:clamp(38px,4.4vw,64px); line-height:.98; letter-spacing:-.02em; margin-top:12px; }
.ppanel h2 em { font-style:italic; color:var(--bronze); }
.prow { display:flex; align-items:center; gap:22px; margin-top:26px; flex-wrap:wrap; }
.pprice { font-family:var(--serif); font-size:34px; letter-spacing:-.01em; }
.pbuy { display:inline-flex; align-items:center; font:inherit; font-size:15px; padding:15px 28px; border-radius:40px; border:0; cursor:pointer; background:#161616; color:#f5f2ec; transition:background .3s; }
.pbuy:hover { background:var(--bronze); }
.pnote { margin-top:14px; font-size:12px; opacity:.5; }
.peyebrow, .prow, .pnote {
  -webkit-mask-image:linear-gradient(180deg,#000 40%,#0000 60%); mask-image:linear-gradient(180deg,#000 40%,#0000 60%);
  -webkit-mask-size:100% 250%; mask-size:100% 250%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 100%; mask-position:0 100%;
  transition:-webkit-mask-position .4s ease, mask-position .4s ease;
}
.ppanel.painted .peyebrow, .ppanel.painted .prow, .ppanel.painted .pnote { -webkit-mask-position:0 0; mask-position:0 0; transition-duration:.8s; transition-timing-function:cubic-bezier(.4,0,.2,1); }
.ppanel.painted .peyebrow { transition-delay:.05s; }
.ppanel.painted .prow { transition-delay:.5s; }
.ppanel.painted .pnote { transition-delay:1s; }