/* Sitewide sale strip — the first thing on every page while the sale is on.
   Sticky above the site's own sticky bars, which step down by its measured
   height (--wr-sale-h, set by site-sale.js) so nothing slides under it.
   Sits UNDER every dialog: the checkout (z 1300), the order page (99999).
   Palette is the site's own: deep navy ground, a sand pill for the figure. */
#wr-sale{display:none;position:sticky;top:0;z-index:201;box-sizing:border-box;width:100%;
  align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;
  padding:8px 16px;min-height:46px;
  background:linear-gradient(90deg,#0A1A2F 0%,#14294A 55%,#0A1A2F 100%);color:#fff;
  font-family:'Rubik',sans-serif;font-weight:500;line-height:1.3;text-align:center;
  border-bottom:1px solid rgba(230,203,168,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 18px rgba(10,26,47,.22);
  -webkit-font-smoothing:antialiased}
html.wr-sale-on #wr-sale{display:flex}
#wr-sale[hidden]{display:none!important}
#wr-sale .wr-sale-main{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:.1px;white-space:nowrap}
#wr-sale .wr-sale-pct{display:inline-block;padding:4px 11px;border-radius:999px;
  background:linear-gradient(135deg,#F5DDBB 0%,#E6CBA8 55%,#D8B78B 100%);color:#0A1A2F;
  font-size:17px;font-weight:800;letter-spacing:.2px;line-height:1.15;
  box-shadow:0 2px 10px rgba(230,203,168,.32)}
#wr-sale .wr-sale-until{font-size:13.5px;font-weight:400;color:rgba(255,255,255,.72);white-space:nowrap;
  padding-inline-start:14px;border-inline-start:1px solid rgba(255,255,255,.16)}
#wr-sale .wr-sale-timer{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;margin-inline-start:4px}
#wr-sale .wr-sale-timer small{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.72)}
#wr-sale .wr-sale-clock{display:inline-flex;align-items:center;gap:3px;direction:ltr;unicode-bidi:isolate}
#wr-sale .wr-sale-clock b{display:inline-block;min-width:2.3ch;padding:3px 6px;border-radius:7px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  letter-spacing:.5px;line-height:1.2;text-align:center}
#wr-sale .wr-sale-clock i{font-style:normal;font-weight:700;font-size:14px;line-height:1;color:rgba(255,255,255,.45)}
#wr-sale .wr-sale-fine{font-size:12px;font-weight:400;color:rgba(255,255,255,.55);white-space:nowrap;flex-basis:100%;margin-top:-2px}
@media (min-width:900px){#wr-sale .wr-sale-fine{flex-basis:auto;margin-top:0;padding-inline-start:14px;border-inline-start:1px solid rgba(255,255,255,.16)}}
/* Phone: two rows — the offer and its clock, then when and the exception. */
@media (max-width:560px){
  #wr-sale{gap:4px 10px;padding:7px 12px}
  #wr-sale .wr-sale-main{font-size:14.5px;gap:8px}
  #wr-sale .wr-sale-pct{font-size:15px;padding:3px 9px}
  #wr-sale .wr-sale-timer{order:1;margin:0;gap:6px}
  #wr-sale .wr-sale-clock b{font-size:13.5px;padding:2px 5px;min-width:2.2ch}
  #wr-sale .wr-sale-until{order:2;font-size:12px;padding:0;border:0}
  #wr-sale .wr-sale-fine{order:3;font-size:12px;flex-basis:auto;margin:0}
  #wr-sale .wr-sale-fine::before{content:'·';margin-inline-end:8px;opacity:.7}
}
@media (max-width:400px){#wr-sale .wr-sale-timer small{display:none}}
/* The site's own sticky bars step down under the strip while it is on.
   Not the plan page's .rp-topbar: #results-page[data-dest] > * makes it
   position:relative, so a `top` there is a physical shift, not a sticky
   offset — it opened a strip-high gap of background above the bar. */
html.wr-sale-on nav,html.wr-sale-on .fp-topbar{top:var(--wr-sale-h,0px)}
@media print{#wr-sale{display:none!important}}