/* Mystery product of the week: one self-contained component, used on the home looks, the Shop and Coloring books.
   A page can restyle it with five variables on any parent:
   --mx-display (headline font), --mx-hand (note font), --mx-accent (bow and tape), --mx-ink (text), --mx-case (uppercase or none), --mx-weight (headline weight). */

.mystery{position:relative;width:330px;max-width:100%;color:var(--mx-ink,#16161d);font-family:inherit;text-align:left}
.mystery *{box-sizing:border-box}
.mbox{display:grid;justify-items:center;gap:8px;width:100%;padding:14px 10px 16px;border:0;background:none;cursor:pointer;color:inherit;font:inherit}
.mbox:focus-visible{outline:3px solid #2747ff;outline-offset:4px}
.mbox-art{position:relative;display:block;width:210px;height:200px}
.mbox .crate{position:absolute;left:12px;right:12px;bottom:0;height:140px;display:grid;place-items:center;background:#c98f4e linear-gradient(90deg,transparent 43%,var(--mx-accent,#ffe14a) 43% 57%,transparent 57%);box-shadow:inset 0 -12px 0 rgba(0,0,0,.13),0 20px 18px -12px rgba(22,22,29,.55)}
.mbox .lid{position:absolute;left:0;right:0;top:30px;height:42px;z-index:2;background:#b57a3c linear-gradient(90deg,transparent 43%,var(--mx-accent,#ffe14a) 43% 57%,transparent 57%);box-shadow:0 6px 0 rgba(0,0,0,.16);transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.mbox .lid::before,.mbox .lid::after{content:"";position:absolute;top:-28px;width:40px;height:30px;border:9px solid var(--mx-accent,#ffe14a);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.mbox .lid::before{left:calc(50% - 44px);border-radius:60% 60% 10% 60%;rotate:-14deg}
.mbox .lid::after{left:calc(50% + 4px);border-radius:60% 60% 60% 10%;rotate:14deg}
.mbox .q{font:400 5.4rem/1 var(--mx-display,Anton,Impact,sans-serif);color:#fff;-webkit-text-stroke:3px #16161d;paint-order:stroke fill;text-shadow:5px 5px 0 #16161d;margin-top:24px}
.mbox-tag{font:var(--mx-weight,400) 1.55rem/1.05 var(--mx-display,Anton,Impact,sans-serif);text-transform:var(--mx-case,uppercase);text-align:center;max-width:16ch;letter-spacing:0}
.mbox-cta{font:400 1.3rem var(--mx-hand,"Patrick Hand",cursive);background:var(--mx-accent,#ffe14a);color:#16161d;padding:4px 14px;rotate:-2deg;box-shadow:0 6px 10px -6px rgba(0,0,0,.4)}
.mystery:not(.open):not(.opening) .mbox-art{animation:mjiggle 3.4s ease-in-out infinite}
@keyframes mjiggle{0%,80%,100%{rotate:0deg}84%{rotate:-6deg}88%{rotate:6deg}92%{rotate:-3deg}96%{rotate:2deg}}
.mbox:hover .lid,.mbox:focus-visible .lid{transform:translateY(-12px) rotate(-5deg)}
.mystery.opening .lid{transform:translate(70px,-150px) rotate(40deg);opacity:0}
.mystery.opening .q{animation:mpop .5s ease-out forwards}
@keyframes mpop{to{transform:scale(1.6) translateY(-30px);opacity:0}}
.mystery.open .mbox{display:none}

/* the revealed card */
.mx-card{position:relative;background:#fff;color:#16161d;padding:12px 12px 18px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);rotate:2deg;animation:mreveal .5s cubic-bezier(.3,1.5,.5,1)}
.mystery.instant .mx-card{animation:none}
@keyframes mreveal{from{transform:scale(.4) translateY(40px);opacity:0}}
.mx-sticker{position:absolute;z-index:3;top:-14px;right:-10px;rotate:8deg;padding:6px 12px;font:var(--mx-weight,400) 1rem/1 var(--mx-display,Anton,Impact,sans-serif);text-transform:var(--mx-case,uppercase);background:var(--mx-accent,#ffe14a);color:#16161d;box-shadow:0 6px 10px -6px rgba(0,0,0,.4)}
.mx-cov{display:grid;place-items:center;aspect-ratio:1;background:#eef0f6;overflow:hidden;margin-bottom:12px}
.mx-cov img{display:block;width:100%;height:100%;object-fit:contain}
.mx-cov.photo img{object-fit:cover}
.mystery .mx-card h3{margin:0;font:800 1.15rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-transform:none;letter-spacing:0;color:#16161d;text-shadow:none;-webkit-text-stroke:0}
.mystery .mx-card h3:focus{outline:none}
.mx-by{font:400 1.05rem/1.2 var(--mx-hand,"Patrick Hand",cursive);margin-top:2px}
.mx-blurb{font:500 .92rem/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:8px 0 4px}
.mx-price{font:400 1.6rem/1 var(--mx-display,Anton,Impact,sans-serif);margin-top:6px}
.mx-buys{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mx-btn{display:inline-block;font:800 .9rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none;padding:10px 14px;background:#16161d;color:#fff}
.mx-btn.ghost{background:#fff;color:#16161d;box-shadow:inset 0 0 0 2px #16161d}
.mx-btn:focus-visible{outline:3px solid #2747ff;outline-offset:2px}
.mx-when{font:400 1.1rem var(--mx-hand,"Patrick Hand",cursive);margin-top:12px}

/* on the home looks it docks at the top right of the "recently pinned" shelf */
.mx-dock{float:right;width:330px;margin:0 0 24px 32px;position:relative;z-index:2}
*:has(> .mx-dock){display:flow-root}
@media (max-width:900px){
  .mx-dock{float:none;width:min(330px,100%);margin:0 0 24px}
}
@media (prefers-reduced-motion:reduce){.mystery *{animation:none!important;transition:none!important}}