.sale-open .sale-only { display: block !important; }
.sale-open span.sale-only { display: inline !important; }
.sale-open .sale-hide { display: none; }
html.sale-open { scroll-padding-top: 3.5rem; }
.sale-banner { position: sticky; top: 0; z-index: 60; background: var(--coral); color: var(--ink); font-family: var(--body); box-shadow: 0 .25rem .9rem rgba(36, 51, 59, .18); }
.sale-banner__inner { max-width: 78rem; margin: 0 auto; padding: .55rem 1rem; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 1.1rem; font-size: .95rem; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.sale-banner__day { font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sale-banner__offer { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sale-banner strong { font-weight: 800; }
.sale-banner s { opacity: .65; }
.sale-banner__ends { font-size: .85rem; font-weight: 600; }
@media (max-width: 72rem) { .sale-banner__wide { display: none; } }
@media (max-width: 56rem) { .sale-banner__mid { display: none !important; } .sale-banner__inner { padding: .4rem .5rem; gap: .45rem; font-size: .8rem; justify-content: space-between; } .sale-banner__day { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .68rem; letter-spacing: 0; text-transform: none; } .sale-banner__offer { flex: none; overflow: visible; } .sale-banner__cta { min-height: 2.5rem; padding: .3rem .8rem; font-size: .8rem; } }
@media (max-width: 22rem) { .sale-banner__day { display: none; } }
.sale-banner__cta { flex: none; min-height: 2.1rem; padding: .3rem 1rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 .88rem var(--body); cursor: pointer; }
.sale-banner__cta:hover { background: var(--sea-dark); }
.sale-banner__cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sale-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sale-cart-note { margin: .75rem 0 0; padding: .6rem .8rem; border-radius: .7rem; background: #fbf3e4; color: var(--ink); font-size: .9rem; }
.sale-sticker { position: absolute; z-index: 8; width: 10.5rem; height: 10.5rem; padding: 0; border: 0; background: none; color: var(--coral); font-family: var(--body); transform: rotate(-12deg); filter: drop-shadow(0 .6rem .9rem rgba(36, 51, 59, .3)); transition: transform .2s ease; }
button.sale-sticker { cursor: pointer; }
button.sale-sticker:hover { transform: rotate(-7deg) scale(1.05); }
button.sale-sticker:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 50%; }
.sale-sticker__seal { position: absolute; inset: 0; width: 100%; height: 100%; }
.sale-sticker__ring { stroke: var(--paper); }
.sale-sticker__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; color: var(--ink); text-align: center; line-height: 1.05; }
.sale-sticker__arc { fill: var(--ink); font: 800 11.5px var(--body); letter-spacing: 1.1px; }
.sale-sticker__arc--small { font-size: 9.5px; letter-spacing: 1.4px; }
.sale-sticker__face { padding-top: .2rem; }
.sale-sticker__big { font: 700 2rem/1 var(--display); letter-spacing: -.02em; }
.sale-sticker__price { font-size: 1rem; font-weight: 700; }
.sale-sticker__price s { font-weight: 500; opacity: .65; }
.sale-sticker--hero { top: 3.2rem; left: -2.2rem; width: 11.5rem; height: 11.5rem; }
@media (min-width: 72rem) { .sale-sticker--hero { top: 9rem; left: -3.5rem; width: 12.5rem; height: 12.5rem; } .sale-sticker--hero .sale-sticker__big { font-size: 2.4rem; } .sale-sticker--hero .sale-sticker__price { font-size: 1.15rem; } }
.bundle-offer { position: relative; }
.sale-sticker--bundle { top: -3.4rem; right: 1.6rem; width: 8.2rem; height: 8.2rem; transform: rotate(10deg); }
.sale-sticker--bundle .sale-sticker__big { font-size: 1.35rem; }
.sale-sticker--bundle .sale-sticker__price { font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .sale-sticker { transition: none; } }
@media (max-width: 40rem) { .sale-sticker--hero { width: 9rem; height: 9rem; top: -1rem; left: .2rem; } .sale-sticker--hero .sale-sticker__big { font-size: 1.45rem; } .sale-sticker--hero .sale-sticker__price { font-size: .8rem; } .sale-sticker--bundle { top: -3.8rem; right: .6rem; width: 7rem; height: 7rem; } .sale-sticker--bundle .sale-sticker__big { font-size: 1.1rem; } .sale-sticker--bundle .sale-sticker__price { font-size: .64rem; } .bundle-offer { margin-top: 3.6rem; } }
