.interaction-controls{display:flex;gap:7px;flex-wrap:wrap}.interaction-controls button{flex:1;min-width:95px;min-height:44px;border-color:#b4b0ca;background:white;padding:8px;font-size:12px}.interaction-controls button:disabled{opacity:.5;cursor:default}.interaction-status{font-size:11px;line-height:1.45;color:var(--quiet);margin:0;min-height:32px}.artwork-review #flat-preview{font-size:11px}.compare-open .interaction-controls,.compare-open .interaction-status,.compare-open #flat-preview{grid-column:1/-1}.detail-art{touch-action:pan-y;user-select:none}.detail-art:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}.mockup-label{right:42px;max-height:38px;font-size:9px;line-height:1.35}.hero-item .mockup-label{right:0}.product-art{padding-bottom:12px}.product-art .mockup-object{height:64%}.object-rear{position:absolute;inset:0;background:#171529;transform:rotateY(180deg) translateZ(calc(var(--depth)/2));backface-visibility:hidden;overflow:hidden}.object-rear img{width:100%;height:100%;object-fit:contain}.mockup-shirt .mockup-object{clip-path:none;background:transparent}.mockup-shirt .object-front,.mockup-shirt .object-rear{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%);background:#fff}.mockup-shirt .object-front{transform:translateZ(5px);overflow:visible}.mockup-shirt .object-rear img{position:absolute;top:17%;left:16%;width:68%;height:70%;object-fit:contain}.dark-shirt .object-rear{background:#000}.side-flip-ready .mockup-object{transition:transform .5s ease}.side-flipped .mockup-object{transform:rotateX(6deg) rotateY(-180deg) rotateZ(-3deg)}.flat-surface .mockup-object{transform:none!important}.interactive-stage{position:relative;display:grid;place-items:center;perspective:1100px;width:100%;height:100%;min-height:260px}.book-stage{--book-ratio:.707;--paper-w:44%;transform-style:preserve-3d}.book-spread{position:absolute;width:90%;height:74%;left:5%;top:12%;display:grid;grid-template-columns:1fr 1fr;transform:rotateX(8deg) rotateY(-12deg);transform-style:preserve-3d;box-shadow:0 22px 16px #241a5423}.paper-left,.paper-right{position:relative;background:#fff;border:1px solid #d4d1dd;overflow:hidden;display:grid;place-items:center}.paper-left img,.paper-right img,.turning-leaf img{width:100%;height:100%;object-fit:contain;display:block}.binding-shadow{position:absolute;top:0;bottom:0;left:49%;width:2%;background:linear-gradient(90deg,#0002,transparent,#0001);pointer-events:none}.book-cover{position:absolute;top:12%;left:50%;width:45%;height:74%;transform-origin:left center;transform:rotateX(8deg) rotateY(-12deg) translateZ(4px);transform-style:preserve-3d;transition:transform .7s ease;z-index:4}.cover-outside,.cover-inside{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #b5b0c6;display:grid;place-items:center;background:#fff}.cover-outside img{width:100%;height:100%;object-fit:contain}.cover-inside{transform:rotateY(180deg);background:#eeedf3;color:#686478;text-align:center;padding:12px;font-size:10px}.book-open .book-cover{transform:rotateX(8deg) rotateY(-174deg) translateZ(4px);pointer-events:none;z-index:0;opacity:.28}.book-stage:not(.book-open) .book-spread{left:50%;width:45%;grid-template-columns:1fr;transform:rotateX(8deg) rotateY(-12deg);box-shadow:9px 3px 0 #d4d0df,0 18px 18px #241a5433}.book-stage:not(.book-open) .paper-left,.book-stage:not(.book-open) .binding-shadow{visibility:hidden}.book-stage:not(.book-open) .paper-right{position:absolute;inset:0}.turning-leaf{position:absolute;left:50%;top:12%;width:45%;height:74%;transform-origin:left center;transform:rotateX(8deg) rotateY(-12deg) translateZ(5px);transform-style:preserve-3d;z-index:6;transition:transform .6s cubic-bezier(.35,.1,.4,1)}.leaf-front,.leaf-back{position:absolute;inset:0;backface-visibility:hidden;background:white;border:1px solid #c8c4d3;overflow:hidden}.leaf-back{transform:rotateY(180deg)}.turning-leaf.turn-complete{transform:rotateX(8deg) rotateY(-192deg) translateZ(5px)}.turning-leaf.turn-back{transform:rotateX(8deg) rotateY(-192deg) translateZ(5px)}.turning-leaf.turn-back.turn-complete{transform:rotateX(8deg) rotateY(-12deg) translateZ(5px)}.no-page{color:#777184;font-size:11px;padding:12px;text-align:center;background:#eaeaf2}.book-stage.is-flat .book-spread{transform:none}.book-stage.is-flat .book-cover{transition:none;transform:none}.book-stage.is-flat.book-open .book-cover{display:none}.cd-stage{perspective:1100px}.cd-case{position:relative;width:60%;aspect-ratio:1.05;transform:rotateX(13deg) rotateY(-22deg) rotateZ(-3deg);transform-style:preserve-3d;transition:transform .6s;filter:drop-shadow(0 23px 12px #20153336)}.cd-tray{position:absolute;inset:0;background:linear-gradient(135deg,#c3c6d17d,#f9fbff9f);border:4px solid #d2d8e291;border-radius:5px;box-shadow:inset 0 0 0 2px #fff9,inset 0 0 0 5px #9297a73f;transform:translateZ(-5px);display:grid;place-items:center}.tray-disc{width:87%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 2px 5px #20153330;transform:translateZ(2px)}.tray-disc img{width:100%;height:100%;object-fit:contain}.disc-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:7%;aspect-ratio:1;background:#dfe1e799;border:1px solid #777c8899;border-radius:50%}.cd-lid{position:absolute;inset:0;border:4px solid #dde3edaa;border-radius:4px;transform-origin:left center;transform:translateZ(7px);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.6,.2,1);box-shadow:inset 0 0 0 1px #fff9,0 2px 2px #17152920}.lid-front,.lid-inside{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;display:grid;place-items:center}.lid-front img{width:100%;height:100%;object-fit:contain}.case-reflection{position:absolute;inset:0;background:linear-gradient(115deg,#fff0 20%,#fff8 21%,#fff0 23%,#fff2 65%,#fff0 73%);pointer-events:none}.lid-inside{transform:rotateY(180deg);background:#dce3ed35;border:1px solid #fff9;color:#605b6f;padding:12px;font-size:10px;text-align:center}.cd-rear{position:absolute;inset:0;transform:rotateY(180deg) translateZ(7px);backface-visibility:hidden;background:#d8dde6;border:4px solid #dce0e8aa}.cd-rear img{width:100%;height:100%;object-fit:contain}.cd-hinge{position:absolute;left:-7px;top:8%;bottom:8%;width:8px;border:1px solid #9da6b599;background:#c9d0dc99;transform:translateZ(3px)}.case-open .cd-case{width:44%;margin-left:36%;transform:rotateX(8deg) rotateY(-6deg)}.case-open .cd-lid{transform:rotateY(-145deg) translateZ(7px)}.case-reversed .cd-case{transform:rotateX(10deg) rotateY(-180deg) rotateZ(-3deg)}.case-reversed .cd-tray{backface-visibility:hidden}.cd-stage.is-flat .cd-case{filter:none;transform:none}.cd-stage.is-flat.case-open .cd-lid{transform:rotateY(-180deg)}.cd-stage.is-flat.case-reversed .cd-case{transform:rotateY(-180deg)}
@media(max-width:700px){.artwork-review .detail-art{height:330px;min-height:330px}.interaction-controls button{min-width:80px;font-size:11px}.book-spread,.book-cover,.turning-leaf{height:78%;top:10%}.cd-case{width:66%}.case-open .cd-case{width:45%;margin-left:40%}.cover-inside,.lid-inside{font-size:8px}.product-art .mockup-label{left:7px;right:40px;font-size:8px;bottom:8px;max-height:34px}.interaction-status{font-size:10px}.compare-open .interaction-controls,.compare-open .interaction-status,.compare-open #flat-preview{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.book-cover,.cd-lid,.cd-case,.turning-leaf,.side-flip-ready .mockup-object{transition:none!important}.case-reflection{background:#fff1}}
.book-spread{height:auto;aspect-ratio:calc(var(--book-ratio)*2)}.book-cover,.turning-leaf{height:auto;aspect-ratio:var(--book-ratio)}.book-stage:not(.book-open) .book-spread{aspect-ratio:var(--book-ratio);height:auto}.book-stage .book-cover{box-shadow:4px 0 0 #bdb7cb}.book-stage.is-flat .book-cover{box-shadow:none}
.front-view .book-spread{transform:none}.front-view .book-cover{transform:translateZ(4px)}.front-view.book-open .book-cover{transform:rotateY(-180deg) translateZ(4px)}.front-view .turning-leaf{transform:translateZ(5px)}.front-view .turning-leaf.turn-complete{transform:rotateY(-180deg) translateZ(5px)}.front-view .turning-leaf.turn-back{transform:rotateY(-180deg) translateZ(5px)}.front-view .turning-leaf.turn-back.turn-complete{transform:translateZ(5px)}.front-view .cd-case{transform:none}.front-view.case-reversed .cd-case{transform:rotateY(-180deg)}
.book-open .book-cover{opacity:1}.cd-case{transition:transform .6s,width .6s,margin-left .6s}.is-flat .cd-case,.is-flat .cd-lid{transition:none}
.cover-inside{padding:0}.cover-inside img{width:100%;height:100%;object-fit:contain}.compare-open .case-open .cd-case{width:53%;margin-left:43%}.compare-open .cd-case{width:75%}@media(max-width:700px){.compare-open .case-open .cd-case{width:45%;margin-left:40%}.compare-open .cd-case{width:66%}}
.cd-case{filter:none!important}.cd-stage::before{content:"";position:absolute;width:72%;height:12%;left:15%;bottom:19%;background:#2114372d;border-radius:50%;filter:blur(11px);transform:rotate(-4deg);pointer-events:none}.cd-stage.case-open::before{width:85%;left:6%}
.page-image{width:100%;height:100%;position:relative;display:grid;place-items:center}.page-image img{width:100%;height:100%;object-fit:contain}.page-loading{position:absolute;inset:0;display:grid;place-items:center;background:#efedf4;color:#6a647a;font-size:10px;padding:15px;text-align:center}.page-ready .page-loading{display:none}
.paper-left,.paper-right,.page-image{min-width:0;min-height:0}.page-image{overflow:hidden}
.detail-art img{-webkit-user-drag:none;user-select:none}

/* The opened cover must leave the settled left source page unobstructed. */
.book-cover{visibility:visible;transition:transform .7s ease,visibility 0s;}
.book-open .book-cover{visibility:hidden;transition:transform .7s ease,visibility 0s .7s;}
.book-stage.is-flat.book-open .book-cover{transition:none;visibility:hidden;}
.book-spread{z-index:1}.book-cover{z-index:4}.turning-leaf{z-index:6}
@media(prefers-reduced-motion:reduce){.book-open .book-cover{visibility:hidden;transition:none!important}}
/* Keep the interactive object ahead of comparison material on a small screen. */
@media(max-width:700px){.compare-open .artwork-label{order:0}.compare-open #artwork-select{order:1}.compare-open #compare-source{order:2}.compare-open .interaction-controls{order:3}.compare-open .detail-art{order:4}.compare-open .interaction-status{order:5}.compare-open #flat-preview{order:6}.compare-open #source-proof{order:7}}
/* Keep the smoke-black garment dark on both source artwork sides. */
.mockup-shirt.dark-shirt .mockup-object{background:transparent}
.mockup-shirt.dark-shirt .object-front,.mockup-shirt.dark-shirt .object-rear{background:#000}
/* Artwork is presented without invented monitor/tablet packaging. */
.mockup-artwork .mockup-object,.mockup-tablet .mockup-object,.mockup-screen .mockup-object{width:72%;height:auto;aspect-ratio:var(--art-ratio);max-height:82%;background:transparent}
.mockup-artwork .object-front,.mockup-tablet .object-front,.mockup-screen .object-front{border:0;border-radius:0;background:transparent}
.mockup-artwork .object-side,.mockup-artwork .object-top,.mockup-artwork .object-extra,.mockup-tablet .object-side,.mockup-tablet .object-top,.mockup-tablet .object-extra,.mockup-screen .object-side,.mockup-screen .object-top,.mockup-screen .object-extra{display:none}
.trim-cover-bars .object-front{overflow:hidden}.trim-cover-bars .object-front img{height:106.5%;max-height:none;position:absolute;top:-3.25%;object-fit:fill}
.book-stage.book-open .book-cover{display:none!important}.book-stage.book-open .binding-shadow{background:linear-gradient(90deg,#0000000a,transparent)}
.terminal-preview{color:#91e56b;background:#080e08;padding:22px 24px;width:100%;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;box-sizing:border-box;text-align:left;min-width:0}
.terminal-preview header{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #254321;padding-bottom:16px}.terminal-preview strong{font-size:19px;letter-spacing:.1em}.terminal-preview i{color:#dda642;font-style:normal}.terminal-preview header>span{font-size:9px;color:#81a778}.terminal-path{font-size:10px!important;min-height:0!important;color:#76a46a!important;display:flex;justify-content:space-between;gap:8px;margin:14px 0!important}.terminal-preview h4{font-size:10px;letter-spacing:.1em;color:#dda642;border-bottom:1px solid #21361e;margin:18px 0 7px;font-weight:400}.terminal-preview h4 span{float:right}.terminal-preview section p{font-size:10px!important;color:#91e56b!important;margin:4px 0!important;min-height:0!important;overflow-wrap:anywhere}.terminal-preview small{opacity:.6}.terminal-preview footer{font-size:8px;border-top:1px solid #254321;margin-top:20px;padding-top:14px;color:#6fa061}.terminal-preview.compact{padding:18px 12px;align-self:center}.terminal-preview.compact header{display:block;padding-bottom:8px}.terminal-preview.compact strong{font-size:13px}.terminal-preview.compact header>span{display:block;margin-top:3px;font-size:7px}.terminal-preview.compact .terminal-path{font-size:7px!important;margin:8px 0!important}.terminal-preview.compact h4{font-size:8px;margin-top:10px}.terminal-preview.compact section p{font-size:7px!important}.terminal-preview.compact footer{display:none}
.product-art:has(.terminal-preview){display:flex;align-items:center;padding:12px}
.bookmark-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(80%,310px);margin:auto;align-items:start}.bookmark-pair figure{margin:0;min-width:0}.bookmark-pair img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain;filter:drop-shadow(2px 7px 4px #17152925)}.bookmark-pair figcaption{text-align:center;font-size:11px;margin-top:8px}.bookmark-pair>p{grid-column:1/-1;text-align:center;font-size:12px!important;margin:0!important;min-height:0!important}.bookmark-pair.compact{width:70%;gap:12px;align-self:center}.bookmark-pair.compact figcaption{font-size:8px;margin-top:5px}.bookmark-pair.compact>p{font-size:8px!important}.product-art:has(.bookmark-pair){display:grid;place-items:center}
.bundle-preview{width:100%;padding:8px;text-align:center}.bundle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.bundle-grid>figure{margin:0;min-width:0}.bundle-grid>figure>img{height:115px!important;width:100%!important;object-fit:contain;filter:drop-shadow(2px 5px 3px #17152920)}.bundle-grid figcaption{font-size:10px;line-height:1.4;margin-top:6px}.bundle-preview>p{font-size:11px!important;min-height:0!important;margin:14px 0 0!important}.bundle-grid .terminal-preview{height:115px;overflow:hidden;padding:7px}.bundle-grid .terminal-preview header strong{font-size:8px}.bundle-grid .terminal-preview section{display:none}.bundle-grid .bookmark-pair{width:85%;gap:5px;height:115px;overflow:hidden}.bundle-grid .bookmark-pair img{height:90px!important;width:100%!important;object-fit:contain}.bundle-grid .bookmark-pair figcaption,.bundle-grid .bookmark-pair>p{display:none}.bundle-preview.compact{padding:3px}.bundle-preview.compact .bundle-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.bundle-preview.compact .bundle-grid>figure>img{height:66px!important}.bundle-preview.compact .terminal-preview,.bundle-preview.compact .bookmark-pair{height:66px}.bundle-preview.compact .bookmark-pair img{height:60px!important}.bundle-preview.compact .terminal-preview header>span,.bundle-preview.compact .terminal-path{display:none}
#detail-art[data-product="out-22"],#detail-art[data-product="out-23"]{height:auto;min-height:400px;overflow:visible;padding:16px}#detail-art[data-product="out-20"]{display:grid;place-items:center}
@media(max-width:700px){.bookmark-pair{width:min(74%,230px);gap:14px}.bookmark-pair.compact{width:85%;gap:8px}.terminal-preview.compact{padding:10px 8px}.terminal-preview.compact h4{font-size:7px;margin:7px 0 4px}.terminal-preview.compact strong{font-size:10px}.terminal-preview.compact section p{font-size:6px!important}.terminal-preview.compact header>span{font-size:6px}.bundle-preview.compact .bundle-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.bundle-preview.compact .bundle-grid>figure>img{height:45px!important}.bundle-preview.compact .terminal-preview,.bundle-preview.compact .bookmark-pair{height:45px}.bundle-preview.compact .bookmark-pair img{height:42px!important}#detail-art[data-product="out-22"],#detail-art[data-product="out-23"]{min-height:0}.bundle-grid>figure>img{height:90px!important}.bundle-grid .terminal-preview,.bundle-grid .bookmark-pair{height:90px}}
.detail-art .bookmark-pair{width:210px;max-width:85%;gap:14px}.product-art .bookmark-pair{width:48%;gap:10px}
@media(max-width:700px){.detail-art .bookmark-pair{width:155px;gap:12px}.product-art .bookmark-pair{width:62%;gap:8px}}
.mockup-cards .mockup-object,.mockup-poster .mockup-object,.mockup-sheets .mockup-object,.mockup-stand .mockup-object{height:auto;aspect-ratio:var(--art-ratio);max-height:82%}
.mockup-deskpad .mockup-object,.mockup-mousepad .mockup-object,.mockup-case .mockup-object{height:auto;aspect-ratio:var(--art-ratio)}
.mockup-cards .object-front,.mockup-poster .object-front,.mockup-sheets .object-front,.mockup-stand .object-front,.mockup-deskpad .object-front,.mockup-mousepad .object-front,.mockup-case .object-front{background:transparent}
.interaction-controls:empty{display:none}
/* Preserve the supplier's Indigo bag layer and exact saved front placement. */
.mockup-tote-approved .mockup-object{width:min(78%,320px);height:auto!important;aspect-ratio:1;max-height:none;transform:rotateX(7deg) rotateY(-16deg) rotateZ(-2deg)}
.mockup-tote-approved .supplier-bag{display:block;width:100%;height:100%;max-height:none;object-fit:contain;clip-path:polygon(8.125% 8.75%,27.917% 8.75%,27.917% 0,33.75% 0,33.75% 8.75%,66.25% 8.75%,66.25% 0,72.083% 0,72.083% 8.75%,91.875% 8.75%,91.875% 82.083%,78.333% 94.583%,21.667% 94.583%,8.125% 82.083%)}
.mockup-tote-approved .supplier-print{position:absolute;left:25.701497%;top:25.701497%;width:48.75%!important;height:48.75%!important;object-fit:contain;filter:none}
.mockup-tote-approved.front-view .mockup-object{transform:none}
/* Source book images follow their page boxes at every responsive width. */
.book-stage img{max-height:none}

/* A last unpaired source page is displayed on its own, without a fabricated leaf. */
.book-open .book-spread.single-page{grid-template-columns:1fr;left:25%;width:50%;margin-inline:0;aspect-ratio:var(--book-ratio);box-shadow:none}
.book-spread.single-page .paper-right,.book-spread.single-page .binding-shadow{display:none}
.book-spread.single-page .paper-left{transform:none}
