/* Kaak uses the approved raster unchanged. A fixed silhouette removes only
   the rectangular backdrop at presentation time, including cart thumbnails. */
img[src*="assets/beverage-cacao-kaak-nudo-v1.webp"] {
  -webkit-mask: url("assets/beverage-cacao-kaak-silhouette-v1.svg") center / contain no-repeat;
  mask: url("assets/beverage-cacao-kaak-silhouette-v1.svg") center / contain no-repeat;
  filter: none !important;
  mix-blend-mode: normal !important;
}

img[src*="assets/beverage-cacao-kaak-hot-nudo-v2.webp"] {
  -webkit-mask: url("assets/beverage-cacao-kaak-hot-silhouette-v2.svg") center / contain no-repeat;
  mask: url("assets/beverage-cacao-kaak-hot-silhouette-v2.svg") center / contain no-repeat;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* Place the existing NEW seal in the space previously used by the category. */
.kiosk-product-card[data-entry-id="cacao-kaak"] .kiosk-product-card__category,
.home-kiosk-card[data-home-kiosk-entry="cacao-kaak"] .home-kiosk-card__top > span {
  visibility: hidden !important;
}
.home-kiosk-card[data-home-kiosk-entry="cacao-kaak"] .home-kiosk-card__new-badge {
  top: -8px !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 5.4rem !important;
  min-height: 3rem !important;
  height: auto !important;
  padding: .7em .8em !important;
  transform: rotate(-7deg) !important;
  font-size: clamp(.82rem, 1.7vw, 1.25rem) !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}

.kiosk-product-card[data-entry-id="cacao-kaak"],
.home-kiosk-card[data-home-kiosk-entry="cacao-kaak"] {
  overflow: visible !important;
  isolation: isolate;
}

.kiosk-product-card[data-entry-id="cacao-kaak"] .kiosk-beverage-liquid {
  transform: scale(1.12);
  -webkit-mask: url("assets/beverage-cacao-kaak-silhouette-v1.svg") center / contain no-repeat;
  mask: url("assets/beverage-cacao-kaak-silhouette-v1.svg") center / contain no-repeat;
}

/* Same image box used by the existing cacao / matcha signature cards. */
.kiosk-products[data-group="cacao"] .kiosk-product-card[data-entry-id="cacao-kaak"] .kiosk-product-card__image {
  --kiosk-card-image-width: min(92%, 24rem) !important;
  --kiosk-card-image-height: clamp(15rem, 18vh, 21rem) !important;
  width: var(--kiosk-card-image-width) !important;
  height: var(--kiosk-card-image-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  place-self: center !important;
  margin-inline: auto !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Compensate for the approved file's empty top/bottom margin, keeping the
   complete rim and base within the same visual height as the other cups. */
.kiosk-products[data-group="cacao"] .kiosk-product-card[data-entry-id="cacao-kaak"] .kiosk-product-card__image img,
.kiosk-modal[data-product-id^="cacao-kaak"] .kiosk-modal__media img[src*="beverage-cacao-kaak-nudo-v1.webp"],
.home-kiosk-card[data-home-kiosk-entry="cacao-kaak"] .home-kiosk-card__image img,
.home-kiosk-modal[data-product-id^="cacao-kaak"] .home-kiosk-modal__media img[src*="beverage-cacao-kaak-nudo-v1.webp"] {
  transform: scale(1.12) !important;
}

/* Keep the short hero row at its natural height on the narrow kiosk. */
@media (max-width: 760px) {
  .kiosk-modal[data-product-id^="cacao-kaak"] .kiosk-modal__card {
    grid-template-rows: max-content minmax(0, 1fr) !important;
  }
}

/* Morenito has more padding in its source. Scale the cup and its liquid
   together so the fixed glass rings and logo keep matching the overlay. */
.kiosk-products[data-group="cacao"] .kiosk-product-card[data-entry-id="cacao-morenito"] .kiosk-product-card__image > img,
.kiosk-product-card[data-entry-id="cacao-morenito"] .kiosk-beverage-liquid,
.kiosk-modal[data-product-id^="cacao-morenito"] .kiosk-modal__media > img {
  transform: scale(1.20) !important;
}

/* Reserve a strip above the cacao rows for ornaments and the full-size seals. */
.kiosk-products[data-group="cacao"] > .kiosk-grid {
  margin-top: 4.8rem !important;
  row-gap: 4.6rem !important;
}
.kiosk-product-card:is([data-entry-id="cacao-kaak"], [data-entry-id="cacao-tempo"]) .kiosk-product-card__new-badge {
  top: calc(-1 * clamp(4.2rem, 5.8vw, 5.15rem) - .4rem) !important;
  right: -.55rem !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: clamp(7.4rem, 9.8vw, 8.8rem) !important;
  min-height: clamp(4.2rem, 5.8vw, 5.15rem) !important;
  padding: .68rem 1.15rem !important;
  font-size: clamp(1.25rem, 1.72vw, 1.58rem) !important;
  line-height: 1 !important;
  transform: rotate(7deg) !important;
}

/* Two textured faces and a shallow, bevel-lit metal edge share one cached WebP.
   Keep grouping filters/opacity off the scene so preserve-3d is not flattened. */
.nudo-sticker-kaak-wrap {
  --kaak-wing-depth: clamp(8px, 1.2vw, 12px);
  position: absolute;
  top: -2.4rem;
  left: -2%;
  width: min(27%, 7.6rem);
  aspect-ratio: 541 / 960;
  perspective: 650px;
  transform: rotate(-14deg);
}
.nudo-sticker-kaak-turn {
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 55%;
  animation: nudo-kaak-wing-turn 5.4s linear infinite;
  will-change: transform;
}
.nudo-sticker-kaak-face {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--kaak-wing-depth) / 2));
}
.nudo-sticker-kaak-face--back {
  transform: translateZ(calc(var(--kaak-wing-depth) / -2));
}
.nudo-sticker-kaak-edge {
  position: absolute;
  height: var(--kaak-wing-depth);
  transform-origin: 0 50%;
  transform: translateY(-50%) rotateZ(var(--edge-angle)) rotateX(90deg);
  background: linear-gradient(0deg, #93602a, #e9c078 19%, var(--edge-tone) 48%, #f3d592 82%, #ae7938);
}
.nudo-sticker-kaak-wing {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.03) saturate(.94);
}
.nudo-sticker-kaak-face--back .nudo-sticker-kaak-wing {
  filter: brightness(.95) saturate(.93);
}
.nudo-sticker-kaak-sheen {
  position: absolute;
  inset: 0;
  -webkit-mask: url("/assets/stickers/preview/nudo-kaak-golden-wing-v1.webp") center / 100% 100% no-repeat;
  mask: url("/assets/stickers/preview/nudo-kaak-golden-wing-v1.webp") center / 100% 100% no-repeat;
}
.nudo-sticker-kaak-sheen::before {
  content: "";
  position: absolute;
  inset: -10% -30%;
  background: linear-gradient(108deg, transparent 28%, #ffe3a528, #fff4cb99 45%, #fffef4ed 49%, #ffe6ae77 54%, transparent 68%);
  animation: nudo-kaak-metal-sheen 5.4s linear infinite;
}
.nudo-sticker-kaak-face--back .nudo-sticker-kaak-sheen::before { animation-delay: -2.7s; }
.nudo-sticker-kaak-tips { position: absolute; inset: 0; transform: translateZ(calc(var(--kaak-wing-depth) / 2 + 1px)); }
.nudo-sticker-kaak-tips i {
  position: absolute;
  width: 17%;
  aspect-ratio: 1;
  background: #fffbe9;
  clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 61%, 50% 100%, 38% 61%, 0 50%, 38% 38%);
  opacity: 0;
  animation: nudo-kaak-tip-shine 2.7s cubic-bezier(.22, 1, .36, 1) infinite both;
}
.nudo-sticker-kaak-tips i:nth-child(1) { left: 76%; top: -3%; }
.nudo-sticker-kaak-tips i:nth-child(2) { left: 50%; top: 1%; animation-delay: -.675s; }
.nudo-sticker-kaak-tips i:nth-child(3) { left: 32%; top: 7%; animation-delay: -1.35s; }
.nudo-sticker-kaak-tips i:nth-child(4) { left: 17%; top: 18%; animation-delay: -2.025s; }
@keyframes nudo-kaak-wing-turn {
  from { transform: rotateX(9deg) rotateY(-18deg); }
  to { transform: rotateX(9deg) rotateY(342deg); }
}
@keyframes nudo-kaak-metal-sheen {
  0% { opacity: .1; transform: translateX(-62%); }
  18% { opacity: .85; }
  36% { opacity: .05; transform: translateX(62%); }
  55%, 100% { opacity: 0; transform: translateX(62%); }
}
@keyframes nudo-kaak-tip-shine {
  0%, 48%, 87%, 100% { opacity: 0; transform: scale(.4) rotate(-12deg); }
  63% { opacity: 1; transform: scale(1.4) rotate(10deg); }
  78% { opacity: .45; transform: scale(.8) rotate(35deg); }
}
.kiosk-beverage-motion-paused .nudo-sticker-kaak-turn,
.kiosk-beverage-motion-paused .nudo-sticker-kaak-sheen::before,
.kiosk-beverage-motion-paused .nudo-sticker-kaak-tips i {
  animation-play-state: paused !important;
}

/* Add-to-cart: abrupt growth, a short feather burst, then a softer exit. */
.kiosk-product-celebration--kaak .kiosk-product-celebration__wash {
  background: radial-gradient(ellipse at 50% 46%, #d4a75c66, #81512c16 44%, transparent 70%);
}
.kiosk-product-celebration__kaak {
  position: absolute;
  left: 50%;
  top: 46%;
  height: min(61vh, 640px);
  aspect-ratio: 941 / 1672;
  transform: translate(-50%, -50%);
  opacity: 0;
  transform-origin: 50% 65%;
}
.kiosk-product-celebration__kaak > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(.87) saturate(.82) drop-shadow(0 12px 18px #5d381330);
}
.kiosk-product-celebration__kaak-feathers { position: absolute; left: 50%; top: 54%; }
.kiosk-product-celebration__kaak-feathers i {
  position: absolute;
  width: clamp(24px, 5vw, 44px);
  height: clamp(48px, 10vw, 88px);
  opacity: 0;
  background: url("assets/stickers/preview/nudo-feather.webp?v=2") center / contain no-repeat;
  filter: sepia(1) saturate(1.65) brightness(.75);
}
.kiosk-product-celebration--kaak.is-fallback-visible {
  animation: none;
  opacity: 1;
}
.kiosk-product-celebration--kaak.is-fallback-visible .kiosk-product-celebration__kaak {
  animation: nudo-kaak-add-fallback 2.1s cubic-bezier(.22, 1, .36, 1) both;
}
.kiosk-product-celebration--kaak.is-fallback-visible .kiosk-product-celebration__kaak-feathers i {
  animation: nudo-kaak-feather-fallback 1.65s cubic-bezier(.22, 1, .36, 1) .28s both;
}
.kiosk-product-celebration__kaak-feathers i:nth-child(1) { --feather-x: -160px; --feather-y: -60px; --feather-r: -80deg; }
.kiosk-product-celebration__kaak-feathers i:nth-child(2) { --feather-x: 150px; --feather-y: -110px; --feather-r: 70deg; }
.kiosk-product-celebration__kaak-feathers i:nth-child(3) { --feather-x: -60px; --feather-y: -190px; --feather-r: 25deg; }
.kiosk-product-celebration__kaak-feathers i:nth-child(4) { --feather-x: 80px; --feather-y: -60px; --feather-r: 110deg; }
.kiosk-product-celebration__kaak-feathers i:nth-child(5) { --feather-x: -200px; --feather-y: 20px; --feather-r: -120deg; }
.kiosk-product-celebration__kaak-feathers i:nth-child(6) { --feather-x: 180px; --feather-y: 40px; --feather-r: 140deg; }
.kiosk-product-celebration__kaak-feathers i:nth-child(7) { --feather-x: -100px; --feather-y: -110px; --feather-r: -35deg; }
.kiosk-product-celebration__kaak-feathers i:nth-child(8) { --feather-x: 110px; --feather-y: -170px; --feather-r: 45deg; }
@keyframes nudo-kaak-add-fallback {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.48) rotate(-12deg); }
  6% { opacity: 1; transform: translate(-50%, -50%) scale(.56) rotate(-12deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(5deg); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(2deg); }
  90%, 100% { opacity: 0; transform: translate(-50%, -53%) scale(1.02) rotate(2deg); }
}
@keyframes nudo-kaak-feather-fallback {
  0% { opacity: 0; transform: translate(0, 0) scale(.55); }
  12% { opacity: 1; }
  45% { opacity: .95; transform: translate(var(--feather-x), var(--feather-y)) rotate(var(--feather-r)); }
  100% { opacity: 0; transform: translate(var(--feather-x), calc(var(--feather-y) + 140px)) rotate(calc(var(--feather-r) + 60deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .nudo-sticker-kaak-turn { animation: none; transform: none; will-change: auto; }
  .nudo-sticker-kaak-edge,
  .nudo-sticker-kaak-face--back,
  .nudo-sticker-kaak-sheen,
  .nudo-sticker-kaak-tips,
  .kiosk-product-celebration__kaak-feathers { display: none; }
  .kiosk-product-celebration--kaak.is-fallback-visible { opacity: 0; }
  .kiosk-product-celebration--kaak.is-fallback-visible .kiosk-product-celebration__kaak { animation: none; }
}