/* Illustrative presentation geometry; no product dimensions or material specifications. */
.product-art{background:linear-gradient(145deg,#e8e9f5,#f4f5fa);padding:0;isolation:isolate}
.mockup-stage{--depth:20px;--angle-y:-23deg;--angle-x:9deg;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px;perspective:800px;overflow:visible;color:var(--quiet)}
.mockup-object{position:relative;display:block;width:66%;height:70%;transform-style:preserve-3d;transform:rotateX(var(--angle-x)) rotateY(var(--angle-y)) rotateZ(-4deg);transition:transform .3s ease}
.object-front{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#171529;border:1px solid #87859c;transform:translateZ(calc(var(--depth)/2));backface-visibility:hidden;overflow:hidden}
.product-art .object-front img,.detail-art .object-front img,.hero-item .object-front img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;transform:none!important;filter:none}
.object-side{position:absolute;top:0;bottom:0;right:calc(var(--depth)/-2);width:var(--depth);background:linear-gradient(90deg,#9293aa,#cdcedb);transform:rotateY(90deg);border:1px solid #9e9fb2}
.object-top{position:absolute;left:0;right:0;top:calc(var(--depth)/-2);height:var(--depth);background:#dddde7;transform:rotateX(90deg);border:1px solid #b2b2c3}
.object-extra{position:absolute;inset:0;transform:translateZ(calc(var(--depth)/-2));background:#a2a3b6}
.object-shadow{position:absolute;left:20%;right:13%;bottom:12%;height:12%;border-radius:50%;background:#51497027;filter:blur(9px);transform:rotate(-6deg)}
.mockup-label{position:absolute;left:10px;right:10px;bottom:8px;text-align:left;font-size:9px;line-height:1.4;letter-spacing:.015em;color:#56546b}
.product-art:hover .mockup-object{transform:rotateX(var(--angle-x)) rotateY(-12deg) rotateZ(-2deg)}
.mockup-book .mockup-object{width:57%;height:72%}
.mockup-book .object-side{background:repeating-linear-gradient(0deg,#d9d9e0 0 2px,#f2f1f4 2px 3px)}
.mockup-book .object-top{background:repeating-linear-gradient(90deg,#e7e5eb 0 2px,#fcfbfc 2px 3px)}
.mockup-sleeve{--depth:12px}.mockup-sleeve .mockup-object{width:68%;height:61%}.mockup-sleeve .object-side{background:#b3b3c2}
.mockup-poster{--depth:4px}.mockup-poster .mockup-object{width:56%;height:76%}.mockup-poster .object-front{border:0;background:#e7e6ee}
.mockup-cards{--depth:12px}.mockup-cards .mockup-object{width:49%;height:67%}.mockup-cards .object-front{border-radius:4px}.mockup-cards .object-extra{transform:translateZ(-16px) translateX(10px) translateY(-8px);background:#d9d8e5;border:1px solid #b4b2c6;box-shadow:8px -6px 0 -1px #eeedf5,8px -6px 0 0 #b4b2c6}
.mockup-sheets{--depth:3px}.mockup-sheets .mockup-object{width:62%;height:72%}.mockup-sheets .object-extra{transform:translateZ(-12px) translateX(12px) translateY(-8px);background:#d9d8e5;border:1px solid #b4b2c6}
.mockup-pad{--depth:18px}.mockup-pad .mockup-object{width:68%;height:63%}.mockup-pad .object-side{background:repeating-linear-gradient(0deg,#dfdde9 0 2px,#faf9fc 2px 3px)}
.mockup-deskpad,.mockup-mousepad{--depth:5px;--angle-x:48deg;--angle-y:-12deg}.mockup-deskpad .mockup-object{width:80%;height:52%}.mockup-mousepad .mockup-object{width:69%;height:65%}.mockup-mousepad .object-front{border-radius:6px}.mockup-deskpad .object-shadow,.mockup-mousepad .object-shadow{bottom:21%;height:20%}
.mockup-bookmarks{--depth:4px;--angle-x:22deg}.mockup-bookmarks .mockup-object{width:74%;height:53%}.mockup-bookmarks .object-extra{transform:translateZ(-8px) translateX(8px) translateY(-8px);background:#c6c4db;border:1px solid #9998ac}
.mockup-case{--depth:16px}.mockup-case .mockup-object{width:76%;height:47%}.mockup-case .object-front{border-radius:8px}.mockup-case .object-side{background:#a8a8b9;border-radius:5px}
.mockup-stand{--depth:5px}.mockup-stand .mockup-object{width:50%;height:71%}.mockup-stand .object-extra{top:auto;bottom:-4%;left:-13%;right:-13%;height:12%;background:#d0d0df;transform:rotateX(90deg) translateZ(-8px);border:1px solid #aaaabc}
.mockup-screen{--depth:12px}.mockup-screen .mockup-object{width:76%;height:57%}.mockup-screen .object-front{border:5px solid #282639;border-radius:7px}.mockup-screen .object-extra{top:101%;bottom:auto;left:32%;right:32%;height:6%;background:#838296;transform:rotateX(60deg) translateZ(-12px)}
.mockup-media{--depth:23px}.mockup-media .mockup-object{width:62%;height:67%}.mockup-media .object-extra{transform:translateZ(-22px) translateX(12px) translateY(-9px);border:1px solid #b1aec4;background:#d9d6e8}
.mockup-shirt{--depth:9px;--angle-y:-17deg;--angle-x:5deg}.mockup-shirt .mockup-object{width:85%;height:77%;background:#e9e8ee;clip-path:polygon(29% 0,40% 3%,60% 3%,71% 0,100% 19%,85% 40%,75% 33%,76% 100%,24% 100%,25% 33%,15% 40%,0 19%)}
.mockup-shirt .object-front{inset:0;background:linear-gradient(90deg,#e2e1e8,#faf9fc 35%,#ededf3 75%,#d5d4df);border:0;transform:none;overflow:visible}
.mockup-shirt .object-front img{position:absolute;top:23%;left:28%;width:44%;height:57%;object-fit:contain}
.mockup-shirt .object-top{display:none}.mockup-shirt .object-side{display:none}.mockup-shirt .object-extra{display:none}.mockup-shirt.dark-shirt .mockup-object,.dark-shirt .object-front{background:linear-gradient(90deg,#151420,#36333f 42%,#282632 80%,#13121d)}
.mockup-tote{--depth:22px;--angle-y:-19deg}.mockup-tote .mockup-object{width:65%;height:58%;margin-top:11%}.mockup-tote .object-front{background:#f2f0f1;border-color:#bbb7c2;border-radius:2px 2px 7px 7px}.mockup-tote .object-front img{width:82%;height:88%;object-fit:contain}.mockup-tote .object-top{display:none}.mockup-tote .object-extra{inset:auto 22% 93%;height:38%;background:transparent;border:7px solid #d7d3db;border-bottom:0;border-radius:45% 45% 0 0;transform:translateZ(0)}
.hero-shelf{min-height:470px;overflow:visible}.hero-item{transform:none!important;padding:0!important;display:block}.hero-item .mockup-stage{min-height:180px;height:190px}.hero-zine .mockup-stage{height:350px}.hero-zine .mockup-object{height:87%;width:79%}.hero-shirt .mockup-stage{height:215px}.hero-sound{width:190px;margin:-2px 12px 0 auto}.hero-sound .mockup-stage{height:165px;min-height:165px}.hero-item .mockup-stage span{padding:0;margin:0;display:block}.hero-item .object-front{display:flex;background:#171529}.hero-item .object-side{background:repeating-linear-gradient(0deg,#d9d9e0 0 2px,#f2f1f4 2px 3px)}.hero-item .object-top{background:#dddde7}.hero-item .object-extra{background:#a2a3b6}.hero-item .object-shadow{background:#51497027}.hero-item .mockup-label{font-size:8px;text-align:center;left:0;right:0;bottom:0}.hero-item .hero-item-title{display:block;background:transparent;text-align:center;margin:4px 0 0;font-size:12px}.hero-shirt .object-front{background:linear-gradient(90deg,#e2e1e8,#faf9fc 35%,#ededf3 75%,#d5d4df)}.hero-shelf .shelf-mark{bottom:-5px;font-size:80px}
.detail-art{position:relative;height:430px;padding:22px;overflow:hidden}.detail-art .mockup-stage{height:100%;width:100%;min-height:0}.detail-art .mockup-label{font-size:11px;bottom:0}.detail-art .mockup-object{max-width:310px}.detail-art .mockup-shirt .mockup-object{width:85%;max-width:350px}.detail-art .mockup-screen .mockup-object{height:55%}.front-view .mockup-object{transform:rotateX(0) rotateY(0) rotateZ(0)}.front-view .object-shadow{opacity:.3}
#rotate-view{margin-left:auto;margin-right:10px;min-width:92px;color:var(--violet)}.dialog-top{gap:5px}.dialog-top>span{flex:1}.details-button{min-height:44px}.language button{min-height:44px}.categories button,.editions button{min-height:44px}
@media(max-width:1020px){.hero-item .mockup-stage{height:165px}.hero-zine .mockup-stage{height:310px}.hero-shirt .mockup-stage{height:185px}.hero-sound{width:145px}.hero-sound .mockup-stage{height:145px;min-height:145px}.hero-shelf{min-height:410px}}
@media(max-width:700px){.mockup-stage{min-height:160px;--depth:12px}.mockup-label{font-size:8px;left:6px;right:6px;bottom:6px}.mockup-object{width:67%;height:67%}.product-art{aspect-ratio:1/1.3}.mockup-shirt .mockup-object{width:88%;height:76%}.mockup-screen .object-front{border-width:3px}.mockup-tote .object-extra{border-width:5px}.hero-shelf{min-height:330px;overflow:hidden}.hero-zine .mockup-stage{height:250px;min-height:250px}.hero-shirt .mockup-stage{height:150px;min-height:150px}.hero-sound{width:130px}.hero-sound .mockup-stage{height:125px;min-height:125px}.hero-item .mockup-label{font-size:7px}.hero-item .hero-item-title{font-size:10px}.detail-art{height:320px;min-height:320px;padding:22px}.detail-art .mockup-stage{min-height:0}.detail-art .mockup-label{font-size:10px}.dialog-top>span{font-size:10px}.dialog-top button{min-width:65px;font-size:11px;padding:4px 7px}#rotate-view{min-width:80px;margin-right:0}.categories button,.editions button{min-height:44px}}
.mockup-book .mockup-object,.mockup-poster .mockup-object,.mockup-cards .mockup-object,.mockup-sheets .mockup-object,.mockup-pad .mockup-object,.mockup-stand .mockup-object{height:72%;width:auto;aspect-ratio:var(--art-ratio);max-width:77%}
.mockup-deskpad .mockup-object,.mockup-mousepad .mockup-object,.mockup-case .mockup-object,.mockup-sleeve .mockup-object{width:76%;height:auto;aspect-ratio:var(--art-ratio);max-height:70%}
.mockup-tablet{--depth:9px;--angle-y:-18deg}.mockup-tablet .mockup-object{height:76%;width:auto;aspect-ratio:var(--art-ratio);max-width:70%}.mockup-tablet .object-front{border:2px solid #323044;border-radius:7px}.mockup-tablet .object-side{background:#a6a5ba;border-radius:5px}
.mockup-bookmarks{--depth:7px;--angle-x:9deg}.mockup-bookmarks .mockup-object{width:80%;height:auto;aspect-ratio:var(--art-ratio)}.mockup-bookmarks .object-front{border:3px solid #323044;border-radius:6px}.mockup-bookmarks .object-extra{transform:translateZ(-3px);background:#9998ab}
.hero-zine .mockup-object{height:87%;width:auto;max-width:88%;aspect-ratio:var(--art-ratio)}
@media(prefers-reduced-motion:reduce){.mockup-object{transition:none!important}.product-art:hover .mockup-object{transform:rotateX(var(--angle-x)) rotateY(var(--angle-y)) rotateZ(-4deg)}}
.mockup-sleeve .object-extra{inset:5% -20% 5% 30%;border-radius:50%;background:radial-gradient(circle at center,#e1e1eb 0 3%,#1c1b26 3% 100%);border:1px solid #494757;transform:translateZ(-5px)}
.mockup-sleeve .mockup-object{width:62%;margin-right:9%}
.artwork-review{min-width:0;background:#eaeaf2;padding:15px;display:grid;grid-template-columns:1fr;gap:9px;align-self:stretch}.artwork-review .detail-art{padding:0;height:400px;min-height:400px}.artwork-label{font-size:12px;font-weight:600}.artwork-review select{min-width:0;width:100%;min-height:44px;padding:8px;font:inherit;font-size:12px;background:var(--paper);color:var(--ink);border:1px solid #b7b4c8}.artwork-review button{min-height:44px;background:var(--paper);border:1px solid #b7b4c8;color:var(--violet);font:inherit;font-size:12px}.artwork-review button[aria-pressed=true]{background:var(--violet);color:white}.artwork-review select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}#source-proof{margin:0;min-width:0;padding:10px;background:white;border:1px solid #c6c3d3}#source-proof img{height:300px;width:100%;object-fit:contain}#source-proof figcaption{font-size:11px;margin-bottom:8px;color:var(--quiet)}.fidelity-title{font-weight:600;color:#79501c!important;border-top:1px solid var(--line);padding-top:12px;margin-bottom:6px}#fidelity-gate,#size-evidence{font-size:12px;line-height:1.55}#size-evidence{font-weight:600}.compare-open{width:min(1200px,calc(100vw - 30px))}.compare-open .artwork-review{grid-template-columns:1fr 1fr}.compare-open .artwork-label,.compare-open select,.compare-open #compare-source{grid-column:1/-1}.compare-open #source-proof{align-self:center}.compare-open .detail-art{height:360px;min-height:360px}.mockup-shirt .object-front{background:#fff}.mockup-shirt.dark-shirt .mockup-object,.dark-shirt .object-front{background:#000}.mockup-shirt .object-front img{top:17%;left:16%;width:68%;height:70%}.mockup-disc .mockup-object{width:75%;height:auto;aspect-ratio:1}.mockup-disc .object-front{border-radius:50%;background:transparent;border:0}.mockup-disc .object-extra{display:none}.mockup-disc .object-side,.mockup-disc .object-top{display:none}.mockup-sleeve .object-extra{display:none}.mockup-sleeve .mockup-object{width:70%;margin-right:0}.mockup-label{font-size:9px;line-height:1.3;bottom:5px;max-height:30px;overflow:hidden}.detail-art .mockup-label{font-size:10px;max-height:34px}.hero-item .mockup-label{font-size:8px;max-height:24px}
@media(max-width:700px){.artwork-review .detail-art{height:320px;min-height:320px}.compare-open .artwork-review{grid-template-columns:1fr}.compare-open .detail-art{height:310px;min-height:310px}#source-proof img{height:250px}}

/* Posters and clear-file artwork are thin image planes, not book-shaped blocks. */
.mockup-stage.mockup-poster,
.mockup-stage.mockup-sheets {
  --depth: 0px;
}
.mockup-stage.mockup-poster .object-side,
.mockup-stage.mockup-poster .object-top,
.mockup-stage.mockup-poster .object-extra,
.mockup-stage.mockup-sheets .object-side,
.mockup-stage.mockup-sheets .object-top,
.mockup-stage.mockup-sheets .object-extra {
  display: none;
}
.mockup-stage.mockup-poster .object-front,
.mockup-stage.mockup-sheets .object-front {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.product-art[data-product="out-04"],
.product-art[data-product="out-05"],
.product-art[data-product="out-08"],
.product-art[data-product="out-24"],
.product-art[data-product="out-25"] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* The supplier's original tote layer includes white canvas. Keep it intact,
   blend the scene into white, and preserve the saved print coordinates. */
.product-art[data-product="out-04"],
.artwork-review:has(.mockup-tote-approved),
.detail-art:has(.mockup-tote-approved) {
  background: #fff;
}
.mockup-stage.mockup-tote-approved .mockup-object {
  transform: none;
}
.mockup-stage.mockup-tote-approved .supplier-bag {
  clip-path: none;
}