.retail-store .surprise-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #a50a4a;
  border-radius: 999px;
  background: #b90d55;
  color: #fff;
  box-shadow: 0 2px 6px #ab115536;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
.surprise-nav::before {
  content: '';
  flex: 0 0 12px;
  height: 12px;
  background: #ffe4a8;
  clip-path: polygon(50% 0, 62% 37%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.retail-store .surprise-nav:hover { background: #9a104b; }
.retail-store .mobile-nav .surprise-nav { min-height: 44px; justify-content: flex-start; padding-inline: 15px; }
.surprise-dialog {
  width: min(850px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  border: 0;
  border-radius: 14px;
  background: #fffafd;
  color: var(--ink);
  padding: 0;
  box-shadow: 0 20px 75px #4b0a2e40;
}
.surprise-content { --surprise-padding: clamp(16px, 4vw, 32px); position: relative; padding: var(--surprise-padding); }
.surprise-content > .modal-close {
  top: calc(var(--surprise-padding) + 9px);
  right: calc(var(--surprise-padding) + 9px);
  z-index: 2;
  width: 44px;
  height: 44px;
  background: #fff9fc;
  color: #78133b;
}
.surprise-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(17px, 3.2vw, 26px);
  padding-right: 52px;
  border: 1px solid #f1c9df;
  border-radius: 10px;
  background: radial-gradient(ellipse at 90% 5%, #ffc8e4, transparent 62%), linear-gradient(120deg, #fff2f8, #ffe4f1);
}
.surprise-heading .eyebrow { color: #8b2350; font-size: 11px; font-weight: 800; }
.surprise-content h2, .surprise-name {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.12;
}
.surprise-content h2 { color: #86113f; font-size: clamp(29px, 6vw, 48px); margin: 6px 0 9px; }
.surprise-intro { color: #53243e; font-size: 15px; line-height: 1.55; max-width: 54ch; }
.surprise-intro strong { display: block; color: #7d123d; font-weight: 750; }
.surprise-stardust { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.surprise-stardust span { position: absolute; opacity: .17; color: #b03b79; line-height: 1; }
.surprise-stardust span:nth-child(1) { left: 74%; top: 12%; font-size: 24px; }
.surprise-stardust span:nth-child(2) { left: 89%; top: 34%; font-size: 29px; --drift-delay: 190ms; }
.surprise-stardust span:nth-child(3) { left: 83%; top: 58%; font-size: 16px; --drift-delay: 340ms; }
.surprise-stardust span:nth-child(4) { left: 65%; top: 53%; font-size: 16px; --drift-delay: 460ms; }
.surprise-stardust span:nth-child(5) { left: 95%; top: 66%; font-size: 13px; --drift-delay: 600ms; }
.surprise-dialog[open] .surprise-stardust span { animation: sedamora-star-fall 4.2s ease-out var(--drift-delay, 0ms) both; }
.surprise-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
[data-surprise-tier] {
  --box-ink: #a30d4c;
  --box-color: #d31567;
  --box-top: #f1599e;
  --box-bg: #ffe6f1;
  --box-glow: #ffc5df;
}
[data-surprise-tier="caja-brillo"] { --box-ink: #9f3a32; --box-color: #dc6555; --box-top: #f68973; --box-bg: #fff0e8; --box-glow: #ffd3ba; }
[data-surprise-tier="caja-encanto"] { --box-ink: #67215b; --box-color: #9d4b97; --box-top: #c777b9; --box-bg: #f8e7fa; --box-glow: #edbdf1; }
[data-surprise-tier="caja-estrella"] { --box-ink: #772746; --box-color: #a6395c; --box-top: #cf6882; --box-bg: #ffe9ec; --box-glow: #ffc5c9; }
.surprise-option {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 11px;
  border: 1px solid #edd8e3;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}
.surprise-option:hover, .surprise-option[aria-pressed="true"] { border-color: var(--box-ink); background: #fff3f9; }
.surprise-option[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--box-ink); }
.surprise-option-art { display: grid; place-items: center; height: 61px; border-radius: 5px; background: var(--box-bg); }
.surprise-mini {
  position: relative;
  width: 40px;
  height: 23px;
  border-radius: 0 0 4px 4px;
  transform: rotate(-8deg) translateY(4px);
  background: linear-gradient(90deg, var(--box-color) 43%, #fff2f7 43% 57%, var(--box-color) 57%);
  box-shadow: 2px 3px 0 var(--box-glow);
}
.surprise-mini::before, .surprise-mini::after { position: absolute; content: ''; }
.surprise-mini::before { inset: -3px -3px auto; height: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--box-top) 44%, #fff2f7 44% 56%, var(--box-top) 56%); }
.surprise-mini::after { bottom: 100%; left: 13px; width: 15px; height: 10px; border-radius: 40% 35%; border: 3px solid var(--box-top); transform: rotate(12deg); }
.surprise-option-name { font-weight: 800; font-size: 13px; line-height: 1.35; }
.surprise-prices { display: grid; gap: 5px; justify-items: start; }
.surprise-original, .surprise-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 5px; font-weight: 700; }
.surprise-original { font-size: 11px; color: #5e4050; }
.surprise-original s { font-size: 13px; text-decoration-thickness: 1.5px; }
.surprise-now { font-size: 11px; color: var(--box-ink); }
.surprise-now strong { font-size: clamp(20px, 2.15vw, 25px); font-weight: 800; line-height: 1.12; white-space: nowrap; }
.surprise-savings { padding: 3px 7px; border-radius: 100px; background: var(--box-bg); color: var(--box-ink); font-size: 11px; font-weight: 800; }
.surprise-preview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(12px, 3vw, 24px); margin-top: 16px; }
.surprise-preview[hidden], .surprise-play[hidden], .surprise-add[hidden], .surprise-nav[hidden] { display: none; }
.surprise-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 237px;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 38%, var(--box-bg), var(--box-glow));
}
.surprise-art { position: relative; width: 220px; height: 215px; pointer-events: none; }
.surprise-art::before {
  content: '';
  position: absolute;
  width: 186px;
  height: 186px;
  inset: 10px 17px;
  border: 1px solid #ffffffa0;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #ffffff45;
}
.surprise-sparkle { position: absolute; color: var(--box-ink); font-size: 23px; opacity: .28; }
.sparkle-left { top: 15%; left: 2%; }
.sparkle-right { top: 21%; right: 2%; --drift-delay: 260ms; }
.sparkle-bottom { top: 60%; right: 0; font-size: 16px; --drift-delay: 520ms; }
.surprise-shadow { position: absolute; left: 23px; top: 169px; width: 174px; height: 24px; border-radius: 50%; background: #60254136; filter: blur(6px); }
.surprise-interior { position: absolute; left: 32px; top: 95px; width: 156px; height: 46px; border: 5px solid var(--box-top); border-radius: 5px; background: var(--box-ink); transform: perspective(170px) rotateX(40deg); }
.surprise-face {
  position: absolute;
  z-index: 2;
  left: 32px;
  top: 121px;
  width: 156px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(105deg, var(--box-color) 55%, var(--box-ink));
  box-shadow: inset 0 1px #ffffff72;
  color: #fff7fb;
}
.surprise-face span { font: italic 27px/1 Georgia, serif; letter-spacing: -.055em; }
.surprise-lid { position: absolute; left: 25px; top: 105px; width: 170px; height: 22px; border-radius: 5px; background: linear-gradient(var(--box-top) 33%, var(--box-color) 33%); border: 1px solid var(--box-top); box-shadow: 0 4px 8px #631b3833; transform: translate(-12px, -45px) rotate(-13deg); }
.surprise-bow { position: absolute; left: calc(50% - 7px); bottom: 15px; width: 14px; height: 11px; border-radius: 3px; background: #fff3f7; }
.surprise-bow::before, .surprise-bow::after { position: absolute; content: ''; width: 24px; height: 15px; bottom: 2px; border: 4px solid #fff3f7; border-radius: 65% 60% 30% 55%; }
.surprise-bow::before { right: 8px; transform: rotate(23deg); }
.surprise-bow::after { left: 8px; transform: scaleX(-1) rotate(23deg); }
.surprise-item { position: absolute; z-index: 1; opacity: 0; }
.surprise-cream { left: 40px; top: 88px; width: 48px; height: 38px; border-radius: 6px 6px 11px 11px; border-top: 9px solid #9264b4; background: linear-gradient(115deg, #f5e1ff, #c79be5); --origin: -36px; --tilt: -13deg; --delay: 60ms; }
.surprise-blush { left: 77px; top: 82px; width: 44px; height: 44px; border: 4px solid #f6a6bf; border-radius: 50%; background: radial-gradient(circle at 37% 27%, #f4a4b5, #d34a78); --origin: -12px; --tilt: -9deg; --delay: 390ms; }
.surprise-lipstick { left: 121px; top: 76px; width: 20px; height: 49px; border-radius: 2px 2px 4px 4px; background: linear-gradient(#f5caaf 0 25%, #461536 25%); --origin: 18px; --tilt: 10deg; --delay: 720ms; }
.surprise-lipstick::before { content: ''; position: absolute; left: 5px; bottom: 100%; width: 10px; height: 19px; border-radius: 80% 30% 0 0; background: linear-gradient(90deg, #a91841, #f26178); }
.surprise-tube { left: 147px; top: 69px; width: 29px; height: 56px; border-radius: 4px 4px 8px 8px; border-top: 4px solid #efaa73; border-bottom: 8px solid #f18c68; background: linear-gradient(120deg, #ffeed6, #f7be9e); --origin: 35px; --tilt: 13deg; --delay: 1050ms; }
.surprise-serum { left: 43px; top: 79px; width: 32px; height: 46px; border-radius: 10px 10px 7px 7px; background: linear-gradient(150deg, #ffd380 20%, #f79f50 20% 57%, #ffe5a9 57% 78%, #d58739 78%); --origin: -27px; --tilt: -11deg; --delay: 1380ms; }
.surprise-serum::before { content: ''; position: absolute; width: 15px; height: 17px; left: 8px; bottom: calc(100% - 2px); border-radius: 5px 5px 2px 2px; background: #805548; }
.surprise-mascara { left: 89px; top: 57px; width: 17px; height: 69px; border-radius: 7px; background: linear-gradient(#e891b9 0 29%, #46273d 29% 38%, #864467 38% 41%, #46273d 41%); --origin: -12px; --tilt: -10deg; --delay: 1710ms; }
.surprise-palette {
  left: 111px;
  top: 93px;
  width: 54px;
  height: 30px;
  border: 3px solid #b45d72;
  border-radius: 5px;
  background: radial-gradient(circle at 21% 50%, #f1b18d 0 5px, transparent 6px), radial-gradient(circle at 50% 50%, #df7e8d 0 5px, transparent 6px), radial-gradient(circle at 79% 50%, #ab567c 0 5px, transparent 6px), #fbd9cd;
  --origin: 22px;
  --tilt: 9deg;
  --delay: 2040ms;
}
.surprise-gloss { left: 158px; top: 62px; width: 20px; height: 63px; border-radius: 5px 5px 8px 8px; background: linear-gradient(#b34b83 0 27%, #ffc6de 27% 35%, #e77eae 35% 90%, #f7b4d0 90%); --origin: 31px; --tilt: 13deg; --delay: 2370ms; }
.surprise-stage[data-phase="packing"] .surprise-item { animation: sedamora-box-drop 880ms cubic-bezier(.25,.65,.4,1) var(--delay) both; }
.surprise-stage[data-phase="packing"] .surprise-lid { animation: sedamora-box-close 430ms ease-in-out 3270ms both; }
.surprise-stage[data-phase="packing"] .surprise-sparkle { animation: sedamora-star-fall 2.8s ease-out var(--drift-delay, 0ms) both; }
.surprise-stage[data-phase="ready"] .surprise-lid { z-index: 3; transform: none; }
.surprise-stage[data-phase="ready"] .surprise-sparkle { animation: sedamora-box-glow 420ms ease-out both; }
@keyframes sedamora-box-drop {
  0% { opacity: 0; transform: translate(var(--origin), -106px) rotate(calc(var(--tilt) * 2)); }
  16% { opacity: 1; }
  48%, 62% { opacity: 1; transform: translateY(-7px) rotate(var(--tilt)); }
  100% { opacity: 0; transform: translateY(44px) rotate(var(--tilt)); }
}
@keyframes sedamora-box-close {
  from { z-index: 3; transform: translate(-12px, -45px) rotate(-13deg); }
  to { z-index: 3; transform: none; }
}
@keyframes sedamora-box-glow {
  from { opacity: .12; transform: scale(.7); }
  to { opacity: .28; transform: scale(1); }
}
@keyframes sedamora-star-fall {
  0% { opacity: .04; transform: translateY(-18px) rotate(-10deg); }
  32% { opacity: .26; }
  100% { opacity: .17; transform: translateY(24px) rotate(12deg); }
}
.surprise-play { position: absolute; inset: 0; display: grid; place-items: end center; padding: 0 10px 10px; }
.surprise-play:focus-visible { outline-offset: -4px; }
.surprise-play > span { display: inline-flex; gap: 6px; align-items: center; padding: 7px 13px; border-radius: 20px; background: #fffafd; color: var(--box-ink); font-weight: 750; font-size: 12px; box-shadow: 0 3px 15px #68163c1a; }
.surprise-result { align-self: center; min-width: 0; }
.surprise-name { margin: 6px 0; font-size: clamp(20px, 4vw, 29px); }
.surprise-preview-price { margin-top: 9px; }
.surprise-status { min-height: 1.5em; margin-top: 8px; color: #5b3450; font-size: 13px; }
.surprise-add { margin-top: 8px; }
@media (max-width: 1150px) { .retail-store .retail-nav .surprise-nav { font-size: 12px; } }
@media (max-width: 960px) { .retail-store .retail-nav .surprise-nav { font-size: 11px; padding-inline: 9px; } }
@media (max-width: 570px) {
  .surprise-heading { padding: 18px 15px; padding-right: 51px; }
  .surprise-intro { font-size: 14px; }
  .surprise-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .surprise-option { padding: 8px; }
  .surprise-option-name { min-height: 2.7em; }
  .surprise-preview { grid-template-columns: minmax(0, 1fr); }
  .surprise-stage { min-height: 221px; }
  .surprise-add { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .surprise-stage *, .surprise-stage *::before, .surprise-stardust span { animation: none !important; }
}