/**
 * Skincare refresh — the round of notes on the mylo/ponio pair.
 *
 * The composition is not touched: this layer only changes what was called out.
 *
 *  - the mojchatbot footer inside the open panel was a coloured band; it now
 *    reads as part of the panel instead of a stripe across it
 *  - supporting copy sat at ~50% ink and disappeared against the paper
 *  - the status left the middle of the header bar and became a live signal
 *  - chips take the coffee behaviour: tint plus edge, no radial fill
 *  - the figures block and the price column replace the three-step path and
 *    the old plan summary
 */

/* ==========================================================================
   1. Panel footer — no coloured stripe
   ========================================================================== */

.cx-widget-note {
  border-top: 1px solid color-mix(in srgb, var(--cx-line) 62%, transparent);
  background: var(--cx-paper);
  color: color-mix(in srgb, var(--cx-ink) 60%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .01em;
}
.cx-widget-note a { color: color-mix(in srgb, var(--cx-ink) 72%, transparent); }
.cx-widget-note a:hover { color: var(--cx-ink); }

/* ==========================================================================
   2. Supporting copy — readable, not decorative
   ========================================================================== */

.cx-option-copy small,
.cx-advisor-entry > div > em,
.cx-advisor-entry small {
  color: color-mix(in srgb, var(--cx-ink) 74%, transparent) !important;
}
.cx-progress > b { color: color-mix(in srgb, var(--cx-ink) 70%, transparent); }
.cx-product-copy p { color: color-mix(in srgb, var(--cx-ink) 76%, transparent); }
.cx-alt small { color: color-mix(in srgb, var(--cx-ink) 68%, transparent); }
.cx-result-note { color: color-mix(in srgb, var(--cx-ink) 64%, transparent); font-size: 9.6px; }
.cx-owner-copy p { color: color-mix(in srgb, var(--cx-ink) 74%, transparent); }
.cx-owner-foot { color: color-mix(in srgb, var(--cx-ink) 62%, transparent); }
.cx-teaser span { color: color-mix(in srgb, var(--cx-ink) 70%, transparent); }
.cx-composer input::placeholder { color: color-mix(in srgb, var(--cx-ink) 58%, transparent) !important; }

/* ==========================================================================
   3. Status — out of the middle, and alive
   ========================================================================== */

/* The head rule matched every direct span, so the wordmark inherited the
   divider and the faded ink meant for the status. */
.cx-widget-brand {
  display: grid !important;
  align-content: center;
  justify-items: start;
  gap: 3px;
}
.cx-widget-brand > span.cx-wordmark {
  padding-left: 0 !important;
  border-left: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.cx-widget-brand > span.cx-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 0 !important;
  border-left: 0 !important;
  color: color-mix(in srgb, #fff 78%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}
.cx-widget-brand > span.cx-status i {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ddb92;
  box-shadow: 0 0 7px 1px rgba(77, 219, 146, .85);
  animation: cx-pulse 2.1s ease-in-out infinite;
}
/* The ring travels outward so the signal reads as live rather than decorative. */
.cx-widget-brand > span.cx-status i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid rgba(77, 219, 146, .75);
  border-radius: 50%;
  animation: cx-ping 2.1s cubic-bezier(.2, .76, .24, 1) infinite;
}
@keyframes cx-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 7px 1px rgba(77, 219, 146, .85); }
  50% { opacity: .74; box-shadow: 0 0 12px 2px rgba(77, 219, 146, .55); }
}
@keyframes cx-ping {
  0% { transform: scale(.7); opacity: .85; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-widget-brand > span.cx-status i,
  .cx-widget-brand > span.cx-status i::after { animation: none; }

}

/* ==========================================================================
   4. Chips — the coffee behaviour
   ========================================================================== */

/* Tint and edge, both in one step. The radial fill took 1.12 s, so the label
   spent most of a second sitting half on the wash and half off it. */
.cx-chip {
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cx-ink) 17%, transparent) !important;
  background-image: none !important;
  background-size: auto !important;
  background-color: var(--cx-paper) !important;
  color: var(--cx-ink) !important;
  font-size: 12px;
  font-weight: 700;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .cx-chip:hover,
  .cx-chip:focus-visible {
    background-image: none !important;
    background-size: auto !important;
    background-color: color-mix(in srgb, var(--cx-accent) 13%, var(--cx-paper)) !important;
    border-color: color-mix(in srgb, var(--cx-accent) 68%, transparent) !important;
    color: var(--cx-ink) !important;
    transform: translateY(-1px);
  }

}
.cx-chip:active { transform: none; }

/* ==========================================================================
   5. Figures block (replaces the three-step path)
   ========================================================================== */

@media (min-width: 761px) {
  /* Copy on the left — headline, lead, the two buttons. The brand's own
     photograph fills the right half and the three figures run under it as one
     thin strip, so the left column reads as a page rather than a stack. */
  .cx-owner-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, .86fr) !important;
    align-items: center;
    padding: clamp(10px, 1.6vh, 16px) 0 clamp(8px, 1.2vh, 12px);
  }
  .cx-owner-copy h1 { font-size: clamp(32px, 3.3vw, 47px); max-width: 15ch; line-height: 1.02; }
  .cx-owner-copy p { max-width: 44ch; margin-top: clamp(10px, 1.5vh, 15px); font-size: 14px; }
  .cx-owner-actions { margin-top: clamp(14px, 2vh, 20px); }

  .cx-owner-frame {
    min-width: 0;
    align-self: stretch;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(9px, 1.3vh, 13px);
  }
  .cx-owner-visual { min-height: 0; height: 100%; }
  .cx-owner-visual img { width: 100%; height: 100%; object-fit: cover; }

}

/* The strip above the photograph: three figures on one line, the number and
   its label side by side. It sits over the picture rather than under it —
   below, it ran into the invitation fixed to the bottom-right corner. */
.cx-owner-figures {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: baseline;
  gap: clamp(8px, 1.1vw, 16px);
  padding-bottom: clamp(7px, 1vh, 10px);
  border-bottom: 1px solid var(--cx-line);
}
.cx-owner-figures > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.cx-owner-figures > div + div {
  padding-left: clamp(8px, 1.1vw, 16px);
  border-left: 1px solid color-mix(in srgb, var(--cx-line) 76%, transparent);
}
.cx-owner-figures strong {
  color: var(--cx-brand);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.cx-owner-figures b {
  min-width: 0;
  font-size: 10.6px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: color-mix(in srgb, var(--cx-ink) 72%, transparent);
}
@media (max-width: 760px) { .cx-owner-figures { display: none; } 
}

@media (max-width: 760px) {
  .cx-owner-figures { margin-top: 16px; }
  .cx-owner-figures > div { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
  .cx-owner-figures b { font-size: 12px; }
  .cx-owner-figures small { font-size: 9.6px; }

}

/* ==========================================================================
   8. Launcher — the colour swaps at once, and the mark is readable
   ========================================================================== */

/* The wave took 0.92 s to cross the disc, so most of a hover was spent with the
   mark sitting on two colours. */
.cx-launcher-button {
  background-image: none !important;
  background-size: auto !important;
  border: 0 !important;
  transition: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .cx-launcher-button:hover {
    background-image: none !important;
    background-size: auto !important;
    background-color: var(--cx-accent) !important;
    transform: none !important;
  }
  .cx-launcher-button:hover .cx-wordmark {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transform: scale(.92) !important;
    transition: none !important;
  }

}
.cx-launcher-button .cx-wordmark {
  max-width: 74px !important;
  font-size: 15px !important;
  transform: scale(.92) !important;
  transition: none !important;
}
.cx-launcher-button .cx-wordmark--mylo { font-size: 23px !important; }
/* Nine letters, not four: at 23 px the disc cut the name to "Bellcori". */
.cx-launcher-button .cx-wordmark--bellcoria { font-size: 13px !important; }
.cx-launcher-button .cx-wordmark--anemone { font-size: 11px !important; }

/* The decorative glyph in front of a wordmark was a 25 px disc that kept its
   size wherever the wordmark shrank — inside the header, the launcher and the
   message avatar it came out as a clipped half-circle. The wordmarks stand on
   their own. */
.cx-wordmark i { display: none !important; }

/* ==========================================================================
   10. Phones
   ========================================================================== */

/* The desktop hero is two columns and the offer is a two-column panel on the
   left half. Both were written with !important to get past the older layers,
   which also overrode the stylesheet's own phone rules — the headline ran under
   the figures and the offer covered the buttons. A phone gets the single column
   the original design had, and the figures step aside: the copy, the two
   buttons and the price are what has to fit. */
@media (max-width: 760px) {
  .cx-owner-figures { display: none !important; }
  /* The offer row was a fixed 64 px, so the third benefit was cut off. It takes
     the height it needs and the hero absorbs the rest. */
  .cx-owner { grid-template-rows: 64px minmax(0, 1fr) auto 32px !important; }
  .cx-owner-hero { align-content: center; }

}

/* ==========================================================================
   11. Result — say what it matched and why
   ========================================================================== */

/* The coffee result names the notes it was picked for and sets the reason apart
   under a label. The skincare result had the reason as an unmarked paragraph
   and nothing about the match at all. */
.cx-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 7px 0 0;
}
.cx-product-tags span {
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--cx-ink) 14%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--cx-ink) 74%, transparent);
  font-size: 9.6px;
  font-weight: 700;
  white-space: nowrap;
}
.cx-why {
  margin: 9px 0 0;
  padding: 10px 12px 11px;
  border-left: 3px solid var(--cx-accent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--cx-accent) 7%, var(--cx-paper));
}
.cx-why small {
  display: block;
  color: var(--cx-accent);
  font-size: 8.8px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.cx-why p {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--cx-ink) 80%, transparent);
  font-size: 11px;
  line-height: 1.42;
}

/* ==========================================================================
   12. Drawn answers
   ========================================================================== */

/* Where an answer is a concept rather than a thing, the card carries a drawn
   mark on the brand's soft ground instead of a photograph borrowed from an
   earlier step. */
.cx-option-photo--mark {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 110% at 50% 12%, color-mix(in srgb, var(--cx-accent) 11%, transparent), transparent 68%),
    color-mix(in srgb, var(--cx-soft) 74%, var(--cx-paper)) !important;
  color: color-mix(in srgb, var(--cx-brand) 78%, transparent);
}
.cx-option-photo--mark .cx-mark {
  width: 58%;
  max-width: 96px;
  height: auto;
}
.cx-option.is-selected .cx-option-photo--mark { color: var(--cx-accent); }

/* ==========================================================================
   15. Motion — a step should arrive, not appear
   ========================================================================== */

/* The four answers were written into the panel in one go and the progress bar
   changed colour in the same frame, so a step read as a jump. The answers come
   in one after another, the step that is leaving steps aside first, and the
   progress fills rather than switches. */
.cx-advisor-body {
  transition: opacity .19s ease, transform .19s ease;
}
.cx-advisor-body.is-leaving {
  opacity: 0;
  transform: translateX(-12px);
}

.cx-option {
  opacity: 0;
  animation: cx-option-in .34s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--cx-reveal, 0ms);
}
@keyframes cx-option-in {
  from { opacity: 0; transform: translateY(9px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* The mark is present from the start so it can grow into place instead of
   being inserted under the pointer. */
.cx-option > i {
  transform: scale(.4);
  opacity: 0;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .16s ease,
              background-color .18s ease, color .18s ease;
}
.cx-option.is-selected > i {
  transform: none;
  opacity: 1;
  background: var(--cx-accent) !important;
  color: #fff !important;
}
.cx-option[disabled]:not(.is-selected) { opacity: .45; }
.cx-option { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .2s ease; }

/* A bar that fills reads as progress; one that changes colour reads as a jump. */
.cx-progress > div i {
  background-image: linear-gradient(var(--cx-accent), var(--cx-accent));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .42s cubic-bezier(.22, 1, .36, 1);
}
.cx-progress > div i.is-on { background-size: 100% 100% !important; }

@media (prefers-reduced-motion: reduce) {
  .cx-option, .cx-advisor-body, .cx-progress > div i { animation: none !important; transition: none !important; opacity: 1; }

}

/* The offer row was fixed at 126 px, which was enough for 15 px figures and is
   not enough for the price the card is now built around. */
.cx-owner { grid-template-rows: 72px minmax(0, 1fr) auto 40px; }
@media (max-width: 760px) { .cx-owner { grid-template-rows: 64px minmax(0, 1fr) auto 32px !important; } 
}

/* The strip over the photograph was set to match the old card. */
.cx-owner-figures strong { font-size: clamp(17px, 1.5vw, 22px); }
.cx-owner-figures b { font-size: 12px; }
.cx-owner-kicker { text-transform: uppercase; font-size: 10.5px !important; letter-spacing: .15em; }

/* ==========================================================================
   20. The conversation is set at the coffee pages' size
   ========================================================================== */

/* The skincare bubble was 13.5 px against the coffee family's 15.5 px, and the
   composer 13 px. The two runtimes are shown side by side to the same client. */
.cx-bubble { font-size: 15px !important; line-height: 1.5 !important; }
.cx-chip { font-size: 13.6px !important; }
#cx-input { font-size: 14.5px !important; }
#cx-input::placeholder { font-size: 14px; }
.cx-advisor-entry > div > b { font-size: 14.5px !important; }
.cx-advisor-entry > div > em { font-size: 11.5px !important; }
.cx-advisor-entry > div > small { font-size: 10px !important; }
.cx-widget-note { font-size: 11px !important; }

/* ==========================================================================
   21. "Chcem to na svoj web" says what the offer is before it asks
   ========================================================================== */

/* display:grid overrides what the hidden attribute does, so a closed sheet
   stayed on top of the page and swallowed every click on the header. */
.cx-offer[hidden] { display: none; }
.cx-offer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vh, 40px);
  background: color-mix(in srgb, var(--cx-ink) 46%, transparent);
  backdrop-filter: blur(3px);
  animation: cx-offer-in .18s ease-out;
}
@keyframes cx-offer-in { from { opacity: 0 } to { opacity: 1 } }
.cx-offer-card {
  position: relative;
  width: min(520px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(24px, 3.4vh, 34px) clamp(24px, 2.6vw, 36px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px -30px rgba(18, 22, 20, .5);
}
.cx-offer-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--cx-ink) 7%, transparent);
  color: var(--cx-ink);
  font-size: 19px; line-height: 1;
  cursor: pointer;
}
.cx-offer-close:hover { background: color-mix(in srgb, var(--cx-ink) 13%, transparent); }
.cx-offer-kicker {
  display: block;
  color: color-mix(in srgb, var(--cx-ink) 48%, transparent);
  font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
}
.cx-offer-card h2 {
  margin: 7px 0 clamp(15px, 2.2vh, 21px);
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.15;
  letter-spacing: -.03em;
}
.cx-offer-card ul { display: grid; gap: clamp(9px, 1.3vh, 13px); margin: 0; padding: 0; list-style: none; }
.cx-offer-card li { display: flex; gap: 11px; align-items: flex-start; }
.cx-offer-card li svg {
  width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px;
  padding: 3.5px; border-radius: 50%;
  color: #fff; background: var(--cx-brand);
}
.cx-offer-card li b { display: block; font-size: 13px; letter-spacing: -.012em; }
.cx-offer-card li small {
  display: block; margin-top: 2px;
  color: color-mix(in srgb, var(--cx-ink) 62%, transparent);
  font-size: 11.4px; line-height: 1.35;
}
.cx-offer-price {
  margin: clamp(16px, 2.4vh, 22px) 0 clamp(15px, 2.2vh, 20px);
  padding-top: clamp(14px, 2vh, 18px);
  border-top: 1px solid var(--cx-line);
}
.cx-offer-price > b {
  display: inline-flex; padding: 4px 10px; border-radius: 7px;
  background: var(--cx-accent); color: #fff; font-size: 9.8px; font-weight: 800;
}
.cx-offer-price p {
  display: flex; align-items: baseline; gap: 7px; margin: 10px 0 0;
  font-variant-numeric: tabular-nums;
}
.cx-offer-price strong { font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.cx-offer-price span { font-size: 11.5px; color: color-mix(in srgb, var(--cx-ink) 56%, transparent); }
.cx-offer-price i { font-style: normal; color: color-mix(in srgb, var(--cx-ink) 34%, transparent); }
.cx-offer-price small {
  display: block; margin-top: 9px;
  color: color-mix(in srgb, var(--cx-ink) 52%, transparent);
  font-size: 11px; line-height: 1.4;
}
.cx-offer-cta {
  display: inline-flex; width: 100%; justify-content: center; align-items: center; gap: 8px;
  min-height: 46px; border-radius: 999px;
  background: var(--cx-brand); color: #fff;
  font-size: 13px; font-weight: 800; text-decoration: none;
}
.cx-offer-cta svg { width: 15px; height: 15px; }
body.cx-offer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .cx-offer { animation: none; } 
}

/* ------------------------------------------------------------------ 22. real logos
   The first six brands were set as drawn wordmarks. A brand that has a logo
   worth showing drops an <img> into the same slot, and it has to answer to the
   four places the wordmark does: the owner header, the widget header, the chat
   avatar and the launcher. The last two sit on the brand colour, so the mark
   goes white there the way the coffee launcher does. */
.cx-logo {
  display: block; width: auto; height: auto;
  max-width: 168px; max-height: 34px;
  object-fit: contain; object-position: left center;
}
.cx-owner-brand .cx-logo { max-height: clamp(30px, 4.4vh, 42px); }
/* The widget header is painted in the brand colour, not white, so a logo in
   the brand's own ink disappears into it the way Barbora Lori's did. */
.cx-widget-brand .cx-logo {
  max-width: 118px; max-height: 25px;
  filter: brightness(0) invert(1);
}
/* The wordmark rules above these two are !important, and a wide logo held to
   their width runs to the edge of the disc. */
.cx-message-avatar .cx-logo,
.cx-launcher-button .cx-logo {
  object-position: center;
  filter: brightness(0) invert(1);
}
.cx-launcher-button .cx-logo { max-width: 46px !important; max-height: 20px !important; }
.cx-message-avatar .cx-logo { max-width: 24px !important; max-height: 14px !important; }

@media (max-width: 720px) {
  .cx-owner-brand .cx-logo { max-width: 130px; max-height: 28px; }

}

/* ==========================================================================
   Price
   ==========================================================================
   Three passes had layered a badge, a "CENA" label and three benefit slogans
   over each other, and the strip repeated "Bez viazanosti, vypnúť sa dá
   kedykoľvek." twice in the same block. It is one panel now, the same one the
   coffee pages carry: each sum says what it buys, the terms sit beside them and
   the reply button is next to the number. It stops short of the right edge so
   it does not run under the invitation fixed to that corner. */
.cx-owner { grid-template-rows: 72px minmax(0, 1fr) auto 40px !important; }
.cx-owner-offer { min-width: 0; width: max-content; max-width: 100%; padding: 0 0 clamp(8px, 1.2vh, 14px); }
.cx-price {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: clamp(13px, 1.7vw, 24px);
  align-items: center;
  padding: clamp(14px, 2vh, 20px) clamp(17px, 1.8vw, 26px);
  border-radius: 18px;
  background: color-mix(in srgb, var(--cx-soft) 82%, #fff);
}
.cx-price-sum { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 9px; row-gap: 5px; }
.cx-price-sum b { font-size: clamp(22px, 2vw, 29px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--cx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-price-sum span { color: color-mix(in srgb, var(--cx-ink) 58%, transparent); font-size: 11.5px; font-weight: 600; }
.cx-price-sum small { grid-column: 1 / -1; max-width: 23ch; color: color-mix(in srgb, var(--cx-ink) 58%, transparent); font-size: 11.2px; line-height: 1.35; }
.cx-price-terms {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(12px, 1.5vw, 20px); row-gap: 4px;
  padding-left: clamp(15px, 2.1vw, 30px);
  border-left: 1px solid color-mix(in srgb, var(--cx-ink) 12%, transparent);
}
.cx-price-terms b { grid-column: 1; white-space: nowrap; font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--cx-accent); }
.cx-price-terms p { grid-column: 1; margin: 0; white-space: nowrap; color: color-mix(in srgb, var(--cx-ink) 58%, transparent); font-size: 11.2px; line-height: 1.35; }
.cx-price-terms a {
  grid-column: 2; grid-row: 1 / 3; align-self: center;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--cx-accent); color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}
.cx-price-terms a:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--cx-accent) 90%, #000); }
.cx-price-terms a svg { width: 15px; height: 15px; }

/* Narrower than this the three columns cannot both hold the terms and stay
   clear of the invitation in the corner, so the terms take a row of their own.
   The reserved strip on the right is the width of that invitation. */
@media (max-width: 1180px) {
  .cx-owner-offer { max-width: calc(100% - 300px); }
  .cx-price { grid-template-columns: auto auto; gap: 10px clamp(15px, 2.2vw, 28px); }
  .cx-price-sum small { display: none; }
  .cx-price-terms { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--cx-ink) 12%, transparent); }
  .cx-price-terms p { max-width: none; }
}
@media (max-width: 760px) {
  .cx-owner-offer { width: auto; max-width: 100%; }
  .cx-price { gap: 9px 18px; padding: 12px 14px; border-radius: 14px; }
  .cx-price-terms p { font-size: 10.6px; }
  .cx-price-sum b { font-size: 21px; }
  .cx-price-terms a { min-height: 38px; padding: 0 13px; font-size: 11px; }
}

/* ==========================================================================
   The reworked hero
   ==========================================================================
   The same pass the coffee pages had: the headline sat low with an empty band
   above it, the invitation in the corner covered the picture, and the page
   never said what the owner keeps — the conversation history among it. */
.cx-owner-hero { align-items: stretch !important; }
.cx-owner-copy {
  align-self: stretch !important; min-height: 0;
  display: flex !important; flex-direction: column; padding-top: clamp(2px, .8vh, 10px);
}
/* A serif headline over the sans body — warmer than one grotesque doing both. */
.cx-owner-copy h1 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 600 !important; letter-spacing: -.018em !important; line-height: 1.06 !important;
  max-width: 17ch !important; font-size: clamp(30px, 3.05vw, 44px) !important;
}
.cx-owner-kicker { letter-spacing: .17em; }
.cx-owner-copy > p { max-width: 46ch; font-size: 14.5px; line-height: 1.58; }

.cx-keeps {
  margin: clamp(20px, 3.4vh, 38px) 0 0; padding: clamp(17px, 2.6vh, 26px) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 1.5vh, 15px) clamp(18px, 2.2vw, 34px);
  max-width: 52ch; list-style: none; border-top: 1px solid var(--cx-line);
}
.cx-keeps li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 11px; align-items: start; }
.cx-keeps svg { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 6px; color: var(--cx-accent); }
.cx-keeps b { display: block; font-size: 13.2px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.cx-keeps small { display: block; margin-top: 3px; color: color-mix(in srgb, var(--cx-ink) 58%, transparent); font-size: 11.7px; line-height: 1.4; }

/* The picture stops above the invitation fixed to the bottom-right corner. */
.cx-owner-frame { padding-bottom: clamp(72px, 10.5vh, 116px); }

@media (max-width: 1080px) {
  .cx-owner-copy { align-self: center !important; padding-top: 0; display: block !important; }
  .cx-keeps { max-width: none; margin: clamp(14px, 2vh, 20px) 0 0; }
}
/* Below this the picture is hidden and the invitation has the corner to itself. */
@media (max-width: 760px) { .cx-owner-frame { padding-bottom: 0; } }
@media (max-width: 620px) {
  .cx-keeps { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; padding-top: 12px; }
  .cx-keeps small { display: none; }
  .cx-keeps b { font-size: 12px; }
}


/* ==========================================================================
   23. MYLO owner-page refinement
   ========================================================================== */

/* MYLO is intentionally quieter than the shared skincare layout: the owner
   should notice and try the chatbot before reading repeated sales copy. */
body[data-cosmetics-demo="mylo"] .cx-owner-hero {
  grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr) !important;
  gap: clamp(34px, 4vw, 64px) !important;
}
body[data-cosmetics-demo="mylo"] .cx-owner-copy {
  justify-content: center;
}
body[data-cosmetics-demo="mylo"] .cx-owner-copy > p {
  display: none !important;
}
body[data-cosmetics-demo="mylo"] .cx-owner-actions {
  margin-top: clamp(22px, 3.1vh, 34px) !important;
}

/* The metrics strip is removed in markup for MYLO. The image is deliberately
   smaller and the four concrete benefits sit beside it instead of repeating
   the left column. */
body[data-cosmetics-demo="mylo"] .cx-owner-frame {
  min-width: 0;
  align-self: stretch;
  display: grid !important;
  grid-template-columns: minmax(310px, 1.35fr) minmax(190px, .65fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: clamp(22px, 2.5vw, 38px) !important;
  align-items: center;
  padding-bottom: clamp(72px, 10.5vh, 116px) !important;
}
body[data-cosmetics-demo="mylo"] .cx-owner-visual {
  width: 100%;
  height: min(350px, 44vh) !important;
  min-height: 260px;
  align-self: center;
}
body[data-cosmetics-demo="mylo"] .cx-owner-visual > img {
  object-position: center 55%;
}

body[data-cosmetics-demo="mylo"] .cx-keeps--side {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 0;
  list-style: none;
}
body[data-cosmetics-demo="mylo"] .cx-keeps--side li {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cx-line) 82%, transparent);
}
body[data-cosmetics-demo="mylo"] .cx-keeps--side li:first-child {
  padding-top: 0;
}
body[data-cosmetics-demo="mylo"] .cx-keeps--side li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
body[data-cosmetics-demo="mylo"] .cx-keeps--side b {
  display: block;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.012em;
}
body[data-cosmetics-demo="mylo"] .cx-keeps--side small {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--cx-ink) 56%, transparent);
  font-size: 11.3px;
  line-height: 1.38;
}

/* No live/status decoration exists on the closed launcher. Keep the MYLO
   wordmark optically centred inside the circle. */
body[data-cosmetics-demo="mylo"] .cx-launcher-button::before,
body[data-cosmetics-demo="mylo"] .cx-launcher-button::after {
  content: none !important;
}
body[data-cosmetics-demo="mylo"] .cx-launcher-button .cx-wordmark--mylo {
  width: 100%;
  justify-content: center;
  text-align: center;
  transform: translateX(1px) scale(.92) !important;
  line-height: .95;
}

/* "online" is visible only inside the open widget. Its signal is intentionally
   restrained: a soft opacity pulse, without the expanding neon ring. */
body[data-cosmetics-demo="mylo"] .cx-widget-brand > span.cx-status i {
  width: 7px;
  height: 7px;
  background: #43a875;
  box-shadow: none;
  animation: cx-mylo-online-pulse 2.4s ease-in-out infinite;
}
body[data-cosmetics-demo="mylo"] .cx-widget-brand > span.cx-status i::after {
  content: none !important;
  animation: none !important;
}
@keyframes cx-mylo-online-pulse {
  0%, 100% { opacity: .58; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 1080px) {
  body[data-cosmetics-demo="mylo"] .cx-owner-hero {
    grid-template-columns: minmax(0, 1fr) minmax(450px, .95fr) !important;
    gap: 28px !important;
  }
  body[data-cosmetics-demo="mylo"] .cx-owner-frame {
    grid-template-columns: minmax(260px, 1.2fr) minmax(170px, .8fr) !important;
    gap: 20px !important;
  }
  body[data-cosmetics-demo="mylo"] .cx-owner-visual {
    height: min(320px, 42vh) !important;
    min-height: 240px;
  }
}
@media (max-width: 760px) {
  body[data-cosmetics-demo="mylo"] .cx-owner-frame {
    display: none !important;
    padding-bottom: 0 !important;
  }
  body[data-cosmetics-demo="mylo"] .cx-owner-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ==========================================================================
   24. Shared skincare owner-page composition
   ========================================================================== */

/* All skincare demos use one quiet owner-facing composition. Brand identity
   remains in typography, imagery and accent colours, but the page background
   stays continuous so there is no visible colour seam on the right. */
body[data-cosmetics-demo] {
  background: var(--cx-paper) !important;
}
body[data-cosmetics-demo] .cx-owner {
  background: var(--cx-paper) !important;
}

/* Move the primary message toward the top of the available hero instead of
   vertically centring it. The chatbot actions are the dominant interaction. */
body[data-cosmetics-demo] .cx-owner-hero {
  grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr) !important;
  gap: clamp(34px, 4vw, 64px) !important;
  align-items: start !important;
  padding-top: clamp(22px, 4.6vh, 48px) !important;
}
body[data-cosmetics-demo] .cx-owner-copy {
  align-self: start !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
}
body[data-cosmetics-demo] .cx-owner-copy > p {
  display: none !important;
}
body[data-cosmetics-demo] .cx-owner-actions {
  margin-top: clamp(20px, 2.8vh, 30px) !important;
}

/* The image is smaller; the four practical benefits sit to its right without
   decorative dots. This makes more whitespace and keeps attention on the two
   chatbot CTAs. */
body[data-cosmetics-demo] .cx-owner-frame {
  min-width: 0;
  align-self: start !important;
  display: grid !important;
  grid-template-columns: minmax(310px, 1.35fr) minmax(190px, .65fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: clamp(22px, 2.5vw, 38px) !important;
  align-items: center !important;
  padding-bottom: clamp(72px, 10.5vh, 116px) !important;
}
body[data-cosmetics-demo] .cx-owner-figures {
  display: none !important;
}
body[data-cosmetics-demo] .cx-owner-visual {
  width: 100%;
  height: min(330px, 41vh) !important;
  min-height: 250px;
  align-self: center;
}
body[data-cosmetics-demo] .cx-owner-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-cosmetics-demo] .cx-keeps--side {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 0;
  list-style: none;
}
body[data-cosmetics-demo] .cx-keeps--side li {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cx-line) 82%, transparent);
}
body[data-cosmetics-demo] .cx-keeps--side li:first-child {
  padding-top: 0;
}
body[data-cosmetics-demo] .cx-keeps--side li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
body[data-cosmetics-demo] .cx-keeps--side b {
  display: block;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.012em;
}
body[data-cosmetics-demo] .cx-keeps--side small {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--cx-ink) 56%, transparent);
  font-size: 11.3px;
  line-height: 1.38;
}

/* Closed launchers never imply presence. The live state exists only in the
   opened widget header and uses a restrained pulse. */
body[data-cosmetics-demo] .cx-launcher-button::before,
body[data-cosmetics-demo] .cx-launcher-button::after {
  content: none !important;
}
body[data-cosmetics-demo] .cx-widget-brand > span.cx-status i {
  width: 7px;
  height: 7px;
  background: #43a875;
  box-shadow: none;
  animation: cx-shared-online-pulse 2.4s ease-in-out infinite;
}
body[data-cosmetics-demo] .cx-widget-brand > span.cx-status i::after {
  content: none !important;
  animation: none !important;
}
@keyframes cx-shared-online-pulse {
  0%, 100% { opacity: .58; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 1080px) {
  body[data-cosmetics-demo] .cx-owner-hero {
    grid-template-columns: minmax(0, 1fr) minmax(450px, .95fr) !important;
    gap: 28px !important;
    padding-top: clamp(16px, 3vh, 30px) !important;
  }
  body[data-cosmetics-demo] .cx-owner-frame {
    grid-template-columns: minmax(260px, 1.2fr) minmax(170px, .8fr) !important;
    gap: 20px !important;
  }
  body[data-cosmetics-demo] .cx-owner-visual {
    height: min(300px, 38vh) !important;
    min-height: 230px;
  }
}
@media (max-width: 760px) {
  body[data-cosmetics-demo] .cx-owner-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-top: 14px !important;
  }
  body[data-cosmetics-demo] .cx-owner-frame {
    display: none !important;
    padding-bottom: 0 !important;
  }
}


/* ==========================================================================
   25. Price density and owner-page text contrast
   ========================================================================== */

/* Owner presentation only; widget/chat typography is intentionally unchanged. */
body[data-cosmetics-demo] .cx-owner-offer {
  width: min(820px, 100%) !important;
  max-width: min(820px, calc(100% - 300px)) !important;
}
body[data-cosmetics-demo] .cx-price {
  width: 100%;
  min-height: 102px;
  gap: clamp(13px, 1.45vw, 21px) !important;
  padding: clamp(19px, 2.5vh, 25px) clamp(20px, 1.7vw, 25px) !important;
  border-radius: 19px;
}
body[data-cosmetics-demo] .cx-price-sum span {
  color: color-mix(in srgb, var(--cx-ink) 70%, var(--cx-soft)) !important;
  font-weight: 650;
}
body[data-cosmetics-demo] .cx-price-sum small,
body[data-cosmetics-demo] .cx-price-terms p,
body[data-cosmetics-demo] .cx-keeps--side small {
  color: color-mix(in srgb, var(--cx-ink) 72%, var(--cx-paper)) !important;
}
body[data-cosmetics-demo] .cx-price-terms {
  padding-left: clamp(14px, 1.6vw, 24px) !important;
  border-left-color: color-mix(in srgb, var(--cx-ink) 18%, transparent) !important;
}
body[data-cosmetics-demo] .cx-owner-foot {
  color: color-mix(in srgb, var(--cx-ink) 66%, var(--cx-paper)) !important;
}

@media (max-width: 1180px) {
  body[data-cosmetics-demo] .cx-owner-offer {
    width: min(760px, 100%) !important;
    max-width: calc(100% - 280px) !important;
  }
}
@media (max-width: 760px) {
  body[data-cosmetics-demo] .cx-owner-offer {
    width: 100% !important;
    max-width: 100% !important;
  }
  body[data-cosmetics-demo] .cx-price {
    min-height: 0;
    padding: 15px 14px !important;
  }
}


/* ==========================================================================
   26. Logo visibility and benefit-style previews
   ========================================================================== */

/* Image-based brand marks were constrained to 46×20 in the launcher and
   24×14 in message avatars. That makes long real logos effectively illegible.
   Keep them inside the same geometry, but use the available surface. */
.cx-logo {
  object-fit: contain !important;
  object-position: center center !important;
  transform-origin: center center !important;
}
.cx-owner-brand .cx-logo {
  width: auto !important;
  max-width: 176px !important;
  max-height: 40px !important;
}
.cx-widget-brand .cx-logo {
  width: auto !important;
  max-width: 132px !important;
  max-height: 30px !important;
}
.cx-launcher-button .cx-logo {
  width: auto !important;
  max-width: 62px !important;
  max-height: 31px !important;
}
.cx-message-avatar .cx-logo {
  width: auto !important;
  max-width: 29px !important;
  max-height: 20px !important;
}

/* Barbora Lori's source mark has generous internal breathing room. Optical
   scaling keeps the visible lettering centred without enlarging the launcher. */
body[data-cosmetics-demo="barboralori"] .cx-owner-brand .cx-logo {
  transform: scale(1.16);
}
body[data-cosmetics-demo="barboralori"] .cx-widget-brand .cx-logo {
  transform: scale(1.18);
}
body[data-cosmetics-demo="barboralori"] .cx-launcher-button .cx-logo {
  transform: scale(1.34) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-message-avatar .cx-logo {
  transform: scale(1.18);
}

/* Keep brand photography centred anywhere the same source image is reused. */
body[data-cosmetics-demo="barboralori"] .cx-owner-visual > img,
body[data-cosmetics-demo="barboralori"] .cx-advisor-entry img,
body[data-cosmetics-demo="barboralori"] .cx-product-photo img,
body[data-cosmetics-demo="barboralori"] .cx-option-photo img {
  object-position: 50% 50% !important;
}

/* --------------------------------------------------------------------------
   BENEFIT PREVIEW A — LINES
   Quiet editorial rows. Existing wording only.
   -------------------------------------------------------------------------- */
body[data-benefit-style="lines"] .cx-keeps--side {
  background: transparent !important;
}
body[data-benefit-style="lines"] .cx-keeps--side li {
  position: relative;
  padding: 15px 0 15px 13px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cx-ink) 13%, transparent) !important;
}
body[data-benefit-style="lines"] .cx-keeps--side li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;
  width: 2px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--cx-accent) 72%, transparent);
  opacity: .72;
}
body[data-benefit-style="lines"] .cx-keeps--side li:last-child {
  border-bottom: 0 !important;
}
body[data-benefit-style="lines"] .cx-keeps--side b {
  font-size: 13.2px !important;
  font-weight: 780 !important;
}
body[data-benefit-style="lines"] .cx-keeps--side small {
  margin-top: 5px !important;
  line-height: 1.42 !important;
}

/* --------------------------------------------------------------------------
   BENEFIT PREVIEW B — CARDS
   Four compact surfaces. No icons and no new copy.
   -------------------------------------------------------------------------- */
body[data-benefit-style="cards"] .cx-owner-frame {
  grid-template-columns: minmax(300px, 1.25fr) minmax(205px, .75fr) !important;
}
body[data-benefit-style="cards"] .cx-keeps--side {
  gap: 8px !important;
}
body[data-benefit-style="cards"] .cx-keeps--side li {
  padding: 12px 13px !important;
  border: 1px solid color-mix(in srgb, var(--cx-ink) 10%, transparent) !important;
  border-radius: 13px;
  background: color-mix(in srgb, var(--cx-soft) 58%, var(--cx-paper));
}
body[data-benefit-style="cards"] .cx-keeps--side li:first-child,
body[data-benefit-style="cards"] .cx-keeps--side li:last-child {
  padding: 12px 13px !important;
}
body[data-benefit-style="cards"] .cx-keeps--side b {
  color: var(--cx-ink) !important;
  font-size: 12.8px !important;
  font-weight: 780 !important;
}
body[data-benefit-style="cards"] .cx-keeps--side small {
  margin-top: 4px !important;
  font-size: 11.2px !important;
  line-height: 1.38 !important;
}

/* --------------------------------------------------------------------------
   BENEFIT PREVIEW C — PANEL
   One continuous information panel; strongest visual hierarchy of the three.
   -------------------------------------------------------------------------- */
body[data-benefit-style="panel"] .cx-owner-frame {
  grid-template-columns: minmax(300px, 1.28fr) minmax(210px, .72fr) !important;
}
body[data-benefit-style="panel"] .cx-keeps--side {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cx-ink) 11%, transparent) !important;
  border-radius: 16px;
  background: var(--cx-paper);
}
body[data-benefit-style="panel"] .cx-keeps--side li {
  position: relative;
  padding: 13px 15px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cx-ink) 10%, transparent) !important;
  background: transparent;
}
body[data-benefit-style="panel"] .cx-keeps--side li:first-child {
  padding: 13px 15px !important;
  background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-paper));
}
body[data-benefit-style="panel"] .cx-keeps--side li:first-child::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cx-accent);
}
body[data-benefit-style="panel"] .cx-keeps--side li:last-child {
  padding: 13px 15px !important;
  border-bottom: 0 !important;
}
body[data-benefit-style="panel"] .cx-keeps--side b {
  color: var(--cx-ink) !important;
  font-size: 13px !important;
  font-weight: 790 !important;
}
body[data-benefit-style="panel"] .cx-keeps--side small {
  margin-top: 4px !important;
  font-size: 11.3px !important;
  line-height: 1.4 !important;
}

@media (max-width: 1080px) {
  body[data-benefit-style="cards"] .cx-owner-frame,
  body[data-benefit-style="panel"] .cx-owner-frame {
    grid-template-columns: minmax(250px, 1.15fr) minmax(180px, .85fr) !important;
  }
}


/* ==========================================================================
   27. Final launcher logo containment
   ========================================================================== */

.cx-launcher-button {
  overflow: hidden !important;
  position: relative;
  place-items: center !important;
}
.cx-launcher-button .cx-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 54px !important;
  max-height: 28px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Barbora Lori is a wide horizontal mark. Keep it optically larger than the
   generic rule, but still fully inside the 72 px launcher. */
body[data-cosmetics-demo="barboralori"] .cx-launcher-button .cx-logo {
  max-width: 57px !important;
  max-height: 25px !important;
  transform: none !important;
}

/* Keep the same source visually centred in the other brand-logo surfaces. */
body[data-cosmetics-demo="barboralori"] .cx-owner-brand .cx-logo,
body[data-cosmetics-demo="barboralori"] .cx-widget-brand .cx-logo,
body[data-cosmetics-demo="barboralori"] .cx-message-avatar .cx-logo {
  object-position: center center !important;
}

/* Variant A is now the production treatment. */
body[data-benefit-style="lines"] .cx-keeps--side li:last-child {
  border-bottom: 0 !important;
}


/* ==========================================================================
   28. Readability and centring safeguards
   ========================================================================== */

.cx-launcher-button.is-image-logo {
  width: 116px !important;
  height: 66px !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  overflow: hidden !important;
}
.cx-launcher-button.is-image-logo .cx-logo {
  width: 100% !important;
  height: auto !important;
  max-width: 92px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
body[data-cosmetics-demo="barboralori"] .cx-launcher-button.is-image-logo {
  width: 132px !important;
  padding-inline: 12px !important;
}
body[data-cosmetics-demo="barboralori"] .cx-launcher-button.is-image-logo .cx-logo {
  max-width: 108px !important;
  max-height: 27px !important;
}

.cx-message-avatar.is-image-logo {
  width: 54px !important;
  min-width: 54px !important;
  height: 30px !important;
  border-radius: 999px !important;
  padding: 0 6px !important;
  overflow: hidden !important;
}
.cx-message-avatar.is-image-logo .cx-logo {
  width: 100% !important;
  height: auto !important;
  max-width: 42px !important;
  max-height: 18px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.cx-owner-brand .cx-logo {
  max-width: 190px !important;
  max-height: 44px !important;
}
.cx-widget-brand .cx-logo {
  max-width: 144px !important;
  max-height: 30px !important;
}

body[data-cosmetics-demo] .cx-owner-visual > img {
  object-position: 50% 50% !important;
}
.cx-advisor-entry .cx-advisor-entry-photo {
  width: 56px !important;
  height: 48px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: var(--cx-soft) !important;
}
.cx-advisor-entry {
  grid-template-columns: 56px minmax(0, 1fr) 20px !important;
}
.cx-advisor-entry .cx-advisor-entry-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

body[data-cosmetics-demo="barboralori"] .cx-owner-visual {
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--cx-soft) 74%, #fff) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-owner-visual > img {
  object-fit: contain !important;
  object-position: 50% 50% !important;
  width: 100% !important;
  height: 100% !important;
}
body[data-cosmetics-demo="barboralori"] .cx-advisor-entry .cx-advisor-entry-photo {
  background: color-mix(in srgb, var(--cx-soft) 74%, #fff) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-advisor-entry .cx-advisor-entry-photo img {
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

body[data-benefit-style="lines"] .cx-keeps--side b {
  color: var(--cx-ink) !important;
}
body[data-benefit-style="lines"] .cx-keeps--side small {
  color: color-mix(in srgb, var(--cx-ink) 74%, var(--cx-paper)) !important;
}

@media (max-width: 760px) {
  .cx-launcher-button.is-image-logo {
    width: 106px !important;
    height: 62px !important;
  }
  body[data-cosmetics-demo="barboralori"] .cx-launcher-button.is-image-logo {
    width: 118px !important;
  }
}


/* ==========================================================================
   29. Barbora Lori circular mark and true image centring
   ========================================================================== */

/* The launcher remains a real circular chatbot bubble. A dedicated square
   vector mark avoids shrinking the original 5.5:1 horizontal wordmark until
   it becomes unreadable. */
body[data-cosmetics-demo="barboralori"] .cx-launcher-button {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: var(--cx-brand) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-launcher-button .cx-bubble-logo {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  margin: 0 !important;
  filter: none !important;
  transform: none !important;
}

/* Crisp dedicated monogram in assistant-message bubbles. */
body[data-cosmetics-demo="barboralori"] .cx-message-avatar {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: var(--cx-brand) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-message-avatar .cx-bubble-logo--avatar {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  filter: none !important;
  transform: none !important;
}

/* The full horizontal logo still has enough room in the owner and widget
   headers, where it can remain the actual brand wordmark. */
body[data-cosmetics-demo="barboralori"] .cx-owner-brand .cx-logo {
  width: min(210px, 19vw) !important;
  max-width: 210px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}
body[data-cosmetics-demo="barboralori"] .cx-widget-brand .cx-logo {
  width: 132px !important;
  max-width: 132px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* True centring: do not stretch the photograph to the box and then merely
   move the crop. Centre the image element itself and show the whole source. */
body[data-cosmetics-demo="barboralori"] .cx-owner-visual {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--cx-soft) 72%, #fff) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-owner-visual > img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  justify-self: center !important;
  align-self: center !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* Same centring rule in the chat's product-selection entry. */
body[data-cosmetics-demo="barboralori"] .cx-advisor-entry .cx-advisor-entry-photo {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--cx-soft) 72%, #fff) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-advisor-entry .cx-advisor-entry-photo img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  justify-self: center !important;
  align-self: center !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

@media (max-width: 760px) {
  body[data-cosmetics-demo="barboralori"] .cx-launcher-button {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
  }
  body[data-cosmetics-demo="barboralori"] .cx-launcher-button .cx-bubble-logo {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }
  body[data-cosmetics-demo="barboralori"] .cx-owner-brand .cx-logo {
    width: 160px !important;
    max-width: 160px !important;
  }
}


/* ==========================================================================
   30. Barbora Lori exact-initial mark and subject centring
   ========================================================================== */

/* Use the real Barbora Lori logo artwork for the initials instead of a
   substitute font. Each initial is a clipped view of the original 700×127
   wordmark asset, so the letterforms stay faithful to the brand. */
body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram {
  width: 50px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-letter {
  display: block;
  width: 20px;
  height: 34px;
  flex: 0 0 20px;
  background-image: url("/assets/cosmetics/barboralori-logo.png");
  background-repeat: no-repeat;
  background-size: 188px 34px;
  filter: brightness(0) invert(1);
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-letter--b {
  background-position: 0 50%;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-letter--l {
  background-position: -108px 50%;
}

/* Keep the chatbot launcher as the same 72px circular bubble used elsewhere. */
body[data-cosmetics-demo="barboralori"] .cx-launcher-button {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: var(--cx-brand) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-message-avatar {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: var(--cx-brand) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram--avatar {
  width: 26px;
  height: 18px;
  gap: 2px;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram--avatar .cx-barbora-letter {
  width: 11px;
  height: 18px;
  flex-basis: 11px;
  background-size: 100px 18px;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram--avatar .cx-barbora-letter--l {
  background-position: -57.5px 50%;
}

/* The source hero is a square with the jar optically around 71% across the
   canvas. A centred square image therefore leaves the product visibly right
   of centre in the wide owner frame. Shift the source square by 20.8% of its
   own width so the actual jar, not the JPEG canvas, is centred. */
body[data-cosmetics-demo="barboralori"] .cx-owner-visual > img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  justify-self: center !important;
  align-self: center !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: translateX(-20.8%) !important;
}

/* Apply the same focal correction in the compact chat entry. */
body[data-cosmetics-demo="barboralori"] .cx-advisor-entry .cx-advisor-entry-photo img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  justify-self: center !important;
  align-self: center !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: translateX(-20.8%) !important;
}

@media (max-width: 760px) {
  body[data-cosmetics-demo="barboralori"] .cx-launcher-button {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
  }
}


/* ==========================================================================
   31. Stronger owner-page hierarchy and denser right column
   ========================================================================== */

body[data-cosmetics-demo] .cx-owner-hero {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 520px) !important;
  gap: clamp(28px, 3.2vw, 48px) !important;
  align-items: start !important;
}
body[data-cosmetics-demo] .cx-owner-frame {
  width: 100% !important;
  max-width: 520px !important;
  margin-left: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 14px !important;
  align-items: start !important;
  padding-bottom: 28px !important;
}
body[data-cosmetics-demo] .cx-owner-visual {
  width: 100% !important;
  height: 252px !important;
  min-height: 252px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--cx-ink) 9%, transparent) !important;
  background: color-mix(in srgb, var(--cx-paper) 88%, var(--cx-soft)) !important;
  box-shadow: 0 12px 30px -24px color-mix(in srgb, var(--cx-ink) 42%, transparent) !important;
}
/* Image object-fit, focal position and transform are deliberately untouched. */
body[data-cosmetics-demo] .cx-keeps--side {
  counter-reset: cx-benefit;
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none !important;
}
body[data-cosmetics-demo] .cx-keeps--side li,
body[data-cosmetics-demo] .cx-keeps--side li:first-child,
body[data-cosmetics-demo] .cx-keeps--side li:last-child {
  position: relative !important;
  min-height: 92px;
  display: block !important;
  padding: 15px 14px 14px 50px !important;
  border: 1px solid color-mix(in srgb, var(--cx-ink) 11%, transparent) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--cx-soft) 64%, var(--cx-paper)) !important;
  box-shadow: 0 8px 22px -20px color-mix(in srgb, var(--cx-ink) 38%, transparent) !important;
}
body[data-cosmetics-demo] .cx-keeps--side li::before {
  counter-increment: cx-benefit;
  content: counter(cx-benefit) !important;
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: auto !important;
  width: 25px !important;
  height: 25px !important;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--cx-brand) !important;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  opacity: 1 !important;
}
body[data-cosmetics-demo] .cx-keeps--side li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 3px;
  border-radius: 999px;
  background: var(--cx-brand);
  opacity: .68;
}
body[data-cosmetics-demo] .cx-keeps--side b {
  display: block !important;
  color: var(--cx-ink) !important;
  font-size: 13.6px !important;
  font-weight: 820 !important;
  line-height: 1.22 !important;
}
body[data-cosmetics-demo] .cx-keeps--side small {
  display: block !important;
  margin-top: 5px !important;
  color: color-mix(in srgb, var(--cx-ink) 80%, var(--cx-paper)) !important;
  font-size: 11.7px !important;
  line-height: 1.42 !important;
}
body[data-cosmetics-demo] .cx-owner-offer {
  width: min(760px, calc(100% - 80px)) !important;
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body[data-cosmetics-demo] .cx-price {
  width: 100% !important;
  min-height: 134px !important;
  gap: 18px !important;
  padding: 24px !important;
  border-radius: 22px !important;
  align-items: center !important;
}
body[data-cosmetics-demo] .cx-price-sum span {
  color: color-mix(in srgb, var(--cx-ink) 78%, var(--cx-paper)) !important;
  font-weight: 700 !important;
}
body[data-cosmetics-demo] .cx-price-sum small,
body[data-cosmetics-demo] .cx-price-terms p {
  color: color-mix(in srgb, var(--cx-ink) 80%, var(--cx-paper)) !important;
}
body[data-cosmetics-demo] .cx-price-terms {
  padding-left: 18px !important;
  border-left: 1px solid color-mix(in srgb, var(--cx-ink) 19%, transparent) !important;
}
@media (max-width: 1180px) {
  body[data-cosmetics-demo] .cx-owner-hero { grid-template-columns: minmax(0, 1fr) minmax(390px, 460px) !important; gap: 24px !important; }
  body[data-cosmetics-demo] .cx-owner-frame { max-width: 460px !important; }
  body[data-cosmetics-demo] .cx-owner-visual { height: 226px !important; min-height: 226px !important; }
  body[data-cosmetics-demo] .cx-owner-offer { width: min(700px, calc(100% - 60px)) !important; max-width: 700px !important; }
}
@media (max-width: 760px) {
  body[data-cosmetics-demo] .cx-owner-hero { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-cosmetics-demo] .cx-owner-frame { display: none !important; }
  body[data-cosmetics-demo] .cx-owner-offer { width: 100% !important; max-width: 100% !important; }
  body[data-cosmetics-demo] .cx-price { min-height: 0 !important; padding: 18px 16px !important; gap: 14px !important; }
}


/* ==========================================================================
   32. Collision-proof owner layout
   ========================================================================== */

body[data-cosmetics-demo] .cx-owner-frame {
  width: 100% !important;
  max-width: 620px !important;
  margin-left: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(220px, .72fr) !important;
  grid-template-rows: minmax(0, auto) !important;
  gap: 14px !important;
  align-items: stretch !important;
  align-self: start !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}
body[data-cosmetics-demo] .cx-owner-visual {
  width: 100% !important;
  height: 100% !important;
  min-height: 286px !important;
  max-height: 306px !important;
  align-self: stretch !important;
}
body[data-cosmetics-demo] .cx-keeps--side {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
}
body[data-cosmetics-demo] .cx-keeps--side li,
body[data-cosmetics-demo] .cx-keeps--side li:first-child,
body[data-cosmetics-demo] .cx-keeps--side li:last-child {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 11px 11px 11px 44px !important;
  overflow: hidden !important;
}
body[data-cosmetics-demo] .cx-keeps--side li::before {
  left: 11px !important;
  top: 11px !important;
  width: 23px !important;
  height: 23px !important;
}
body[data-cosmetics-demo] .cx-keeps--side li::after {
  top: 10px !important;
  bottom: 10px !important;
}
body[data-cosmetics-demo] .cx-keeps--side b {
  font-size: 12.9px !important;
  line-height: 1.2 !important;
}
body[data-cosmetics-demo] .cx-keeps--side small {
  margin-top: 3px !important;
  font-size: 10.9px !important;
  line-height: 1.32 !important;
  overflow-wrap: anywhere;
}

body[data-cosmetics-demo] .cx-owner-offer {
  width: min(680px, 100%) !important;
  max-width: 680px !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body[data-cosmetics-demo] .cx-price {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 22px !important;
  padding: 20px 22px !important;
  align-items: start !important;
}
body[data-cosmetics-demo] .cx-price-sum {
  min-width: 0 !important;
}
body[data-cosmetics-demo] .cx-price-sum small {
  display: block !important;
  max-width: 25ch !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body[data-cosmetics-demo] .cx-price-terms {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 4px !important;
  align-items: center !important;
  padding: 14px 0 0 !important;
  border-left: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--cx-ink) 17%, transparent) !important;
}
body[data-cosmetics-demo] .cx-price-terms b {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
body[data-cosmetics-demo] .cx-price-terms p {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body[data-cosmetics-demo] .cx-price-terms > a {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: max-content !important;
  margin: 0 !important;
}

/* Barbora Lori: use a clean, readable initial mark instead of trying to crop
   two glyphs out of a 700×127 horizontal bitmap. The full real logo remains in
   the page and widget headers. */
body[data-cosmetics-demo="barboralori"] .cx-barbora-initials {
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.08em;
  transform: translateX(-1px);
}
body[data-cosmetics-demo="barboralori"] .cx-message-avatar .cx-barbora-initials {
  font-size: 12.5px;
  letter-spacing: -.06em;
  transform: translateX(-.5px);
}
body[data-cosmetics-demo="barboralori"] .cx-launcher-button {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: var(--cx-brand) !important;
}
body[data-cosmetics-demo="barboralori"] .cx-message-avatar {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: var(--cx-brand) !important;
}

/* Preserve the measured optical centring of the actual jar in the 900×900
   source image. */
body[data-cosmetics-demo="barboralori"] .cx-owner-visual > img,
body[data-cosmetics-demo="barboralori"] .cx-advisor-entry .cx-advisor-entry-photo img {
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: translateX(-20.8%) !important;
}

@media (max-width: 1180px) {
  body[data-cosmetics-demo] .cx-owner-frame {
    max-width: 560px !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(205px, .82fr) !important;
  }
  body[data-cosmetics-demo] .cx-owner-visual {
    min-height: 258px !important;
    max-height: 278px !important;
  }
  body[data-cosmetics-demo] .cx-owner-offer {
    width: min(640px, 100%) !important;
    max-width: 640px !important;
  }
}
@media (max-width: 900px) {
  body[data-cosmetics-demo] .cx-price-terms {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-cosmetics-demo] .cx-price-terms > a {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
    margin-top: 8px !important;
  }
}
@media (max-width: 760px) {
  body[data-cosmetics-demo] .cx-owner-frame { display: none !important; }
  body[data-cosmetics-demo] .cx-owner-offer { width: 100% !important; max-width: 100% !important; }
  body[data-cosmetics-demo] .cx-price { grid-template-columns: 1fr 1fr !important; padding: 16px !important; }
}


/* ==========================================================================
   33. Online status lifecycle
   ========================================================================== */

/* The live-status label belongs to the open widget only. Off-canvas/closed
   widgets must not expose it visually or to pointer interaction. */
.cx-widget[aria-hidden="true"] .cx-status {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cx-widget[aria-hidden="true"] .cx-status i {
  animation-play-state: paused !important;
}
.cx-widget.is-open .cx-status,
.cx-widget[aria-hidden="false"] .cx-status {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cx-widget.is-open .cx-status i,
.cx-widget[aria-hidden="false"] .cx-status i {
  animation-play-state: running !important;
}


/* ==========================================================================
   34. Barbora Lori exact B/L from official wordmark
   ========================================================================== */

/* The official 700×127 wordmark is reused directly. The B occupies the first
   ~20/188 of the rendered wordmark and the L starts at ~130/188; these crops
   were measured from the actual rendered asset, not substituted typography. */
body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram {
  width: 38px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  overflow: hidden !important;
  transform: none !important;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-letter {
  display: block !important;
  height: 34px !important;
  flex: 0 0 auto !important;
  background-image: url("/assets/cosmetics/barboralori-logo.png") !important;
  background-repeat: no-repeat !important;
  background-size: 188px 34px !important;
  background-position-y: 50% !important;
  filter: brightness(0) invert(1) !important;
  transform: none !important;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-letter--b {
  width: 19px !important;
  background-position-x: -11px !important;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-letter--l {
  width: 14px !important;
  background-position-x: -127px !important;
}

body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram--avatar {
  width: 20px !important;
  height: 18px !important;
  gap: 2px !important;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram--avatar .cx-barbora-letter {
  height: 18px !important;
  background-size: 100px 18px !important;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram--avatar .cx-barbora-letter--b {
  width: 10px !important;
  background-position-x: -6px !important;
}
body[data-cosmetics-demo="barboralori"] .cx-barbora-monogram--avatar .cx-barbora-letter--l {
  width: 8px !important;
  background-position-x: -68px !important;
}

/* Disable the temporary text initials if stale markup ever survives a cache
   boundary; only the exact cropped official letters are production styling. */
body[data-cosmetics-demo="barboralori"] .cx-barbora-initials {
  display: none !important;
}