/*! Offer XAUBOT — front end */

/* The release this stylesheet belongs to. The script compares it with the
   release that drew the page and says so, in a preview, when a cache is still
   handing out an older one. Bump it with the plugin version. */
:root { --xpr-css: "1.5.4"; }


/* --------------------------------------------------------------------------
   Every class here is prefixed xpr-, and everything inside the two components
   re-asserts the handful of properties a theme most often sets directly on
   elements. A theme's `h2 { font-family }` beats anything inherited from a
   parent, so inheritance is asked for explicitly rather than assumed.
   -------------------------------------------------------------------------- */

.xpr-bar,
.xpr-veil {
  --xpr-accent: #00b894;
  --xpr-accent-soft: #8cf0cd;
  --xpr-ink: #0d222c;
  --xpr-ink-2: #14303c;
  --xpr-paper: #fff;
  --xpr-line: #dce9e6;
  --xpr-muted: #8ea3ad;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.xpr-bar *,
.xpr-bar *::before,
.xpr-bar *::after,
.xpr-veil *,
.xpr-veil *::before,
.xpr-veil *::after {
  box-sizing: border-box;
}

/* Two resets, on purpose.
 *
 * The first holds off the theme: a theme's `h2 { text-transform: uppercase }`
 * is set on the element, so it beats anything inherited, and it has to be
 * answered at the same kind of weight. Nothing below ever sets these, so
 * nothing below is harmed by it.
 *
 * The second - the spacing - is wrapped in :where(), which counts for nothing
 * in the cascade. Written the plain way it outranked every single-class rule
 * in this file and silently flattened the whole card. Each component sets its
 * own margin in full below, so there is nothing left for a theme to fill in.
 */
.xpr-bar h2, .xpr-bar h3, .xpr-bar p, .xpr-bar b, .xpr-bar strong, .xpr-bar span,
.xpr-bar s, .xpr-bar em, .xpr-bar i, .xpr-bar small, .xpr-bar a, .xpr-bar button,
.xpr-bar ul, .xpr-bar li,
.xpr-veil h2, .xpr-veil h3, .xpr-veil p, .xpr-veil b, .xpr-veil strong, .xpr-veil span,
.xpr-veil s, .xpr-veil em, .xpr-veil i, .xpr-veil small, .xpr-veil a, .xpr-veil button,
.xpr-veil ul, .xpr-veil li {
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: none;
  list-style: none;
  float: none;
  text-align: inherit;
}

:where(.xpr-bar, .xpr-veil) :where(h2, h3, p, b, strong, span, s, em, i, small,
  a, button, ul, ol, li, img, svg, div) {
  margin: 0;
  padding: 0;
}

:where(.xpr-bar, .xpr-veil) :where(img) { max-width: 100%; }
.xpr-bar [hidden], .xpr-veil [hidden] { display: none !important; }

/* The components themselves set display, which outranks the browser's own
   [hidden] rule - so a hidden veil would go on covering the screen and
   swallowing every click on the site. Say it explicitly. */
.xpr-bar[hidden], .xpr-veil[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.xpr-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 52px 11px 22px;
  background: linear-gradient(100deg, #0b1f29, #12525b 55%, #0f7a63);
  color: #fff;
  box-shadow: 0 2px 14px #05151c26;
  transform: translateY(-100%);
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}

.xpr-bar.xpr-in { transform: none; }

.xpr-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  width: 100%;
}

.xpr-bar-text {
  font-size: 15px;
  line-height: 1.45;
  color: #e7f6f2;
}

.xpr-bar-text strong, .xpr-bar-text b { color: #fff; font-weight: 750; }

.xpr-bar-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 17px;
  border-radius: 999px;
  background: var(--xpr-accent-soft);
  color: #06261d;
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  transition: box-shadow .18s, transform .18s;
}

.xpr-bar-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px #00000038;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--xpr-accent-soft) 65%, transparent),
    0 0 32px color-mix(in srgb, var(--xpr-accent-soft) 35%, transparent);
}

.xpr-bar-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #ffffff1f;
  color: #dff4ee;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.xpr-bar-close:hover { background: #ffffff33; color: #fff; }

/* --------------------------------------------------------------------------
   The box, and the dimmed page behind it
   -------------------------------------------------------------------------- */

.xpr-veil {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #041218d1;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .26s ease;
}

.xpr-veil.xpr-in { opacity: 1; }

.xpr-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 26px;
  transform: translateY(14px) scale(.985);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.xpr-w-wide { width: min(880px, 100%); }

.xpr-body { position: relative; z-index: 1; padding: 38px 40px 30px; }

/* Only the contents scroll. The card itself stays put, which is what keeps the
   close button on screen however long the offer runs. */
.xpr-scroll {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

/* picture beside the text: the widest arrangement, for a screenshot of results */
.xpr-lay-side .xpr-scroll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.xpr-lay-side .xpr-body { padding: 34px 36px 30px; }

/* picture across the top, banner style */
.xpr-lay-top .xpr-shot { height: 200px; }

.xpr-shot { position: relative; overflow: hidden; }
.xpr-shot img { display: block; width: 100%; height: 100%; }

/* Cropping suits a photo. A screenshot of results has to stay readable, so the
   whole of it is shown and the card gives it the room - which is why "show the
   whole picture" is the default. The panel is left transparent so the letterbox
   edges are simply the card. */
.xpr-fit-cover .xpr-shot { background: #0b1c24; }
.xpr-fit-cover.xpr-box-light .xpr-shot { background: #eef4f3; }
.xpr-fit-cover .xpr-shot img { object-fit: cover; }

.xpr-fit-contain .xpr-shot img { object-fit: contain; }

/* Beside the text, a whole picture is sized by the column and centred in it. */
.xpr-fit-contain.xpr-lay-side .xpr-shot { align-self: center; padding: 18px 0 18px 18px; }
.xpr-fit-contain.xpr-lay-side .xpr-shot img { height: auto; max-height: 76vh; }

/* Across the top, the strip grows to the picture instead of cropping it. */
.xpr-fit-contain.xpr-lay-top .xpr-shot { height: auto; }
.xpr-fit-contain.xpr-lay-top .xpr-shot img { height: auto; max-height: 34vh; }

.xpr-veil.xpr-in .xpr-box { transform: none; }

.xpr-box-dark {
  background: linear-gradient(155deg, #16323d, #0d222c 62%);
  border: 1px solid #ffffff14;
  color: #cfe0e4;
  box-shadow: 0 34px 90px #02101680;
}

.xpr-box-light {
  background: var(--xpr-paper);
  border: 1px solid var(--xpr-line);
  color: #46545e;
  box-shadow: 0 34px 90px #0a3d2e2e;
}

/* the optional picture, kept faint so the words stay readable */
.xpr-box::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background-image: var(--xpr-shot, none);
  background-size: cover;
  background-position: center;
  opacity: .16;
  border-radius: 0 0 26px 26px;
  pointer-events: none;
}


.xpr-box-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9fb4bb;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.xpr-box-light .xpr-box-close { color: #7d8e98; }
.xpr-box-close:hover { background: #ffffff1a; color: #fff; }
.xpr-box-light .xpr-box-close:hover { background: #0d222c0f; color: #0d222c; }

.xpr-box-title {
  margin: 0;
  font-size: 30px;
  font-weight: 780;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: #fff;
  padding-right: 34px;
}

.xpr-box-light .xpr-box-title { color: var(--xpr-ink); }

.xpr-box-text {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.xpr-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}

.xpr-price b {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--xpr-accent);
}

.xpr-price span { font-size: 19px; font-weight: 600; }
/* The line through the old price is the whole point of showing it, and the
   reset at the top of this file takes the line off every element to stop a
   theme underlining things. So it is put back here, and stated loudly, because
   plenty of themes take it off again. */
.xpr-price s {
  font-size: 19px;
  opacity: .62;
  /* the longhands have to shout as well: an important shorthand above would
     otherwise reset the thickness back to hairline */
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: currentColor !important;
  text-decoration-skip-ink: none !important;
}

/* In the bar the four tiles would make a 130px strip; inline pills keep it a bar. */
.xpr-bar .xpr-clock-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.xpr-bar .xpr-clock-bar .xpr-unit {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 9px;
  background: #ffffff1a;
  border-color: #ffffff2b;
}
.xpr-bar .xpr-clock-bar .xpr-unit b { display: inline; font-size: 15px; color: #fff; }
.xpr-bar .xpr-clock-bar .xpr-unit span { display: inline; margin: 0; font-size: 10.5px; color: #bfe3da; }

.xpr-bar .xpr-bar-short {
  display: none;
  padding: 5px 10px;
  border-radius: 9px;
  background: #ffffff1a;
  color: #fff;
  font-size: 13.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.xpr-clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 26px 0 0;
}

.xpr-unit {
  padding: 13px 6px 10px;
  border-radius: 14px;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  text-align: center;
}

.xpr-box-light .xpr-unit { background: #f5faf9; border-color: var(--xpr-line); }

.xpr-unit b {
  display: block;
  font-size: 27px;
  font-weight: 780;
  line-height: 1;
  color: var(--xpr-accent);
  font-variant-numeric: tabular-nums;
}

.xpr-unit span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--xpr-muted);
}

.xpr-box-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 26px 0 0;
  padding: 18px 24px;
  border-radius: 14px;
  background: var(--xpr-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 760;
  line-height: 1;
  transition: box-shadow .18s, transform .18s;
}

/* The buttons are links, and a theme's own `a:hover` outranks a plain class
   rule - which is how the label turned blue and underlined under the pointer,
   in the theme's link colour rather than anything this plugin asked for. So the
   lettering is stated for every state a link can be in, and stated loudly. The
   arrow follows, because it is drawn in the current colour. */
.xpr-box-cta,
.xpr-box-cta:link,
.xpr-box-cta:visited,
.xpr-box-cta:hover,
.xpr-box-cta:focus,
.xpr-box-cta:active {
  color: #fff !important;
  text-decoration: none !important;
}

/* A pale accent - a mint, a yellow - leaves white lettering unreadable, so on
   those the button is lettered in dark ink instead. Which one it gets is worked
   out from the colour itself when the page is built. */
.xpr-ink-dark .xpr-box-cta,
.xpr-ink-dark .xpr-box-cta:link,
.xpr-ink-dark .xpr-box-cta:visited,
.xpr-ink-dark .xpr-box-cta:hover,
.xpr-ink-dark .xpr-box-cta:focus,
.xpr-ink-dark .xpr-box-cta:active { color: #06261d !important; }

.xpr-bar-cta,
.xpr-bar-cta:link,
.xpr-bar-cta:visited,
.xpr-bar-cta:hover,
.xpr-bar-cta:focus,
.xpr-bar-cta:active {
  color: #06261d !important;
  text-decoration: none !important;
}

.xpr-box-cta2,
.xpr-box-cta2:link,
.xpr-box-cta2:visited,
.xpr-box-cta2:hover,
.xpr-box-cta2:focus,
.xpr-box-cta2:active { text-decoration: none !important; }

.xpr-cta2-outline,
.xpr-cta2-outline:link,
.xpr-cta2-outline:visited,
.xpr-cta2-outline:hover,
.xpr-cta2-outline:focus,
.xpr-cta2-outline:active { color: var(--xpr-accent) !important; }

/* the quiet one takes the card's own lettering, whatever the theme thinks */
.xpr-box-dark .xpr-cta2-link,
.xpr-box-dark .xpr-cta2-link:hover,
.xpr-box-dark .xpr-cta2-link:focus { color: #cfe0e4 !important; }

.xpr-box-light .xpr-cta2-link,
.xpr-box-light .xpr-cta2-link:hover,
.xpr-box-light .xpr-cta2-link:focus { color: #445a63 !important; }

/* Hover lights the button up rather than repainting it. Brightening the colour
   washed a mint accent out towards white, which read as the button changing
   colour under the pointer; a glow in the button's own colour says the same
   thing without touching it. The flat shadow on the first line is what older
   browsers use, the glow on the second replaces it wherever color-mix works. */
.xpr-box-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px #00000038;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--xpr-accent) 55%, transparent),
    0 0 46px color-mix(in srgb, var(--xpr-accent) 32%, transparent),
    0 14px 30px #00000026;
}

.xpr-box-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--xpr-muted);
}

.xpr-box-note svg { flex: none; }

/* --------------------------------------------------------------------------
   The bar leaves room for itself: the page is pushed down by its height, and
   so is anything the theme pinned to the top of the window.
   -------------------------------------------------------------------------- */

html.xpr-has-bar body { padding-top: var(--xpr-bar-h, 0px); }

/* Tablet width: the card narrows before the phone rules take over at 560px. */
@media (max-width: 720px) {
  .xpr-bar-text { font-size: 14px; }
  .xpr-bar-inner { gap: 8px 14px; }
  .xpr-box { border-radius: 22px; }
  .xpr-body, .xpr-lay-side .xpr-body { padding: 30px 26px 24px; }
  .xpr-box-title { font-size: 26px; }
  .xpr-box-text { font-size: 15px; }
  .xpr-price b { font-size: 44px; }
  .xpr-clock { gap: 8px; }
  .xpr-unit b { font-size: 23px; }
  .xpr-box-cta { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .xpr-bar, .xpr-veil, .xpr-box, .xpr-box-cta, .xpr-bar-cta { transition: none; }
}

/* --------------------------------------------------------------------------
   The tag above the headline, the list of points, and the second button
   -------------------------------------------------------------------------- */

.xpr-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--xpr-accent) 16%, transparent);
  color: var(--xpr-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.xpr-badge b { font-variant-numeric: tabular-nums; font-weight: 800; }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .xpr-badge { background: #00b8942b; }
}

.xpr-list { margin: 20px 0 0; }

.xpr-list-title {
  font-size: 15px;
  font-weight: 750;
  font-style: italic;
  margin: 0 0 8px;
  color: inherit;
}

.xpr-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.xpr-list li { margin: 0; }

.xpr-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}

.xpr-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xpr-accent);
}

.xpr-box-cta2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  margin: 14px 0 0;
  padding: 11px 16px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  opacity: .78;
  transition: opacity .18s, box-shadow .18s, color .18s, border-color .18s;
}

.xpr-box-cta2:hover { opacity: 1; }

.xpr-cta2-outline {
  border: 1.5px solid var(--xpr-accent);
  border-radius: 14px;
  color: var(--xpr-accent);
  opacity: 1;
  font-weight: 740;
  padding: 14px 18px;
}

.xpr-cta2-outline:hover {
  box-shadow: 0 6px 16px #00000026;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--xpr-accent) 40%, transparent),
    0 0 26px color-mix(in srgb, var(--xpr-accent) 22%, transparent);
}

@media (max-width: 760px) {
  /* Stacked, the two halves are simply one under the other. Left as a grid,
     the rows would be squeezed to fit the card's height and the picture cut in
     half; as blocks they keep their size and the card scrolls instead. */
  .xpr-lay-side .xpr-scroll { display: block; }

  /* A cropped picture becomes a strip across the top. A whole one is given the
     card's width and its own height, so the card scrolls rather than the
     picture losing its bottom half. */
  .xpr-fit-cover.xpr-lay-side .xpr-shot,
  .xpr-fit-cover.xpr-lay-top .xpr-shot { height: 150px; }

  .xpr-fit-contain.xpr-lay-side .xpr-shot,
  .xpr-fit-contain.xpr-lay-top .xpr-shot {
    align-self: stretch;
    height: auto;
    padding: 18px 18px 0;
  }
  .xpr-fit-contain.xpr-lay-side .xpr-shot img,
  .xpr-fit-contain.xpr-lay-top .xpr-shot img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 40vh;
    margin: 0 auto;
  }

  .xpr-list li, .xpr-list-title { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   The administrator's preview flag
   -------------------------------------------------------------------------- */

.xpr-preview-flag {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 100002;
  padding: 9px 15px;
  border-radius: 999px;
  background: #0d222cf2;
  color: #cfe9e1;
  border: 1px solid #ffffff24;
  font: 600 13px/1.3 Inter, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 10px 28px #04121840;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Phones. The card has to fit a short screen with the browser's own bars in
   the way, which is what dvh is for, and everything a thumb has to hit stays
   at least 44px tall.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .xpr-veil { padding: 16px; align-items: flex-end; }
  .xpr-box {
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 22px;
  }
  .xpr-w-wide { width: 100%; }

  /* Stacked, the two halves are simply one under the other. Left as a grid,
     the rows would be squeezed to fit the card's height and the picture cut in
     half; as blocks they keep their size and the card scrolls instead. */
  .xpr-lay-side .xpr-scroll { display: block; }
  .xpr-fit-cover.xpr-lay-side .xpr-shot,
  .xpr-fit-cover.xpr-lay-top .xpr-shot { height: 128px; }

  /* Stacked and whole: full card width, capped so it leaves room for the words.
     Written with both classes, because the rule it has to beat - the one that
     centres the picture in its own column - carries both, and a media query
     lends a rule no weight. Left at `center` here the picture would hang above
     the top of a stacked card and be cut off. */
  .xpr-fit-contain.xpr-lay-side .xpr-shot,
  .xpr-fit-contain.xpr-lay-top .xpr-shot {
    align-self: stretch;
    height: auto;
    padding: 14px 14px 0;
  }
  /* Height capped and width left to follow, so the picture keeps its shape
     instead of sitting in a letterbox of its own making. */
  .xpr-fit-contain.xpr-lay-side .xpr-shot img,
  .xpr-fit-contain.xpr-lay-top .xpr-shot img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 30vh;
    margin: 0 auto;
  }

  .xpr-body, .xpr-lay-side .xpr-body { padding: 26px 20px 22px; }

  .xpr-box-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .xpr-box-title { font-size: 23px; padding-right: 40px; }
  .xpr-box-text { font-size: 15px; margin-top: 12px; }
  .xpr-price { margin-top: 20px; gap: 8px; }
  .xpr-price b { font-size: 40px; }
  .xpr-price span, .xpr-price s { font-size: 16px; }

  .xpr-badge { font-size: 11px; padding: 6px 12px; margin-bottom: 14px; }
  .xpr-list { margin-top: 16px; }
  .xpr-list ul { gap: 6px; }

  .xpr-clock { gap: 6px; margin-top: 20px; }
  .xpr-unit { padding: 10px 4px 8px; border-radius: 12px; }
  .xpr-unit b { font-size: 21px; }
  .xpr-unit span { font-size: 10.5px; margin-top: 4px; }

  .xpr-box-cta { min-height: 52px; margin-top: 20px; padding: 15px 18px; font-size: 16px; }
  .xpr-box-cta2 { min-height: 44px; margin-top: 10px; font-size: 14.5px; }
  .xpr-box-note { font-size: 13px; margin-top: 12px; }

  /* the bar: one line of words, the button under it, nothing cramped */
  .xpr-bar { padding: 10px 50px 10px 14px; }
  .xpr-bar-inner { justify-content: flex-start; text-align: left; gap: 8px 12px; }
  .xpr-bar-text { font-size: 13.5px; }
  .xpr-bar-cta { min-height: 38px; padding: 9px 16px; }
  .xpr-bar-close { width: 40px; height: 40px; right: 6px; }
  /* the tiles give way to the one-line version, and the message keeps to two
     lines, so the bar stays a bar instead of a quarter of the screen */
  .xpr-bar .xpr-clock-bar .xpr-unit { display: none; }
  .xpr-bar-short { display: inline-block; }
  .xpr-bar-inner { flex-wrap: wrap; row-gap: 8px; }
  .xpr-bar-text {
    flex: 1 1 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .xpr-preview-flag { left: 10px; bottom: 10px; font-size: 12px; padding: 8px 13px; }
}

@media (max-width: 400px) {
  .xpr-veil { padding: 12px; }
  .xpr-box-title { font-size: 21px; }
  .xpr-price b { font-size: 34px; }
  .xpr-unit b { font-size: 18px; }
  .xpr-unit span { font-size: 9.5px; }
  .xpr-body, .xpr-lay-side .xpr-body { padding: 24px 16px 20px; }
  .xpr-fit-cover.xpr-lay-side .xpr-shot,
  .xpr-fit-cover.xpr-lay-top .xpr-shot { height: 112px; }
  .xpr-fit-contain.xpr-lay-side .xpr-shot img,
  .xpr-fit-contain.xpr-lay-top .xpr-shot img { max-height: 26vh; }

}

.xpr-preview-warn {
  max-width: min(520px, calc(100vw - 28px));
  padding: 12px 16px;
  border-radius: 14px;
  background: #7a1d1d;
  color: #ffe9e9;
  border-color: #ffffff3d;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
}

/* a short screen turned sideways: the picture is the first thing to go */
@media (max-height: 520px) {
  .xpr-lay-side .xpr-shot, .xpr-lay-top .xpr-shot { display: none; }
  .xpr-fit-contain .xpr-shot { display: none; }
  .xpr-veil { align-items: center; }
  .xpr-box { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}

/* The preview flag must not sit on top of the card it is describing. */
body:has(.xpr-preview-flag) .xpr-veil { padding-bottom: 64px; }

/* The card itself takes the focus when it opens, so a keyboard starts inside it
   and the first Tab reaches the close button - and no button wears a focus ring
   the moment the offer appears, which looked like a design rather than the
   keyboard aid it is. Buttons show the ring only when the keyboard is in use. */
.xpr-box:focus { outline: none; }

.xpr-box-cta:focus,
.xpr-box-cta2:focus,
.xpr-box-close:focus,
.xpr-bar-cta:focus,
.xpr-bar-close:focus { outline: none; }

.xpr-box-cta:focus-visible,
.xpr-box-cta2:focus-visible,
.xpr-box-close:focus-visible,
.xpr-bar-cta:focus-visible,
.xpr-bar-close:focus-visible {
  outline: 3px solid var(--xpr-accent);
  outline-offset: 3px;
}

.xpr-box-dark .xpr-box-cta:focus-visible,
.xpr-bar-cta:focus-visible,
.xpr-bar-close:focus-visible { outline-color: #ffffffa6; }



/* A theme rule like `svg { width: 100% !important }` turns a 20px arrow into a
   banner and the button around it into a billboard. Every icon here carries its
   own width and height, so sending them back to `auto` restores them - and this
   selector outranks a bare `svg` rule even when that rule shouts. */
.xpr-veil svg,
.xpr-bar svg {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  flex: none;
}

/* --------------------------------------------------------------------------
   The close buttons.

   The cross is drawn here rather than sent as an <svg>, because a theme rule
   like `svg { width: 100% !important }` is common and it turns the icon into a
   smear - which on a white card is a close button nobody can find. Two bars and
   a solid circle need nothing from the theme, and every size is stated outright
   so a stray rule cannot stretch them.
   -------------------------------------------------------------------------- */

.xpr-box-close,
.xpr-bar-close {
  z-index: 6 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  padding: 0 !important;
  border: 0;
  border-radius: 50% !important;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  line-height: 0;
}

.xpr-x {
  position: relative !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  flex: none;
}

.xpr-x::before,
.xpr-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  /* a custom property, because a theme rule on `span` can repaint currentColor */
  background: var(--xpr-x-ink, currentColor);
}

.xpr-x::before { transform: rotate(45deg); }
.xpr-x::after { transform: rotate(-45deg); }

/* on the card: a disc it can be seen against, whether it lands on words, on a
   picture or on a chart */
.xpr-box-close {
  --xpr-x-ink: #e7f2f0;
  background: #ffffff21 !important;
  box-shadow: 0 2px 10px #04121826;
}

.xpr-box-light .xpr-box-close {
  --xpr-x-ink: #33454f;
  background: #0d222c14 !important;
  box-shadow: none;
}

.xpr-box-close:hover { background: #ffffff3d !important; }
.xpr-box-light .xpr-box-close:hover { background: #0d222c26 !important; }

/* a picture can be any colour at all, so there it gets a solid backing */
.xpr-lay-side .xpr-box-close,
.xpr-lay-top .xpr-box-close {
  --xpr-x-ink: #fff;
  background: #0d222cd9 !important;
  box-shadow: 0 2px 12px #04121833;
}

.xpr-lay-side .xpr-box-close:hover,
.xpr-lay-top .xpr-box-close:hover { background: #0d222c !important; }

.xpr-bar-close {
  --xpr-x-ink: #eaf7f3;
  background: #ffffff26 !important;
}

.xpr-bar-close:hover { background: #ffffff45 !important; }

/* However the veil is padded - and in preview it is padded more, to clear the
   preview badge - the card is never taller than the room it has, or its top
   corner, and the close button in it, would sit above the screen. */
.xpr-veil > .xpr-box { max-height: 100%; }