/* HIMMA painter — shop hero. Layers are injected by assets/shop-painter.js:
   wall (splats, behind the frames) and palette (behind the first frame) sit
   under the three artworks; flying drops and the hand sit above them. */
.shop-page .shop-head-art.has-painter{overflow:visible}
.shop-page .shop-head-art .painter-wall,
.shop-page .shop-head-art .painter-fly,
.shop-page .shop-head-art .painter-rig{
  position:absolute;
  left:-260px;top:-260px;
  max-width:none!important;
  max-height:none!important;
  pointer-events:none;
}
.shop-page .shop-head-art .painter-wall{z-index:-1}
.shop-page .shop-head-art .painter-fly{z-index:5}
.shop-page .shop-head-art .painter-rig{
  z-index:6;
  overflow:visible;
  filter:drop-shadow(0 18px 16px rgba(17,28,38,.24));
}
:root[data-theme="dark"] .shop-page .shop-head-art .painter-rig{
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.55));
}

/* Palette hand: neo's illustration, held in front of the bottom-left corner
   of the first frame with its arm reaching in from the left, tilting
   toward the pointer at its own depth. */
.shop-page .shop-head-art .painter-palette{
  position:absolute;
  z-index:4;
  left:-22%;
  bottom:-16%;
  width:30%;
  aspect-ratio:480/492;
  pointer-events:none;
  transform:
    perspective(700px)
    translate3d(calc(var(--pp-x,0)*-10px),calc(var(--pp-y,0)*-8px),0)
    rotateX(calc(8deg + var(--pp-y,0)*-10deg))
    rotateY(calc(var(--pp-x,0)*14deg));
  filter:drop-shadow(0 18px 22px rgba(17,28,38,.22));
}
:root[data-theme="dark"] .shop-page .shop-head-art .painter-palette{
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));
}
.shop-page .shop-head-art .painter-palette img{
  display:block;width:100%;height:auto;max-width:none;
  /* The sleeve fades out, so the painter is never quite there. */
  -webkit-mask-image:linear-gradient(35deg,transparent 4%,#000 34%),linear-gradient(to top,transparent 1%,#000 24%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(35deg,transparent 4%,#000 34%),linear-gradient(to top,transparent 1%,#000 24%);
  mask-composite:intersect;
}

/* Phones: the frames fill the width, so keep the painter inside it. */
@media(max-width:760px){
  .shop-page .shop-head-art.has-painter{overflow-x:clip;overflow-y:visible}
  .shop-page .shop-head-art .painter-palette{left:-6%;bottom:-14%;width:34%}
}