/* ==========================================================================
   The banner theme kit (5 October 2026): the promo strip under the header
   (includes/site-banner.php) and the promotion page (promo.php), whose hero
   is the same component, larger.

   One component, .pg-banner, driven only by custom properties:
     --pb-bg, --pb-bg2   the gradient        --pb-ink      the text
     --pb-accent         the button, edges   --pb-on-accent text on the button
     --pb-border         the hairline        --pb-deco     the decoration's colour
   A theme class sets them; colours the owner picks on /admin/banner arrive as
   inline custom properties on the element (checked #rgb / #rrggbb only), so
   they win over the theme. Decorations are single-colour SVG masks painted in
   --pb-deco, faint and kept off the middle so the text stays readable.
   Motion only under prefers-reduced-motion: no-preference.
   ========================================================================== */

.pg-banner {
  /* poggy: the site's own tokens (css/poggy-theme.css) */
  --pb-bg: rgb(var(--pg-raise-rgb));
  --pb-bg2: rgb(var(--pg-bg-rgb));
  --pb-ink: var(--pg-text);
  --pb-accent: var(--pg-accent);
  --pb-on-accent: var(--pg-on-accent);
  --pb-border: var(--pg-border-strong);
  --pb-deco: var(--pb-accent);
  --pb-deco-alpha: .16;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  color: var(--pb-ink);
  background:
    radial-gradient(ellipse 45% 160% at 50% 130%, color-mix(in srgb, var(--pb-accent) 13%, transparent), transparent 70%),
    linear-gradient(100deg, var(--pb-bg) 0%, var(--pb-bg2) 50%, var(--pb-bg) 100%);
  border-bottom: 1px solid var(--pb-border);
  font-family: var(--pg-font-body);
}
.pg-banner[hidden] { display: none; }

.pg-banner--halloween {
  --pb-bg: #150e1c;
  --pb-bg2: #2b1430;
  --pb-ink: #f7e9d2;
  --pb-accent: #f28c28;
  --pb-on-accent: #120c10;
  --pb-border: #5a2f4a;
  --pb-deco-alpha: .2;
}
.pg-banner--black-friday {
  --pb-bg: #0c0c0d;
  --pb-bg2: #1b1810;
  --pb-ink: #f5efe2;
  --pb-accent: #e0b54f;
  --pb-on-accent: #120c10;
  --pb-border: #5c4a22;
  --pb-deco-alpha: .3;
}
.pg-banner--christmas {
  --pb-bg: #0e2a1c;
  --pb-bg2: #163a27;
  --pb-ink: #f6f8f4;
  --pb-accent: #c9303e;
  --pb-on-accent: #ffffff;
  --pb-border: #2f5a42;
  --pb-deco: var(--pb-ink);
  --pb-deco-alpha: .22;
}

/* -- the strip ------------------------------------------------------------- */
.pg-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .9rem;
  max-width: 1240px;
  min-height: 48px;
  margin: 0 auto;
  padding: .45rem 3.4rem;
}
.pg-banner__icon {
  font-size: 1.3rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pb-accent) 45%, transparent));
}
.pg-banner__msg {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--pb-ink);
  text-wrap: balance;
}
.pg-banner__msg strong { font-weight: 700; color: var(--pb-ink); }
.pg-banner a.pg-banner__link,
.pg-banner a.pg-banner__link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .3rem .85rem;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--pb-on-accent);
  background: var(--pb-accent);
  border: 1px solid var(--pb-accent);
  text-decoration: none;
  transition: filter .2s ease, box-shadow .2s ease;
}
.pg-banner a.pg-banner__link:hover,
.pg-banner a.pg-banner__link:focus-visible {
  color: var(--pb-on-accent);
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-accent) 30%, transparent);
}
.pg-banner a.pg-banner__link:focus-visible,
.pg-banner__close:focus-visible { outline: 2px solid var(--pb-ink); outline-offset: 2px; }
.pg-banner__count {
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: .15rem .55rem;
  color: var(--pb-ink);
  border: 1px solid var(--pb-border);
  background: color-mix(in srgb, var(--pb-bg) 70%, transparent);
}
.pg-banner__count[hidden] { display: none; }
.pg-banner__close {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--pb-ink);
  background: transparent;
  border: 0;
  opacity: .8;
  cursor: pointer;
}
.pg-banner__close:hover { opacity: 1; background: color-mix(in srgb, var(--pb-ink) 10%, transparent); }

/* -- decorations ------------------------------------------------------------- */
/* Edge art (pumpkins, bats): ::before on the left, ::after on the right.
   Patterns (snow, sparkle, confetti): ::before across the strip, faded out
   behind the words. */
.pg-banner[class*="pg-banner--deco-"]::before,
.pg-banner--deco-pumpkins::after,
.pg-banner--deco-bats::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: var(--pb-deco);
  opacity: var(--pb-deco-alpha);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.pg-banner--deco-pumpkins::before,
.pg-banner--deco-pumpkins::after,
.pg-banner--deco-bats::before,
.pg-banner--deco-bats::after {
  top: 0;
  bottom: 0;
  width: 180px;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
}
.pg-banner--deco-pumpkins::before,
.pg-banner--deco-bats::before { left: 0; -webkit-mask-position: left bottom; mask-position: left bottom; }
.pg-banner--deco-pumpkins::after,
.pg-banner--deco-bats::after { right: 0; -webkit-mask-position: right bottom; mask-position: right bottom; }
.pg-banner--deco-pumpkins::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'%3E%3Cg transform='translate(6 8) scale(0.86)'%3E%3Cpath d='M30 9c-1-5 2-8 6-8l1 3c-3 0-4 2-3 5z'/%3E%3Cellipse cx='20' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='44' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='21'/%3E%3C/g%3E%3Cg transform='translate(58 22) scale(0.6)'%3E%3Cpath d='M30 9c-1-5 2-8 6-8l1 3c-3 0-4 2-3 5z'/%3E%3Cellipse cx='20' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='44' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='21'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(0.62)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'%3E%3Cg transform='translate(6 8) scale(0.86)'%3E%3Cpath d='M30 9c-1-5 2-8 6-8l1 3c-3 0-4 2-3 5z'/%3E%3Cellipse cx='20' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='44' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='21'/%3E%3C/g%3E%3Cg transform='translate(58 22) scale(0.6)'%3E%3Cpath d='M30 9c-1-5 2-8 6-8l1 3c-3 0-4 2-3 5z'/%3E%3Cellipse cx='20' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='44' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='21'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(0.62)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3C/svg%3E"); }
.pg-banner--deco-pumpkins::after  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'%3E%3Cg transform='translate(14 4) scale(0.5)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(70 20) scale(0.62)'%3E%3Cpath d='M30 9c-1-5 2-8 6-8l1 3c-3 0-4 2-3 5z'/%3E%3Cellipse cx='20' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='44' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='21'/%3E%3C/g%3E%3Cg transform='translate(114 6) scale(0.86)'%3E%3Cpath d='M30 9c-1-5 2-8 6-8l1 3c-3 0-4 2-3 5z'/%3E%3Cellipse cx='20' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='44' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='21'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'%3E%3Cg transform='translate(14 4) scale(0.5)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(70 20) scale(0.62)'%3E%3Cpath d='M30 9c-1-5 2-8 6-8l1 3c-3 0-4 2-3 5z'/%3E%3Cellipse cx='20' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='44' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='21'/%3E%3C/g%3E%3Cg transform='translate(114 6) scale(0.86)'%3E%3Cpath d='M30 9c-1-5 2-8 6-8l1 3c-3 0-4 2-3 5z'/%3E%3Cellipse cx='20' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='44' cy='33' rx='15' ry='19'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='21'/%3E%3C/g%3E%3C/svg%3E"); }
.pg-banner--deco-bats::before     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'%3E%3Cg transform='translate(8 12) scale(0.9)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(76 4) scale(0.5)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(118 30) scale(0.6)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'%3E%3Cg transform='translate(8 12) scale(0.9)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(76 4) scale(0.5)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(118 30) scale(0.6)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3C/svg%3E"); }
.pg-banner--deco-bats::after      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'%3E%3Cg transform='translate(10 26) scale(0.55)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(60 4) scale(0.62)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(112 16) scale(0.9)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'%3E%3Cg transform='translate(10 26) scale(0.55)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(60 4) scale(0.62)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3Cg transform='translate(112 16) scale(0.9)'%3E%3Cpath d='M32 12c-1-3-3-5-3-5v4c-5 0-9-4-11-8-1 5-7 9-16 9 6 2 9 6 9 11 4-3 9-3 12 1 3-2 6-3 9-6 3 3 6 4 9 6 3-4 8-4 12-1 0-5 3-9 9-11-9 0-15-4-16-9-2 4-6 8-11 8V7s-2 2-3 5z'/%3E%3C/g%3E%3C/svg%3E"); }

.pg-banner--deco-snow::before,
.pg-banner--deco-sparkle::before,
.pg-banner--deco-confetti::before {
  inset: 0;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-size: 120px 56px, 100% 100%;
  mask-size: 120px 56px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.pg-banner--deco-snow::before {
  --pb-deco: var(--pb-ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56'%3E%3Ccircle cx='8' cy='10' r='1.6'/%3E%3Ccircle cx='30' cy='38' r='1.1'/%3E%3Ccircle cx='47' cy='14' r='2'/%3E%3Ccircle cx='66' cy='46' r='1.4'/%3E%3Ccircle cx='82' cy='24' r='1'/%3E%3Ccircle cx='100' cy='6' r='1.5'/%3E%3Ccircle cx='112' cy='40' r='1.9'/%3E%3Ccircle cx='20' cy='52' r='1'/%3E%3Ccircle cx='58' cy='30' r='.9'/%3E%3C/svg%3E"), linear-gradient(90deg, #000 0 18%, transparent 36% 64%, #000 82%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56'%3E%3Ccircle cx='8' cy='10' r='1.6'/%3E%3Ccircle cx='30' cy='38' r='1.1'/%3E%3Ccircle cx='47' cy='14' r='2'/%3E%3Ccircle cx='66' cy='46' r='1.4'/%3E%3Ccircle cx='82' cy='24' r='1'/%3E%3Ccircle cx='100' cy='6' r='1.5'/%3E%3Ccircle cx='112' cy='40' r='1.9'/%3E%3Ccircle cx='20' cy='52' r='1'/%3E%3Ccircle cx='58' cy='30' r='.9'/%3E%3C/svg%3E"), linear-gradient(90deg, #000 0 18%, transparent 36% 64%, #000 82%);
  opacity: calc(var(--pb-deco-alpha) * 2.2);
}
.pg-banner--deco-sparkle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 56'%3E%3Cg transform='translate(14 14) scale(0.9)'%3E%3Cpath d='M0 -6L1.3 -1.3 6 0 1.3 1.3 0 6 -1.3 1.3 -6 0 -1.3 -1.3z'/%3E%3C/g%3E%3Cg transform='translate(52 40) scale(0.55)'%3E%3Cpath d='M0 -6L1.3 -1.3 6 0 1.3 1.3 0 6 -1.3 1.3 -6 0 -1.3 -1.3z'/%3E%3C/g%3E%3Cg transform='translate(86 12) scale(0.7)'%3E%3Cpath d='M0 -6L1.3 -1.3 6 0 1.3 1.3 0 6 -1.3 1.3 -6 0 -1.3 -1.3z'/%3E%3C/g%3E%3Cg transform='translate(122 38) scale(1)'%3E%3Cpath d='M0 -6L1.3 -1.3 6 0 1.3 1.3 0 6 -1.3 1.3 -6 0 -1.3 -1.3z'/%3E%3C/g%3E%3Ccircle cx='34' cy='30' r='1'/%3E%3Ccircle cx='104' cy='26' r='1'/%3E%3Ccircle cx='70' cy='50' r='.8'/%3E%3C/svg%3E"), linear-gradient(90deg, #000 0 18%, transparent 36% 64%, #000 82%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 56'%3E%3Cg transform='translate(14 14) scale(0.9)'%3E%3Cpath d='M0 -6L1.3 -1.3 6 0 1.3 1.3 0 6 -1.3 1.3 -6 0 -1.3 -1.3z'/%3E%3C/g%3E%3Cg transform='translate(52 40) scale(0.55)'%3E%3Cpath d='M0 -6L1.3 -1.3 6 0 1.3 1.3 0 6 -1.3 1.3 -6 0 -1.3 -1.3z'/%3E%3C/g%3E%3Cg transform='translate(86 12) scale(0.7)'%3E%3Cpath d='M0 -6L1.3 -1.3 6 0 1.3 1.3 0 6 -1.3 1.3 -6 0 -1.3 -1.3z'/%3E%3C/g%3E%3Cg transform='translate(122 38) scale(1)'%3E%3Cpath d='M0 -6L1.3 -1.3 6 0 1.3 1.3 0 6 -1.3 1.3 -6 0 -1.3 -1.3z'/%3E%3C/g%3E%3Ccircle cx='34' cy='30' r='1'/%3E%3Ccircle cx='104' cy='26' r='1'/%3E%3Ccircle cx='70' cy='50' r='.8'/%3E%3C/svg%3E"), linear-gradient(90deg, #000 0 18%, transparent 36% 64%, #000 82%);
  -webkit-mask-size: 140px 56px, 100% 100%;
  mask-size: 140px 56px, 100% 100%;
  opacity: calc(var(--pb-deco-alpha) * 2);
}
.pg-banner--deco-confetti::before {
  background: linear-gradient(90deg, var(--pb-accent), var(--pb-ink) 30%, var(--pb-accent) 55%, var(--pb-ink) 80%, var(--pb-accent));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56'%3E%3Crect x='6' y='8' width='6' height='2.4' transform='rotate(25 9 9)'/%3E%3Crect x='34' y='36' width='5' height='2.2' transform='rotate(-40 36 37)'/%3E%3Crect x='58' y='12' width='6' height='2.4' transform='rotate(70 61 13)'/%3E%3Crect x='84' y='42' width='5' height='2.2' transform='rotate(15 86 43)'/%3E%3Crect x='104' y='18' width='6' height='2.4' transform='rotate(-20 107 19)'/%3E%3Ccircle cx='22' cy='26' r='1.4'/%3E%3Ccircle cx='74' cy='30' r='1.2'/%3E%3Ccircle cx='112' cy='48' r='1.4'/%3E%3C/svg%3E"), linear-gradient(90deg, #000 0 18%, transparent 36% 64%, #000 82%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56'%3E%3Crect x='6' y='8' width='6' height='2.4' transform='rotate(25 9 9)'/%3E%3Crect x='34' y='36' width='5' height='2.2' transform='rotate(-40 36 37)'/%3E%3Crect x='58' y='12' width='6' height='2.4' transform='rotate(70 61 13)'/%3E%3Crect x='84' y='42' width='5' height='2.2' transform='rotate(15 86 43)'/%3E%3Crect x='104' y='18' width='6' height='2.4' transform='rotate(-20 107 19)'/%3E%3Ccircle cx='22' cy='26' r='1.4'/%3E%3Ccircle cx='74' cy='30' r='1.2'/%3E%3Ccircle cx='112' cy='48' r='1.4'/%3E%3C/svg%3E"), linear-gradient(90deg, #000 0 18%, transparent 36% 64%, #000 82%);
  opacity: calc(var(--pb-deco-alpha) * 2);
}

@media (prefers-reduced-motion: no-preference) {
  .pg-banner--deco-snow::before { animation: pb-snow 9s linear infinite; }
  .pg-banner--deco-sparkle::before { animation: pb-twinkle 3.2s ease-in-out infinite alternate; }
  .pg-banner--deco-bats::after,
  .pg-banner--deco-pumpkins::before { animation: pb-bob 4.5s ease-in-out infinite alternate; }
  .pg-banner--deco-confetti::before { animation: pb-drift 14s linear infinite; }
  .pg-banner a.pg-banner__link { transition: filter .2s ease, box-shadow .2s ease, transform .2s ease; }
  .pg-banner a.pg-banner__link:hover { transform: translateY(-1px); }
}
@keyframes pb-snow { from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } to { -webkit-mask-position: 20px 56px, 0 0; mask-position: 20px 56px, 0 0; } }
@keyframes pb-drift { from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } to { -webkit-mask-position: 120px 0, 0 0; mask-position: 120px 0, 0 0; } }
@keyframes pb-twinkle { from { opacity: calc(var(--pb-deco-alpha) * 1.1); } to { opacity: calc(var(--pb-deco-alpha) * 2.4); } }
@keyframes pb-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }

/* -- phones: the strip wraps, 16px gutters, the close button in the corner -- */
@container (max-width: 640px) {
  .pg-banner__inner { gap: .4rem .7rem; padding: .6rem 2.9rem .65rem 1rem; }
  .pg-banner__msg { font-size: .9rem; flex: 1 1 calc(100% - 3rem); min-width: 0; text-align: left; }
  .pg-banner__icon { flex: none; font-size: 1.15rem; }
  .pg-banner__close { top: .35rem; right: .3rem; transform: none; width: 40px; height: 40px; }
  .pg-banner:not(.pg-banner--hero) .pg-banner__inner { justify-content: flex-start; }
  .pg-banner--deco-pumpkins::before, .pg-banner--deco-pumpkins::after,
  .pg-banner--deco-bats::before, .pg-banner--deco-bats::after {
    width: 140px; -webkit-mask-size: auto 56px; mask-size: auto 56px; opacity: calc(var(--pb-deco-alpha) * .7);
  }
}

/* -- the promotion page's hero: the same component, larger ------------------- */
.pg-banner--hero {
  border: 1px solid var(--pb-border);
  margin: 0 0 8px;
}
.pg-banner--hero .pg-banner__inner {
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  padding: clamp(2.2rem, 6vw, 4rem) clamp(1rem, 5vw, 3.5rem) clamp(2.4rem, 6vw, 4.2rem);
  text-align: center;
}
.pg-banner--hero.pg-banner--deco-pumpkins::before, .pg-banner--hero.pg-banner--deco-pumpkins::after,
.pg-banner--hero.pg-banner--deco-bats::before, .pg-banner--hero.pg-banner--deco-bats::after {
  top: auto;
  height: 120px;
  width: 390px;
}
.pg-banner--hero[class*="pg-banner--deco-"]::before { --pb-deco-alpha: .22; }
.pg-banner__eyebrow {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pb-ink) 82%, transparent);
}
.pg-banner__eyebrow::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  margin: .6rem auto 0;
  background: var(--pb-accent);
}
.pg-banner--hero h1 {
  margin: 0;
  font-family: var(--pg-font-display);
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.08;
  color: var(--pb-ink);
  text-wrap: balance;
}
.pg-banner__intro { max-width: 44rem; }
.pg-banner__intro p { margin: 0 0 .8rem; font-size: 1.06rem; line-height: 1.6; color: var(--pb-ink); }
.pg-banner__intro p:last-child { margin-bottom: 0; }
.pg-banner__intro strong { color: var(--pb-ink); font-weight: 700; }
.pg-banner__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.pg-banner__facts .pg-banner__count { font-size: .88rem; padding: .3rem .7rem; }
.pg-banner--hero a.pg-banner__link { min-height: 46px; padding: .6rem 1.4rem; font-size: 1rem; }
.pg-banner__closed { margin: 0; font-size: 1rem; font-weight: 600; color: var(--pb-ink); }

/* -- the rest of the promotion page (on the store's own tokens) ------------ */
.pg-promo > :first-child { margin-top: 32px; }   /* store.css zeroes the top padding of store pages' main */
.pg-promo .st-section:first-of-type { padding-top: 40px; }
.pg-promo__steps {
  counter-reset: pgstep;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.pg-promo__steps li {
  counter-increment: pgstep;
  position: relative;
  padding: 1.1rem 1.1rem 1.1rem 3.6rem;
  background: var(--st-panel);
  border: 1px solid var(--st-rule);
  color: var(--st-ink-soft);
  line-height: 1.5;
}
.pg-promo__steps li::before {
  content: counter(pgstep);
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pg-font-body);
  font-weight: 700;
  font-size: .95rem;
  color: var(--pg-on-accent);
  background: var(--pg-accent);
}
.pg-promo__steps strong { color: var(--st-ink); }

.pg-promo__places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.pg-promo__place {
  background: var(--st-panel);
  border: 1px solid var(--st-rule);
  border-top: 2px solid var(--pg-accent2);
  padding: 1.2rem 1.25rem 1.3rem;
}
.pg-promo__place:first-child { border-top-color: var(--pg-accent2-hi); box-shadow: 0 0 0 1px var(--pg-accent2-faint), var(--st-shadow); }
.pg-promo__place h3 { margin: 0 0 .9rem; font-size: 1.35rem; color: var(--pg-accent2); }
.pg-promo__prizes { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pg-promo__prize { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .8rem; align-items: center; }
.pg-promo__prize img { width: 96px; height: 54px; object-fit: cover; display: block; border: 1px solid var(--st-rule); }
.pg-promo__prize a { color: var(--st-ink); font-weight: 600; }
.pg-promo__prize a:hover { color: var(--pg-accent); }
.pg-promo__prize span { display: block; font-size: .85rem; color: var(--st-ink-faint); font-variant-numeric: tabular-nums; }
.pg-promo__note { margin: .9rem 0 0; font-size: .92rem; color: var(--st-ink-soft); }
.pg-promo__delivery {
  margin: 20px 0 0;
  padding: .8rem 1rem;
  font-size: .95rem;
  color: var(--st-ink-soft);
  border-left: 2px solid var(--pg-accent);
  background: var(--pg-accent-faint);
}

@media (max-width: 640px) {
  .pg-promo > :first-child { margin-top: 16px; }
  .pg-promo__places, .pg-promo__steps { grid-template-columns: 1fr; }
  .pg-promo__prize { grid-template-columns: 80px minmax(0, 1fr); }
  .pg-promo__prize img { width: 80px; height: 45px; }
}