/* Original CMYK faces and poses, with an articulated SVG celebration. */
[data-ink="C"] { --polymer-row: 0%; --polymer-settled-column: 0%; }
[data-ink="M"] { --polymer-row: 33.333333%; --polymer-settled-column: 33.333333%; }
[data-ink="Y"] { --polymer-row: 66.666667%; --polymer-settled-column: 66.666667%; }
[data-ink="K"] { --polymer-row: 100%; --polymer-settled-column: 100%; }
.polymer-sprite {
  display: block;
  background-image: url("polymer-cmyk-mascot-v1.webp");
  background-size: 300% 400%;
  background-position: 0% var(--polymer-row, 0%);
  background-repeat: no-repeat;
}
.polymer-sprite.polymer-face {
  background-image: url("polymer-cmyk-mascot-v1.webp");
  background-size: 300% 400%;
  background-position: 100% var(--polymer-row, 0%);
  background-repeat: no-repeat;
}
.product-card .product-art {
  height: 210px;
  background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--tone) 9%, transparent), transparent 67%), var(--wash);
}
.product-art .product-art-label { z-index: 2; }
.mascot-stage {
  position: absolute;
  width: 184px;
  height: 184px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.mascot-character { position: absolute; inset: 0; transform-origin: 50% 88%; }
.mascot-character > .polymer-sprite { position: absolute; inset: 0; clip-path: inset(3% 0 0); }
.mascot-idle { opacity: 1; }
.mascot-rig { position: absolute; inset: 0; opacity: 0; }
.mascot-rig-limbs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: none; stroke-width: 0; }
.rig-limb { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.polymer-joint { transform-box: view-box; transform-origin: 0 0; }
.polymer-sprite.polymer-face.mascot-rig-head {
  position: absolute;
  left: 11.9565%;
  top: 1.6304%;
  width: 76.087%;
  height: 76.087%;
  transform-origin: 50% 58%;
}
.mascot-settled {
  background-image: url("polymer-cmyk-crossed-arms-v1.webp");
  background-size: 400% 100%;
  background-position: var(--polymer-settled-column, 0%) 0%;
  opacity: 0;
}
/* Each crossed-arms frame is 543 × 724; preserve its portrait proportions. */
.mascot-character > .mascot-settled { inset: 8px 12.5% -8px; }
.has-celebrated .mascot-idle { opacity: 0; }
.has-celebrated .mascot-settled { opacity: 1; }
.mascot-shadow {
  position: absolute;
  bottom: 10px;
  left: 32%;
  width: 36%;
  height: 8px;
  background: #172e3a18;
  border-radius: 50%;
  filter: blur(3px);
}
.mascot-message {
  position: absolute;
  left: 15px;
  bottom: 15px;
  max-width: 140px;
  padding: 7px 9px;
  border-radius: 9px 9px 9px 2px;
  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--line));
  background: #fff;
  color: var(--ink);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.is-celebrating .mascot-message { opacity: 1; transform: translateY(0); }
.is-celebrating .mascot-idle { opacity: 0; }
.is-celebrating .mascot-rig { opacity: 1; animation: polymer-rig-out var(--celebration-duration) linear both; }
.is-celebrating .mascot-settled { opacity: 0; animation: polymer-fold-in var(--celebration-duration) linear both; }
.is-celebrating .mascot-character { animation: polymer-celebrate var(--celebration-duration) ease-in-out both; }
.is-celebrating .mascot-shadow { animation: polymer-shadow var(--celebration-duration) ease-in-out both; }
.is-celebrating .polymer-joint { animation-duration: var(--celebration-duration); animation-timing-function: cubic-bezier(.37, 0, .25, 1); animation-fill-mode: both; }
.is-celebrating .rig-arm-left { animation-name: polymer-arm-left; }
.is-celebrating .rig-arm-right { animation-name: polymer-arm-right; }
.is-celebrating .rig-elbow-left { animation-name: polymer-elbow-left; }
.is-celebrating .rig-elbow-right { animation-name: polymer-elbow-right; }
.is-celebrating .rig-wrist-left { animation-name: polymer-wrist-left; }
.is-celebrating .rig-wrist-right { animation-name: polymer-wrist-right; }
.is-celebrating .rig-thigh-left { animation-name: polymer-thigh-left; }
.is-celebrating .rig-thigh-right { animation-name: polymer-thigh-right; }
.is-celebrating .rig-knee-left { animation-name: polymer-knee-left; }
.is-celebrating .rig-knee-right { animation-name: polymer-knee-right; }
.is-celebrating .rig-ankle-left { animation-name: polymer-ankle-left; }
.is-celebrating .rig-ankle-right { animation-name: polymer-ankle-right; }
.is-celebrating .mascot-rig-head { animation: polymer-body-sway var(--celebration-duration) ease-in-out both; }
.mascot-confetti { position: absolute; inset: 0; }
.mascot-confetti i {
  position: absolute;
  top: 47%;
  left: 50%;
  width: 5px;
  height: 8px;
  border-radius: 2px;
  background: var(--tone);
  opacity: 0;
  --burst-x: -74px;
  --burst-y: -30px;
}
.mascot-confetti i:nth-child(2) { --burst-x: -55px; --burst-y: -64px; background: var(--magenta); }
.mascot-confetti i:nth-child(3) { --burst-x: -12px; --burst-y: -79px; background: var(--yellow); }
.mascot-confetti i:nth-child(4) { --burst-x: 38px; --burst-y: -65px; background: var(--cyan); }
.mascot-confetti i:nth-child(5) { --burst-x: 76px; --burst-y: -29px; background: var(--yellow); }
.mascot-confetti i:nth-child(6) { --burst-x: 73px; --burst-y: 22px; background: var(--magenta); }
.mascot-confetti i:nth-child(7) { --burst-x: -47px; --burst-y: 38px; background: var(--cyan); }
.mascot-confetti i:nth-child(8) { --burst-x: -80px; --burst-y: 13px; background: var(--ink); }
.is-celebrating .mascot-confetti i { animation: polymer-confetti .85s calc(var(--piece) * 22ms) ease-out both; }
.card-colors { gap: 10px; }
.card-colors .color-choice {
  width: 52px;
  height: 52px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  transition: border-color .15s, background-color .15s;
}
.card-colors .color-choice .polymer-face {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  transition: transform .2s;
}
.card-colors .color-choice:hover { background: color-mix(in srgb, var(--tone) 7%, white); border-color: var(--tone); }
.card-colors .color-choice:hover .polymer-face { transform: translateY(-2px); }
.card-colors .color-choice[aria-pressed="true"] { border: 2px solid var(--ink); background: color-mix(in srgb, var(--tone) 8%, white); }
.card-colors .color-choice[aria-pressed="true"]:after {
  content: "✓";
  inset: auto -3px -2px auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid white;
  background: var(--ink);
  color: white;
  font-size: 10px;
  text-shadow: none;
}
.card-colors .color-choice[data-color="Y"][aria-pressed="true"]:after { color: white; }
.is-celebrating .color-choice[aria-pressed="true"] .polymer-face { animation: polymer-face-pop .5s ease-out; }
#color-filters button { min-height: 44px; }
#color-filters .polymer-face { width: 26px; height: 26px; flex: none; }

@keyframes polymer-celebrate {
  0%, 100% { transform: translateY(0) rotate(0); }
  10% { transform: translateY(3px) scale(1.03, .96); }
  26% { transform: translateY(-12px) rotate(-4deg) scale(.99, 1.02); }
  39% { transform: translateY(0) rotate(2deg) scale(1.02, .98); }
  53% { transform: translateY(-7px) rotate(4deg); }
  67% { transform: translateY(0) rotate(-3deg); }
  80% { transform: translateY(-4px) rotate(2deg); }
  91% { transform: translateY(1px) scale(1.01, .99); }
}
@keyframes polymer-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  26% { transform: scaleX(.65); opacity: .45; }
  53% { transform: scaleX(.8); opacity: .65; }
  80% { transform: scaleX(.9); opacity: .8; }
}
@keyframes polymer-arm-left {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-13deg); }
  25% { transform: rotate(30deg); }
  40% { transform: rotate(5deg); }
  54% { transform: rotate(34deg); }
  69% { transform: rotate(-5deg); }
  82% { transform: rotate(27deg); }
  92% { transform: rotate(-7deg); }
}
@keyframes polymer-arm-right {
  0%, 100% { transform: rotate(0); }
  13% { transform: rotate(-8deg); }
  29% { transform: rotate(25deg); }
  43% { transform: rotate(-9deg); }
  58% { transform: rotate(30deg); }
  73% { transform: rotate(4deg); }
  85% { transform: rotate(23deg); }
  94% { transform: rotate(-6deg); }
}
@keyframes polymer-elbow-left {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(-22deg); }
  28% { transform: rotate(34deg); }
  42% { transform: rotate(-26deg); }
  56% { transform: rotate(32deg); }
  70% { transform: rotate(-20deg); }
  83% { transform: rotate(25deg); }
  94% { transform: rotate(-14deg); }
}
@keyframes polymer-elbow-right {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(13deg); }
  30% { transform: rotate(-24deg); }
  46% { transform: rotate(37deg); }
  60% { transform: rotate(-19deg); }
  75% { transform: rotate(32deg); }
  87% { transform: rotate(-20deg); }
}
@keyframes polymer-wrist-left {
  0%, 100% { transform: rotate(0); }
  20%, 43%, 66%, 86% { transform: rotate(24deg); }
  31%, 54%, 76% { transform: rotate(-23deg); }
}
@keyframes polymer-wrist-right {
  0%, 100% { transform: rotate(0); }
  18%, 39%, 61%, 83% { transform: rotate(-24deg); }
  28%, 50%, 72% { transform: rotate(26deg); }
}
@keyframes polymer-thigh-left {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-8deg); }
  26% { transform: rotate(28deg); }
  40% { transform: rotate(-5deg); }
  54% { transform: rotate(-14deg); }
  68% { transform: rotate(35deg); }
  82% { transform: rotate(12deg); }
  93% { transform: rotate(0); }
}
@keyframes polymer-thigh-right {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-8deg); }
  26% { transform: rotate(12deg); }
  42% { transform: rotate(34deg); }
  55% { transform: rotate(-7deg); }
  69% { transform: rotate(-14deg); }
  82% { transform: rotate(26deg); }
  94% { transform: rotate(0); }
}
@keyframes polymer-knee-left {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(21deg); }
  26% { transform: rotate(-42deg); }
  40% { transform: rotate(13deg); }
  54% { transform: rotate(20deg); }
  68% { transform: rotate(-47deg); }
  82% { transform: rotate(-16deg); }
  94% { transform: rotate(7deg); }
}
@keyframes polymer-knee-right {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(21deg); }
  26% { transform: rotate(-18deg); }
  42% { transform: rotate(-46deg); }
  55% { transform: rotate(17deg); }
  69% { transform: rotate(22deg); }
  82% { transform: rotate(-37deg); }
  94% { transform: rotate(7deg); }
}
@keyframes polymer-ankle-left {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-11deg); }
  26% { transform: rotate(20deg); }
  40% { transform: rotate(-6deg); }
  54% { transform: rotate(-14deg); }
  68% { transform: rotate(25deg); }
  82% { transform: rotate(13deg); }
  94% { transform: rotate(-4deg); }
}
@keyframes polymer-ankle-right {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-11deg); }
  26% { transform: rotate(12deg); }
  42% { transform: rotate(24deg); }
  55% { transform: rotate(-12deg); }
  69% { transform: rotate(-13deg); }
  82% { transform: rotate(20deg); }
  94% { transform: rotate(-4deg); }
}
@keyframes polymer-body-sway {
  0%, 100% { transform: rotate(0) scale(1); }
  10% { transform: translateY(1px) scale(1.02, .98); }
  27% { transform: rotate(-3deg) scale(.99, 1.01); }
  43% { transform: rotate(3deg); }
  57% { transform: rotate(2deg) scale(1.01, .99); }
  71% { transform: rotate(-3deg); }
  85% { transform: rotate(2deg); }
}
@keyframes polymer-rig-out {
  0%, 89% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes polymer-fold-in {
  0%, 89% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes polymer-confetti {
  0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(.75) rotate(175deg); }
}
@keyframes polymer-face-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-3px) scale(1.12); }
}
@media (min-width: 621px) and (max-width: 1100px) {
  .card-colors { gap: 6px; }
  .card-colors .color-choice { width: 46px; height: 46px; }
  .card-colors .color-choice .polymer-face { width: 42px; height: 42px; }
  .product-card .product-art-label { font-size: 8px; left: 15px; }
}
@media (max-width: 620px) {
  .product-card .product-art { height: 210px; }
  .mascot-stage { width: 188px; height: 188px; }
  #color-filters { flex-wrap: wrap; }
  #color-filters .polymer-face { width: 24px; height: 24px; }
}
@media (max-width: 380px) {
  .card-colors { gap: 8px; }
  .card-colors .color-choice { width: 48px; height: 48px; }
  .card-colors .color-choice .polymer-face { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-celebrating .mascot-character,
  .is-celebrating .mascot-shadow,
  .is-celebrating .mascot-rig,
  .is-celebrating .mascot-settled,
  .is-celebrating .mascot-rig-head,
  .is-celebrating .polymer-joint,
  .is-celebrating .mascot-confetti i,
  .is-celebrating .color-choice .polymer-face { animation: none; }
  .mascot-message, .card-colors .color-choice, .card-colors .polymer-face { transition: none; }
  .card-colors .color-choice:hover .polymer-face { transform: none; }
  .mascot-confetti { display: none; }
}