/* Photographic product treatment: bright material detail, restrained UI. */
.product-stage{background:#ded2bd url('assets/preview-gold-front.jpg') center / cover no-repeat}
.product-stage:before,.stage-orbit{display:none}
.product-visual{inset:0;background-position:center;background-size:cover}
.product-visual canvas{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .42s ease,transform .55s cubic-bezier(.2,.75,.2,1)}
.product-visual.changing canvas{opacity:.56}
.stage-scrim{pointer-events:none;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,22,17,.43) 0%,transparent 16%,transparent 73%,rgba(7,22,17,.65) 100%)}
.stage-top,.stage-bottom{z-index:3}
.stage-top{color:#fffdf6;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.stage-kicker{color:#e9d5ad}
.mark-preview{position:absolute;right:28px;top:64px;z-index:3;background:rgba(250,246,236,.95);border:1px solid #b49a6e;padding:11px 16px;min-width:104px;max-width:180px;text-align:center;color:#19392e;box-shadow:0 8px 22px rgba(32,32,22,.14)}
.mark-preview[hidden]{display:none}
.mark-preview small{display:block;font-size:8px;letter-spacing:.14em;color:#7b6544;margin-bottom:7px}
.mark-preview b{font:400 17px 'Playfair Display','Noto Serif TC',serif;letter-spacing:.1em;overflow-wrap:anywhere}
.rotate-controls button{border-color:rgba(255,255,255,.75);background:rgba(8,28,21,.3)}
.rotate-controls button:hover{background:rgba(8,28,21,.7)}
.summary-art{background:#e8dcc8}
.summary-art>div{width:100%;height:73%}
.summary-art canvas{display:block;width:100%;height:100%;object-fit:contain}
.summary-art p{color:#173d30}
.mobile-live-preview{background:#e7dbc7}
.mobile-live-preview #mobileVisual{overflow:hidden}
.mobile-live-preview canvas{display:block;width:100%;height:100%;object-fit:cover}
.mobile-live-preview span{color:#244133;text-shadow:none}
@media(max-width:760px){
  .product-stage{min-height:300px;background:#d7c7ad}
  .product-visual{inset:0}
  .product-visual canvas{object-fit:contain}
  .stage-scrim{background:linear-gradient(180deg,rgba(7,22,17,.38),transparent 22%,transparent 67%,rgba(7,22,17,.72))}
  .mark-preview{top:50px;right:13px;padding:8px 9px;max-width:112px;min-width:80px}
  .mark-preview small{font-size:6px}
  .mark-preview b{font-size:12px}
  .mobile-live-preview{border-bottom:1px solid #b39468;box-shadow:0 8px 15px rgba(17,30,22,.12)}
  .summary-art>div{height:83%}
}