/* Sale prices: on-sale shows "<s>$300</s> $239"; after the sale ends (html.sale-over) the normal price shows */
.off-sale{display:none!important}
html.sale-over .on-sale,html.sale-over .on-sale-b{display:none!important}
html.sale-over .off-sale{display:inline!important}
.sp{white-space:nowrap}
.sp .was{font-weight:500;opacity:.55;text-decoration-thickness:1.5px;margin-right:.15em}
.price .sp .was{font-size:.36em;letter-spacing:-.01em;vertical-align:.95em;margin-right:.2em;text-decoration-color:var(--pink);opacity:.75}
.cbox .p .sp .was{font-size:.5em;vertical-align:.4em}
.tbl .sp .was,.row .pr .sp .was{font-size:.86em}

.salebar{background:var(--lime);color:var(--ink);font-size:14px;text-align:center}
.salebar .wrap{display:block;height:auto;padding:8px 24px;line-height:1.35}
.salebar b{font-weight:700}
.salebar a{font-weight:600;text-decoration:underline;text-underline-offset:2px;margin-left:4px}
.hdr .salebar + .wrap{height:66px}
/* make room for the sale bar above the header */
html:not(.sale-over) .hdr:has(.salebar)~main .hero{padding-top:156px}
html:not(.sale-over) .hdr:has(.salebar)~main .phero{padding-top:196px}
@media(min-width:900px){html:not(.sale-over) .hdr:has(.salebar)~main .hero{padding-top:150px}}
html:not(.sale-over) .hdr:has(.salebar)~.sheet{top:122px}
@media(min-width:560px){html:not(.sale-over) .hdr:has(.salebar)~.sheet{top:102px}}