/* The sale banner above the site header (main-site/templates/offers/parts/banner.php).
   Loaded only while a banner is live. */
.bfb { position: relative; z-index: 51; overflow: hidden; isolation: isolate; color: #fff; background: #0a0818; }
.bfb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(30% 260% at 6% 60%, rgba(255, 45, 63, .42), transparent 72%), radial-gradient(34% 300% at 62% -40%, rgba(104, 76, 255, .46), transparent 72%), radial-gradient(26% 240% at 98% 110%, rgba(255, 45, 63, .26), transparent 72%), linear-gradient(100deg, #100c22, #0a0818 55%, #0f0b24); }
.bfb::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 209, 102, .55) 22%, rgba(255, 90, 106, .55) 62%, transparent); }
/* Words on the left, the button on the right, and the counter halfway between them. */
.bfb-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; min-height: 92px; padding-block: 8px; }
.bfb-main { display: flex; align-items: center; gap: 14px; min-width: 0; color: #fff; }
.bfb-sticker { position: relative; flex: none; display: grid; place-content: center; justify-items: center; width: 76px; height: 76px; color: #3a1d00; line-height: 1; transform: rotate(-9deg); animation: bfb-sway 6s ease-in-out infinite; }
.bfb-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .45)); }
.bfb-sticker b, .bfb-sticker small { position: relative; }
.bfb-sticker b { font-size: 20px; font-weight: 800; letter-spacing: -.05em; }
.bfb-sticker small { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
@keyframes bfb-sway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(-3deg); } }
.bfb-words { display: grid; gap: 5px; min-width: 0; }
.bfb-title { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; background: linear-gradient(90deg, #fff0bd, #ffd166 52%, #ffa94d); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.bfb-sub { font-size: 14px; font-weight: 500; line-height: 1.3; color: #e4e6f2; }
.bfb-side { display: contents; }
.bfb-act { display: flex; flex: none; align-items: center; gap: 16px; }
.bfb-count { display: flex; flex: none; gap: 8px; }
.bfb-count:not(.is-on) { visibility: hidden; }
.bfb-tile { display: grid; justify-items: center; align-content: center; gap: 3px; width: 62px; height: 54px; border-radius: 11px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.bfb-tile b { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.bfb-tile small { font-size: 10.5px; font-weight: 500; line-height: 1; color: #c6cbdd; }
.bfb-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 20px; border-radius: 12px; background: linear-gradient(135deg, #ff3346, #dc1230); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -10px rgba(255, 34, 58, .95); font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.bfb-go:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 28px -10px rgba(255, 34, 58, 1); }
.bfb-go .ico { width: 16px; height: 16px; transition: transform .2s; }
.bfb-go:hover .ico { transform: translateX(3px); }
.bfb-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #cfd8dc; cursor: pointer; }
.bfb-close:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.bfb-close .ico { width: 13px; height: 13px; }
.bfb a:focus-visible, .bfb button:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
@media (max-width: 1100px) {
  .bfb-title { font-size: 21px; }
  .bfb-count { gap: 6px; }
  .bfb-tile { width: 54px; height: 50px; }
  .bfb-tile b { font-size: 18px; }
  .bfb-go { padding: 0 15px; }
  .bfb-act { gap: 12px; }
}
@media (max-width: 960px) {
  .bfb-in { flex-direction: column; align-items: stretch; padding-block: 12px 14px; }
  .bfb-main { padding-right: 40px; }
  .bfb-side { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .bfb-act { display: contents; }
  .bfb-close { position: absolute; top: 10px; right: 16px; }
}
@media (max-width: 430px) {
  .bfb-sticker { width: 62px; height: 62px; }
  .bfb-sticker b { font-size: 16px; }
  .bfb-sticker small { font-size: 7.5px; }
  .bfb-main { gap: 10px; }
  .bfb-title { font-size: 18px; }
  .bfb-sub { font-size: 13px; }
  .bfb-count { gap: 4px; }
  .bfb-tile { width: 44px; height: 46px; border-radius: 9px; }
  .bfb-tile b { font-size: 16px; }
  .bfb-tile small { font-size: 9.5px; }
  .bfb-go { flex: 1; height: 44px; padding: 0 10px; font-size: 14px; }
  .bfb-side { gap: 8px; }
}
@media (max-width: 360px) {
  .bfb-tile { width: 37px; }
  .bfb-go .ico { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bfb-sticker { animation: none; } .bfb-go, .bfb-go .ico { transition: none; } }

/* The other offers' banners: Black Friday is the look above, each of these changes its colours. */
.bfb-sticker.is-emoji { font-size: 50px; color: inherit; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .45)); }
.bfb.is-halloween::before { background: radial-gradient(32% 280% at 6% 60%, rgba(255, 122, 24, .5), transparent 72%), radial-gradient(38% 300% at 66% -40%, rgba(124, 58, 237, .55), transparent 72%), linear-gradient(90deg, #1a0d24, #120a1c); }
.bfb.is-halloween .bfb-title { background-image: linear-gradient(90deg, #ffd9a8, #ffa24c 55%, #ff7a18); }
.bfb.is-halloween .bfb-go { background: linear-gradient(135deg, #ff9a3d, #f76707); color: #241000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -10px rgba(247, 103, 7, .9); }
.bfb.is-halloween::after { background: linear-gradient(90deg, transparent, rgba(255, 162, 76, .6) 30%, rgba(167, 112, 255, .55) 66%, transparent); }
.bfb.is-christmas-sale::before { background: radial-gradient(32% 280% at 6% 60%, rgba(220, 38, 62, .5), transparent 72%), radial-gradient(40% 300% at 70% -40%, rgba(16, 163, 92, .5), transparent 72%), linear-gradient(90deg, #06231a, #071c17); }
.bfb.is-christmas-sale .bfb-title { background-image: linear-gradient(90deg, #fff6d8, #ffe08a 55%, #ffc94d); }
.bfb.is-christmas-sale::after { background: linear-gradient(90deg, transparent, rgba(255, 224, 138, .6) 30%, rgba(52, 211, 153, .5) 66%, transparent); }
.bfb.is-new-year-sale::before { background: radial-gradient(32% 280% at 6% 60%, rgba(250, 204, 21, .3), transparent 72%), radial-gradient(40% 300% at 68% -40%, rgba(59, 130, 246, .55), transparent 72%), linear-gradient(90deg, #0a1533, #0b1029); }
.bfb.is-new-year-sale .bfb-title { background-image: linear-gradient(90deg, #ffffff, #ffeaa3 55%, #facc15); }
.bfb.is-new-year-sale .bfb-go { background: linear-gradient(135deg, #fde047, #eab308); color: #231a00; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(234, 179, 8, .9); }
.bfb.is-new-year-sale::after { background: linear-gradient(90deg, transparent, rgba(250, 204, 21, .6) 30%, rgba(96, 165, 250, .55) 66%, transparent); }
.bfb.is-big-sale::before { background: radial-gradient(34% 280% at 6% 60%, rgba(255, 59, 92, .6), transparent 72%), radial-gradient(40% 300% at 68% -40%, rgba(219, 39, 119, .5), transparent 72%), linear-gradient(90deg, #2a0a1a, #1c0814); }
.bfb.is-big-sale .bfb-title { background-image: linear-gradient(90deg, #ffffff, #fff3a0 55%, #ffd60a); }
.bfb.is-big-sale .bfb-go { background: linear-gradient(135deg, #ffe14d, #ffc800); color: #2a1c00; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(255, 200, 0, .85); }
.bfb.is-big-sale::after { background: linear-gradient(90deg, transparent, rgba(255, 214, 10, .6) 30%, rgba(255, 90, 120, .55) 66%, transparent); }
@media (max-width: 430px) { .bfb-sticker.is-emoji { font-size: 42px; } }

/* On the Image Hover pages: its own pink on a dark plum, whichever offer is running. The button stays red. */
.bfb.is-image-hover { background: #1a0612; }
.bfb.is-image-hover::before { background: radial-gradient(34% 300% at 72% -60%, rgba(239, 65, 122, .5), transparent 72%), radial-gradient(30% 260% at 4% 60%, rgba(239, 65, 122, .28), transparent 72%), linear-gradient(90deg, #1a0612, #2a0a1e 55%, #36102a); }
.bfb.is-image-hover::after { background: linear-gradient(90deg, transparent, rgba(239, 65, 122, .75) 30%, rgba(255, 150, 185, .7) 66%, transparent); }
.bfb.is-image-hover .bfb-title { background-image: linear-gradient(90deg, #ffffff, #ffd3e2 60%, #ff8fb5); }
.bfb.is-image-hover .bfb-sub { color: #f6e3ec; }
.bfb.is-image-hover a:focus-visible, .bfb.is-image-hover button:focus-visible { outline-color: #ff8fb5; }
/* On the Flipbox pages: its own teal on a dark green, whichever offer is running. The button stays red. */
.bfb.is-flipbox { background: #04201f; }
.bfb.is-flipbox::before { background: radial-gradient(34% 300% at 72% -60%, rgba(50, 188, 181, .5), transparent 72%), radial-gradient(30% 260% at 4% 60%, rgba(50, 188, 181, .24), transparent 72%), linear-gradient(90deg, #04201f, #062c2a 55%, #0a3836); }
.bfb.is-flipbox::after { background: linear-gradient(90deg, transparent, rgba(50, 188, 181, .75) 30%, rgba(127, 232, 225, .7) 66%, transparent); }
.bfb.is-flipbox .bfb-title { background-image: linear-gradient(90deg, #ffffff, #c9f5f1 60%, #7fe8e1); }
.bfb.is-flipbox .bfb-sub { color: #e1f4f2; }
.bfb.is-flipbox a:focus-visible, .bfb.is-flipbox button:focus-visible { outline-color: #7fe8e1; }
/* On the ThankRedirect pages: its own blue on a dark navy, whichever offer is running. The button stays red. */
.bfb.is-thank-redirect { background: #04152e; }
.bfb.is-thank-redirect::before { background: radial-gradient(34% 300% at 72% -60%, rgba(43, 136, 242, .55), transparent 72%), radial-gradient(30% 260% at 4% 60%, rgba(43, 136, 242, .26), transparent 72%), linear-gradient(90deg, #04152e, #06214a 55%, #0a2c63); }
.bfb.is-thank-redirect::after { background: linear-gradient(90deg, transparent, rgba(43, 136, 242, .8) 30%, rgba(143, 196, 255, .7) 66%, transparent); }
.bfb.is-thank-redirect .bfb-title { background-image: linear-gradient(90deg, #ffffff, #d3e7ff 60%, #8fc4ff); }
.bfb.is-thank-redirect .bfb-sub { color: #e3edfb; }
.bfb.is-thank-redirect a:focus-visible, .bfb.is-thank-redirect button:focus-visible { outline-color: #8fc4ff; }
/* Where Get the deal lands on a pricing page, clear of the header, also when the big section is off. */
#pricing-table { display: block; scroll-margin-top: 92px; }
/* These pages have a fixed header over the page. With a banner it follows the banner down and stays at
   the top when scrolling, and the page keeps its place under it. */
.ox-has-banner #site-header { position: sticky; }
.ox-has-banner #site-header + :not(.ox-hero):not(style):not(script), .ox-has-banner #site-header + style + :not(.ox-hero):not(style):not(script) { margin-top: calc(-1 * var(--ox-head, 64px)); }

/* On the Shop Manager pages: Shop Manager's navy and sky, whichever offer is running. The button stays red. */
.bfb.is-shop-manager { background: #050038; }
.bfb.is-shop-manager::before { background: radial-gradient(34% 300% at 72% -60%, rgba(0, 172, 245, .5), transparent 72%), radial-gradient(30% 260% at 4% 60%, rgba(0, 172, 245, .22), transparent 72%), linear-gradient(90deg, #050038, #080056 55%, #0a0070); }
.bfb.is-shop-manager::after { background: linear-gradient(90deg, transparent, rgba(0, 172, 245, .7) 30%, rgba(92, 203, 255, .7) 66%, transparent); }
.bfb.is-shop-manager .bfb-title { background-image: linear-gradient(90deg, #ffffff, #bfeaff 60%, #5ccbff); }
.bfb.is-shop-manager .bfb-sub { color: #e2e6ff; }
.bfb.is-shop-manager a:focus-visible, .bfb.is-shop-manager button:focus-visible { outline-color: #5ccbff; }