.halloween-banner{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;overflow:visible;min-height:64px;padding:22px 70px 10px;background:linear-gradient(135deg,#1a0f24 0%,#2b1338 45%,#180a1f 100%);box-shadow:0 4px 18px rgba(0,0,0,.45);}
.halloween-banner__inner{position:relative;z-index:3;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;text-align:center;}
.halloween-banner__logo{height:56px;width:auto;filter:drop-shadow(0 0 8px rgba(255,140,0,.55));}
.halloween-banner__text{display:flex;flex-direction:column;gap:2px;color:#fff;}
.halloween-banner__title{font-size:18px;font-weight:800;color:#ff9a3c;text-shadow:0 0 10px rgba(255,140,0,.5);letter-spacing:.3px;}
.halloween-banner__subtitle{font-size:13px;font-weight:600;color:#f0e6ff;opacity:.9;}
.halloween-banner__subtitle b{color:#ffb84d;font-size:15px;}
.halloween-banner__cta{display:inline-flex;align-items:center;padding:8px 16px;border-radius:20px;background:linear-gradient(135deg,#ff7a18,#ff3c78);color:#fff;font-weight:700;font-size:12.5px;text-decoration:none;white-space:nowrap;box-shadow:0 3px 10px rgba(255,60,100,.4);transition:transform .15s ease,box-shadow .15s ease;}
.halloween-banner__cta:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,60,100,.55);color:#fff;text-decoration:none;}
.halloween-banner__deco{position:absolute;top:50%;transform:translateY(-50%);height:52px;width:auto;opacity:.9;pointer-events:none;z-index:1;}
.halloween-banner__deco--h2{left:14px;height:60px;animation:halloween-float 4.2s ease-in-out infinite;}
.halloween-banner__deco--h4{left:120px;height:38px;opacity:.55;display:none;}
.halloween-banner__deco--h3{right:14px;height:60px;animation:halloween-float 3.6s ease-in-out infinite .3s;}
.halloween-banner__deco--h5{right:120px;height:38px;opacity:.55;display:none;}
@keyframes halloween-float{0%,100%{transform:translateY(-50%) rotate(-4deg);}50%{transform:translateY(-58%) rotate(4deg);}}
.halloween-spider{position:absolute;top:4px;left:0;z-index:5;background:none;border:0;padding:8px;margin:-8px;cursor:pointer;line-height:0;animation:halloween-spider-crawl 45s linear infinite;}
.halloween-spider__img{width:38px;height:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));transform-origin:center;animation:halloween-spider-wiggle .5s ease-in-out infinite;}
.halloween-spider.is-lowered{animation-play-state:paused;}
.halloween-spider.is-lowered .halloween-spider__img{animation-duration:.18s;}
@keyframes halloween-spider-crawl{
0%{left:0;transform:scaleX(1);}
48%{left:calc(100% - 38px);transform:scaleX(1);}
50%{left:calc(100% - 38px);transform:scaleX(-1);}
98%{left:0;transform:scaleX(-1);}
100%{left:0;transform:scaleX(1);}
}
@keyframes halloween-spider-wiggle{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
@media(max-width:900px){
.halloween-banner{padding:20px 16px 8px;flex-wrap:wrap;}
.halloween-banner__deco{display:none;}
.halloween-banner__logo{height:42px;}
.halloween-banner__title{font-size:15px;}
}
.halloween-banner--hero{width:100%;height:260px;min-height:260px;padding:34px 60px 16px;border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:0 5px 10px rgba(19,21,26,.31);margin-bottom:18px;background:radial-gradient(120% 140% at 50% 0%,#3a1a4d 0%,#1a0f24 55%,#0f0614 100%);}
.halloween-banner--hero .halloween-banner__inner{flex-direction:column;gap:10px;}
.halloween-banner--hero .halloween-banner__logo{height:120px;}
.halloween-banner--hero .halloween-banner__title{font-size:30px;}
.halloween-banner--hero .halloween-banner__subtitle{font-size:16px;}
.halloween-banner--hero .halloween-banner__subtitle b{font-size:19px;}
.halloween-banner--hero .halloween-banner__cta{padding:11px 24px;font-size:14px;margin-top:2px;}
.halloween-banner--hero .halloween-banner__deco{height:90px;}
.halloween-banner--hero .halloween-banner__deco--h2{left:26px;}
.halloween-banner--hero .halloween-banner__deco--h3{right:26px;}
.halloween-banner--hero .halloween-banner__deco--h4{display:block;left:150px;height:56px;top:30%;}
.halloween-banner--hero .halloween-banner__deco--h5{display:block;right:150px;height:56px;top:30%;}
.halloween-banner--hero .halloween-spider__img{width:46px;}
@media(max-width:900px){
.halloween-banner--hero{height:auto;min-height:220px;padding:26px 16px 14px;}
.halloween-banner--hero .halloween-banner__logo{height:80px;}
.halloween-banner--hero .halloween-banner__title{font-size:22px;}
}
.halloween-store-banner{position:relative;display:flex;align-items:center;gap:14px;padding:16px 22px;margin-bottom:16px;border-radius:16px;background:linear-gradient(135deg,#1a0f24 0%,#2b1338 55%,#180a1f 100%);box-shadow:0 6px 20px rgba(0,0,0,.35);overflow:hidden;}
.halloween-store-banner__logo{height:64px;width:auto;filter:drop-shadow(0 0 8px rgba(255,140,0,.5));}
.halloween-store-banner__text{display:flex;flex-direction:column;gap:4px;color:#fff;}
.halloween-store-banner__text b{font-size:17px;font-weight:800;color:#ff9a3c;text-shadow:0 0 10px rgba(255,140,0,.45);}
.halloween-store-banner__text span{font-size:13.5px;color:#f0e6ff;opacity:.9;}
.halloween-store-banner__spider{position:absolute;right:18px;top:50%;transform:translateY(-50%);height:56px;width:auto;opacity:.85;}
@media(max-width:640px){
.halloween-store-banner__spider{display:none;}
.halloween-store-banner{padding:14px 16px;}
}
