/* =========================================================================
   SURGE PEPT — Halloween, oktober 2026
   =========================================================================

   WAAROM DIT ÉÉN BESTAND IS EN NERGENS ANDERS IETS WORDT AANGERAAKT

   Het thema heeft een eigen tokenlaag (--sp-blue, --sp-ink, --glow-blue,
   --gradient-blue, ...) in surgepept-theme.css. Elke knop, elke kaart, elke
   gloed en elke rand leest daaruit. Eén set tokens opnieuw zetten verkleurt
   dus de hele winkel, zonder dat er ergens een component wordt herschreven.
   Dat is ook de enige manier waarop dit op 2 november weer schoon weg is:
   geen regel om terug te draaien, alleen een klasse die niet meer wordt gezet.

   De klasse .sp-hw staat op <html> en wordt door een klein script in de head
   gezet, vóór de eerste tekenbeurt. Daardoor kan dit bestand altijd mee: het
   doet niets buiten het seizoen, en het seizoen eindigt zonder nieuwe deploy.

   De winkel is een laboratoriummerk, geen feestwinkel. Dus: geen paars, geen
   spinnen op elke hoek, geen lettertypen met druipende punten. Wat er
   verandert is het licht -- koud blauw wordt pompoen -- plus mist onder de
   hero en spinrag in één hoek. Het moet eruitzien als hetzelfde lab, 's nachts
   eind oktober.
   ========================================================================= */

/* ── de tokens ─────────────────────────────────────────────────────────── */

:root.sp-hw{
  /* Het web is uitgerekend in plaats van met de hand getikt. Drie dingen
     maken het verschil met de eerste versie. De vangdraad hangt DOOR tussen
     elke twee spaken in plaats van in een boog over het hele kwart -- dat
     geeft de geschulpte rand die je bij een echt web herkent. De spaken
     staan niet precies gelijk verdeeld. En er hangen drie losgeraakte
     draden in, want een web zonder schade leest als een sierpatroon.
     Elf spaken en acht ringen, bewust ijl: dichter werd het een mandala. */
  /* ⚠️ Deze twee stonden hier al en waren op 21-10-2026 per ongeluk
     weggevallen toen het web werd vervangen: het hele :root.sp-hw-blok
     werd overschreven in plaats van alleen de --hw-web-regel. Gevolg: het
     percentage in de balk werd zwart in plaats van gifgroen, en de mist in
     de hero verdween, allebei zonder foutmelding -- een var() die niet
     bestaat maakt de regel stil ongeldig.
     Teruggehaald uit een eerdere uitrol (2b58ef16). */
  --hw-gif:#8BFF3C;
  --hw-fog:rgba(255,122,24,.10);

  --hw-web:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g fill="none" stroke="%23FFC27A" stroke-linecap="round"><path stroke-width=".9" stroke-opacity=".55" d="M0 0L233.5 -5M0 0L234.5 32.7M0 0L223.6 70.3M0 0L207.3 100.8M0 0L191.4 143.9M0 0L163.2 160.8M0 0L137.9 192.2M0 0L110.4 213.1M0 0L70 226.3M0 0L43.5 238.8M0 0L5.8 237.9"/><path stroke-width=".6" stroke-opacity=".42" d="M30 -0.6Q26.9 1.6 29.7 4.1Q26.3 5.9 28.6 9Q25.1 10 27 13.1Q23 14.1 24 18Q20.4 17.6 21.3 21Q17.5 20.5 17.5 24.4Q14.1 23 13.8 26.6Q10.2 25 8.9 28.6Q6.4 26.2 5.4 29.5Q2.8 26.8 0.7 30M46.7 -1Q41.9 2.5 46.2 6.4Q41 9.2 44.5 14Q39 15.5 42 20.4Q35.8 21.9 37.3 28.1Q31.8 27.4 33.2 32.8Q27.3 31.9 27.2 37.9Q22 35.8 21.5 41.4Q15.9 38.9 13.8 44.6Q10 40.8 8.4 45.9Q4.3 41.8 1.1 46.7M67.4 -1.4Q60.6 3.6 66.8 9.3Q59.2 13.3 64.3 20.2Q56.4 22.4 60.6 29.5Q51.8 31.6 53.9 40.5Q45.9 39.6 48 47.3Q39.4 46.1 39.3 54.8Q31.7 51.7 31 59.8Q23 56.1 19.9 64.4Q14.4 58.9 12.1 66.3Q6.2 60.3 1.7 67.4M93.6 -2Q84.1 4.9 92.7 12.9Q82.2 18.5 89.3 28.1Q78.3 31.1 84.2 40.9Q71.9 43.9 74.8 56.2Q63.8 55 66.7 65.7Q54.7 64 54.6 76Q44 71.8 43.1 83.1Q31.9 77.9 27.6 89.4Q20 81.8 16.8 92.1Q8.6 83.8 2.3 93.6M122.9 -2.6Q110.5 6.5 121.8 17Q107.9 24.3 117.3 36.9Q102.8 40.9 110.6 53.8Q94.4 57.7 98.3 73.9Q83.8 72.2 87.6 86.3Q71.9 84.1 71.7 99.9Q57.9 94.3 56.6 109.2Q42 102.4 36.3 117.5Q26.3 107.5 22 121Q11.3 110.1 3 122.9M161.1 -3.4Q144.8 8.5 159.6 22.3Q141.5 31.9 153.7 48.4Q134.8 53.6 145 70.5Q123.8 75.6 128.8 96.9Q109.9 94.7 114.8 113.1Q94.3 110.2 94 131Q75.9 123.6 74.2 143.1Q55 134.2 47.6 154Q34.5 140.9 28.9 158.6Q14.8 144.3 4 161.1M202.2 -4.3Q181.7 10.7 200.3 27.9Q177.6 40 192.9 60.7Q169.1 67.3 181.9 88.4Q155.3 94.9 161.7 121.5Q137.9 118.8 144 142Q118.3 138.3 117.9 164.3Q95.2 155.2 93.1 179.6Q69 168.4 59.7 193.2Q43.3 176.8 36.2 199Q18.6 181.1 5 202.2M238.3 -5.1Q214.1 12.6 236 32.9Q209.2 47.2 227.3 71.5Q199.3 79.3 214.3 104.2Q183 111.8 190.5 143.2Q162.5 140 169.7 167.3Q139.4 163 138.9 193.6Q112.2 182.8 109.7 211.6Q81.3 198.5 70.4 227.7Q51 208.3 42.7 234.5Q21.9 213.4 5.8 238.2"/><path stroke-width=".5" stroke-opacity=".3" d="M93.3 33.6q2 18.7 -1 34M93.7 99.8q3 24.2 -2 44M48.7 167.7q4 29.7 -3 54"/></g></svg>');
  --hw-spin:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 150"><g fill="none" stroke="%23FFC27A" stroke-opacity=".55" stroke-width="1.2" stroke-linecap="round"><path d="M60 0L60 68"/></g><g fill="none" stroke="%231a1014" stroke-width="6.4" stroke-linecap="round"><path d="M52 80C40 72 26 70 16 77C10 81 8 87 10 94M51 86C39 83 24 85 15 94C11 98 10 104 12 110M51 92C40 93 27 99 20 108C17 112 16 118 18 123M53 99C44 104 35 113 31 122C29 127 29 132 31 137"/><path d="M52 80C40 72 26 70 16 77C10 81 8 87 10 94M51 86C39 83 24 85 15 94C11 98 10 104 12 110M51 92C40 93 27 99 20 108C17 112 16 118 18 123M53 99C44 104 35 113 31 122C29 127 29 132 31 137" transform="translate(120,0) scale(-1,1)"/></g><g fill="none" stroke="%23FFC27A" stroke-opacity=".5" stroke-width="1.9" stroke-linecap="round"><path d="M52 80C40 72 26 70 16 77C10 81 8 87 10 94M51 86C39 83 24 85 15 94C11 98 10 104 12 110M51 92C40 93 27 99 20 108C17 112 16 118 18 123M53 99C44 104 35 113 31 122C29 127 29 132 31 137"/><path d="M52 80C40 72 26 70 16 77C10 81 8 87 10 94M51 86C39 83 24 85 15 94C11 98 10 104 12 110M51 92C40 93 27 99 20 108C17 112 16 118 18 123M53 99C44 104 35 113 31 122C29 127 29 132 31 137" transform="translate(120,0) scale(-1,1)"/></g><ellipse cx="60" cy="109" rx="17" ry="21" fill="%231a1014" stroke="%23FFC27A" stroke-opacity=".55" stroke-width="1.4"/><path d="M60 96c4 6 4 20 0 26c-4-6-4-20 0-26z" fill="%23FF7A1A" fill-opacity=".55"/><circle cx="60" cy="85" r="11.5" fill="%231a1014" stroke="%23FFC27A" stroke-opacity=".55" stroke-width="1.3"/><circle cx="55.8" cy="81.5" r="2.1" fill="%23FF7A1A"/><circle cx="64.2" cy="81.5" r="2.1" fill="%23FF7A1A"/></svg>');
}

:root.sp-hw .sphero{position:relative;overflow:hidden}

/* Twee hoeken in plaats van één. Eén web leest als toeval; twee die de hero
   omlijsten leest als bedoeld -- en dat is wat "wat meer Halloween" hier moet
   doen, zonder dat er een tweede motief bij komt.

   De maat schaalt mee met het scherm. Vast op 220 pixels was hij op een breed
   scherm een postzegel in de hoek en op een telefoon juist fors. */
:root.sp-hw .sphero::before{
  content:"";position:absolute;top:-12px;left:-12px;
  width:clamp(270px,34vw,540px);height:clamp(270px,34vw,540px);
  pointer-events:none;opacity:.78;z-index:2;
  background:var(--hw-web) no-repeat center/contain;
}

/* ── de spin ───────────────────────────────────────────────────────────── */

/* Hij hangt in het RECHTER web, en dat is geen willekeurige keuze. De hero is
   vol: linksonder de kopregel en de knoppen, in het midden het zwevende
   flesje, rechtsonder de WhatsApp-knop en daarboven de cijferrij. De
   rechterbovenhoek is het enige vlak waar niets onder zit, en daar ligt het
   kleinere web al.

   transform-origin staat bovenaan, zodat hij als een slinger draait om het
   punt waar de draad vastzit. Zet je hem in het midden, dan schuift het hele
   plaatje heen en weer en ziet het eruit als een sticker die losraakt.

   De hero heeft overflow:hidden, dus top:0 en niet negatief: de draad begint
   netjes aan de bovenrand in plaats van afgeknipt te worden.

   De horizontale plek is opgemeten, niet geschat. Op 1024 px loopt de
   kopregel tot 532 en begint het zwevende flesje op 703; daartussen zit een
   vrije strook van 171 px. Een eerdere stand (26vw) zette de spin op 691 en
   dan hapte hij 2412 px2 uit de linkerrand van dat flesje -- dezelfde fout
   als destijds met de pompoen over "99% HPLC purity". 36vw mikt op het
   midden van die strook. */
:root.sp-hw .hw-spin{
  position:absolute;top:0;right:clamp(120px,36vw,470px);
  width:clamp(54px,6.5vw,104px);aspect-ratio:120/150;
  background:var(--hw-spin) no-repeat top center/contain;
  pointer-events:none;z-index:3;
  transform-origin:50% 0;
  animation:hw-zwaai 9s ease-in-out infinite;
}
@keyframes hw-zwaai{
  0%,100%{transform:rotate(-2.2deg)}
  50%{transform:rotate(2.2deg)}
}
@media (prefers-reduced-motion: reduce){
  :root.sp-hw .hw-spin{animation:none}
}

/* Weg op een smal scherm. Daar staat de hero niet meer naast elkaar maar
   onder elkaar, en het zwevende flesje schuift naar het midden-boven --
   precies waar de draad hangt. Gemeten op 375 px: 1518 px2 van de spin over
   de productfoto.
   Verplaatsen lost het niet op, want er is daar geen vlak meer vrij; dit is
   dezelfde afweging als bij de pompoen in de header, die zich ook verbergt
   zodra de ruimte dichtloopt. De webben en de vleermuizen dragen het thema
   op mobiel al. */
@media (max-width:749px){
  :root.sp-hw .hw-spin{display:none}
}

/* ── mist ──────────────────────────────────────────────────────────────── */

/* Onderlangs de hero, heel traag. Geen plaatje maar twee gradiënten die langs
   elkaar schuiven; dat kost niets en kan nooit scheef laden. */
:root.sp-hw .sphero::after{
  content:"";position:absolute;left:-50%;right:-50%;bottom:-40px;height:260px;
  pointer-events:none;z-index:2;
  background:
    radial-gradient(60% 100% at 20% 100%, var(--hw-fog), transparent 70%),
    radial-gradient(50% 100% at 65% 100%, var(--hw-fog), transparent 70%),
    radial-gradient(70% 100% at 90% 100%, var(--hw-fog), transparent 70%);
  animation:hw-mist 42s linear infinite;
}

/* De tweede hoek, gespiegeld. Hij hangt in het element dat sp-halloween.js
   toch al neerzet: .sphero heeft maar twee pseudo-elementen en die zijn op
   (web en mist). */
:root.sp-hw .hw-bats::before{
  content:"";position:absolute;top:-12px;right:-12px;
  width:clamp(190px,25vw,400px);height:clamp(190px,25vw,400px);
  pointer-events:none;opacity:.56;
  background:var(--hw-web) no-repeat center/contain;
  transform:scaleX(-1);
}

/* En één in de voet, want die staat op elke pagina. Zonder dit houdt het thema
   op zodra je de homepage verlaat: de catalogus en de productpagina kregen
   alleen de kleuren mee en verder niets.

   Op ::after en niet op ::before. Dat laatste was de eerste poging en hij was
   fout: .sp-footer::before bestaat al en tekent de haarlijn bovenaan de voet
   (blauw naar magenta, uit de tokens). Mijn regel overschreef daar height en
   background van, dus die lijn was wég -- en het web belandde links in plaats
   van rechts, omdat de left:0 van die oorspronkelijke regel bleef staan en in
   een LTR-pagina wint van right. Twee fouten uit één botsing.

   Die haarlijn heeft overigens niets nodig: hij leest var(--sp-blue), dus hij
   is vanzelf al pompoen. */
:root.sp-hw .sp-footer{position:relative;overflow:hidden}
:root.sp-hw .sp-footer::after{
  content:"";position:absolute;top:-14px;right:-14px;left:auto;
  width:clamp(170px,22vw,320px);height:clamp(170px,22vw,320px);
  pointer-events:none;opacity:.3;z-index:0;
  background:var(--hw-web) no-repeat center/contain;
  transform:scaleX(-1);
}
/* De inhoud van de voet blijft erboven; anders loopt het web door de links. */
:root.sp-hw .sp-footer > *{position:relative;z-index:1}
@keyframes hw-mist{
  from{transform:translateX(-4%)}
  50%{transform:translateX(4%)}
  to{transform:translateX(-4%)}
}

/* ── vleermuizen ───────────────────────────────────────────────────────── */

/* Alleen in de hero, klein, doorzichtig en langzaam. Ze zitten in een eigen
   element dat sp-halloween.js neerzet, zodat de HTML van de winkel ongemoeid
   blijft en het weghalen één regel is. */
:root.sp-hw .hw-bats{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
:root.sp-hw .hw-bat{
  position:absolute;width:38px;height:38px;opacity:1;
  /* Zwart op zwart is geen silhouet maar niets, en een gloed eromheen maakte
     er een vlek van. Dus andersom: een warme tint op dertig procent, alsof de
     vleermuis door de straatlamp boven in beeld wordt aangelicht. Zichtbaar
     als vorm, nooit als onderwerp. */
  color:rgba(255,190,128,.58);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
  animation:hw-vlieg 26s linear infinite;
}
:root.sp-hw .hw-bat svg{width:100%;height:100%;display:block}
:root.sp-hw .hw-bat--1{top:10%;animation-duration:27s}
:root.sp-hw .hw-bat--2{width:27px;height:27px;opacity:.72;animation-duration:36s;animation-delay:-9s;top:24%}
:root.sp-hw .hw-bat--3{width:46px;height:46px;opacity:.92;animation-duration:30s;animation-delay:-18s;top:52%}
:root.sp-hw .hw-bat--4{width:22px;height:22px;opacity:.6;animation-duration:41s;animation-delay:-26s;top:36%}
:root.sp-hw .hw-bat--5{width:33px;height:33px;opacity:.82;animation-duration:24s;animation-delay:-5s;top:68%}
@keyframes hw-vlieg{
  from{transform:translateX(-8vw) translateY(0) rotate(-4deg)}
  25%{transform:translateX(26vw) translateY(-26px) rotate(5deg)}
  50%{transform:translateX(55vw) translateY(14px) rotate(-3deg)}
  75%{transform:translateX(82vw) translateY(-18px) rotate(6deg)}
  to{transform:translateX(112vw) translateY(0) rotate(-4deg)}
}
/* De vleugelslag zit in de SVG zelf (zie sp-halloween.js) en staat los van de
   baan, zodat hij niet met de snelheid meeverandert. */
@keyframes hw-slag{
  from{transform:scaleY(1)}
  to{transform:scaleY(.62)}
}
:root.sp-hw .hw-bat svg g{transform-origin:50% 40%;animation:hw-slag .42s ease-in-out infinite alternate}

/* Wie beweging heeft uitgezet, krijgt het stilstaande beeld. Niet het beeld
   wéghalen: dan mist die bezoeker het thema, en daar ging de voorkeur niet
   over. */
@media (prefers-reduced-motion:reduce){
  :root.sp-hw .sphero::after,
  :root.sp-hw .hw-bat,
  :root.sp-hw .hw-bat svg g{animation:none}
  :root.sp-hw .hw-bat--1{left:12%}
  :root.sp-hw .hw-bat--2{left:38%}
  :root.sp-hw .hw-bat--3{left:58%}
  :root.sp-hw .hw-bat--4{left:74%}
  :root.sp-hw .hw-bat--5{left:88%}
  :root.sp-hw .hw-pompoen{animation:none}
  :root.sp-hw .hw-pompoen .hw-vuur{animation:none;opacity:1}
}

/* ── het kortingsbadge op de kaarten ───────────────────────────────────── */

/* De kaarten hebben al een plek voor "bespaar X" (.spb__save / .spa__pill).
   Die krijgt de seizoenskleur in plaats van een tweede badge ernaast. */
:root.sp-hw .spb__save,
:root.sp-hw .spa__pill{
  background:#0A0608;color:var(--hw-gif);
  border:1px solid rgba(139,255,60,.4);
  box-shadow:0 0 14px rgba(139,255,60,.22);
}

/* ── de rest volgt vanzelf ─────────────────────────────────────────────── */

/* Wat hieronder staat is alleen voor plekken waar een kleur hard in een regel
   stond in plaats van in een token. Ze zijn opgezocht in de gebouwde CSS; als
   er ooit een bijkomt, valt dat op als een blauwe vlek in een oranje winkel. */
:root.sp-hw .cat-card:hover .sp-btn--primary{box-shadow:0 0 22px rgba(255,122,24,.55)}
:root.sp-hw .sph__logo:hover{filter:drop-shadow(0 0 10px rgba(255,122,24,.5))}
:root.sp-hw ::selection{background:rgba(255,122,24,.35)}

/* De zoekbalk en de velden lezen hun rand uit --sp-line, maar hun achtergrond
   stond vast op het blauwe paneel. */
:root.sp-hw .sph__search input,
:root.sp-hw .sph__results{background:rgba(21,16,12,.96)}

/* De RUO-regel in de balk: moet er staan, hoeft niet te schreeuwen. */
:root.sp-hw .sph-ann .hw-ruo{opacity:.72;font-weight:600;letter-spacing:.08em}

/* ── de twee tekenvlakken in de hero ───────────────────────────────────── */

/* Het netwerk en de DNA-ring worden met de hand in blauw getekend, in een
   inline script dat uit het thema komt -- en theme.liquid blijft buiten git.
   Een kleurdraai op het tekenvlak zelf haalt hetzelfde resultaat zonder dat
   bestand aan te raken: blauw (ongeveer 202 graden) komt op pompoen uit.
   Alleen deze twee elementen; de foto van het flesje blijft zoals hij is. */
:root.sp-hw .sphero__net,
:root.sp-hw .sphero__dna{filter:hue-rotate(183deg) saturate(1.1)}

/* ── blauw dat niet uit een token komt ─────────────────────────────────── */

/* Deze vijf hadden hun kleur in de regel staan in plaats van in --sp-blue.
   Ze zijn opgezocht door de gebouwde pagina af te lopen en elke berekende
   kleur met een duidelijk hoger blauwkanaal te melden; zo bleven er geen
   blauwe vlekken over in een oranje winkel. Komt er ooit een bij, dan valt
   hij op dezelfde manier te vinden. */
:root.sp-hw .spb__aura,
:root.sp-hw .spa__aura{background-image:radial-gradient(60% 60% at 50% 40%,rgba(255,122,24,.30),transparent 70%)}
:root.sp-hw .spb__pop{background-image:linear-gradient(135deg,#FFD9A8,#FF7A18);color:#1A0E04}
:root.sp-hw .spa__btn,
:root.sp-hw .spa__more__c{background-image:linear-gradient(180deg,#FF9A3C,#C63D03)}
:root.sp-hw .spa__more{background-image:linear-gradient(180deg,rgba(255,122,24,.16),transparent);
  border-color:rgba(255,122,24,.45)}

/* ── het aanmeldveld in de balk ────────────────────────────────────────── */

/* Staat alleen op een breed scherm; op een telefoon is de balk een regel en
   verwijst hij naar het formulier onderaan. Zie de teaser in sp-site.js. */
:root.sp-hw .sph-ann{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding-top:7px;padding-bottom:7px;line-height:1.25;

  /* ⚠️ De achtergrond. Dit ontbrak, en dat was geen schoonheidsfoutje.
     De hele balk is op een oranje ondergrond ontworpen: het invoerveld is
     cremekleurig, de knop is donker met lichte letters, en verderop in dit
     bestand wordt alle tekst op #120A04 gezet omdat vaalbeige "niet te lezen
     was op de oranje balk". Alleen die oranje balk kwam er nooit: de
     achtergrond bleef de donkere gradient uit theme.liquid staan.
     Resultaat: zwarte tekst op een zwarte balk, site-breed.
     Opgemeten op 21-10-2026: kleur rgb(18,10,4) op rgb(5,8,14). */
  background:linear-gradient(90deg,#E8630B,#FFA23C 40%,#FF8A11 72%,#E8630B);
  border-bottom:1px solid rgba(18,10,4,.45);
}
:root.sp-hw .hw-inschrijf{display:inline-flex;gap:6px;align-items:center;margin:0}
:root.sp-hw .hw-inschrijf input{
  width:210px;max-width:44vw;padding:5px 10px;border-radius:7px;
  border:1px solid rgba(18,10,4,.4);background:rgba(255,245,235,.94);
  color:#120A04;font:inherit;font-weight:600;letter-spacing:.02em;
  text-transform:none;outline:none;
}
:root.sp-hw .hw-inschrijf input::placeholder{color:#8A6F58;font-weight:500}
:root.sp-hw .hw-inschrijf input:focus{
  border-color:#120A04;box-shadow:0 0 0 2px rgba(18,10,4,.25);
}
:root.sp-hw .hw-inschrijf button{
  padding:6px 13px;border:none;border-radius:7px;cursor:pointer;
  background:#120A04;color:#FFD9A8;font:inherit;font-weight:700;letter-spacing:.08em;
  transition:background .16s,color .16s;
}
:root.sp-hw .hw-inschrijf button:hover{background:#2A1709;color:#fff}
:root.sp-hw .hw-inschrijf button[disabled]{opacity:.6;cursor:progress}

/* De melding erna. Donker op de oranje balk, want wit verdwijnt erin. */
:root.sp-hw .sph-ann .hw-zeg{font-weight:600;letter-spacing:.03em;opacity:.85}
:root.sp-hw .sph-ann .hw-zeg.is-fout{color:#4A0B0B;opacity:1}
:root.sp-hw .sph-ann .hw-zeg.is-goed{color:#102A05;opacity:1}

/* De code zelf, als hij op het scherm komt: hetzelfde gifgroen als het
   percentage, zodat het als één ding leest en niet als twee mededelingen. */
:root.sp-hw .sph-ann .hw-code{
  background:#0A0608;color:var(--hw-gif);
  padding:2px 9px;border-radius:5px;letter-spacing:.1em;font-weight:700;
  box-shadow:0 0 12px rgba(139,255,60,.45);
}

/* Onder de 1100 px valt het veld naast de zin niet meer netjes; dan de zin
   eroverheen en het veld eronder, nog steeds op één balk van twee regels. */
@media (max-width:1100px){
  :root.sp-hw .sph-ann{gap:8px}
  :root.sp-hw .hw-inschrijf input{width:170px}
}

/* ── de pompoen ────────────────────────────────────────────────────────── */

/* Hij staat in de mist, rechts, onder het flesje. Links is bezet door de
   kopregel en de knoppen; een pompoen die daar overheen valt is geen sfeer
   maar een obstakel.

   Niet helemaal in de hoek: daar staat de zwevende WhatsApp-knop, en daar
   loopt ook de cijferrij onderlangs. Hij zit nu in de mist tussen die twee
   in, waar niets anders staat.

   Twee bewegingen, en ze staan los van elkaar. Het lijf deint heel traag --
   dat is wat hem levend maakt zonder dat je het betrapt. Het licht in de
   uitsnijdingen flikkert op een eigen, kortere maat, zoals een kaars. Zouden
   ze op dezelfde maat lopen, dan leest het als één animatie en niet als een
   pompoen met een vlam erin. */
:root.sp-hw .hw-pompoen{
  position:absolute;left:clamp(16px,5vw,86px);bottom:-10px;
  width:clamp(96px,11vw,156px);height:auto;
  pointer-events:none;z-index:4;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.65))
         drop-shadow(0 0 34px rgba(255,138,17,.42));
  animation:hw-deinen 7s ease-in-out infinite;
}
:root.sp-hw .hw-pompoen svg{width:100%;height:auto;display:block}

/* Het licht. De gloed zit op de groep zelf en niet op de hele pompoen, anders
   gloeit het oranje van de schil mee en is er geen verschil meer tussen de
   schil en wat eruit is gesneden. */
:root.sp-hw .hw-pompoen .hw-vuur{
  filter:drop-shadow(0 0 7px rgba(255,190,60,.95))
         drop-shadow(0 0 20px rgba(255,130,20,.75));
  animation:hw-vlam 2.6s ease-in-out infinite;
  transform-origin:50% 60%;
}

@keyframes hw-deinen{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-6px) rotate(1.2deg)}
}

/* Onregelmatig met opzet: een vlam die netjes op en neer gaat leest als een
   schuifregelaar. De sprongen zitten op oneven momenten. */
@keyframes hw-vlam{
  0%{opacity:.88}
  12%{opacity:1}
  21%{opacity:.74}
  33%{opacity:.97}
  47%{opacity:.82}
  54%{opacity:1}
  68%{opacity:.78}
  79%{opacity:.95}
  88%{opacity:.85}
  100%{opacity:.88}
}

/* Een tweede licht onder de pompoen: de mist eromheen kleurt mee, alsof hij
   echt iets verlicht. Zonder dit zweeft hij los boven de grond. */
:root.sp-hw .hw-pompoen::after{
  content:"";position:absolute;left:-28%;right:-28%;bottom:-14px;height:52px;
  background:radial-gradient(60% 100% at 50% 100%,rgba(255,150,40,.34),transparent 72%);
  animation:hw-vlam 2.6s ease-in-out infinite;
}

/* Op een smal scherm staat hij links, want daar staat het flesje midden in
   beeld en zijn de knoppen eronder gestapeld. Kleiner ook: op 375 pixels is
   een pompoen van 160 breed een derde van het scherm. */
@media (max-width:760px){
  /* Op een telefoon staat de voet op één kolom en is er links geen marge meer
     over; dan kleiner en strak tegen de rand. */
  :root.sp-hw .hw-pompoen{left:6px;bottom:-8px;width:clamp(74px,21vw,104px);opacity:.92}
}

/* ── de pompoen aan een draadje in de header ───────────────────────────── */

/* Midden in het gat tussen het menu en de knoppen rechts. Op 1280 pixels is
   dat ruim vierhonderd pixels niets; smaller loopt dat gat dicht en gaat hij
   weg (zie onderaan). Hij hangt door de onderrand van de header heen de hero
   in: .sph staat op overflow:visible, dus dat mag.

   Het draadje begint bóven de header, in de aankondigingsbalk, zodat hij
   ergens aan hangt in plaats van in de lucht te zweven. */
/* De hero wordt ná de header getekend en kreeg van deze themalaag dezelfde
   z-index (1), dus hij schilderde de onderkant van de pompoen weg -- precies
   het stuk dat uit de header hangt. Een header hoort sowieso boven de inhoud
   te liggen.

   Deze regel stond eerst binnen de mediaquery voor smalle schermen. Daardoor
   was hij op een telefoon heel en op een breed scherm nog steeds afgesneden:
   dezelfde fout, half gerepareerd. */
:root.sp-hw .sph{z-index:6}

:root.sp-hw .hw-hanger{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  pointer-events:none;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 0;
  animation:hw-slinger 5.5s ease-in-out infinite;
}
:root.sp-hw .hw-draad{
  display:block;width:1px;height:22px;
  background:linear-gradient(180deg,rgba(255,194,122,0),rgba(255,194,122,.65));
}
/* Kleiner dan die in de voet, en zonder de deining -- hij hangt al te
   slingeren, en twee bewegingen over elkaar wordt onrustig. */
:root.sp-hw .hw-pompoen--klein{
  position:static;width:clamp(56px,5vw,76px);left:auto;bottom:auto;
  animation:none;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))
         drop-shadow(0 0 18px rgba(255,138,17,.45));
}
/* De gloed in de mist hoort bij de staande pompoen, niet bij deze. */
:root.sp-hw .hw-pompoen--klein::after{display:none}

@keyframes hw-slinger{
  0%,100%{transform:translateX(-50%) rotate(-3.5deg)}
  50%{transform:translateX(-50%) rotate(3.5deg)}
}

/* Onder de 1040 pixels schuiven het menu en de knoppen naar elkaar toe en is
   het gat in het midden weg. Hij verdween daar eerst helemaal, maar dat is
   zonde: juist op een telefoon zie je de header het langst.

   Gemeten op 375 pixels: de header is twee rijen hoog (133px) en overal vol,
   op 26 pixels na rechts van CONTACT. Daar past geen pompoen, maar wel een
   draadje -- en dat is genoeg. Het draadje loopt langs de headerrand naar
   beneden en de pompoen hangt eronder, in de hero. .sph staat op
   overflow:visible, dus dat mag.

   Hij hangt daarmee over de rechterbovenhoek van de hero, waar het tweede
   spinrag zit. Dat is geen ongeluk: decoratie over decoratie leest prima,
   tekst of een knop zou dat niet doen. */
@media (max-width:1040px){
  :root.sp-hw .hw-hanger{
    left:auto;right:20px;transform:none;
    animation-name:hw-slinger-rand;
  }
  :root.sp-hw .hw-draad{height:118px}
  :root.sp-hw .hw-pompoen--klein{width:62px}
}

/* Dezelfde slinger, maar zonder de verschuiving van het midden -- die zit in
   hw-slinger ingebakken en zou hem hier naar links trekken. */
@keyframes hw-slinger-rand{
  0%,100%{transform:rotate(-3.5deg)}
  50%{transform:rotate(3.5deg)}
}

/* Op een echt smal scherm iets kleiner, zodat hij het flesje niet raakt. */
@media (max-width:420px){
  :root.sp-hw .hw-draad{height:104px}
  :root.sp-hw .hw-pompoen--klein{width:54px}
}
@media (prefers-reduced-motion:reduce){
  :root.sp-hw .hw-hanger{animation:none}
}

/* ── alles in de balk zwart ────────────────────────────────────────────── */

/* In theme.liquid staat `.sph-ann span { color: var(--sp-text-dim) }`. Die
   selector weegt zwaarder dan de kleur die deze laag op .sph-ann zelf zet,
   dus stond "EVERY VIAL, TODAY · EVERYONE ELSE FROM 26 OCT" vaalbeige op een
   oranje balk -- wel leesbaar, niet te lezen.

   theme.liquid blijft buiten git, dus het wordt hier rechtgezet en niet daar.
   Alles zwart, en daarna de twee uitzonderingen terug: het percentage en de
   code zijn met opzet gifgroen op donker, want dat is de plek waar het oog
   heen moet. Die staan eronder, anders wint dit blok ervan. */
:root.sp-hw .sph-ann,
:root.sp-hw .sph-ann span,
:root.sp-hw .sph-ann b,
:root.sp-hw .sph-ann a{color:#120A04}

/* Allebei gifgroen, maar dan wel op donker -- en dat laatste is sinds de
   balk oranje werd niet meer vanzelf zo. Gemeten op 21-10-2026: #8BFF3C op
   het oranje geeft contrast 1,57 tot 2,65, waar de norm 4,5 is. Het woord
   waar het oog juist heen moet was daarmee het slechtst leesbare woord van
   de zin. Met hetzelfde donkere plaatje eronder als de code erbij: 15,8. */
:root.sp-hw .sph-ann .hw-pct,
:root.sp-hw .sph-ann .hw-code{
  color:var(--hw-gif);
  background:#0A0608;
  padding:2px 8px;border-radius:5px;
  font-weight:700;letter-spacing:.06em;
}
:root.sp-hw .sph-ann .hw-zeg.is-fout{color:#4A0B0B}
:root.sp-hw .sph-ann .hw-zeg.is-goed{color:#102A05}