.autumn-sale-dialog {
  width: min(470px, calc(100% - 32px));
  max-height: min(740px, calc(100dvh - 32px));
  padding: 0;
  overflow: auto;
  border: 1px solid #d8bd97;
  border-radius: 24px;
  color: #4c3027;
  background: #fffaf1;
  box-shadow: 0 28px 90px rgba(48, 28, 19, .36);
}

.autumn-sale-dialog::backdrop {
  background: rgba(35, 25, 22, .60);
  backdrop-filter: blur(5px);
}

.autumn-sale-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 162px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 220, 156, .45), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(114, 59, 39, .55), transparent 38%),
    linear-gradient(125deg, #a94d34, #c77a3d 52%, #8b432f);
  color: #fff8eb;
}

.autumn-sale-art::before,
.autumn-sale-art::after {
  content: "❧";
  position: absolute;
  color: rgba(255, 238, 203, .38);
  font: 120px/1 Georgia, serif;
}

.autumn-sale-art::before { left: 14px; bottom: -42px; transform: rotate(-32deg); }
.autumn-sale-art::after { right: 13px; top: -43px; transform: rotate(148deg); }
.autumn-sale-art span { position: absolute; top: 22px; font: 22px Georgia, serif; }
.autumn-sale-art i { margin-top: 18px; font: normal 700 clamp(64px, 18vw, 92px)/1 Georgia, serif; letter-spacing: -.07em; text-shadow: 0 5px 18px rgba(72, 31, 24, .22); }

.autumn-sale-content { position: relative; padding: 27px 34px 33px; text-align: center; }
.autumn-sale-close { position: absolute; top: 15px; right: 17px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f5e8d5; color: #674433; font: 27px/1 Arial, sans-serif; cursor: pointer; }
.autumn-sale-close:hover, .autumn-sale-close:focus-visible { background: #ebd6bb; }
.autumn-sale-eyebrow { margin: 0 0 10px; color: #a75b3b; font: 700 11px/1.4 Inter, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.autumn-sale-content h2 { margin: 0 0 15px; color: #4a2b23; font: 600 clamp(29px, 8vw, 38px)/1.15 "Noto Serif", Georgia, serif; }
.autumn-sale-message { margin: 0 auto 11px; max-width: 360px; font: 500 16px/1.65 Inter, Arial, sans-serif; }
.autumn-sale-detail { margin: 0 auto; max-width: 370px; color: #765f50; font: 13px/1.55 Inter, Arial, sans-serif; }
.autumn-sale-actions { display: grid; gap: 10px; margin-top: 25px; }
.autumn-sale-action { display: block; padding: 14px 20px; border-radius: 10px; background: #9d4e3b; color: #fffdf7 !important; font: 700 14px/1.3 Inter, Arial, sans-serif; text-decoration: none !important; box-shadow: 0 6px 17px rgba(119, 51, 35, .20); }
.autumn-sale-action:hover, .autumn-sale-action:focus-visible { background: #7e392c; }
.autumn-sale-dismiss { width: 100%; padding: 8px; border: 0; background: none; color: #70574a; font: 600 13px/1.3 Inter, Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.autumn-sale-strip {
  position: relative;
  overflow: hidden;
  width: min(1120px, calc(100% - 28px));
  margin: 10px auto 20px;
  padding: 13px 20px;
  border: 1px solid #99543d;
  border-left: 4px solid #793b2e;
  border-radius: 10px;
  background: linear-gradient(100deg, #a65e46, #99513f);
  color: #fff9ef;
  box-shadow: 0 5px 15px rgba(99, 49, 33, .18);
}
.autumn-sale-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.autumn-sale-leaves i {
  position: absolute;
  top: var(--leaf-y);
  left: var(--leaf-x);
  width: var(--leaf-size);
  height: var(--leaf-size);
  background: url("assets/autumn-maple-leaf-cream.webp") center / contain no-repeat;
  opacity: var(--leaf-opacity);
  filter: drop-shadow(0 1px 2px rgba(58, 25, 15, .28));
  animation: autumn-leaf-sway var(--leaf-speed) ease-in-out infinite;
  animation-delay: var(--leaf-delay);
}
.autumn-sale-leaves i:nth-child(1) { --leaf-x: 4%; --leaf-y: 50%; --leaf-size: 42px; --leaf-opacity: .96; --leaf-speed: 5.5s; --leaf-delay: -1s; --leaf-tilt: -18deg; }
.autumn-sale-leaves i:nth-child(2) { --leaf-x: 15%; --leaf-y: 62%; --leaf-size: 34px; --leaf-opacity: .76; --leaf-speed: 7s; --leaf-delay: -3s; --leaf-tilt: 16deg; }
.autumn-sale-leaves i:nth-child(3) { --leaf-x: 28%; --leaf-y: 43%; --leaf-size: 39px; --leaf-opacity: .84; --leaf-speed: 6.2s; --leaf-delay: -4s; --leaf-tilt: -10deg; }
.autumn-sale-leaves i:nth-child(4) { --leaf-x: 53%; --leaf-y: 66%; --leaf-size: 26px; --leaf-opacity: .30; --leaf-speed: 8s; --leaf-delay: -2s; --leaf-tilt: 25deg; }
.autumn-sale-leaves i:nth-child(5) { --leaf-x: 70%; --leaf-y: 49%; --leaf-size: 40px; --leaf-opacity: .82; --leaf-speed: 6.8s; --leaf-delay: -5s; --leaf-tilt: 15deg; }
.autumn-sale-leaves i:nth-child(6) { --leaf-x: 80%; --leaf-y: 64%; --leaf-size: 34px; --leaf-opacity: .70; --leaf-speed: 7.5s; --leaf-delay: -2.5s; --leaf-tilt: -20deg; }
.autumn-sale-leaves i:nth-child(7) { --leaf-x: 95%; --leaf-y: 37%; --leaf-size: 27px; --leaf-opacity: .42; --leaf-speed: 6s; --leaf-delay: -4.5s; --leaf-tilt: 12deg; }
@keyframes autumn-leaf-sway {
  0%, 100% { transform: translate(-5px, -50%) rotate(var(--leaf-tilt)); }
  50% { transform: translate(6px, -54%) rotate(calc(var(--leaf-tilt) + 7deg)); }
}
.autumn-sale-strip-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
}
.autumn-sale-strip-text {
  font: 600 18px/1.3 "Noto Serif", Georgia, serif;
  text-align: center;
}
.autumn-sale-strip-date { position: absolute; right: 0; color: #ffead2; font: 600 12px/1.35 Inter, Arial, sans-serif; white-space: nowrap; }

.autumn-sale-discount-row { color: #9d4e3b; }

@media (max-width: 850px) {
  .autumn-sale-strip-inner { display: grid; gap: 3px; }
  .autumn-sale-strip-date { position: static; text-align: center; }
}

@media (max-width: 620px) {
  .autumn-sale-dialog { width: min(420px, calc(100% - 24px)); }
  .autumn-sale-art { min-height: 134px; }
  .autumn-sale-content { padding: 25px 22px 26px; }
  .autumn-sale-strip { width: calc(100% - 18px); margin: 10px auto 17px; padding: 10px 45px; }
  .autumn-sale-strip-text { font-size: 15px; }
  .autumn-sale-leaves i:nth-child(n+3) { display: none; }
  .autumn-sale-leaves i:nth-child(1) { left: 7px; --leaf-y: 37%; --leaf-size: 32px; --leaf-opacity: 1; }
  .autumn-sale-leaves i:nth-child(2) { left: auto; right: 7px; --leaf-y: 66%; --leaf-size: 32px; --leaf-opacity: .92; }
  .autumn-sale-strip-date { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .autumn-sale-leaves i { animation: none; transform: translate(0, -50%) rotate(var(--leaf-tilt)); }
}