/* Approved illustrated hero cards. Scoped to the shop hero. */
body.hero-reference-page .hero--reference.hero--head .mood-picker{
  width:46%;gap:10px;align-items:stretch;
}
body.hero-reference-page .hero--reference .mood-picker .illustrated-card{
  --illustrated-accent:#4972b6;--illustrated-tint:#edf4ff;
  display:flex;flex-direction:column;align-items:flex-start;isolation:isolate;
  height:194px;min-height:194px;overflow:hidden;padding:12px 15px 13px;
  border:1px solid #ffffffd9;border-radius:21px;background:#fffdf8f2;
  color:#243653;box-shadow:0 8px 24px #436b7510;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
body.hero-reference-page .hero--reference .mood-picker .illustrated-card[data-mood=story]{--illustrated-accent:#7760b4;--illustrated-tint:#f4f0ff}
body.hero-reference-page .hero--reference .mood-picker .illustrated-card[data-mood=play]{--illustrated-accent:#b74f40;--illustrated-tint:#fff1eb}
body.hero-reference-page .hero--reference .illustrated-card:before{
  content:"";position:absolute;z-index:-1;top:-19px;right:-17px;width:104px;height:87px;
  border-radius:42% 58% 55% 45%;background:var(--illustrated-tint);transform:rotate(-15deg);
}
body.hero-reference-page .hero--reference .mood-picker .illustrated-card[aria-pressed=true]{
  background:#fffdf8;border-color:#fff;box-shadow:0 9px 27px #436b7517;
}
body.hero-reference-page .hero--reference .illustrated-status{
  position:absolute;right:13px;top:13px;width:15px;height:15px;border-radius:50%;
  background:var(--illustrated-accent);opacity:0;transform:scale(.5);
  transition:opacity .2s,transform .2s;
}
body.hero-reference-page .hero--reference .illustrated-status:after{content:"";position:absolute;left:4px;top:4px;width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
body.hero-reference-page .hero--reference .illustrated-card[aria-pressed=true] .illustrated-status{opacity:1;transform:scale(1)}
body.hero-reference-page .hero--reference .illustrated-art{display:block;flex:0 0 45px;width:66px;height:45px;margin:0 0 8px -3px}
body.hero-reference-page .hero--reference .illustrated-art svg{display:block;width:100%;height:100%;overflow:visible;stroke:none;transition:transform .25s ease}
body.hero-reference-page .hero--reference .mood-picker .illustrated-card strong{
  font-size:20px;font-weight:760;line-height:1.18;letter-spacing:-.5px;margin:0 0 7px;
}
body.hero-reference-page .hero--reference .mood-picker .mood-description{
  font-size:12px;line-height:1.45;font-weight:450;letter-spacing:0;color:#526071;
}
body.hero-reference-page .hero--reference .illustrated-action{
  display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:9px;
  font-size:11px;font-weight:650;line-height:1.2;color:var(--illustrated-accent);
}
body.hero-reference-page .hero--reference .illustrated-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.hero-reference-page .hero--reference .illustrated-card:focus-visible{outline:3px solid var(--illustrated-accent);outline-offset:4px}
@media(hover:hover){
  body.hero-reference-page .hero--reference .mood-picker .illustrated-card:hover{transform:translateY(-4px);border-color:#fff;background:#fffdf8;box-shadow:0 14px 27px #436b751c}
  body.hero-reference-page .hero--reference .illustrated-card:hover .illustrated-art svg{transform:rotate(-6deg) translateY(-1px)}
}
@media(max-width:1100px) and (min-width:701px){
  body.hero-reference-page .hero--reference .mood-picker .illustrated-card{padding-left:11px;padding-right:11px;height:194px;min-height:194px}
  body.hero-reference-page .hero--reference .mood-picker .illustrated-card strong{font-size:15px;letter-spacing:-.4px}
  body.hero-reference-page .hero--reference .illustrated-art{width:59px;flex-basis:42px;height:42px}
}
@media(max-width:700px){
  body.hero-reference-page .hero--reference.hero--head .mood-picker{width:calc(100% - 40px);gap:8px}
  body.hero-reference-page .hero--reference .mood-picker .illustrated-card{height:166px;min-height:166px;padding:10px 10px 11px;border-radius:18px}
  body.hero-reference-page .hero--reference .illustrated-card:before{width:74px;height:64px;top:-10px;right:-13px}
  body.hero-reference-page .hero--reference .illustrated-art{width:52px;height:36px;flex-basis:36px;margin:0 0 7px -3px}
  body.hero-reference-page .hero--reference .mood-picker .illustrated-card strong{font-size:15px;line-height:1.2;letter-spacing:-.45px;margin-bottom:6px}
  body.hero-reference-page .hero--reference .mood-picker .mood-description{font-size:11px;line-height:1.4;letter-spacing:-.15px}
  body.hero-reference-page .hero--reference .illustrated-action{font-size:11px;gap:4px;padding-top:7px}
  body.hero-reference-page .hero--reference .illustrated-action svg{width:12px;height:12px;flex-shrink:0}
  body.hero-reference-page .hero--reference .illustrated-status{top:11px;right:10px;width:15px;height:15px}
}
@media(max-width:370px){
  body.hero-reference-page .hero--reference .mood-picker .illustrated-card{padding-top:9px;padding-left:7px;padding-right:7px}
  body.hero-reference-page .hero--reference .illustrated-art{width:46px;height:30px;flex-basis:30px;margin-bottom:4px}
  body.hero-reference-page .hero--reference .mood-picker .illustrated-card strong{font-size:13px;letter-spacing:-.35px;margin-bottom:5px}
  body.hero-reference-page .hero--reference .mood-picker .mood-description{line-height:1.36}
  body.hero-reference-page .hero--reference .illustrated-action{gap:3px;font-size:11px;letter-spacing:-.15px}
  body.hero-reference-page .hero--reference .illustrated-action svg{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.hero-reference-page .hero--reference .illustrated-card,body.hero-reference-page .hero--reference .illustrated-art svg,body.hero-reference-page .hero--reference .illustrated-status{transition:none}
  body.hero-reference-page .hero--reference .mood-picker .illustrated-card:hover,body.hero-reference-page .hero--reference .illustrated-card:hover .illustrated-art svg{transform:none}
}

/* Keep the cards below the interactive character on desktop and tablet. */
@media(min-width:701px){
  body.hero-reference-page .hero--reference,
  body.hero-reference-page .hero--reference .hero-inner{min-height:780px}
}