/* House of Box — live 3D magnetic box mockup + corporate wordmark (added 2026-11-07) */

/* ---------- 3D stage ---------- */
.mx{--wrap:#171513;--wrap-in:#211d1a;--insert:#ece4d4;--mk:.82;position:relative;min-width:0;font-family:'DM Sans',sans-serif;color:#121210}
.mx-eyebrow{margin:0 0 2px;text-align:center;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8a7350}
.mx-scene{position:relative;height:clamp(330px,46vh,450px);perspective:1500px;perspective-origin:50% 35%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none}
.mx-scene:focus-visible{outline:2px solid #b69a73;outline-offset:4px}
.mx-scene.dragging{cursor:grabbing}
.mx-scale{position:absolute;left:50%;top:60%;width:0;height:0;transform-style:preserve-3d;transform:scale(var(--mk))}
.mx-box,.mx-g{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.mx-box{will-change:transform}
.mx-f{position:absolute;left:0;top:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.mx-o{background:var(--wrap);outline:1px solid var(--wrap);transition:background-color .5s,outline-color .5s}
.mx-o::before{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.mx-o::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,var(--hi,0)),rgba(255,255,255,var(--hi,0))),linear-gradient(rgba(0,0,0,var(--sh,.3)),rgba(0,0,0,var(--sh,.3)))}
.mx-i{background:var(--wrap-in);transition:background-color .5s}
.mx-i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.mx-o.mx-bottom{background:#0a0908}
.mx .mx-f.mx-top,.mx .mx-f.mx-under{background-size:100% 100%;background-repeat:no-repeat;background-position:center}
.mx-under{background-color:var(--insert)!important}
.mx-under::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.25))!important}
.mx-tray{background:radial-gradient(70% 60% at 50% 40%,rgba(255,255,255,.22),transparent 70%),var(--insert);transition:background-color .5s}
.mx-tray::after{content:"";position:absolute;left:50%;top:50%;width:128px;height:88px;margin:-44px 0 0 -64px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.14),0 0 14px rgba(0,0,0,.22)}
.mx-p{background:#c9c0b0}
.mx-ptop{background:linear-gradient(135deg,#f4efe6,#cfc6b6);display:flex;align-items:center;justify-content:center}
.mx-ptop span{font-family:'Playfair Display',serif;font-size:12px;letter-spacing:.3em;color:rgba(20,17,13,.5)}
.mx-pf{background:linear-gradient(#d8d0c2,#b9b0a1)}.mx-ps{background:#a89f90}.mx-ps2{background:#c4bbac}
.mx-ribbon{background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%,rgba(0,0,0,.2)),#b69a73}
.mx-dot{border-radius:50%;background:radial-gradient(circle at 35% 35%,#9a9a9a,#3a3a3a 70%)}
.mx-shadow{position:absolute;left:0;top:0;width:420px;height:120px;margin:-60px 0 0 -210px;transform:translateY(118px);background:radial-gradient(closest-side,rgba(18,18,16,.45),transparent);filter:blur(6px);pointer-events:none}
.mx-hint{margin:0 0 12px;text-align:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#7b7468}

/* ---------- control panel ---------- */
.mx-panel{display:flex;flex-direction:column;gap:13px;padding:20px;background:#faf7f1;border:1px solid rgba(18,18,16,.16)}
.mx-upload{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mx-panel .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.75rem 1.1rem;border:1px solid #b69a73;background:#121210;color:#fff;font:500 .9rem 'DM Sans',sans-serif;cursor:pointer;text-decoration:none}
.mx-panel .btn-ghost{background:transparent;color:#121210;border-color:rgba(18,18,16,.35)}
.mx-panel .btn:hover{background:#622934;border-color:#622934;color:#fff}
.mx-upbtn{position:relative;overflow:hidden}
.mx-upbtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.mx-upbtn:focus-within{outline:2px solid #b69a73;outline-offset:2px}
.mx-remove{background:none;border:0;padding:6px;color:#635e55;font-size:.82rem;text-decoration:underline;cursor:pointer}
.mx-toggle{margin-left:auto}
.mx-status{margin:-4px 0 0;min-height:1em;font-size:.8rem;color:#622934;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mx-row .cfg-label{min-width:64px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#7b7468}
.mx .swatches{display:flex;gap:8px}
.mx .sw{position:relative;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(18,18,16,.25);background:var(--sw);cursor:pointer}
.mx .sw.active::after{content:"";position:absolute;inset:-5px;border:1px solid #b69a73;border-radius:50%}
.mx .chips{display:flex;flex-wrap:wrap;gap:6px}
.mx .chip{min-height:32px;padding:5px 11px;border:1px solid rgba(18,18,16,.2);background:#fff;color:#3c3830;font:500 .78rem 'DM Sans',sans-serif;cursor:pointer}
.mx .chip.active{border-color:#622934;color:#622934}
.mx-size{flex:1;min-width:140px;accent-color:#b69a73}
.mx-label{margin:2px 0 0;font:italic 500 1.02rem 'Playfair Display',serif;color:#3c3830}
.mx-panel .mx-cta{width:100%;background:#622934;border-color:#622934}
.mx-panel .mx-cta:hover{background:#121210;border-color:#121210}
.mx-privacy{margin:0;font-size:.76rem;line-height:1.5;color:#6c665c}

/* ---------- placement ---------- */
.r-hero .mx{align-self:center}
.hob3d-section .hob3d-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:5vw;align-items:center}
.hob3d-section .hob3d-copy h2{font-size:clamp(2rem,3.4vw,3.4rem)}
.hob3d-section .hob3d-copy p:not(.eyebrow){color:#595449;max-width:34rem}
@media(max-width:900px){.mx{--mk:.74}.hob3d-section .hob3d-grid{grid-template-columns:1fr}}
@media(max-width:600px){.mx{--mk:.64}.mx-scene{height:300px}.mx-toggle{margin-left:0}.mx-panel{padding:16px}}
@media(prefers-reduced-motion:reduce){.mx-o,.mx-i,.mx-tray{transition:none}}
/* keep host page paragraph rules from resizing the mockup texts */
.r-hero .mx p,.hob3d-section .mx p{max-width:none}
.r-hero .mx p.mx-eyebrow,.hob3d-section .mx p.mx-eyebrow{font-size:.72rem;line-height:1.4;color:#8a7350}
.r-hero .mx p.mx-hint,.hob3d-section .mx p.mx-hint{font-size:.7rem;line-height:1.4;color:#7b7468}
.r-hero .mx p.mx-status,.hob3d-section .mx p.mx-status{font-size:.8rem;color:#622934}
.r-hero .mx p.mx-label,.hob3d-section .mx p.mx-label{font-size:1.02rem;color:#3c3830}
.r-hero .mx p.mx-privacy,.hob3d-section .mx p.mx-privacy{font-size:.76rem;line-height:1.5;color:#6c665c}
.mx-scale{top:64%}