:root{
	--sb-off:"40% OFF";
	--sb-railnote:"40% off with SPOOKY40";
}
/* The homepage "In stock now" rail builds its prices directly with wc_price()
   rather than get_price_html(), so the filter above cannot reach it, and the
   row is far too tight for a struck price plus a code. A pill in its header was
   tried and collided with the "37 compounds" count, so the rail is deliberately
   left alone: it shows honest regular prices, and the promo bar states the
   offer in full about 250px above it. --sb-railnote is kept for reference. */
.sb-cardsale{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px}
.sb-cardsale-was{opacity:.5;text-decoration:line-through;text-decoration-thickness:1px;font-weight:500}
.sb-cardsale-now{font-weight:800;color:#ffb43c}
.sb-cardsale-code{
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:700;
	letter-spacing:.08em;color:#ffc98a;background:rgba(255,122,24,.13);
	border:1px solid rgba(255,122,24,.4);border-radius:5px;padding:1px 5px;white-space:nowrap;
}
html.sb-light .sb-cardsale-now{color:#c2410c}
html.sb-light .sb-cardsale-code{color:#9a3412;background:rgba(194,65,12,.09);border-color:rgba(194,65,12,.38)}

/* Corner ribbon. Uses ::before because the theme already owns .thumb::after
   for its hover glow - overwriting that would kill the glow on every card. */
.card .thumb{position:relative;overflow:hidden}
.card .thumb::before{
	content:var(--sb-off);position:absolute;top:13px;right:-34px;z-index:2;
	width:126px;text-align:center;transform:rotate(45deg);
	font-family:var(--display,'Sora',sans-serif);font-weight:800;font-size:10px;letter-spacing:.1em;
	color:#1b0a05;background:linear-gradient(120deg,#ffd88a,#ff9a3c 50%,#ff7a18);
	padding:4px 0;box-shadow:0 4px 14px rgba(255,122,24,.4);pointer-events:none;
}
.card:hover .thumb::before{animation:sbEmber 1.6s ease-in-out infinite}
@media(max-width:560px){
	.card .thumb::before{top:10px;right:-38px;width:118px;font-size:9px}
	/* The code chip must NEVER be dropped to save space. A struck price with no
	   way to claim it is the thing that generates chargebacks - so on a narrow
	   card it wraps onto its own line instead of disappearing. */
	/* Grid rather than a 100%-basis flex item, which stretched the chip into a
	   full-width bar. Row 1 holds the two prices, row 2 the code at its own size. */
	.sb-cardsale{display:grid;grid-template-columns:auto auto;justify-content:start;
		align-items:baseline;column-gap:6px;row-gap:3px}
	.sb-cardsale-code{grid-column:1/-1;justify-self:start;font-size:9px;padding:1px 5px}
}
@media(prefers-reduced-motion:reduce){.card:hover .thumb::before{animation:none}}