/* Seasonal stationery: ornaments belong to the page, never to a button or label. */
.flyer {
  --decor-pine: #52705b;
  --decor-pumpkin: color-mix(in srgb, var(--accent) 83%, var(--primary));
}

.hero { position: relative; isolation: isolate; }
.brand-row, .hero__grid { position: relative; z-index: 1; }
.season-trim, .season-divider, .season-footer {
  pointer-events: none;
  user-select: none;
  color: var(--accent);
}
.season-trim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.season-corner { position: absolute; top: 0; width: clamp(110px, 17vw, 200px); }
.season-corner--left { left: 0; }
.season-corner--right { right: 0; transform: scaleX(-1); }
.decor-web { color: var(--paper); opacity: .32; stroke-width: .9; }
.season-corner--left.decor-web { width: clamp(80px, 10vw, 125px); opacity: .22; }
.season-hanging { position: absolute; top: 0; right: 20px; width: 40px; height: 155px; opacity: .7; }
.season-garland { position: absolute; top: 0; left: 0; width: 100%; height: 105px; }
.season-floral { width: clamp(85px, 13vw, 150px); opacity: .42; }
.season-firework { opacity: .5; }
.season-print-rule { position: absolute; top: 12px; width: 100%; height: 35px; opacity: .55; }

.season-panel { width: min(100%, 245px); height: 245px; stroke-width: 1.15; }
.decor-moon { fill: var(--accent); stroke: none; opacity: .85; }
.decor-ground { opacity: .55; }
.decor-twig { opacity: .65; }
.decor-pumpkin { stroke: var(--primary); stroke-width: 1.4; }
.decor-pumpkin__body { fill: var(--decor-pumpkin); }
.decor-pine__body { fill: var(--decor-pine); stroke: var(--accent); stroke-width: .9; }
.decor-pine__veins { stroke: var(--paper); stroke-width: .7; opacity: .45; }
.decor-pine__ribbon { stroke: var(--accent); stroke-width: 1.9; }
.decor-star { fill: var(--accent); stroke: var(--accent); }
.decor-baubles { fill: var(--accent); stroke: var(--primary); stroke-width: 1.1; }
.decor-sprig { stroke: var(--accent); stroke-width: 1.15; }
.decor-garland-thread { opacity: .45; }
.decor-bauble { fill: color-mix(in srgb, var(--accent) 14%, var(--primary)); stroke-width: 1.25; }
.decor-ribbon { fill: color-mix(in srgb, var(--accent) 15%, var(--primary)); }
.decor-flower { fill: color-mix(in srgb, var(--accent) 12%, var(--primary)); }
.decor-flower circle { fill: var(--accent); }
.decor-gift { fill: color-mix(in srgb, var(--accent) 20%, var(--primary)); }
.decor-snow { fill: var(--paper); stroke: none; opacity: .75; }
.season-divider {
  margin: -30px 0 26px;
  color: var(--primary);
  height: 70px;
}
.season-divider__drawing { display: block; width: 100%; height: 100%; }
.season-divider .decor-pumpkin { stroke: var(--primary); }
.season-divider .decor-pumpkin__body { fill: color-mix(in srgb, var(--accent) 75%, var(--paper)); }
.season-divider .decor-pine__body { stroke: var(--primary); stroke-width: 1.5; }
.season-divider .decor-star { fill: var(--primary); stroke: var(--primary); }
.season-divider .decor-baubles { stroke: var(--primary); }
.season-divider .decor-sprig { stroke: var(--primary); }
.season-footer { margin-top: 20px; height: 115px; }
.season-footer__drawing { display: block; width: 100%; height: 100%; }

.flyer[data-theme="halloween"] .hero { padding-top: 116px; }
.flyer[data-theme="halloween"] .season-trim {
  bottom: auto;
  height: 100px;
  mask-image: linear-gradient(#000 75%, transparent);
}
.flyer[data-theme="halloween"] .season-hanging { top: -47px; width: 40px; height: 145px; }
.flyer[data-theme="halloween"] .hero__art { border-radius: 140px 140px 12px 12px; }
.flyer[data-theme="halloween"] .campaign { border-style: dashed; }
.flyer[data-theme="christmas"] .hero { padding-top: 116px; }
.flyer[data-theme="christmas"] .hero__art { border-radius: 5px 5px 130px 130px; padding-top: 18px; padding-bottom: 38px; }
.flyer[data-theme="christmas"] .season-panel { height: 260px; }
.flyer[data-theme="newyear"] .hero { padding-top: 112px; }
.flyer[data-theme="newyear"] .season-firework { top: -15px; right: -20px; width: 170px; }
.flyer:is([data-theme="mothers"], [data-theme="valentine"], [data-theme="friendship"]) .hero { padding-top: 94px; }
.flyer:is([data-theme="mothers"], [data-theme="valentine"], [data-theme="friendship"]) .season-trim {
  bottom: auto;
  height: 80px;
  mask-image: linear-gradient(#000 75%, transparent);
}
.flyer[data-theme="blackfriday"] .hero { padding-top: 73px; }
.flyer[data-theme="blackfriday"] .hero__art { border-radius: 0; border-style: double; border-width: 3px; }

@media (max-width: 850px) {
  .season-panel { height: 215px; }
  .season-hanging { right: 10px; height: 132px; width: 34px; }
  .season-garland { width: 140%; left: -20%; }
}
@media (max-width: 600px) {
  .flyer[data-theme="halloween"] .hero { padding-top: 110px; }
  .flyer[data-theme="halloween"] .brand-row { margin-bottom: 44px; }
  .season-corner.decor-web { width: 140px; opacity: .36; }
  .season-corner--left.decor-web { width: 87px; opacity: .24; }
  .season-hanging { right: 4px; }
  .flyer[data-theme="christmas"] .hero { padding-top: 98px; }
  .season-garland { height: 94px; width: 260%; left: -80%; }
  .season-divider { margin: -15px -8px 20px; height: 64px; }
  .season-divider__drawing { width: 200%; max-width: none; margin-left: -50%; }
  .season-divider--blackfriday .season-divider__drawing { width: 100%; margin-left: 0; }
  .season-footer { height: 88px; margin: 25px -24px -15px; overflow: hidden; }
  .season-footer__drawing { width: 190%; max-width: none; margin-left: -45%; }
  .season-footer .decor-pine__veins { opacity: .65; }
  .season-floral { width: 90px; opacity: .3; }
  .flyer[data-theme="newyear"] .season-firework { width: 130px; top: -10px; right: -5px; }
}
@media print {
  .season-trim, .season-divider, .season-footer, .season-panel {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}