/* ============================ promo bar: spooky skin ====================== */
.sb-jb{
	--jb-accent:#ff7a18;
	--jb-accent-2:#ffb43c;
	background:linear-gradient(90deg,#07040c 0%,#1d0a2b 38%,#2a0f1a 62%,#07040c 100%);
	border-bottom-color:rgba(255,122,24,.34);
}
/* warm the existing glow + sheen rather than adding more layers */
.sb-jb::before{background:radial-gradient(720px 130% at 50% 0%,rgba(255,122,24,.22),transparent 74%)}
.sb-jb::after{background:linear-gradient(100deg,transparent,rgba(255,196,120,.09) 45%,rgba(255,214,160,.17) 50%,rgba(255,196,120,.09) 55%,transparent)}

/* cobwebs in the top corners */
.sb-jb-hit{
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffb43c%22%20stroke-width%3D%221.1%22%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M0%200%20L100%2046%20M0%200%20L70%20100%20M0%200%20L46%2012%20M0%200%20L12%2046%20M0%200%20L86%2078%22%2F%3E%3Cpath%20d%3D%22M22%205%20Q14%2014%205%2022%20M40%209%20Q24%2025%209%2040%20M58%2014%20Q34%2036%2014%2058%20M76%2018%20Q44%2047%2018%2076%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffb43c%22%20stroke-width%3D%221.1%22%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M0%200%20L100%2046%20M0%200%20L70%20100%20M0%200%20L46%2012%20M0%200%20L12%2046%20M0%200%20L86%2078%22%2F%3E%3Cpath%20d%3D%22M22%205%20Q14%2014%205%2022%20M40%209%20Q24%2025%209%2040%20M58%2014%20Q34%2036%2014%2058%20M76%2018%20Q44%2047%2018%2076%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat:no-repeat,no-repeat;
	background-position:left top,right top;
	background-size:66px 66px,66px 66px;
	opacity:.62;
}

/* a bat crosses the bar every so often */
.sb-jb{--bat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-33 -13 66 24'%3E%3Cg fill='%23ffb066'%3E%3Cpath d='M-2-2Q-14-10-24-11L-30-9Q-28-3-26 4Q-22 0-19 6Q-15 1-11 5Q-7 1-2 4Z'/%3E%3Cpath d='M2-2Q14-10 24-11L30-9Q28-3 26 4Q22 0 19 6Q15 1 11 5Q7 1 2 4Z'/%3E%3Cellipse cx='0' cy='1' rx='3.6' ry='5.6'/%3E%3Cpath d='M-3.2-2.4L-4.8-8.2L-1-4.8Z'/%3E%3Cpath d='M3.2-2.4L4.8-8.2L1-4.8Z'/%3E%3C/g%3E%3C/svg%3E")}
.sb-jb-inner::after{
	content:"";position:absolute;top:5px;left:-70px;width:30px;height:15px;
	background:var(--bat) no-repeat center/contain;opacity:.6;pointer-events:none;
	animation:sbBarBat 15s linear infinite;
}
@keyframes sbBarBat{
	0%{left:-70px;top:5px}
	25%{top:14px}
	50%{top:2px}
	75%{top:13px}
	100%{left:103%;top:6px}
}
.sb-jb-hit{transform:none}
.sb-jb-hit::after{content:"";position:absolute;inset:0;background:inherit}
/* right-hand web mirrored so the strands fall away from the corner */
.sb-jb::marker{content:""}

/* drifting fog, on a layer of its own so the bar's own effects are untouched */
.sb-jb-inner::before{
	content:"";position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;
	background:
		radial-gradient(38% 60% at 20% 50%,rgba(255,122,24,.13),transparent 70%),
		radial-gradient(30% 55% at 62% 45%,rgba(168,85,247,.14),transparent 72%),
		radial-gradient(26% 50% at 88% 55%,rgba(255,180,60,.10),transparent 70%);
	animation:sbFog 26s ease-in-out infinite alternate;
}
@keyframes sbFog{
	0%{transform:translate3d(-4%,0,0) scale(1)}
	50%{transform:translate3d(3%,0,0) scale(1.06)}
	100%{transform:translate3d(-2%,0,0) scale(1.02)}
}

/* badge: ember that breathes */
.sb-jb-badge{
	color:#1b0a05;
	background:linear-gradient(120deg,#ff7a18,#ffb43c 55%,#ffd88a);
	box-shadow:0 2px 14px rgba(255,122,24,.42);
	animation:sbEmber 3.4s ease-in-out infinite;
}
@keyframes sbEmber{
	0%,100%{box-shadow:0 2px 12px rgba(255,122,24,.34)}
	50%{box-shadow:0 2px 22px rgba(255,150,60,.62)}
}

.sb-jb-msg b{color:#fff4e6;text-shadow:0 0 18px rgba(255,140,40,.45)}
.sb-jb:hover .sb-jb-msg b{color:#fff}

/* code chip: candle flicker on the border, never on the text */
.sb-jb-code{
	background:rgba(255,122,24,.11);
	border-color:rgba(255,122,24,.46);
	color:#ffc98a;
	animation:sbCandle 6s steps(1,end) infinite;
}
.sb-jb-code:hover{background:rgba(255,122,24,.22);border-color:rgba(255,168,60,.85);color:#fff1dc;animation:none}
.sb-jb-code.copied{background:#ff7a18;border-color:#ff7a18;color:#1b0a05;animation:none}
@keyframes sbCandle{
	0%,42%,46%,60%,64%,100%{border-color:rgba(255,122,24,.46);box-shadow:0 0 0 rgba(255,122,24,0)}
	44%{border-color:rgba(255,180,60,.78);box-shadow:0 0 14px rgba(255,140,40,.30)}
	62%{border-color:rgba(255,150,40,.62);box-shadow:0 0 9px rgba(255,140,40,.20)}
}

.sb-jb-clock{color:#ffe9cf}
.sb-jb-clock u{color:#b08a6a}
.sb-jb-ends-lbl{color:#a08974}
.sb-jb-dot{background:rgba(255,196,120,.32)}
.sb-jb-x:hover{color:#ffd7a8;background:rgba(255,122,24,.16)}

/* last day / last hour run hotter */
.sb-jb.is-soon{--jb-accent:#ff4d1c;--jb-accent-2:#ff9a3c;border-bottom-color:rgba(255,77,28,.42)}
.sb-jb.is-soon::before{background:radial-gradient(720px 130% at 50% 0%,rgba(255,77,28,.24),transparent 74%)}
.sb-jb.is-soon .sb-jb-clock{color:#ffc9a8}
.sb-jb.is-soon .sb-jb-code{background:rgba(255,77,28,.13);border-color:rgba(255,77,28,.5);color:#ffbe9a}

/* light mode: keep it warm but legible on a pale page */
html.sb-light .sb-jb{background:linear-gradient(90deg,#fff1e2 0%,#ffe3cc 45%,#f6e2f2 100%)!important;border-bottom-color:rgba(194,65,12,.28)!important}
html.sb-light .sb-jb::before{background:radial-gradient(720px 130% at 50% 0%,rgba(194,65,12,.12),transparent 74%)}
html.sb-light .sb-jb-inner::before{opacity:.55}
html.sb-light .sb-jb-badge{color:#fff6ee;background:linear-gradient(120deg,#c2410c,#ea580c)}
html.sb-light .sb-jb-msg b{color:#7c2d12;text-shadow:none}
html.sb-light .sb-jb-code{background:rgba(194,65,12,.09);border-color:rgba(194,65,12,.42);color:#9a3412}
html.sb-light .sb-jb-code.copied{background:#c2410c;border-color:#c2410c;color:#fff}
html.sb-light .sb-jb-clock{color:#7c2d12}
html.sb-light .sb-jb-clock u,html.sb-light .sb-jb-ends-lbl{color:#a16207}
html.sb-light .sb-jb-hit{opacity:.28}

/* ================== catalogue strike-through + apply bar ================== */
/* Same components, warm accent. Structure and copy are untouched - only colour
   moves, so the honesty rule (price and code always together) still holds.
   The product page uses .sb-promo-*, listings use .sb-strike-*, cart/drawer
   uses .sb-applybar-*; all three are repainted so the sale reads as one thing. */
.sb-promo-price{
	background:linear-gradient(135deg,rgba(255,122,24,.12),rgba(168,85,247,.07))!important;
	border-color:rgba(255,122,24,.34)!important;
}
.sb-promo-price-val{
	background:linear-gradient(120deg,#fff,#ffb43c)!important;
	-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.sb-promo-price-tag b{color:#ff9a3c!important}
.sb-promo-price .sb-promo-apply{
	color:#1b0a05!important;
	background:linear-gradient(120deg,#ffd88a,#ff9a3c 45%,#ff7a18)!important;
	box-shadow:0 6px 18px rgba(255,122,24,.30)!important;
	animation:sbEmber 3.4s ease-in-out infinite;
}
.sb-promo-price .sb-promo-apply:hover{box-shadow:0 12px 26px rgba(255,140,40,.42)!important;animation:none}
.sb-promo-price .sb-promo-apply:focus-visible{outline-color:#ff9a3c!important}
/* "Applied" stays green on purpose - that is a success state, not the sale. */
.sb-promo-price .sb-promo-apply.is-on{
	background:none!important;color:#6fd39a!important;box-shadow:none!important;animation:none!important;
}
html.sb-light .sb-promo-price{background:linear-gradient(135deg,rgba(194,65,12,.10),rgba(168,85,247,.05))!important;border-color:rgba(194,65,12,.3)!important}
html.sb-light .sb-promo-price-val{background:linear-gradient(120deg,#7c2d12,#ea580c)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
html.sb-light .sb-promo-price-tag b{color:#c2410c!important}

.sb-strike-now{color:#ffb43c!important}
.sb-strike-tag{
	border-color:rgba(255,122,24,.42)!important;
	background:rgba(255,122,24,.11)!important;
	color:#ffc98a!important;
}
.sb-strike-tag:hover{background:rgba(255,122,24,.22)!important;border-color:rgba(255,168,60,.7)!important}
.sb-applybar{
	border-color:rgba(255,122,24,.4)!important;
	background:linear-gradient(120deg,rgba(255,122,24,.14),rgba(168,85,247,.07))!important;
}
.sb-applybar-txt b{color:#ffd8a8!important}
.sb-applybar-btn{
	color:#1b0a05!important;
	background:linear-gradient(120deg,#ffd88a,#ff9a3c 45%,#ff7a18)!important;
	box-shadow:0 6px 18px rgba(255,122,24,.26)!important;
	animation:sbEmber 3.4s ease-in-out infinite;
}
html.sb-light .sb-applybar-txt b{color:#7c2d12!important}
html.sb-light .sb-applybar-btn{color:#fff6ee!important;background:linear-gradient(120deg,#ea580c,#c2410c)!important}
.sb-applybar-btn:hover{box-shadow:0 12px 26px rgba(255,140,40,.4)!important;animation:none}
html.sb-light .sb-strike-tag{border-color:rgba(194,65,12,.4)!important;background:rgba(194,65,12,.08)!important;color:#9a3412!important}
html.sb-light .sb-applybar{border-color:rgba(194,65,12,.34)!important;background:linear-gradient(120deg,rgba(194,65,12,.10),rgba(168,85,247,.05))!important}

/* =========================== sitewide decoration ========================= */
/* Markup comes from starbio-spooky-decor.php. It is fixed, pointer-events:none
   and lives in the gutters either side of the centred column, so it decorates
   the page without ever sitting on top of something you need to read or tap. */
.sb-hw{
	position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;
	--web:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ff9a3c' stroke-width='1.3'%3E%3Cpath d='M0 0L100 42M0 0L64 100M0 0L42 10M0 0L10 42M0 0L84 74'/%3E%3Cpath d='M20 4Q12 12 4 20M38 8Q22 22 8 38M56 12Q32 32 12 56M74 16Q42 42 16 74M92 20Q52 52 20 92'/%3E%3C/g%3E%3C/svg%3E");
}
/* below the promo bar + sticky header, so the whole web is visible */
.sb-hw-web{position:absolute;top:96px;width:136px;height:136px;background:var(--web) no-repeat;background-size:100% 100%;opacity:.42}
.sb-hw-web-l{left:0}
.sb-hw-web-r{right:0;transform:scaleX(-1)}

/* bats: a slow crossing, wings flapping, a gentle bob on top of the path */
.sb-hw-bat{position:absolute;left:-14vw;color:#ff8a2b;animation:sbFly linear infinite}
.sb-hw-bat svg{display:block;width:100%;height:auto;animation:sbBob 2.7s ease-in-out infinite alternate}
.sb-hw-bat .w{transform-box:fill-box;animation:sbFlap .38s ease-in-out infinite alternate}
.sb-hw-bat .wl{transform-origin:100% 40%}
.sb-hw-bat .wr{transform-origin:0% 40%}
/* Depth: the far bat is bigger but dimmer and softly out of focus, the near one
   is small, crisp and carries a faint warm rim. Three bats at one focal depth
   read as three copies of a sticker; graded like this they read as sky. */
.sb-hw-bat.b1{top:15vh;width:44px;opacity:.42;filter:blur(.4px);animation-duration:27s;animation-delay:1s}
.sb-hw-bat.b2{top:54vh;width:68px;opacity:.22;filter:blur(1.4px);animation-duration:38s;animation-delay:12s}
.sb-hw-bat.b3{top:78vh;width:30px;opacity:.5;filter:drop-shadow(0 0 5px rgba(255,138,43,.35));animation-duration:21s;animation-delay:20s}
/* the nearer the bat, the faster the wingbeat */
.sb-hw-bat.b2 .w{animation-duration:.62s}
.sb-hw-bat.b3 .w{animation-duration:.3s}
@keyframes sbFly{from{transform:translate3d(0,0,0)}to{transform:translate3d(128vw,-7vh,0)}}
@keyframes sbBob{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
@keyframes sbFlap{from{transform:scaleY(1)}to{transform:scaleY(.42)}}

/* the web has a tenant: sits still, twitches every few seconds */
.sb-hw-sit{position:absolute;top:150px;left:78px;width:22px;color:#e8a86b;opacity:.5;
	animation:sbTwitch 7s ease-in-out infinite}
.sb-hw-sit svg{display:block;width:100%;height:auto}
@keyframes sbTwitch{
	0%,86%,100%{transform:translate(0,0) rotate(0)}
	89%{transform:translate(2px,-1px) rotate(5deg)}
	93%{transform:translate(-1px,1px) rotate(-4deg)}
}
@media(max-width:860px){.sb-hw-sit{top:118px;left:54px;width:17px}}

/* spider: abseils down the right gutter now and then, then climbs back */
.sb-hw-spider{position:absolute;top:0;right:5vw;width:30px;color:#e8a86b;opacity:.5;animation:sbDrop 19s ease-in-out infinite}
.sb-hw-spider svg{display:block;width:100%;height:auto}
.sb-hw-spider::before{content:"";position:absolute;left:50%;bottom:96%;width:1px;height:100vh;background:linear-gradient(rgba(255,154,60,.45),rgba(255,154,60,.10))}
@keyframes sbDrop{0%,100%{transform:translateY(-18vh)}14%,34%{transform:translateY(20vh)}}

@media(max-width:860px){
	.sb-hw-web{top:78px;width:92px;height:92px;opacity:.3}
	.sb-hw-bat.b2{display:none}
	.sb-hw-spider{right:2vw;width:24px}
}
/* Phones have no side gutters - the content runs edge to edge, so a bat that
   looked like sky on desktop crosses straight over the copy here. Below 640px
   the flyers and the abseiling spider are dropped and only the fixed corner
   webs and their tenant remain: still unmistakably Halloween, nothing moving
   across what you are trying to read. */
@media(max-width:640px){
	.sb-hw-bat,
	.sb-hw-spider{display:none}
	.sb-hw-web{top:64px;width:78px;height:78px;opacity:.26}
	.sb-hw-sit{top:98px;left:44px;width:15px;opacity:.42}
}

/* ================================ motion off ============================= */
@media(prefers-reduced-motion:reduce){
	.sb-jb-inner::before,
	.sb-jb-badge,
	.sb-jb-code,
	.sb-applybar-btn,
	.sb-promo-price .sb-promo-apply,
	.sb-hw-bat,
	.sb-hw-bat svg,
	.sb-hw-bat .w,
	.sb-hw-spider,
	.sb-hw-sit,
	.sb-jb-inner::after{animation:none!important}
	.sb-jb-inner::after{display:none!important}
	/* stationary bats crossing nothing look broken - retire them entirely */
	.sb-hw-bat,.sb-hw-spider{display:none!important}
}
@media(max-width:560px){
	.sb-jb-hit{background-size:40px 40px,40px 40px}
}