/* Original approved artwork, with semantic, keyboard-accessible controls above it.
   Coordinates use the original 936 x 1681 artboard; the mobile layout remains fluid. */
@media (min-width:601px) {
 body{container-type:inline-size}
 .m-nav{height:4.2735cqw;min-height:0;padding:0 4%}
 main{position:relative;background:url('/assets/meme67/approved-clean-interactive.png') center -4.2735cqw/100% auto no-repeat;isolation:isolate}
 .m-hero,.m-prints,.m-build,.m-final{background:transparent;padding:0;position:relative;overflow:visible}
 .m-hero:after,.m-prints:before,.m-build:before,.m-final:before{display:none}
 .m-hero{height:50.2137cqw;min-height:0}
 .m-ticker{height:4.2735cqw;margin:0;padding:0;transform:none;background:none;visibility:hidden}
 .m-prints{height:40.0641cqw}
 .m-build{height:42.2009cqw;display:block}
 .m-final{height:32.3718cqw;display:block}
 .m-hero>*{visibility:hidden}
 .m-hero-copy{position:absolute;inset:0;max-width:none}
 .m-hero-copy .pink{visibility:visible;position:absolute;left:3.6%;top:74.7%;width:29.9%;height:14.7%;opacity:0;padding:0}
 .m-hero-copy .pink:focus-visible{opacity:1}
 .m-prints .m-section-heading{visibility:hidden;position:absolute;inset:0}
 .m-print-grid{position:absolute;left:3.74%;right:3.52%;top:33.33%;height:57.33%;margin:0;gap:1.5%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
 .m-print{height:100%;padding:0;border:0;border-radius:1.9cqw;background:transparent;box-shadow:inset 0 0 0 .55cqw #f7f5ee;transition:none}
 .m-print svg,.m-print b{visibility:hidden}
 .m-print:hover{transform:none;outline:3px solid #ceff00;outline-offset:2px}
 .m-print[aria-pressed=true]{box-shadow:inset 0 0 0 .55cqw #ff2cb5}
 .m-print:after{display:none!important}
 .m-product-stage{position:absolute;left:0;top:0;width:47%;height:100%;visibility:hidden}
 .m-build-controls{position:absolute;left:48.5%;top:0;width:48%;height:100%;padding:0}
 .m-build-controls h2,.m-build-controls h3,.m-model-name,.m-hand-note{visibility:hidden}
 .m-products:not([hidden]){position:absolute;top:24%;left:0;z-index:3;background:#f5f4ee}
 .m-colors{position:absolute;top:34%;left:0;width:80%;max-width:none;height:16%;background:#f4f3ed;align-items:center;justify-content:space-between;gap:0;flex-wrap:nowrap}
 .m-color{width:5.4cqw;height:5.4cqw;min-width:0;min-height:0;max-width:none;max-height:none;border-width:2px}
 #m-color-name{position:absolute;top:57.5%;left:44%;margin:0;background:#f3f2ed;padding:.5cqw;width:43%;font-size:1.6cqw}
 .m-spec{position:absolute;left:1%;top:55%;margin:0;width:40%;height:35%;display:block}
 .m-spec>div{border:0;background:transparent;width:100%;height:100%;padding:0}
 .m-spec svg{visibility:hidden}
 .m-spec p{visibility:hidden}
 .m-final>div:first-child,.m-final-art,.m-final-sticker{visibility:hidden}
 .m-purchase{position:absolute;left:65.6%;right:2.5%;bottom:8.5%;height:45%;padding:0;z-index:3}
 .m-purchase>p:first-child{position:absolute;right:0;top:0;margin:0;background:#ff2cb5;padding:.2cqw;font-size:1.2cqw;width:54%;text-align:center}
 .m-purchase>strong{position:absolute;right:0;top:16%;width:53%;height:33%;margin:0;padding:0;display:grid;place-items:center;font-size:3.3cqw;letter-spacing:0;background:#f3f2ed;border-radius:.8cqw}
 .m-purchase #m-buy{position:absolute;left:0;bottom:0;width:100%;height:44%;opacity:0;padding:0}
 .m-purchase #m-buy:focus-visible{opacity:1}
 .m-small{display:none}
 #m-status{position:absolute;top:100%;font-size:1.1cqw}
 .m-footer{height:6.1966cqw;min-height:0}
 /* A changed print is reflected on the papers, while the housing keeps its 67 logo. */
 main[data-custom-preview=true] .m-spec svg{visibility:visible}
 main[data-custom-preview=true] .m-spec>div{background:#f4f3ee;border-radius:1.5cqw}
 main[data-custom-preview=true] #m-hero-paper-print{visibility:visible;position:relative;inset:auto;width:100%;height:100%;background:transparent}
 main[data-custom-preview=true] .m-paper{visibility:visible}
 main[data-custom-preview=true] .m-paper span{visibility:hidden}
 main[data-custom-preview=true] .m-final-art .m-final-print{visibility:visible}
 main[data-color-preview=true] .m-body-stage,main[data-color-preview=true] .m-body-final,main[data-color-preview=true] .m-body-hero{visibility:visible}
 main[data-color-preview=true] .m-body-stage{background:#f5f4ef}
}
.m-art-tint{display:none;pointer-events:none}
@media(min-width:601px){
.m-colors{height:18%;top:33%;padding-bottom:1cqw}.m-color{flex-shrink:0}
#m-color-name{top:58%;height:10%;padding:.3cqw .5cqw}
main[data-color-preview=true] .m-body-stage,main[data-color-preview=true] .m-body-final,main[data-color-preview=true] .m-body-hero{visibility:hidden}
main[data-color-preview=true] .m-art-tint{display:block;position:absolute;inset:0;background:inherit;filter:var(--housing-filter);z-index:1}
.tint-hero{clip-path:polygon(65% 1%,85% 2%,91% 7%,82% 28.8%,55% 28.8%,58% 13%)}
.tint-stage{clip-path:polygon(17% 57.4%,38% 57.4%,42% 63%,42% 80.2%,14% 80.2%,13% 62%)}
.tint-final{clip-path:polygon(45% 82.4%,59% 82.4%,61% 86%,61% 99%,42% 99%,41% 86%)}
.m-build-controls,.m-print-grid{z-index:2}
.m-body-print>img{width:100%;height:100%}
}
@media(min-width:601px){
.m-final-art{position:absolute;left:42%;top:5%;width:35%;height:68%;min-height:0}
.m-final-art .m-final-print{right:0;bottom:0;width:65%;height:80%;padding:.7cqw;overflow:hidden}
.m-final-art .m-final-print svg{height:100%;width:100%}
.m-spec svg{height:100%;width:100%;display:block}
.m-print{box-shadow:inset 0 0 0 .85cqw #f7f5ee}
.m-print[aria-pressed=true]{box-shadow:inset 0 0 0 .55cqw #ff2cb5}
.m-print:nth-child(2):not([aria-pressed=true]):before{content:'';position:absolute;right:1.2cqw;top:1cqw;width:3.7cqw;height:3.7cqw;background:#f7f5ee;border-radius:50%}
}
/* Promotional illustrations stay in the approved lime; only the configurator changes colour. */
@media(min-width:601px){main[data-color-preview=true] .tint-hero,main[data-color-preview=true] .tint-final{display:none}}
/* Dynamic vector artwork sits on a clean patch of the same unprinted housing. */
.m-live-logo{display:none}
@media(min-width:601px){
.m-live-logo{display:block;position:absolute;z-index:2;pointer-events:none;transform-origin:center}
.logo-stage{left:23%;top:104cqw;width:13.8%;height:15cqw;transform:rotate(-5deg) skewY(-3deg)}
.logo-hero{left:68%;top:12cqw;width:13%;height:13.5cqw;transform:rotate(17deg)}
.logo-final{left:46.8%;top:144cqw;width:8%;height:10cqw;transform:rotate(-7deg)}
.m-logo-face{position:absolute;inset:-5%;background:none;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);}
.logo-stage .m-logo-face{filter:var(--housing-filter)}
.m-live-logo-print{position:absolute;inset:0 0 24%}
.m-live-logo-print svg{width:100%;height:100%;display:block}
.m-live-logo b{position:absolute;bottom:15%;left:0;right:0;text-align:center;font:900 1.15cqw Arial,sans-serif;color:#000}
.logo-final b{font-size:.75cqw}
main[data-black-housing=true] .logo-stage .m-live-logo-print{filter:invert(1)}
main[data-black-housing=true] .logo-stage b{color:#fff}
}
@media(min-width:601px){.m-logo-face{mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect}}
/* The purchase CTA is a real sharp control, aligned to the approved artboard. */
.m-purchase #m-buy span{font-family:Arial,sans-serif;font-weight:400}
@media(min-width:601px){
.m-purchase #m-buy,.m-purchase #m-buy:focus-visible{opacity:1;background:#111;color:#ceff00;border:0;border-radius:.95cqw;font:800 2.55cqw/1 Arial,Helvetica,sans-serif;letter-spacing:-.04cqw;display:flex;align-items:center;justify-content:center;gap:1.5cqw;padding:0 1.8cqw;box-shadow:none;transform:none;z-index:5}
.m-purchase #m-buy span{font-size:3.4cqw;line-height:1}
.m-purchase #m-buy:hover{background:#1c1c1c;transform:none}
.m-purchase #m-buy:focus-visible{outline:3px solid #ceff00;outline-offset:4px}
.m-final-art{height:60%;pointer-events:none}
.m-final-art .m-final-print{bottom:8%;height:78%}
}

/* The base artwork has genuinely blank housing faces. No covering patches. */
.m-logo-face{display:none!important}
/* Align the complete imprint to the front face, rather than the housing silhouette.
   Face axes: horizontal rises to the right; vertical leans slightly to the right. */
@media(min-width:601px){
.logo-final{left:48.5%;top:146cqw;width:9%;height:9.5cqw;transform:matrix(1,-.15,.04,1,0,0)}
.logo-final .m-live-logo-print{inset:0 0 25%}
.logo-final b{bottom:12%;font-size:.75cqw}
}
/* Interactive cards own their full surface and selection state. */
@media(min-width:601px){
.m-print{background:#f7f5ee;box-shadow:none;border:.45cqw solid transparent;padding:1cqw 1cqw 1.2cqw;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.m-print svg,.m-print b{visibility:visible}
.m-print svg{width:100%;height:calc(100% - 3cqw);max-height:none}
.m-print b{font:700 1.9cqw/1.2 Arial,sans-serif;margin:0}
.m-print[aria-pressed=true]{border-color:#ff2cb5;box-shadow:none}
.m-print:nth-child(2):not([aria-pressed=true]):before{display:none}
.m-print[aria-pressed=true]:after{content:'✓';display:grid!important;place-items:center;position:absolute;right:1cqw;top:1cqw;width:3cqw;height:3cqw;background:#ff2cb5;color:#111;border-radius:50%;font:900 2cqw/1 Arial,sans-serif}
.m-print:not([aria-pressed=true]):after{display:none!important}
.m-hero{overflow:hidden}
main[data-custom-preview=true] .m-hero-product .m-paper{right:0;bottom:10%;width:49%;height:45%;padding:1cqw;overflow:hidden;box-sizing:border-box}
main[data-custom-preview=true] #m-hero-paper-print{position:relative;inset:auto;width:100%;height:100%;background:transparent}
main[data-custom-preview=true] #m-hero-paper-print svg{display:block;width:100%;height:100%}
}

@media(min-width:601px){.m-print:not([aria-pressed=true]){box-shadow:0 0 0 .2cqw #f7f5ee}.m-hero-product .m-paper{height:45%;min-height:0}.m-hero-product #m-hero-paper-print{width:100%;height:100%;min-width:0;min-height:0}.m-hero-product #m-hero-paper-print svg{width:100%;height:100%;max-width:100%;max-height:100%}}
/* Paper texture belongs to the illustration; only the vector print is interactive. */
@media(min-width:601px){
main[data-custom-preview] .m-hero-product{inset:0;width:100%;height:100%;transform:none;pointer-events:none}
main[data-custom-preview] .m-hero-product .m-body{visibility:hidden}
main[data-custom-preview] .m-hero-product .m-paper{visibility:visible;position:absolute;left:79%;right:auto;top:47%;bottom:auto;width:18%;height:45%;padding:0;background:none;clip-path:none;box-shadow:none;transform:rotate(-12deg);overflow:hidden}
main[data-custom-preview] #m-hero-paper-print{visibility:visible;position:relative;inset:0;width:100%;height:100%;background:none}
main[data-custom-preview] #m-hero-paper-print svg{width:100%;height:100%;display:block}
main[data-custom-preview] .m-paper span{display:none}
main[data-custom-preview] .m-final-art{left:60%;top:18%;width:19%;height:50%;pointer-events:none}
main[data-custom-preview] .m-final-art .m-body{visibility:hidden}
main[data-custom-preview] .m-final-art .m-final-print{visibility:visible;position:absolute;inset:0;width:100%;height:100%;padding:0;background:none;clip-path:none;box-shadow:none;transform:rotate(-8deg)}
main[data-custom-preview] .m-spec svg{visibility:visible}
main[data-custom-preview] .m-spec>div{background:#f4f3ee;border-radius:1.5cqw}
}