@charset "UTF-8";
/* ==========================================================================
   GUN SNACKS v2 — Halloween skin

   Loaded only while seasonal mode is on (see gunsnacks_is_halloween() in
   functions.php), after gunsnacks.css and style.css. Everything is scoped to
   body.gs-halloween so it is inert even if a caching plugin concatenates it.

   Most of the change is a token swap — the whole theme is built on the five
   brand tokens, so remapping them re-colors every component at once:
     --yellow  #FFCE00 → pumpkin  #FF7A1A
     --red     #E23A22 → purple   #6A24B0
   Then a few decorations, all in the brand's own language (flat color, 3px
   black outlines, hard offset shadows): moon + bats + cobweb in the hero
   (skipped when a hero photo is set), a dangling spider, slime drips.

   Contrast notes: orange text on purple is only ~3.2:1, so the drop strip's
   kicker uses --slime instead; purple on black is ~2.3:1, so the footer
   wordmark goes orange.
   ========================================================================== */

body.gs-halloween{
  --yellow:#FF7A1A;
  --red:#6A24B0;
  --slime:#A6F04A;
  --bone:#F3E9C6;
}

/* ---- Hero: moon, bats, cobweb -------------------------------------------- */
.gs-hw-hero{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.gs-halloween .hero-copy{z-index:2;}

.gs-hw-moon{
  position:absolute;top:11%;right:9%;
  width:clamp(110px,17vw,250px);aspect-ratio:1;border-radius:50%;
  background:var(--bone);
  border:3px solid var(--black);
  box-shadow:10px 10px 0 var(--yellow);
}
/* Craters — flat discs, no shading. */
.gs-hw-moon::before,.gs-hw-moon::after{
  content:"";position:absolute;border-radius:50%;background:#E2D5AC;
}
.gs-hw-moon::before{width:22%;height:22%;top:22%;left:26%;}
.gs-hw-moon::after{width:14%;height:14%;top:58%;left:58%;}

.gs-hw-bat{position:absolute;color:var(--black);}
.gs-hw-bat svg{
  display:block;width:100%;height:auto;fill:currentColor;
  stroke:var(--bone);stroke-width:2.5;stroke-linejoin:round;paint-order:stroke;
  filter:drop-shadow(3px 3px 0 var(--yellow));
  transform-origin:50% 40%;
  animation:gs-flap .32s ease-in-out infinite alternate;
}
.gs-hw-bat.b1{width:clamp(48px,6vw,86px);top:9%;right:calc(9% + clamp(110px,17vw,250px) - 30px);animation:gs-drift 7s ease-in-out infinite alternate;}
.gs-hw-bat.b2{width:clamp(34px,4vw,58px);top:calc(11% + clamp(110px,17vw,250px) + 10px);right:6%;animation:gs-drift 9s ease-in-out -3s infinite alternate;}
.gs-hw-bat.b2 svg{animation-duration:.27s;}
.gs-hw-bat.b3{width:clamp(26px,3vw,42px);top:6%;right:4%;animation:gs-drift 8s ease-in-out -5s infinite alternate-reverse;}
.gs-hw-bat.b3 svg{animation-duration:.24s;}
@keyframes gs-flap{to{transform:scaleY(.55);}}
@keyframes gs-drift{
  0%{transform:translate(0,0) rotate(-6deg);}
  100%{transform:translate(-26px,14px) rotate(5deg);}
}

.gs-hw-web{
  position:absolute;top:0;left:0;width:clamp(120px,14vw,200px);height:auto;
  color:rgba(245,240,228,.32);
}

/* ---- Dangling spider: over the product grid, or the everyday box ------- */
.gs-halloween #shop,.gs-halloween #original{position:relative;}
.gs-halloween #shop::before,.gs-halloween #original::before{
  content:"";position:absolute;top:0;right:12%;width:2px;height:118px;
  background:var(--black);
  transform-origin:top center;animation:gs-dangle 3.4s ease-in-out infinite alternate;
}
.gs-halloween #shop::after,.gs-halloween #original::after{
  content:"";position:absolute;top:110px;right:calc(12% - 19px);width:40px;height:36px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cg stroke='%23111010' stroke-width='2.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M15 14 8 6 2 10M14 18 5 15 1 20M15 22 7 25 4 32M17 24 12 30 12 35M25 14 32 6 38 10M26 18 35 15 39 20M25 22 33 25 36 32M23 24 28 30 28 35'/%3E%3C/g%3E%3Cellipse cx='20' cy='19' rx='7.5' ry='8.5' fill='%23111010'/%3E%3Ccircle cx='20' cy='9' r='5' fill='%23111010'/%3E%3Ccircle cx='18' cy='8.5' r='1.3' fill='%23FF7A1A'/%3E%3Ccircle cx='22' cy='8.5' r='1.3' fill='%23FF7A1A'/%3E%3C/svg%3E") no-repeat center / contain;
  animation:gs-bob 3.4s ease-in-out infinite alternate;
}
@keyframes gs-dangle{from{transform:scaleY(.82);}to{transform:scaleY(1);}}
@keyframes gs-bob{from{transform:translateY(-21px);}to{transform:translateY(0);}}

/* ---- Slime drips off the bottom of the purple drop strip ----------------- */
.gs-halloween .drop{position:relative;}
.gs-halloween .drop::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:46px;z-index:1;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='46'%3E%3Cpath d='M0 0V4H22C27 4 28 7 28 12V27A7 7 0 0 0 42 27V12C42 7 43 4 48 4H98C102 4 103 6 103 10V15A6 6 0 0 0 115 15V10C115 6 116 4 120 4H166C171 4 172 7 172 12V35A8 8 0 0 0 188 35V12C188 7 189 4 194 4H240V0Z' fill='%236A24B0'/%3E%3Cpath d='M0 4H22C27 4 28 7 28 12V27A7 7 0 0 0 42 27V12C42 7 43 4 48 4H98C102 4 103 6 103 10V15A6 6 0 0 0 115 15V10C115 6 116 4 120 4H166C171 4 172 7 172 12V35A8 8 0 0 0 188 35V12C188 7 189 4 194 4H240' fill='none' stroke='%23111010' stroke-width='3'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 46px;
}
.gs-halloween .drop .kicker{color:var(--slime)!important;}

/* ---- Small recolors ------------------------------------------------------ */
.gs-halloween footer .logo em{color:var(--yellow)!important;}
.gs-halloween .badge,
.gs-halloween ul.products li.product .onsale,
.gs-halloween.single-product .onsale{background:var(--yellow);color:var(--black);border:2px solid var(--black);}

/* ---- Mobile -------------------------------------------------------------- */
@media(max-width:760px){
  .gs-hw-moon{top:5%;right:7%;width:96px;box-shadow:6px 6px 0 var(--yellow);}
  .gs-hw-bat.b1{width:44px;top:4%;right:calc(7% + 80px);}
  .gs-hw-bat.b2{width:30px;top:calc(5% + 108px);right:5%;}
  .gs-hw-bat.b3{display:none;}
  .gs-hw-web{display:none;}
  .gs-halloween #shop::before,.gs-halloween #original::before{right:7%;height:70px;}
  .gs-halloween #shop::after,.gs-halloween #original::after{top:62px;right:calc(7% - 15px);width:32px;height:29px;}
}
/* Everyday box on desktop: the photo is on the right, so hang it in the gap. */
@media (min-width:901px){
  .gs-halloween #original::before{right:47%;}
  .gs-halloween #original::after{right:calc(47% - 19px);}
}

@media (prefers-reduced-motion: reduce){
  .gs-hw-bat,.gs-hw-bat svg,
  .gs-halloween #shop::before,.gs-halloween #shop::after,
  .gs-halloween #original::before,.gs-halloween #original::after{animation:none;}
}