.seasonal-popup {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 26px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .34s ease, visibility .34s ease;
}

.seasonal-popup.is-visible {
  visibility: visible;
  opacity: 1;
}

.seasonal-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 0, 6, .78);
  backdrop-filter: blur(8px);
}

.seasonal-popup__window {
  position: relative;
  width: min(1180px, 96vw);
  max-height: min(880px, 92vh);
  padding: 34px;
  overflow-y: auto;
  border: 1px solid rgba(214, 179, 107, .58);
  border-radius: 28px;
  background: #3d071b url('seasonal-popup-bg.optimized.webp') center/cover no-repeat;
  box-shadow: 0 34px 100px rgba(7, 0, 3, .58);
  transform: translateY(28px) scale(.975);
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
}

.seasonal-popup.is-visible .seasonal-popup__window {
  transform: translateY(0) scale(1);
}

.seasonal-popup__window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(35, 0, 12, .42), rgba(35, 0, 12, .12));
  pointer-events: none;
}

.seasonal-popup__close {
  position: sticky;
  z-index: 5;
  top: 0;
  float: right;
  width: 44px;
  height: 44px;
  margin: -18px -18px -30px 0;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: var(--ui-radius, 8px);
  color: #fff;
  background: #7f0a39;
  font: 300 30px/1 Montserrat, sans-serif;
  cursor: pointer;
  transition: .2s ease;
}

.seasonal-popup__close:hover,
.seasonal-popup__close:focus-visible {
  color: #fff;
  background: #a40d4b;
  outline: none;
  transform: rotate(8deg);
}

.seasonal-popup__paper {
  position: relative;
  z-index: 2;
  padding: 48px 48px 0;
  border: 1px solid rgba(118, 74, 47, .18);
  border-radius: 24px;
  color: #3d1e22;
  background: linear-gradient(145deg, rgba(255, 250, 237, .97), rgba(235, 219, 187, .96));
  box-shadow: 0 24px 65px rgba(20, 0, 8, .34);
  text-align: center;
}

.seasonal-popup__kicker {
  margin: 0 0 8px;
  color: #a77527;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.seasonal-popup h2 {
  margin: 0;
  color: #5a0a28;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 64px);
  line-height: .98;
}

.seasonal-popup__intro {
  max-width: 820px;
  margin: 18px auto 30px;
  color: #624b48;
  font-size: 16px;
  line-height: 1.65;
}

.seasonal-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}

.seasonal-card {
  position: relative;
  min-height: 420px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(119, 74, 38, .18);
  border-radius: 18px;
  background: rgba(255, 253, 246, .82);
  box-shadow: 0 12px 30px rgba(81, 34, 25, .09);
}

.seasonal-card--vip {
  color: #fff9ee;
  border-color: rgba(222, 184, 108, .62);
  background: linear-gradient(155deg, #641030, #2d0715);
}

.seasonal-card__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #d6b36b;
  font-size: 19px;
}

.seasonal-card h3 {
  margin: 0 0 12px;
  color: #5a0a28;
  font: 700 30px/1.05 var(--font-display);
}

.seasonal-card--vip h3 { color: #efd59c; }

.seasonal-card p,
.seasonal-card li {
  font-size: 14px;
  line-height: 1.52;
}

.seasonal-card p { margin: 0 0 14px; }
.seasonal-card ul { margin: 2px 0 24px; padding-left: 19px; }
.seasonal-card li { margin-bottom: 5px; }
.seasonal-card__note { color: #735b55; font-size: 13px !important; }

.seasonal-card__button {
  width: fit-content;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 12px 18px;
  border-radius: 6px;
  color: #fff;
  background: #b4004e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: .2s ease;
}

.seasonal-card--vip .seasonal-card__button {
  color: #4e1025;
  background: #efd59c;
}

.seasonal-card__button:hover { transform: translateY(-2px); filter: brightness(1.07); }

.seasonal-card__textile-image {
  height: 116px;
  margin: -28px -26px 22px;
  display: grid;
  place-items: center;
  color: #f2d79a;
  background: linear-gradient(135deg, #360413, #8f0b42 58%, #cf1762);
}

.seasonal-card__textile-image svg {
  width: 88px;
  height: 78px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
}

.seasonal-popup__pin {
  position: relative;
  width: max-content;
  max-width: 90%;
  margin: 0 auto;
  padding: 14px 28px 12px;
  color: #6b3f27;
  background: #e7cfa0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 11px 22px rgba(61, 25, 15, .16);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateY(15px);
}

.seasonal-popup__pin::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a97830;
  box-shadow: 0 1px 2px rgba(55, 21, 6, .38);
  transform: translate(-50%, -50%);
}

body.popup-open { overflow: hidden; }

@media (max-width: 900px) {
  .seasonal-popup { padding: 14px; }
  .seasonal-popup__window { padding: 22px; border-radius: 22px; }
  .seasonal-popup__paper { padding: 40px 26px 0; }
  .seasonal-cards { grid-template-columns: 1fr; }
  .seasonal-card { min-height: auto; }
  .seasonal-card__button { margin-top: 12px; }
}

@media (max-width: 560px) {
  .seasonal-popup { padding: 8px; }
  .seasonal-popup__window { width: 100%; max-height: 96vh; padding: 12px; border-radius: 18px; }
  .seasonal-popup__paper { padding: 34px 14px 0; border-radius: 15px; }
  .seasonal-popup h2 { font-size: 39px; }
  .seasonal-popup__intro { font-size: 14px; line-height: 1.55; }
  .seasonal-card { padding: 24px 20px; }
  .seasonal-card__textile-image { margin: -24px -20px 20px; }
  .seasonal-popup__close { top: 7px; margin: -3px -3px -42px 0; }
  .seasonal-popup__pin { padding-inline: 16px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-popup,
  .seasonal-popup__window { transition: none; }
}