/* =====================================================================
Halloween 2026 motion layer ("Night Session"): cartoon bats, pumpkins (candle flicker + cartoon
moves), ghosts, EKG fright spike, fog. Spec: docs/halloween-2026/SPEC.md (store folder).
- Every rule is scoped to body.pp-season-halloween, so with the campaign off none of it applies.
- Animates transform / opacity / filter only. (The EKG tint also eases the spark's stroke colour,
but that path already repaints every frame for its travelling dash, so it adds no extra work.)
- prefers-reduced-motion: bats hidden; flicker, cartoon moves, ghosts, fog and fright are static.
- Offscreen decoration pauses, and visitors can pause it all (section 8, driven by halloween.js).
- Section 7 hides expired offers on pages still open (or cached) after the deadline.
- Containers (.pp-bats--hero, .pp-fog) are positioned by the surface CSS (halloween-home.css etc.);
this file sets the bases plus custom props those surfaces can tune.
===================================================================== */
/* ---------- 1. Cartoon bats ----------
Markup: pp_campaign_bats( 'pp-bats--hero' ) => .pp-bats > .pp-bat.pp-bat--1..3 > svg.pp-bat__svg.
The flock box is a size container, so flight paths are written in container units (% of the box):
--bat-x0 / --bat-x1 start/end across, --bat-y0 / --bat-ym / --bat-y1 start/peak/end down,
--bat-s0 / --bat-s1 scale (depth), --bat-r0 / --bat-r1 bank, --bat-w wingspan,
--bat-dur / --bat-delay loop, --bat-flap wing beat. All three share one loop: the flock passes the
moon in ~8s, then the sky stays clear for ~9s. Defaults assume the box covers the whole hero with
the moon top-right (hero.webp / hero-mobile.webp).
Zero-specificity (:where) defaults, so any surface rule wins; the promo bar and footer sign-off flocks
bring their own choreography (halloween.css) and are left alone. */
/* safety net for every flock (incl. self-styled ones): never let an unstyled bat svg blow up to full width */
:where(body.pp-season-halloween .pp-bats){position:absolute;inset:0;overflow:hidden;pointer-events:none}
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)){position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;container-type:size}
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat{
--bat-w:66px;--bat-dur:17s;--bat-delay:1.4s;--bat-flap:.19s;
--bat-x0:104;--bat-x1:60;--bat-y0:34;--bat-ym:9;--bat-y1:23;--bat-s0:.8;--bat-s1:1.1;--bat-r0:12deg;--bat-r1:-9deg;
position:absolute;top:0;left:0;display:block;width:var(--bat-w);
opacity:0;animation:pp-bat-x var(--bat-dur) linear var(--bat-delay) infinite both}
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat--2{--bat-w:46px;--bat-delay:2.6s;--bat-flap:.17s;--bat-x0:70;--bat-x1:106;--bat-y0:6;--bat-ym:21;--bat-y1:10;--bat-s0:.7;--bat-s1:.95;--bat-r0:9deg;--bat-r1:-12deg}
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat--3{--bat-w:30px;--bat-delay:4.3s;--bat-flap:.15s;--bat-x0:101;--bat-x1:77;--bat-y0:21;--bat-ym:5;--bat-y1:13;--bat-s0:1;--bat-s1:.62;--bat-r0:10deg;--bat-r1:-6deg}
/* phones: the copy fills the hero, so the flock stays in the moon corner (top-right) and leaves upwards */
@media (max-width:700px){
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat--1{--bat-w:38px;--bat-x0:106;--bat-x1:72;--bat-y0:15;--bat-ym:4;--bat-y1:-5;--bat-s1:.9;--bat-r1:-14deg}
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat--2{--bat-w:27px;--bat-x0:74;--bat-x1:106;--bat-y0:-4;--bat-ym:9;--bat-y1:2}
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat--3{--bat-w:19px;--bat-x0:104;--bat-x1:84;--bat-y0:6;--bat-ym:1;--bat-y1:11}
}
/* the svg carries the arc (eased separately from the linear glide, so the path curves smoothly),
the flap-synced body lift, the flat near-black fill and the moonlit lime rim */
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat__svg{display:block;width:100%;height:auto;overflow:visible;fill:#0B0B12;
filter:drop-shadow(0 0 1px rgba(203,255,0,.6)) drop-shadow(0 0 5px rgba(203,255,0,.16));
animation:pp-bat-y var(--bat-dur) var(--bat-delay) infinite both,pp-bat-lift var(--bat-flap) ease-in-out infinite alternate}
/* wings hinge on the shoulders (32,14 in the 64x32 viewBox): up-stroke open, down-stroke folded */
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat__wing{transform-box:view-box;transform-origin:32px 14px;animation:pp-bat-flap-l var(--bat-flap) ease-in-out infinite alternate}
:where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)) .pp-bat__wing--r{animation-name:pp-bat-flap-r}
@supports not (width:1cqw){ :where(body.pp-season-halloween .pp-bats:not(.pp-bats--promo,.pp-bats--footer)){display:none} }
/* every flock (incl. promo/footer) pauses while scrolled out of view: section 8 */
/* translate's % is the bat's own size, so -50% centres it on its flight point */
@keyframes pp-bat-x{
0%{translate:calc(var(--bat-x0) * 1cqw - 50%) 0;scale:var(--bat-s0);opacity:0}
3%,26%{opacity:1}
30%,100%{translate:calc(var(--bat-x1) * 1cqw - 50%) 0;scale:var(--bat-s1);opacity:0}
}
@keyframes pp-bat-y{
0%{translate:0 calc(var(--bat-y0) * 1cqh - 50%);rotate:var(--bat-r0);animation-timing-function:cubic-bezier(.33,.66,.66,1)}
15%{translate:0 calc(var(--bat-ym) * 1cqh - 50%);rotate:0deg;animation-timing-function:cubic-bezier(.33,0,.66,.33)}
30%,100%{translate:0 calc(var(--bat-y1) * 1cqh - 50%);rotate:var(--bat-r1)}
}
@keyframes pp-bat-lift{from{transform:translateY(7%)}to{transform:translateY(-7%)}}
@keyframes pp-bat-flap-l{from{transform:rotate(20deg) scaleY(1)}to{transform:rotate(-16deg) scaleY(.5)}}
@keyframes pp-bat-flap-r{from{transform:rotate(-20deg) scaleY(1)}to{transform:rotate(16deg) scaleY(.5)}}
/* ---------- 2. Pumpkins ----------
pp_pumpkin_svg( $class ) anywhere: the carved face (.pp-pumpkin__glow) is lit by a warm candle that
flickers on an irregular 3.3s loop (opacity + glow). Stagger several with --pp-flicker-delay.
Cartoon modifiers (pass as $class):
.pp-pumpkin--bob floats and sways (decorative rows, badges)
.pp-pumpkin--wobble jelly squash-and-stretch every ~3.6s
.pp-pumpkin--hop hops with squash on take-off and landing every ~4.2s
.pp-pumpkin--static no motion at all (keeps the lit face)
Stagger cartoon moves with --pp-pumpkin-delay. Any pumpkin inside a hovered link/button does a
one-off jelly wiggle. */
body.pp-season-halloween .pp-pumpkin{overflow:visible;transform-origin:50% 92%}
/* lit face: hot candle yellow with a burnt carved edge so it still reads at 18px on orange */
body.pp-season-halloween .pp-pumpkin__glow{fill:#FFE27A;stroke:#5C1E00;stroke-width:.9px;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 0 1.2px rgba(255,214,90,.95));animation:pp-pumpkin-flicker 3.3s linear var(--pp-flicker-delay,0s) infinite}
body.pp-season-halloween .pp-pumpkin--bob{animation:pp-pumpkin-bob 2.8s ease-in-out var(--pp-pumpkin-delay,0s) infinite}
body.pp-season-halloween .pp-pumpkin--wobble{animation:pp-pumpkin-wobble 3.6s ease-in-out var(--pp-pumpkin-delay,0s) infinite}
body.pp-season-halloween .pp-pumpkin--hop{animation:pp-pumpkin-hop 4.2s var(--pp-ease,ease) var(--pp-pumpkin-delay,0s) infinite}
body.pp-season-halloween :is(a,button):hover .pp-pumpkin:not(.pp-pumpkin--static){animation:pp-pumpkin-jelly .7s ease-out 1}
body.pp-season-halloween .pp-pumpkin--static,body.pp-season-halloween .pp-pumpkin--static .pp-pumpkin__glow{animation:none}
@keyframes pp-pumpkin-flicker{
0%,100%{opacity:1}
7%{opacity:.72}
10%{opacity:.96}
17%{opacity:.66}
21%{opacity:1}
38%{opacity:.84}
41%{opacity:1}
57%{opacity:.7}
60%{opacity:.93}
66%{opacity:.78}
73%{opacity:1}
86%{opacity:.88}
}
@keyframes pp-pumpkin-bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14%) rotate(5deg)}}
@keyframes pp-pumpkin-wobble{
0%,62%,100%{transform:scale(1,1)}
67%{transform:scale(1.14,.84)}
73%{transform:scale(.9,1.1)}
79%{transform:scale(1.06,.95)}
85%{transform:scale(.98,1.02)}
91%{transform:scale(1,1)}
}
@keyframes pp-pumpkin-hop{
0%,58%,100%{transform:translateY(0) scale(1,1) rotate(0)}
63%{transform:translateY(0) scale(1.16,.82) rotate(0)}
71%{transform:translateY(-42%) scale(.9,1.12) rotate(-8deg)}
78%{transform:translateY(-48%) scale(1,1) rotate(6deg)}
85%{transform:translateY(0) scale(1.14,.86) rotate(0)}
90%{transform:translateY(0) scale(.96,1.04) rotate(0)}
95%{transform:translateY(0) scale(1,1) rotate(0)}
}
@keyframes pp-pumpkin-jelly{
0%{transform:scale(1,1) rotate(0)}
25%{transform:scale(1.18,.84) rotate(-6deg)}
50%{transform:scale(.9,1.12) rotate(5deg)}
75%{transform:scale(1.05,.96) rotate(-2deg)}
100%{transform:scale(1,1) rotate(0)}
}
/* ---------- 3. Cartoon ghost (CSS-only, decorative) ----------
Markup: ; size with --pp-ghost (default 34px),
stagger with --pp-ghost-delay. Floats and sways; holds still for reduced motion. */
body.pp-season-halloween .pp-ghost{--pp-ghost:34px;display:inline-block;position:relative;flex:0 0 auto;width:var(--pp-ghost);height:calc(var(--pp-ghost) * 1.2);vertical-align:middle;pointer-events:none;
background:
radial-gradient(9% 12% at 35% 40%,#032139 92%,transparent 100%),
radial-gradient(9% 12% at 65% 40%,#032139 92%,transparent 100%),
radial-gradient(8% 7% at 50% 58%,#032139 90%,transparent 100%),
linear-gradient(170deg,#FFF9EE 0%,#F1E9DA 70%,#DCD3C3 100%);
border-radius:50% 50% 0 0 / 46% 46% 0 0;
-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--pp-ghost) / 6 + 1px) no-repeat,radial-gradient(circle at 50% 0,#000 calc(var(--pp-ghost) / 6 - .5px),transparent calc(var(--pp-ghost) / 6)) left bottom/calc(100% / 3) calc(var(--pp-ghost) / 6) repeat-x;
mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--pp-ghost) / 6 + 1px) no-repeat,radial-gradient(circle at 50% 0,#000 calc(var(--pp-ghost) / 6 - .5px),transparent calc(var(--pp-ghost) / 6)) left bottom/calc(100% / 3) calc(var(--pp-ghost) / 6) repeat-x;
animation:pp-ghost-float 4.6s ease-in-out var(--pp-ghost-delay,0s) infinite}
@keyframes pp-ghost-float{
0%,100%{transform:translate(0,0) rotate(-5deg);opacity:.92}
50%{transform:translate(8%,-16%) rotate(5deg);opacity:1}
}
/* ---------- 4. EKG: lime -> pumpkin spark + fright spike ----------
The travelling spark (hero + footer rail) leaves lime and turns pumpkin as it crosses the middle
peak. .pp-hero__fright (taller spike over one peak, added in front-page.php) is retraced in pumpkin
each time the spark reaches it, then glows and settles. Tunables on .pp-hero__fright:
--pp-fright-len dash length >= the path length (default 320; or set pathLength="320" on the path)
--pp-fright-at where the spike sits along the spark's run, as a fraction of its 5.4s loop
(.128 = 1st peak, .363 = middle peak (default), .566 = 3rd peak) */
body.pp-season-halloween .pp-hero__spark{animation:pp-hero-ekg 5.4s linear infinite,pp-hw-spark-tint 5.4s linear infinite}
body.pp-season-halloween .pp-footer__spark{animation:pp-ekg 4.8s linear infinite,pp-hw-spark-tint 4.8s linear infinite}
body.pp-season-halloween .pp-hero__fright{fill:none;stroke:var(--hw-pumpkin,#FF7A1A);stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:var(--pp-fright-len,320);stroke-dashoffset:0;opacity:.45;
filter:drop-shadow(0 0 3px rgba(255,122,26,.5)) drop-shadow(0 0 0 rgba(255,214,170,0));
animation:pp-hw-fright 5.4s linear calc(var(--pp-fright-at,.363) * 5.4s - .3s) infinite both}
@keyframes pp-hw-spark-tint{
0%,8%{stroke:#CBFF00;filter:drop-shadow(0 0 6px rgba(203,255,0,.85))}
34%,80%{stroke:#FF7A1A;filter:drop-shadow(0 0 7px rgba(255,122,26,.95))}
90%,100%{stroke:#CBFF00;filter:drop-shadow(0 0 6px rgba(203,255,0,.85))}
}
/* 0% = .3s before the spark arrives: fade the resting spike, retrace it bright, flare, settle */
@keyframes pp-hw-fright{
0%{stroke-dashoffset:0;opacity:.45;filter:drop-shadow(0 0 3px rgba(255,122,26,.5)) drop-shadow(0 0 0 rgba(255,214,170,0))}
4%{stroke-dashoffset:0;opacity:0}
4.1%{stroke-dashoffset:var(--pp-fright-len,320);opacity:0}
6%{stroke-dashoffset:var(--pp-fright-len,320);opacity:1;filter:drop-shadow(0 0 4px rgba(255,122,26,.8)) drop-shadow(0 0 0 rgba(255,214,170,0))}
14%{stroke-dashoffset:0;opacity:1;filter:drop-shadow(0 0 9px rgba(255,122,26,1)) drop-shadow(0 0 2px rgba(255,214,170,.9))}
24%{stroke-dashoffset:0;opacity:1;filter:drop-shadow(0 0 16px rgba(255,122,26,.85)) drop-shadow(0 0 3px rgba(255,214,170,.7))}
60%,100%{stroke-dashoffset:0;opacity:.45;filter:drop-shadow(0 0 3px rgba(255,122,26,.5)) drop-shadow(0 0 0 rgba(255,214,170,0))}
}
/* ---------- 5. Fog ----------
Markup: as the last decorative layer of a
position:relative night band (below the copy's z-index). Two seamless strips drift in opposite
directions (a 200%-wide strip whose gradient tiles divide its 50% shift exactly, so the loop never
jumps). It fades out upwards so it never sits dense behind copy. Tunables: --pp-fog-h (height of
the fog bank, default 46%), --pp-fog-o (opacity, default .32), --pp-fog-c (r,g,b),
--pp-fog-blend (default screen). */
body.pp-season-halloween .pp-fog{--pp-fog-c:206,220,238;position:absolute;left:0;right:0;bottom:0;height:var(--pp-fog-h,46%);z-index:1;overflow:hidden;pointer-events:none;
opacity:var(--pp-fog-o,.32);mix-blend-mode:var(--pp-fog-blend,screen);
-webkit-mask-image:linear-gradient(to top,#000 28%,transparent);mask-image:linear-gradient(to top,#000 28%,transparent)}
body.pp-season-halloween .pp-fog::before,body.pp-season-halloween .pp-fog::after{content:"";position:absolute;top:0;bottom:0;left:0;width:200%;background-repeat:repeat-x;will-change:transform}
body.pp-season-halloween .pp-fog::before{
background-image:radial-gradient(closest-side,rgba(var(--pp-fog-c),.95),rgba(var(--pp-fog-c),0)),radial-gradient(closest-side,rgba(var(--pp-fog-c),.75),rgba(var(--pp-fog-c),0)),radial-gradient(closest-side,rgba(var(--pp-fog-c),.6),rgba(var(--pp-fog-c),0));
background-size:25% 96%,16.6667% 70%,10% 52%;background-position:0 150%,7% 115%,3% 100%;
animation:pp-fog-left 54s linear infinite}
body.pp-season-halloween .pp-fog::after{opacity:.8;
background-image:radial-gradient(closest-side,rgba(var(--pp-fog-c),.85),rgba(var(--pp-fog-c),0)),radial-gradient(closest-side,rgba(var(--pp-fog-c),.6),rgba(var(--pp-fog-c),0));
background-size:12.5% 84%,8.3333% 60%;background-position:5% 130%,1% 100%;
animation:pp-fog-right 72s linear infinite}
@keyframes pp-fog-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pp-fog-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* ---------- 6. Reduced motion ----------
base.css shortens every animation to ~0 under reduce; here we pick deliberate static end states
instead (countdowns keep updating; they are JS text, not motion). */
@media (prefers-reduced-motion:reduce){
body.pp-season-halloween .pp-bats{display:none}
body.pp-season-halloween .pp-ghost{animation:none}
body.pp-season-halloween .pp-pumpkin,body.pp-season-halloween .pp-pumpkin__glow,body.pp-season-halloween :is(a,button):hover .pp-pumpkin{animation:none}
body.pp-season-halloween .pp-fog::before,body.pp-season-halloween .pp-fog::after{animation:none;will-change:auto}
body.pp-season-halloween .pp-hero__fright{animation:none;opacity:.95;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(255,122,26,.75))}
}
/* ---------- 7. Ended state (client fallback for cached/open pages) ----------
halloween.js adds .pp-season-ended to html + body when the countdown reaches zero on an open page,
or on load when a cached page is served after the deadline. Every expired code, clock and offer
disappears and the promo bar reads "The Halloween Sale has ended" (no auto-reload). */
body.pp-season-halloween.pp-season-ended :is(.pp-codechip,.pp-promo__ends,.pp-hero__offer,.pp-hwband__p,.pp-finale__deal,.pp-cat-hero__offer,.pp-deal--hw,.pp-hwnudge,[data-pp-hw-price],[data-pp-countdown]){display:none!important}
/* ---------- 8. Offscreen pause + "Pause animations" control (WCAG 2.2.2) ----------
DECOR = every looping campaign decoration (keep in sync with DECOR in halloween.js):
.pp-bats .pp-fog .pp-pumpkin .pp-ghost .pp-hwpeek .pp-cghost .pp-hw-patch .pp-hwpatch .pp-hwpks
.pp-hw-spider .pp-hwspider .pp-cat-hero__sticker .pp-card__badge--hw .pp-card__flag .pp-hero__ekg
.pp-footer__ekg .pp-ghostline .pp-promo__cd (its final-hours glow; the digits are JS text and keep ticking)
.pp-value__ic (the evergreen home value-icon pulse, paused with the rest only while the sale is live).
- .is-paused: halloween.js observes each DECOR element (incl. ones injected later) and sets it while
the element is out of the viewport.
Owner (2026-10-11): no visitor pause button; prefers-reduced-motion still stops everything (section 6). */
body.pp-season-halloween :is(.pp-bats,.pp-fog,.pp-pumpkin,.pp-ghost,.pp-hwpeek,.pp-cghost,.pp-hw-patch,.pp-hwpatch,.pp-hwpks,.pp-hw-spider,.pp-hwspider,.pp-cat-hero__sticker,.pp-card__badge--hw,.pp-card__flag,.pp-hero__ekg,.pp-footer__ekg,.pp-ghostline,.pp-hero__flicker,.pp-hero__mist,.pp-promo__cd,.pp-value__ic):is(.is-paused,.pp-motion-paused *),
body.pp-season-halloween :is(.pp-bats,.pp-fog,.pp-pumpkin,.pp-ghost,.pp-hwpeek,.pp-cghost,.pp-hw-patch,.pp-hwpatch,.pp-hwpks,.pp-hw-spider,.pp-hwspider,.pp-cat-hero__sticker,.pp-card__badge--hw,.pp-card__flag,.pp-hero__ekg,.pp-footer__ekg,.pp-ghostline,.pp-hero__flicker,.pp-hero__mist,.pp-promo__cd,.pp-value__ic):is(.is-paused,.pp-motion-paused *)::before,
body.pp-season-halloween :is(.pp-bats,.pp-fog,.pp-pumpkin,.pp-ghost,.pp-hwpeek,.pp-cghost,.pp-hw-patch,.pp-hwpatch,.pp-hwpks,.pp-hw-spider,.pp-hwspider,.pp-cat-hero__sticker,.pp-card__badge--hw,.pp-card__flag,.pp-hero__ekg,.pp-footer__ekg,.pp-ghostline,.pp-hero__flicker,.pp-hero__mist,.pp-promo__cd,.pp-value__ic):is(.is-paused,.pp-motion-paused *)::after,
body.pp-season-halloween :is(.pp-bats,.pp-fog,.pp-pumpkin,.pp-ghost,.pp-hwpeek,.pp-cghost,.pp-hw-patch,.pp-hwpatch,.pp-hwpks,.pp-hw-spider,.pp-hwspider,.pp-cat-hero__sticker,.pp-card__badge--hw,.pp-card__flag,.pp-hero__ekg,.pp-footer__ekg,.pp-ghostline,.pp-hero__flicker,.pp-hero__mist,.pp-promo__cd,.pp-value__ic):is(.is-paused,.pp-motion-paused *) *,
body.pp-season-halloween :is(.pp-bats,.pp-fog,.pp-pumpkin,.pp-ghost,.pp-hwpeek,.pp-cghost,.pp-hw-patch,.pp-hwpatch,.pp-hwpks,.pp-hw-spider,.pp-hwspider,.pp-cat-hero__sticker,.pp-card__badge--hw,.pp-card__flag,.pp-hero__ekg,.pp-footer__ekg,.pp-ghostline,.pp-hero__flicker,.pp-hero__mist,.pp-promo__cd,.pp-value__ic):is(.is-paused,.pp-motion-paused *) *::before,
body.pp-season-halloween :is(.pp-bats,.pp-fog,.pp-pumpkin,.pp-ghost,.pp-hwpeek,.pp-cghost,.pp-hw-patch,.pp-hwpatch,.pp-hwpks,.pp-hw-spider,.pp-hwspider,.pp-cat-hero__sticker,.pp-card__badge--hw,.pp-card__flag,.pp-hero__ekg,.pp-footer__ekg,.pp-ghostline,.pp-hero__flicker,.pp-hero__mist,.pp-promo__cd,.pp-value__ic):is(.is-paused,.pp-motion-paused *) *::after{animation-play-state:paused!important}
/* PDP: the fixed add-to-basket bar (73px; up to ~105px on narrow phones) would sit on top of the
footer bar and its toggle at the very bottom of the page, so the bar scrolls clear of it */
body.pp-season-halloween.single-product .pp-footer__bar{padding-bottom:76px}
@media (max-width:560px){ body.pp-season-halloween.single-product .pp-footer__bar{padding-bottom:112px} }