.display-app{margin:32px 0 64px}.display-app .display-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}.display-app .display-panel{border:1px solid #dbe5e9;border-radius:18px;padding:28px;background:#fff;min-width:0}.display-app h2{font-size:23px;margin:0 0 20px}.display-app h3{margin:26px 0 12px}.display-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.display-fields label,.display-label{display:grid;gap:8px;font-size:14px;font-weight:600}.display-app input:not([type=radio]):not([type=checkbox]):not([type=file]),.display-app select{width:100%;min-width:0;min-height:46px;border:1px solid #b9ced7;border-radius:9px;padding:10px 12px;background:white;color:#173c50;font:inherit}.display-app input[type=radio],.display-app input[type=checkbox]{accent-color:#0075a8;width:18px;height:18px;flex-shrink:0}.display-app .cards-choice label{align-items:center}.display-app .display-edges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.display-edges label{display:flex;align-items:center;gap:7px;border:1px solid #d8e3e9;border-radius:9px;padding:10px 13px;font-size:14px}.display-preview{height:210px;background:#f2f6f7;display:grid;place-items:center;border-radius:12px;margin-bottom:22px;overflow:hidden;padding:25px}.display-banner{position:relative;max-width:100%;max-height:155px;display:grid;place-items:center;background:linear-gradient(130deg,#087caf,#154258);color:#fff;box-shadow:2px 6px 12px #1234}.display-banner.mesh{background:radial-gradient(#b9d0d5 1px,transparent 1px) 0 0/4px 4px,linear-gradient(130deg,#087caf,#154258)}.display-banner span{font-weight:700;text-align:center;font-size:clamp(9px,2vw,17px);padding:10px}.display-banner i{position:absolute;width:7px;height:7px;border:2px solid #d7dde0;border-radius:50%;background:#f3f6f7}.display-price small{display:block;color:#647783}.display-price strong{display:block;font-size:38px;line-height:1.3;letter-spacing:-1px;color:#113f55}.display-app .display-summary{position:sticky;top:110px;background:#f8fbfc}.display-summary dl{font-size:14px;line-height:1.6;margin:20px 0}.display-summary dt{color:#576b75}.display-summary dd{margin:0 0 12px;font-weight:600}.display-app button{cursor:pointer}.display-app .display-add{width:100%;margin-top:18px;padding:15px 20px;border:0;border-radius:10px;background:#0075a8;color:white;font-weight:700;font-size:15px}.display-add:disabled{opacity:.5;cursor:not-allowed}.display-app .display-error{padding:13px;border:1px solid #d4a7a1;border-radius:9px;background:#fff2ef;color:#8c2920;line-height:1.5;margin:14px 0}.display-app .display-help{font-size:13px;line-height:1.6;color:#536975;margin:10px 0}.display-app progress{width:100%;accent-color:#0075a8}.display-app .pd-pickup{margin:24px 0 0}.display-app .cards-upload:focus-within{outline:2px solid #0075a8}.display-app .cards-file{display:block}.display-app .cards-file button{margin-top:10px}.display-app .rollup-illustration{width:100%;height:195px;object-fit:contain}
.display-product-photo{display:block;width:100%;height:280px;object-fit:contain;background:#f3f3f0;border-radius:12px;margin:0 0 24px}
.display-app .cards-upload{min-width:0}.display-app input[type=file]{display:block;width:100%;min-width:0;max-width:100%;font-size:14px}.display-app input[type=number],.display-app select{font-size:16px}
.display-app .pd-pickup button{min-height:44px;border:1px solid #d8e5ec;border-radius:8px;background:#fff;color:#173f55;font:600 14px/1.35 inherit;padding:9px}.display-app .pd-pickup button[aria-pressed=true]{background:#0075a8;color:#fff;border-color:#0075a8}.display-app .pd-pickup button:disabled{background:#f1f4f6;color:#95a4ac;border-color:transparent;cursor:not-allowed}.display-app :focus-visible{outline:3px solid #e98524;outline-offset:3px}
@media(max-width:850px){.display-app .display-grid{grid-template-columns:1fr}.display-app .display-summary{position:static}.display-app .display-panel{padding:20px}.display-app .display-grid{gap:18px}.display-app .display-summary .display-preview{display:grid;height:180px;padding:18px}.display-product-photo{height:auto;max-height:240px}}
@media(max-width:360px){.display-app .display-panel{padding:15px}.display-fields{gap:10px}.display-app .cards-choice label{padding:12px}.display-app .display-edges{gap:6px}}
/* v087: product-specific work mockups instead of the shop-card photos. */
.display-scene{position:relative;display:grid;place-items:center;isolation:isolate;min-height:330px;margin:0 0 26px;border:1px solid #d8e2e5;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#e4e9e9 0%,#f2f3f0 66%,#d9d5cd 66%,#ede8dd 100%)}
.display-scene::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,#fff9,transparent 67%);pointer-events:none}
.display-scene-banner::after{content:"";position:absolute;left:15%;right:15%;bottom:17%;height:12px;border-radius:50%;background:#263d4b2a;filter:blur(10px);z-index:-1}
.display-scene .display-banner{position:relative;display:block;flex:none;max-width:calc(100% - 32px);max-height:260px;box-sizing:border-box;border:0;border-radius:2px;background:#0c759f;box-shadow:0 2px 1px #fff6 inset,0 15px 25px #233b4b36,0 3px 4px #263e4c3a;transform:perspective(850px) rotateY(-3deg) rotateX(1deg);overflow:visible}
.display-scene .display-banner.mesh{background-color:#397f96;background-image:radial-gradient(#dce8ea55 1px,transparent 1px);background-size:4px 4px}
.display-banner::after{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(105deg,#ffffff26 0%,transparent 25%,#00000012 60%,#ffffff12 100%);pointer-events:none}
.display-banner-seam{position:absolute;inset:5px;border:1px dashed #eef2ef7a;box-shadow:0 0 0 4px #092b3b1b;pointer-events:none}
.display-scene .display-eyelet{position:absolute;width:var(--eyelet-size,10px);height:var(--eyelet-size,10px);box-sizing:border-box;transform:translate(-50%,-50%);border:clamp(1px,calc(var(--eyelet-size,10px) * .22),3px) solid transparent;border-radius:50%;background:radial-gradient(circle at 50% 50%,#23313b 0 28%,transparent 30%) padding-box,conic-gradient(from 28deg,#f9fcfd,#95a5aa,#ecf3f4,#667a82,#f9fcfd) border-box;box-shadow:0 0 0 1px #4d69727d,0 1px 2px #0d253355,inset 0 1px 2px #0d263d88;z-index:2}
.display-artwork{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 30% 30%,#32afc5,#08638a 60%,#103d56);color:white;text-align:center;background-position:center;background-repeat:no-repeat;background-size:contain}
.display-artwork.has-file{background-color:#fff;background-size:contain}
.display-placeholder{display:grid;justify-items:center;gap:5px;padding:18px;transform:rotate(-2deg)}
.display-placeholder-mark{font-size:34px;line-height:1}
.display-placeholder strong{font-size:clamp(18px,3vw,30px);letter-spacing:-.03em}
.display-placeholder small{font-size:11px;opacity:.86}
.display-scene-caption{position:absolute;left:18px;bottom:12px;padding:5px 9px;border:1px solid #fff9;border-radius:30px;background:#ffffffc9;backdrop-filter:blur(8px);color:#315165;font-size:11px;font-weight:700;z-index:3}
.display-scene-rollup{min-height:370px}
.display-rollup-stand{position:relative;z-index:1;width:172px;height:315px;margin:13px auto 28px;filter:drop-shadow(12px 13px 9px #22374440)}
.display-rollup-rail{position:absolute;left:12px;top:0;width:148px;height:274px;border:3px solid #d6dfe2;border-top-color:#6a777d;border-bottom:0;border-radius:3px 3px 0 0;background:#fff;box-shadow:2px 0 1px #ffffffb8 inset,-3px 0 3px #0002 inset;overflow:hidden;z-index:2}
.display-rollup-post{position:absolute;left:83px;top:0;width:6px;height:304px;border-radius:3px;background:linear-gradient(90deg,#6f7e85,#eff3f2,#6a777d);z-index:0}
.display-rollup-cassette{position:absolute;left:2px;right:2px;bottom:14px;height:28px;border-radius:5px 5px 9px 9px;background:linear-gradient(180deg,#f8fbfa,#9aa8ad 46%,#e3e9e9 68%,#718088);box-shadow:inset 0 1px 2px #fff,0 3px 5px #17344040;z-index:3}
.display-rollup-feet{position:absolute;left:59px;right:59px;bottom:0;height:17px;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#63747a,#e6ecec,#6e7a80);z-index:1}
.display-rollup-rail .display-artwork{inset:3px 2px 0}
@media(max-width:850px){.display-scene{min-height:290px}.display-scene-rollup{min-height:350px}}
/* v088: tall roll-up composition inspired by the right-hand example, with a clear support foot. */
.display-scene-rollup{justify-items:end;padding-right:clamp(30px,19%,150px);background:linear-gradient(180deg,#f7f8f7 0%,#f5f5f2 77%,#e7e7e1 77%,#f7f6f2 100%)}
.display-scene-rollup::after{content:"";position:absolute;right:8%;bottom:8%;width:48%;height:17px;border-radius:50%;background:#24374225;filter:blur(10px);z-index:0}
.display-scene-rollup .display-rollup-stand{width:184px;height:328px;margin:16px 0 30px;filter:drop-shadow(9px 10px 7px #20354036)}
.display-scene-rollup .display-rollup-rail{left:10px;width:164px;height:291px;border-width:2px;border-top:4px solid #8a9499;border-radius:1px;background:#fdfdfb}
.display-scene-rollup .display-rollup-post{left:91px;height:315px}
.display-scene-rollup .display-rollup-cassette{left:0;right:0;bottom:14px;height:26px;border-radius:3px 3px 8px 8px;background:linear-gradient(180deg,#fbfcfc 0%,#a9b3b5 20%,#e2e7e7 48%,#8f9b9f 76%,#c7d0d0 100%);box-shadow:inset 0 1px 1px #fff,0 3px 5px #19364338}
.display-scene-rollup .display-rollup-feet{left:calc(50% + 9px);right:auto;bottom:0;width:15px;height:18px;transform:translateX(-50%);border-radius:0 0 3px 3px;background:linear-gradient(90deg,#6d7d83,#eef0ef 46%,#78898e)}
.display-scene-rollup .display-rollup-rail .display-artwork{inset:2px 1px 0}
@media(max-width:500px){.display-scene-rollup{padding-right:clamp(20px,11%,48px)}}

/* v091: full-width aluminium cassette and stable floor support. */
.display-scene-rollup .display-rollup-cassette{height:25px;bottom:15px;left:-3px;right:-3px;border-radius:3px 3px 5px 5px;background:linear-gradient(180deg,#f7f8f7 0%,#8d989d 16%,#e8eceb 38%,#bbc5c8 60%,#77858b 85%,#d1d9d9 100%);box-shadow:inset 0 2px 1px #ffffffd9,0 4px 3px #23353a29}
.display-scene-rollup .display-rollup-cassette::before{content:"";position:absolute;left:6px;right:6px;top:4px;height:1px;background:#ffffffcf}
.display-scene-rollup .display-rollup-feet{left:auto;right:23px;bottom:1px;width:49px;height:15px;transform:none;border-radius:2px 2px 5px 5px;background:linear-gradient(180deg,#dce3e4 0%,#87969d 34%,#d3dddf 65%,#74848b 100%);box-shadow:0 3px 3px #20353d26;z-index:2}
.display-scene-rollup .display-rollup-feet::before{content:"";position:absolute;left:17px;top:-3px;width:15px;height:5px;border-radius:1px;background:#8b9a9e}
.display-scene-rollup .display-rollup-feet::after{content:"";position:absolute;left:-5px;right:-5px;bottom:-2px;height:3px;border-radius:2px;background:#89979a}

/* v101: the scene has a definite size; the banner scales inside it in both axes. */
.display-scene-banner{box-sizing:border-box;width:100%;min-width:0;min-height:0;height:330px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:20px 24px 52px}
.display-scene-banner .display-banner{min-width:0;min-height:0;max-width:none;max-height:none}
.display-scene-banner .display-banner-seam{inset:var(--seam-inset,5px);box-shadow:none}
.display-banner-compact .display-placeholder{padding:3px;gap:0;transform:none}
.display-banner-compact .display-placeholder strong{font-size:12px}
.display-banner-compact .display-placeholder-mark,.display-banner-compact .display-placeholder small,.display-banner-slim .display-placeholder{display:none}
@media(max-width:850px){.display-scene-banner{height:290px}}
