#olubee-signage-preview.olubee-sp {
  margin: 30px 0;
  font-family: inherit;
}

.olubee-sp-card {
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
}

.olubee-sp-badge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3eaf6;
  color: #4b0f5f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.olubee-sp-card h3 {
  margin: 0 0 7px;
  font-size: 25px;
  line-height: 1.2;
}

.olubee-sp-subtitle {
  margin: 0 0 20px;
  opacity: .78;
}


.olubee-sp-brand-entry {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  background: #fafafa;
}

.olubee-sp-brand-entry label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.olubee-sp-brand-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 17px;
  outline: none;
}

.olubee-sp-brand-input:focus {
  border-color: #4b0f5f;
  box-shadow: 0 0 0 2px rgba(75,15,95,.10);
}

.olubee-sp-help {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: .7;
}

.olubee-sp-previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.olubee-sp-preview-box {
  min-width: 0;
}

.olubee-sp-live-label {
  margin-bottom: 7px;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 800;
  opacity: .62;
}

.olubee-sp-live {
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #ececec;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #fff, #f5f5f5),
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(0,0,0,.02) 29px);
}

#olubee-sp-live-20 .olubee-glyph-row {
  transform: scale(1.05);
}

#olubee-sp-live-10 .olubee-glyph-row {
  transform: scale(.82);
}

.olubee-glyph-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

.olubee-glyph {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  object-fit: contain;
  object-position: center bottom;
  vertical-align: bottom;
  max-width: none;
}

/* Physical-size rule: 20CM is always exactly twice the display height of
   10CM. The zoom control changes both together and never changes this ratio. */
.olubee-glyph.size-10 { height: clamp(32px, 6vw, 56px); }
.olubee-glyph.size-20 { height: clamp(64px, 12vw, 112px); }

.olubee-glyph-row.combined-row {
  gap: 2px;
  align-items: flex-end;
  max-width: none;
  width: max-content;
  min-width: max-content;
  transform-origin: center center;
  transform: scale(var(--olubee-fit-scale, 1));
}

.olubee-fallback-char.size-20-char { font-size: clamp(48px, 10vw, 86px); }
.olubee-fallback-char.size-10-char { font-size: clamp(27px, 5.5vw, 47px); }

.olubee-glyph-space {
  display: inline-block;
  width: .35em;
  flex: 0 0 .35em;
}

.olubee-fallback-char {
  display: inline-block;
  min-width: .5em;
  font-weight: 700;
  font-size: 1em;
}

.normal-text-row {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 6vw, 74px);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.olubee-sp-placeholder {
  opacity: .45;
  font-size: 14px;
}


.olubee-sp-zoom {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  background: #fafafa;
}

.olubee-sp-zoom-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}

.olubee-sp-zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.olubee-sp-zoom-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.olubee-sp-zoom-range {
  flex: 1;
  min-width: 100px;
  accent-color: #4b0f5f;
}

.olubee-sp-zoom-value {
  min-width: 44px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: #4b0f5f;
}

.olubee-sp-ai {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 10px;
  padding: 15px 18px;
  background: #4b0f5f;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.olubee-sp-ai:hover:not(:disabled) {
  transform: translateY(-1px);
}

.olubee-sp-ai:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.olubee-sp-status {
  min-height: 21px;
  margin-top: 10px;
  font-size: 13px;
}

.olubee-sp-ai-wrap {
  margin-top: 20px;
}

.olubee-sp-ai-canvas-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #eee;
}

#olubee-sp-ai-bg {
  display: block;
  width: 100%;
  height: auto;
}

.olubee-sp-ai-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.olubee-sp-ai-overlay .olubee-glyph-row {
  width: 82%;
  justify-content: center;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,.35));
}

.olubee-sp-ai-overlay.size-20 .olubee-glyph-row {
  transform: scale(1.08);
}

.olubee-sp-ai-overlay.size-10 .olubee-glyph-row {
  transform: scale(.8);
}

.olubee-sp-download {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .olubee-sp-card {
    padding: 15px;
  }

  
.olubee-sp-brand-entry {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  background: #fafafa;
}

.olubee-sp-brand-entry label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.olubee-sp-brand-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 17px;
  outline: none;
}

.olubee-sp-brand-input:focus {
  border-color: #4b0f5f;
  box-shadow: 0 0 0 2px rgba(75,15,95,.10);
}

.olubee-sp-help {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: .7;
}

.olubee-sp-previews {
    grid-template-columns: 1fr;
  }

  .olubee-sp-live {
    min-height: 155px;
  }

  }

/* v3.2 — one combined preview */
.olubee-sp-single-preview {
  width: 100%;
}
.olubee-sp-single-preview .olubee-sp-live {
  min-height: 220px;
  padding: 24px 18px;
}
.olubee-sp-preview-help {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.55;
  opacity: .72;
}
.combined-row {
  width: 96%;
  max-width: 100%;
  overflow: hidden;
}
.combined-row .olubee-glyph {
  width: auto;
  height: clamp(46px, 9vw, 94px);
  object-fit: contain;
}
.combined-row .olubee-fallback-char {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 8vw, 88px);
  line-height: 1;
  min-width: auto;
}
.combined-row .italics-char {
  font-style: italic;
}
.combined-row .special-char {
  font-family: cursive;
}
.olubee-sp-ai-overlay .combined-row {
  width: 82%;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,.35));
}
.olubee-sp-ai-overlay .combined-row .olubee-glyph {
  height: clamp(42px, 7vw, 90px);
}
@media (max-width: 700px) {
  .olubee-sp-single-preview .olubee-sp-live {
    min-height: 165px;
    padding: 18px 10px;
  }
  .combined-row .olubee-glyph {
    height: clamp(34px, 10vw, 64px);
  }
  .combined-row .olubee-fallback-char {
    font-size: clamp(30px, 9vw, 60px);
  }
}


/* v3.6 — exact supplied Italics glyphs + strict physical size ratio.
   20CM must always render at exactly 2× the display height of 10CM,
   regardless of Normal, Italics or Special font. */
#olubee-sp-live .combined-row .olubee-glyph.size-20,
#olubee-sp-ai-overlay .combined-row .olubee-glyph.size-20 {
  height: clamp(64px, 12vw, 112px) !important;
  width: auto !important;
  flex: 0 0 auto;
}

#olubee-sp-live .combined-row .olubee-glyph.size-10,
#olubee-sp-ai-overlay .combined-row .olubee-glyph.size-10 {
  height: clamp(32px, 6vw, 56px) !important;
  width: auto !important;
  flex: 0 0 auto;
}

#olubee-sp-live .combined-row .olubee-fallback-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char.size-20-char {
  font-size: clamp(48px, 10vw, 86px) !important;
  line-height: 1 !important;
}

#olubee-sp-live .combined-row .olubee-fallback-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char.size-10-char {
  font-size: clamp(24px, 5vw, 43px) !important;
  line-height: 1 !important;
}

@media (max-width: 700px) {
  #olubee-sp-live .combined-row .olubee-glyph.size-20,
  #olubee-sp-ai-overlay .combined-row .olubee-glyph.size-20 {
    height: clamp(52px, 14vw, 82px) !important;
  }

  #olubee-sp-live .combined-row .olubee-glyph.size-10,
  #olubee-sp-ai-overlay .combined-row .olubee-glyph.size-10 {
    height: clamp(26px, 7vw, 41px) !important;
  }

  #olubee-sp-live .combined-row .olubee-fallback-char.size-20-char,
  #olubee-sp-ai-overlay .combined-row .olubee-fallback-char.size-20-char {
    font-size: clamp(40px, 12vw, 64px) !important;
  }

  #olubee-sp-live .combined-row .olubee-fallback-char.size-10-char,
  #olubee-sp-ai-overlay .combined-row .olubee-fallback-char.size-10-char {
    font-size: clamp(20px, 6vw, 32px) !important;
  }
}


/* v3.7 — exact Italics asset routing + common baseline.
   Every 20CM and 10CM glyph is bottom-aligned to one shared baseline.
   This prevents transparent image padding or font line boxes from making
   the two sizes appear to float at different vertical positions. */
#olubee-sp-live .combined-row,
#olubee-sp-ai-overlay .combined-row {
  align-items: flex-end !important;
  line-height: 0 !important;
}

#olubee-sp-live .combined-row .olubee-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-glyph {
  display: block !important;
  margin: 0 !important;
  vertical-align: bottom !important;
  object-position: center bottom !important;
}

#olubee-sp-live .combined-row .olubee-fallback-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  vertical-align: bottom !important;
}


/* V3.8 display correction: one shared baseline + a true 2:1 size ratio. */
#olubee-signage-preview .combined-row {
  align-items: flex-end !important;
  display: inline-flex !important;
  vertical-align: bottom;
  line-height: 0 !important;
}

#olubee-signage-preview .combined-row .olubee-glyph {
  display: block !important;
  flex: 0 0 auto !important;
  object-fit: contain;
  object-position: center bottom;
  vertical-align: bottom;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

#olubee-signage-preview .combined-row .olubee-glyph.size-20,
#olubee-signage-preview .combined-row .olubee-fallback-char.size-20-char {
  height: clamp(72px, 12vw, 120px) !important;
  font-size: clamp(72px, 12vw, 120px) !important;
  line-height: 1 !important;
}

#olubee-signage-preview .combined-row .olubee-glyph.size-10,
#olubee-signage-preview .combined-row .olubee-fallback-char.size-10-char {
  height: calc(clamp(72px, 12vw, 120px) / 2) !important;
  font-size: calc(clamp(72px, 12vw, 120px) / 2) !important;
  line-height: 1 !important;
}

#olubee-signage-preview .combined-row .olubee-fallback-char {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  vertical-align: bottom;
  margin: 0 !important;
  padding: 0 !important;
}

/* Lowercase descenders extend below the common baseline instead of forcing
   the whole 10CM word downward. */
#olubee-signage-preview .combined-row .descender {
  transform: translateY(12%);
}

#olubee-signage-preview .combined-row .olubee-glyph-space {
  height: 1px !important;
  align-self: flex-end !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  #olubee-signage-preview .combined-row .olubee-glyph.size-20,
  #olubee-signage-preview .combined-row .olubee-fallback-char.size-20-char {
    height: clamp(56px, 14vw, 84px) !important;
    font-size: clamp(56px, 14vw, 84px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-glyph.size-10,
  #olubee-signage-preview .combined-row .olubee-fallback-char.size-10-char {
    height: calc(clamp(56px, 14vw, 84px) / 2) !important;
    font-size: calc(clamp(56px, 14vw, 84px) / 2) !important;
  }
}

/* V3.9 — final display polish.
   Browser-rendered Normal characters have a font descent below the visible
   uppercase letter. Nudge the fallback glyph down so its visible bottom edge
   aligns with the transparent image glyphs' common baseline. */
#olubee-signage-preview .combined-row .olubee-fallback-char.normal-char {
  position: relative !important;
  top: 0.14em !important;
}

#olubee-signage-preview .combined-row .olubee-fallback-char.normal-char.descender {
  top: 0 !important;
}

/* Keep the preview stable when a very wide name is entered. */
#olubee-signage-preview .olubee-sp-live,
#olubee-signage-preview .olubee-sp-ai-canvas-wrap {
  box-sizing: border-box;
}

#olubee-signage-preview .combined-row {
  will-change: transform;
  backface-visibility: hidden;
}

/* V4.0 — production display polish
   - Descenders are part of the glyph artwork and must NOT be translated
     outside the preview box. This prevents g/j/p/q/y from being clipped.
   - Add a restrained dimensional/extruded signage treatment so the supplied
     letter artwork reads as raised 3D signage rather than flat text.
*/
#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  overflow: visible !important;
  align-items: flex-end !important;
  line-height: 0 !important;
}

#olubee-signage-preview .olubee-sp-live,
#olubee-sp-ai-overlay {
  overflow: visible !important;
}

#olubee-signage-preview .combined-row .descender,
#olubee-sp-ai-overlay .combined-row .descender {
  transform: none !important;
  position: static !important;
}

/* Keep the actual glyph artwork intact; create depth outside it with layered
   drop shadows. Each colour gets a slightly different extrusion tone. */
#olubee-signage-preview .combined-row .olubee-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-glyph {
  position: relative;
  transform: translateZ(0);
  will-change: filter;
}

#olubee-signage-preview .combined-row .olubee-glyph[data-colour="Gold"],
#olubee-sp-ai-overlay .combined-row .olubee-glyph[data-colour="Gold"] {
  filter:
    drop-shadow(1px 1px 0 rgba(164,121,24,.92))
    drop-shadow(2px 2px 0 rgba(112,78,12,.82))
    drop-shadow(0 5px 6px rgba(0,0,0,.30));
}

#olubee-signage-preview .combined-row .olubee-glyph[data-colour="Black"],
#olubee-sp-ai-overlay .combined-row .olubee-glyph[data-colour="Black"] {
  filter:
    drop-shadow(1px 1px 0 rgba(34,34,34,.95))
    drop-shadow(2px 2px 0 rgba(8,8,8,.88))
    drop-shadow(0 5px 6px rgba(0,0,0,.34));
}

#olubee-signage-preview .combined-row .olubee-glyph[data-colour="Silver"],
#olubee-sp-ai-overlay .combined-row .olubee-glyph[data-colour="Silver"] {
  filter:
    drop-shadow(1px 1px 0 rgba(115,115,115,.92))
    drop-shadow(2px 2px 0 rgba(72,72,72,.78))
    drop-shadow(0 5px 6px rgba(0,0,0,.28));
}

#olubee-signage-preview .combined-row .olubee-glyph[data-colour="Purple"],
#olubee-sp-ai-overlay .combined-row .olubee-glyph[data-colour="Purple"] {
  filter:
    drop-shadow(1px 1px 0 rgba(79,32,104,.95))
    drop-shadow(2px 2px 0 rgba(45,18,62,.86))
    drop-shadow(0 5px 6px rgba(0,0,0,.30));
}

/* Browser fallback characters receive the same dimensional treatment. */
#olubee-signage-preview .combined-row .olubee-fallback-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char {
  position: relative;
  transform: translateZ(0);
  text-shadow:
    1px 1px 0 rgba(0,0,0,.28),
    2px 2px 0 rgba(0,0,0,.20),
    0 5px 6px rgba(0,0,0,.24);
}

#olubee-signage-preview .combined-row .olubee-fallback-char[data-colour="Gold"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Gold"] {
  text-shadow:
    1px 1px 0 rgba(164,121,24,.90),
    2px 2px 0 rgba(112,78,12,.76),
    0 5px 6px rgba(0,0,0,.30);
}

#olubee-signage-preview .combined-row .olubee-fallback-char[data-colour="Silver"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Silver"] {
  text-shadow:
    1px 1px 0 rgba(115,115,115,.90),
    2px 2px 0 rgba(72,72,72,.72),
    0 5px 6px rgba(0,0,0,.26);
}

#olubee-signage-preview .combined-row .olubee-fallback-char[data-colour="Purple"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Purple"] {
  text-shadow:
    1px 1px 0 rgba(79,32,104,.92),
    2px 2px 0 rgba(45,18,62,.78),
    0 5px 6px rgba(0,0,0,.28);
}

/* Give the preview a subtle display surface so the raised letters read more
   like physical signage without changing the customer's actual artwork. */
#olubee-signage-preview .olubee-sp-live {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.96), rgba(246,246,246,.98) 52%, rgba(232,232,232,.98)),
    linear-gradient(135deg, #fff, #eee);
}

#olubee-signage-preview .olubee-sp-live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -12px 28px rgba(0,0,0,.035);
}

#olubee-signage-preview .olubee-sp-live {
  position: relative;
}

/* Never let the dimensional shadow clip the actual descenders on mobile. */
@media (max-width: 700px) {
  #olubee-signage-preview .olubee-sp-live {
    overflow: visible !important;
    padding-bottom: 30px;
  }
}

/* V4.1 — unified acrylic-gloss signage finish + true lowercase descenders.
   The supplied glyph artwork remains the source of truth. The gloss is added
   as a separate masked overlay so it cannot erase or redraw any letterforms. */
#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  overflow: visible !important;
  align-items: flex-end !important;
  padding-bottom: 18px !important;
}

#olubee-signage-preview .combined-row .olubee-glyph-shell,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: flex-end !important;
  justify-content: center !important;
  height: var(--glyph-height, auto) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  line-height: 0 !important;
  transform: translateZ(0);
  isolation: isolate;
}

#olubee-signage-preview .combined-row .olubee-glyph-shell.size-20,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell.size-20 {
  height: clamp(72px, 12vw, 120px) !important;
}

#olubee-signage-preview .combined-row .olubee-glyph-shell.size-10,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell.size-10 {
  height: calc(clamp(72px, 12vw, 120px) / 2) !important;
}

#olubee-signage-preview .combined-row .olubee-glyph-shell .olubee-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell .olubee-glyph {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  position: relative !important;
  z-index: 1;
  filter: saturate(1.06) contrast(1.04) drop-shadow(1px 1px 0 rgba(0,0,0,.14)) drop-shadow(2px 3px 3px rgba(0,0,0,.24));
}

/* Acrylic highlight: clipped to the exact alpha silhouette of each supplied
   glyph. This makes Special and Italics receive the same glossy treatment as
   the Normal letters without changing their underlying artwork. */
#olubee-signage-preview .combined-row .olubee-glyph-shell::after,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 24%,
      rgba(255,255,255,.72) 31%,
      rgba(255,255,255,.28) 38%,
      rgba(255,255,255,0) 48%),
    linear-gradient(180deg,
      rgba(255,255,255,.74) 0%,
      rgba(255,255,255,.30) 13%,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,0) 66%,
      rgba(0,0,0,.14) 100%);
  -webkit-mask-image: var(--glyph-mask);
  mask-image: var(--glyph-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  border-radius: 8px;
  mix-blend-mode: screen;
}

/* A second fine highlight gives the raised acrylic edge a polished rim. */
#olubee-signage-preview .combined-row .olubee-glyph-shell::before,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 22%);
  -webkit-mask-image: var(--glyph-mask);
  mask-image: var(--glyph-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .9;
}

/* Only lowercase g/j/p/q/y descend below the shared baseline. The preview
   has extra bottom room so these letters remain completely visible. */
#olubee-signage-preview .combined-row .olubee-glyph-shell.descender,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell.descender {
  transform: translateY(14%) !important;
}

#olubee-signage-preview .combined-row .olubee-glyph-shell:not(.descender),
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell:not(.descender) {
  transform: translateY(0) !important;
}

/* Normal-font fallback gets the same acrylic treatment, including a subtle
   specular band, while preserving the browser-rendered serif shape. */
#olubee-signage-preview .combined-row .olubee-fallback-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char {
  position: relative !important;
  z-index: 1;
  overflow: visible !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  background-image: linear-gradient(180deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.50) 12%,
    currentColor 30%,
    currentColor 72%,
    rgba(0,0,0,.28) 100%);
}

#olubee-signage-preview .combined-row .olubee-fallback-char[data-colour="Gold"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Gold"] {
  background-image: linear-gradient(180deg,#fff5b9 0%,#f6dc70 16%,#c9a227 48%,#8d6914 100%);
}
#olubee-signage-preview .combined-row .olubee-fallback-char[data-colour="Black"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Black"] {
  background-image: linear-gradient(180deg,#ffffff 0%,#bfc3c7 12%,#222 42%,#050505 100%);
}
#olubee-signage-preview .combined-row .olubee-fallback-char[data-colour="Silver"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Silver"] {
  background-image: linear-gradient(180deg,#ffffff 0%,#e9edf0 20%,#a7a9ac 54%,#62666b 100%);
}
#olubee-signage-preview .combined-row .olubee-fallback-char[data-colour="Purple"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Purple"] {
  background-image: linear-gradient(180deg,#f1d9ff 0%,#b97fd0 18%,#6b2d83 56%,#3d174e 100%);
}

#olubee-signage-preview .combined-row .olubee-fallback-char::after,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 4%; height: 16%;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  filter: blur(2px);
  opacity: .7;
}

@media (max-width: 700px) {
  #olubee-signage-preview .combined-row .olubee-glyph-shell.size-20,
  #olubee-sp-ai-overlay .combined-row .olubee-glyph-shell.size-20 {
    height: clamp(56px, 14vw, 84px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-glyph-shell.size-10,
  #olubee-sp-ai-overlay .combined-row .olubee-glyph-shell.size-10 {
    height: calc(clamp(56px, 14vw, 84px) / 2) !important;
  }
  #olubee-signage-preview .combined-row,
  #olubee-sp-ai-overlay .combined-row {
    padding-bottom: 16px !important;
  }
  #olubee-signage-preview .combined-row .olubee-glyph-shell.descender,
  #olubee-sp-ai-overlay .combined-row .olubee-glyph-shell.descender {
    transform: translateY(15%) !important;
  }
}

/* V4.2 — premium 3D acrylic signage presentation.
   The glyph image remains the exact letter silhouette. All dimensional effects
   are layered behind/on top so they cannot erase parts of the artwork. */
#olubee-signage-preview .olubee-sp-live {
  overflow: visible !important;
  min-height: 245px;
  padding: 44px 34px 62px !important;
  position: relative;
  isolation: isolate;
  background-color: #f4f3ef !important;
  background-image:
    radial-gradient(ellipse at 20% 18%, rgba(255,255,255,.90) 0%, rgba(255,255,255,0) 48%),
    radial-gradient(ellipse at 78% 82%, rgba(0,0,0,.055) 0%, rgba(0,0,0,0) 55%),
    repeating-linear-gradient(8deg, rgba(120,120,120,.025) 0px, rgba(120,120,120,.025) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(96deg, rgba(255,255,255,.32) 0px, rgba(255,255,255,.32) 1px, transparent 1px, transparent 7px),
    linear-gradient(180deg,#faf9f6,#eeece7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -18px 35px rgba(0,0,0,.035);
}

#olubee-signage-preview .combined-row .olubee-glyph-shell,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell {
  --acrylic-depth: rgba(5,5,5,.78);
  --acrylic-highlight: rgba(255,255,255,.78);
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.18)) drop-shadow(2px 9px 9px rgba(0,0,0,.16));
}

#olubee-signage-preview .combined-row .olubee-glyph-shell[data-colour="Gold"],
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell[data-colour="Gold"] {
  --acrylic-depth: rgba(103,72,8,.78);
  --acrylic-highlight: rgba(255,249,190,.90);
}
#olubee-signage-preview .combined-row .olubee-glyph-shell[data-colour="Silver"],
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell[data-colour="Silver"] {
  --acrylic-depth: rgba(65,68,72,.76);
  --acrylic-highlight: rgba(255,255,255,.94);
}
#olubee-signage-preview .combined-row .olubee-glyph-shell[data-colour="Purple"],
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell[data-colour="Purple"] {
  --acrylic-depth: rgba(48,17,62,.80);
  --acrylic-highlight: rgba(249,220,255,.86);
}

/* Extruded acrylic edge — sits behind the exact supplied glyph. */
#olubee-signage-preview .combined-row .olubee-glyph-shell::before,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  background: var(--acrylic-depth);
  transform: translate(3px, 5px);
  -webkit-mask-image: var(--glyph-mask);
  mask-image: var(--glyph-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .95;
}

/* Keep the supplied glyph fully visible above the extrusion. */
#olubee-signage-preview .combined-row .olubee-glyph-shell .olubee-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell .olubee-glyph {
  position: relative !important;
  z-index: 2 !important;
  filter: saturate(1.08) contrast(1.05) brightness(1.01);
}

/* Glossy acrylic face reflection. */
#olubee-signage-preview .combined-row .olubee-glyph-shell::after,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3 !important;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 23%,
      var(--acrylic-highlight) 30%,
      rgba(255,255,255,.24) 36%,
      transparent 44%),
    linear-gradient(180deg,
      rgba(255,255,255,.54) 0%,
      rgba(255,255,255,.15) 10%,
      transparent 28%,
      transparent 68%,
      rgba(0,0,0,.20) 100%);
  -webkit-mask-image: var(--glyph-mask);
  mask-image: var(--glyph-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: contain;
  mask-size: contain;
  mix-blend-mode: screen;
}

/* Special-font assets are normalized to black artwork in V4.2. Keep a safe
   fallback for cached installations that still contain white special PNGs. */
#olubee-signage-preview .combined-row .olubee-glyph-shell.special-shell .olubee-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell.special-shell .olubee-glyph {
  filter: brightness(0) saturate(100%) contrast(1.05) drop-shadow(0 6px 5px rgba(0,0,0,.18));
}

/* Descenders are the only lowercase letters allowed below the shared baseline. */
#olubee-signage-preview .combined-row .olubee-glyph-shell.descender,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell.descender {
  transform: translateY(14%) !important;
  z-index: 4;
}

/* Extra lower room prevents g/j/p/q/y from ever being clipped. */
#olubee-signage-preview .combined-row {
  margin-bottom: 20px !important;
}

@media (max-width: 700px) {
  #olubee-signage-preview .olubee-sp-live {
    min-height: 205px;
    padding: 34px 18px 54px !important;
  }
  #olubee-signage-preview .combined-row {
    margin-bottom: 16px !important;
  }
}


/* V4.4 — all customer-supplied OTFs are the source of truth.
   Normal, Italics and Special use the exact uploaded outlines for each size. */
@font-face {
  font-family: "Olubee Normal 20CM";
  src: url("fonts/olubee-normal-20cm.woff2") format("woff2"),
       url("fonts/olubee-normal-20cm.woff") format("woff"),
       url("fonts/olubee-normal-20cm.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Olubee Normal 10CM";
  src: url("fonts/olubee-normal-10cm.woff2") format("woff2"),
       url("fonts/olubee-normal-10cm.woff") format("woff"),
       url("fonts/olubee-normal-10cm.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Olubee Italics 20CM";
  src: url("fonts/olubee-italics-20cm.woff2") format("woff2"),
       url("fonts/olubee-italics-20cm.woff") format("woff"),
       url("fonts/olubee-italics-20cm.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Olubee Italics 10CM";
  src: url("fonts/olubee-italics-10cm.woff2") format("woff2"),
       url("fonts/olubee-italics-10cm.woff") format("woff"),
       url("fonts/olubee-italics-10cm.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Olubee Special 20CM";
  src: url("fonts/olubee-special-20cm.woff2") format("woff2"),
       url("fonts/olubee-special-20cm.woff") format("woff"),
       url("fonts/olubee-special-20cm.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Olubee Special 10CM";
  src: url("fonts/olubee-special-10cm.woff2") format("woff2"),
       url("fonts/olubee-special-10cm.woff") format("woff"),
       url("fonts/olubee-special-10cm.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}

#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  align-items: baseline !important;
  line-height: 1 !important;
  overflow: visible !important;
  filter: none !important;
  text-shadow: none !important;
}

#olubee-signage-preview .olubee-sp-live,
#olubee-sp-ai-overlay {
  overflow: visible !important;
}

#olubee-signage-preview .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1 !important;
  vertical-align: baseline;
  position: static !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

#olubee-signage-preview .combined-row .olubee-font-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.size-20-char {
  font-size: clamp(64px, 12vw, 112px) !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.size-10-char {
  font-size: clamp(32px, 6vw, 56px) !important;
}

#olubee-signage-preview .combined-row .olubee-font-char.normal-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char.size-20-char {
  font-family: "Olubee Normal 20CM" !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.normal-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char.size-10-char {
  font-family: "Olubee Normal 10CM" !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.italics-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.italics-char.size-20-char {
  font-family: "Olubee Italics 20CM" !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.italics-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.italics-char.size-10-char {
  font-family: "Olubee Italics 10CM" !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.special-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.special-char.size-20-char {
  font-family: "Olubee Special 20CM" !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.special-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.special-char.size-10-char {
  font-family: "Olubee Special 10CM" !important;
}

#olubee-signage-preview .combined-row .olubee-fallback-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char {
  position: static !important;
  transform: none !important;
  line-height: 1 !important;
  vertical-align: baseline;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

#olubee-signage-preview .combined-row .olubee-glyph-shell,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell {
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#olubee-signage-preview .combined-row .olubee-glyph-shell::before,
#olubee-signage-preview .combined-row .olubee-glyph-shell::after,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell::before,
#olubee-sp-ai-overlay .combined-row .olubee-glyph-shell::after {
  display: none !important;
  content: none !important;
}
#olubee-signage-preview .combined-row .olubee-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-glyph {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#olubee-signage-preview .combined-row .descender,
#olubee-sp-ai-overlay .combined-row .descender {
  position: static !important;
  margin-bottom: 0 !important;
}

#olubee-signage-preview .combined-row {
  margin-bottom: 0 !important;
}

@media (max-width: 700px) {
  #olubee-signage-preview .combined-row .olubee-font-char.size-20-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.size-20-char {
    font-size: clamp(52px, 14vw, 82px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-font-char.size-10-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.size-10-char {
    font-size: clamp(26px, 7vw, 41px) !important;
  }
}


/* V4.5 — requested display corrections.
   Normal 20CM/10CM must be completely flat: no acrylic/extrusion/gloss/shadow.
   The exact uploaded Normal OTF remains the source of the letter shapes. */
#olubee-signage-preview .combined-row .olubee-fallback-char.normal-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char.normal-char {
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}

#olubee-signage-preview .combined-row .olubee-fallback-char.normal-char::before,
#olubee-signage-preview .combined-row .olubee-fallback-char.normal-char::after,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char.normal-char::before,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char.normal-char::after {
  content: none !important;
  display: none !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* V4.6 — uploaded-font correction.
   The legacy preview stylesheet contains an older Georgia fallback rule with
   higher specificity. Explicitly bind Normal preview characters to the newly
   supplied Normal OTFs so they cannot silently fall back to Georgia. */
#olubee-signage-preview .combined-row .olubee-fallback-char.normal-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char.normal-char.size-20-char {
  font-family: "Olubee Normal 20CM" !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
#olubee-signage-preview .combined-row .olubee-fallback-char.normal-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char.normal-char.size-10-char {
  font-family: "Olubee Normal 10CM" !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* The new 20CM Italics OTF supplied by the customer is already upright.
   Do not counter-skew it. */
#olubee-signage-preview .combined-row .olubee-font-char.italics-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.italics-char.size-20-char {
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-style: normal !important;
}

/* V4.7 — browser-safe webfont loading. The uploaded OTFs remain the source of truth,
   while WOFF2/WOFF copies prevent browsers/servers from rejecting CFF OTF webfonts. */
#olubee-signage-preview .olubee-font-char,
#olubee-signage-preview .olubee-fallback-char,
#olubee-sp-ai-overlay .olubee-font-char,
#olubee-sp-ai-overlay .olubee-fallback-char {
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-variant: normal !important;
  font-stretch: normal !important;
}

/* V4.8 — exact Normal OTF outlines rendered as SVG glyphs for reliable browser display. */
#olubee-signage-preview .combined-row .olubee-font-char.normal-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  height: clamp(72px, 12vw, 120px) !important;
  width: auto !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  overflow: visible !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.normal-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char.size-10-char {
  height: calc(clamp(72px, 12vw, 120px) / 2) !important;
}
#olubee-signage-preview .combined-row .olubee-normal-vector-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-normal-vector-glyph {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: bottom !important;
}
@media (max-width: 700px) {
  #olubee-signage-preview .combined-row .olubee-font-char.normal-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char {
    height: clamp(56px, 14vw, 84px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-font-char.normal-char.size-10-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char.size-10-char {
    height: calc(clamp(56px, 14vw, 84px) / 2) !important;
  }
}


/* V4.9 — unified visual baseline for every supplied font.
   All font faces use a 75% ascent / 25% descent baseline model. The normal
   vector glyphs use the same 75% baseline anchor. Only lowercase g/j/p/q/y
   are allowed to occupy the descent area. */
#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  align-items: flex-end !important;
  line-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 35px !important;
  box-sizing: content-box !important;
}

#olubee-signage-preview .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char,
#olubee-signage-preview .combined-row .olubee-fallback-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char {
  display: inline-block !important;
  flex: 0 0 auto !important;
  position: relative !important;
  top: 26% !important;
  vertical-align: bottom !important;
  line-height: 1 !important;
  overflow: visible !important;
}

/* Keep the visual baseline consistent across the 20CM/10CM pair. */
#olubee-signage-preview .combined-row .olubee-font-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.size-20-char {
  font-size: clamp(64px, 12vw, 112px) !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.size-10-char {
  font-size: clamp(32px, 6vw, 56px) !important;
}

/* Normal vector glyph: its visible bottom is the baseline anchor. */
#olubee-signage-preview .combined-row .olubee-font-char.normal-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char {
  display: inline-block !important;
  align-self: flex-end !important;
  position: relative !important;
  top: 0 !important;
  height: clamp(72px, 12vw, 120px) !important;
  width: auto !important;
  line-height: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.normal-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char.size-10-char {
  height: calc(clamp(72px, 12vw, 120px) / 2) !important;
}
#olubee-signage-preview .combined-row .olubee-normal-vector-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-normal-vector-glyph {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
}

/* The only letters permitted to extend below the baseline are lowercase
   descenders. Give the row enough room so they can never be clipped. */
#olubee-signage-preview .combined-row .descender,
#olubee-sp-ai-overlay .combined-row .descender {
  overflow: visible !important;
}

@media (max-width: 700px) {
  #olubee-signage-preview .combined-row .olubee-font-char.size-20-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.size-20-char {
    font-size: clamp(52px, 14vw, 82px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-font-char.size-10-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.size-10-char {
    font-size: clamp(26px, 7vw, 41px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-font-char.normal-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char {
    height: clamp(56px, 14vw, 84px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-font-char.normal-char.size-10-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.normal-char.size-10-char {
    height: calc(clamp(56px, 14vw, 84px) / 2) !important;
  }
}


/* V5.0 — unified vector baseline system.
   All six font/size combinations are rendered from the uploaded OTF outlines
   as tight SVG glyphs. Every shell bottom is the single shared baseline.
   The image is shifted by the source glyph's exact yMin so only true
   lowercase descenders (g/j/p/q/y) extend below that baseline. */
#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  display:flex !important;
  align-items:flex-end !important;
  line-height:0 !important;
  overflow:visible !important;
  padding-bottom:64px !important;
  box-sizing:content-box !important;
}
#olubee-signage-preview .combined-row .olubee-vector-shell,
#olubee-sp-ai-overlay .combined-row .olubee-vector-shell {
  position:relative !important;
  display:inline-flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  height:clamp(72px, 12vw, 120px) !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  overflow:visible !important;
  vertical-align:bottom !important;
  top:auto !important;
  transform:none !important;
}
#olubee-signage-preview .combined-row .olubee-vector-shell.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-vector-shell.size-10-char {
  height:calc(clamp(72px, 12vw, 120px) / 2) !important;
}
#olubee-signage-preview .combined-row .olubee-vector-glyph,
#olubee-sp-ai-overlay .combined-row .olubee-vector-glyph {
  display:block !important;
  width:auto !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  flex:0 0 auto !important;
  object-fit:fill !important;
  position:relative !important;
  transform:none;
  transform-origin:center bottom !important;
  overflow:visible !important;
}
#olubee-signage-preview .combined-row .olubee-fallback-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char {
  align-self:flex-end !important;
  top:0 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
#olubee-signage-preview .combined-row .olubee-fallback-char.descender,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char.descender {
  transform:none !important;
}
#olubee-signage-preview .olubee-sp-live,
#olubee-sp-ai-overlay {
  overflow:visible !important;
}
#olubee-signage-preview .olubee-sp-live {
  position:relative !important;
  padding-bottom:72px !important;
}
@media (max-width:700px) {
  #olubee-signage-preview .combined-row .olubee-vector-shell,
  #olubee-sp-ai-overlay .combined-row .olubee-vector-shell {
    height:clamp(56px, 14vw, 84px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-vector-shell.size-10-char,
  #olubee-sp-ai-overlay .combined-row .olubee-vector-shell.size-10-char {
    height:calc(clamp(56px, 14vw, 84px) / 2) !important;
  }
  #olubee-signage-preview .combined-row,
  #olubee-sp-ai-overlay .combined-row { padding-bottom:48px !important; }
  #olubee-signage-preview .olubee-sp-live { padding-bottom:56px !important; }
}

/* V5.1 — real font layout for clean word construction.
   Use the supplied webfonts directly so every character keeps its real
   advance width/baseline. This prevents ornamental swashes from becoming
   separate oversized boxes and makes mixed 20CM/10CM lettering read as one word. */
#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  padding: 0 8px 72px !important;
  box-sizing: content-box !important;
}

#olubee-signage-preview .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char {
  display: inline-block !important;
  position: relative !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-kerning: normal !important;
  font-variant-ligatures: none !important;
  white-space: nowrap !important;
  padding: 0 !important;
  box-sizing: content-box !important;
  overflow: visible !important;
  transform-origin: center bottom !important;
  text-shadow: none !important;
  filter: none !important;
}

#olubee-signage-preview .combined-row .olubee-font-char.size-20-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.size-20-char {
  font-size: 112px !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.size-10-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.size-10-char {
  font-size: 56px !important;
}

/* The five approved lowercase descenders are the only glyphs allowed to
   retain ink below the common baseline. All other glyphs are shifted upward
   by the runtime measurement of their actual ink descent. */
#olubee-signage-preview .combined-row .olubee-font-char.descender,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.descender {
  overflow: visible !important;
}

#olubee-signage-preview .olubee-sp-live,
#olubee-sp-ai-overlay,
#olubee-sp-ai-overlay .olubee-sp-live {
  overflow: visible !important;
}

@media (max-width: 700px) {
  #olubee-signage-preview .combined-row .olubee-font-char.size-20-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.size-20-char {
    font-size: clamp(52px, 14vw, 82px) !important;
  }
  #olubee-signage-preview .combined-row .olubee-font-char.size-10-char,
  #olubee-sp-ai-overlay .combined-row .olubee-font-char.size-10-char {
    font-size: clamp(26px, 7vw, 41px) !important;
  }
  #olubee-signage-preview .combined-row,
  #olubee-sp-ai-overlay .combined-row {
    padding-bottom: 52px !important;
  }
}

/* V5.3 — baseline-only correction.
   Do not alter the existing font appearance, size, spacing, or preview design.
   Runtime JS places every non-descender's visible bottom on one shared
   baseline. Only lowercase g/j/p/q/y retain their natural below-baseline ink. */
#olubee-signage-preview .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char {
  transform-origin: center bottom !important;
  margin-right: 0 !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.descender,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.descender {
  transform-origin: center bottom !important;
}

/* V5.4 — final baseline/display correction only.
   Keep every other V5.3 appearance and behavior unchanged. The bottom of the
   line box is the single shared visual baseline for all six font/size pairs.
   Only lowercase g/j/p/q/y are allowed to retain ink below it. */
#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  align-items: flex-end !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 8px !important;
  margin: 0 auto !important;
  overflow: visible !important;
  box-sizing: content-box !important;
}

#olubee-signage-preview .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char {
  line-height: 1 !important;
  vertical-align: bottom !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Force a common baseline regardless of each OTF's internal ascent/descent. */
#olubee-signage-preview .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char {
  /* Runtime JS applies the exact optical correction from the glyph's yMin. */
}

/* Remove the old bottom padding that was making the preview appear too high. */
#olubee-signage-preview .olubee-sp-live {
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  padding: 20px !important;
}

#olubee-signage-preview .olubee-sp-live,
#olubee-sp-ai-overlay {
  overflow: visible !important;
}

@media (max-width: 700px) {
  #olubee-signage-preview .olubee-sp-live {
    padding: 16px !important;
  }
  #olubee-signage-preview .combined-row,
  #olubee-sp-ai-overlay .combined-row {
    padding: 0 6px !important;
  }
}

/* V5.5 — baseline correction only.
   Do not change font faces, sizes, colours, spacing or word construction.
   JS computes one shared baseline from each glyph's actual visible ink and
   font yMin. The five lowercase descenders are allowed to extend below it. */
#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: visible !important;
  position: relative !important;
}
#olubee-signage-preview .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char {
  position: relative !important;
  top: 0 !important;
  vertical-align: bottom !important;
  transform-origin: center bottom !important;
  overflow: visible !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.descender,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.descender {
  overflow: visible !important;
}


/* V5.7 — baseline/display correction only. */
#olubee-signage-preview .olubee-sp-live {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  position: relative !important;
  padding: 24px 18px 72px !important;
  box-sizing: border-box !important;
}
#olubee-signage-preview .combined-row,
#olubee-sp-ai-overlay .combined-row {
  display: block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  white-space: nowrap !important;
  text-align: left !important;
  overflow: visible !important;
  line-height: 1 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}
#olubee-signage-preview .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-font-char {
  display: inline-block !important;
  position: relative !important;
  vertical-align: baseline !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  overflow: visible !important;
  transform-origin: center bottom !important;
}
#olubee-signage-preview .combined-row .olubee-font-char.descender,
#olubee-sp-ai-overlay .combined-row .olubee-font-char.descender { overflow: visible !important; }
@media (max-width: 700px) {
  #olubee-signage-preview .olubee-sp-live { padding: 18px 10px 56px !important; }
}


/* V5.8 — AI wall preview only: exact supplied lettering is presented as raised
   3D acrylic while the normal live preview remains unchanged. */
#olubee-sp-ai-overlay .combined-row .olubee-font-char,
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char {
  text-shadow:
    1px 1px 0 rgba(0,0,0,.34),
    2px 2px 0 rgba(0,0,0,.30),
    3px 3px 0 rgba(0,0,0,.25),
    4px 4px 0 rgba(0,0,0,.20),
    0 7px 8px rgba(0,0,0,.28) !important;
  filter: saturate(1.08) contrast(1.04) !important;
}

#olubee-sp-ai-overlay .combined-row .olubee-font-char[data-colour="Gold"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Gold"] {
  text-shadow:
    1px 1px 0 #806010,
    2px 2px 0 #70530A,
    3px 3px 0 #604608,
    4px 4px 0 rgba(70,48,5,.82),
    0 7px 8px rgba(0,0,0,.28) !important;
}

#olubee-sp-ai-overlay .combined-row .olubee-font-char[data-colour="Silver"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Silver"] {
  text-shadow:
    1px 1px 0 #858A91,
    2px 2px 0 #72777E,
    3px 3px 0 #62676D,
    4px 4px 0 rgba(55,59,64,.78),
    0 7px 8px rgba(0,0,0,.28) !important;
}

#olubee-sp-ai-overlay .combined-row .olubee-font-char[data-colour="Purple"],
#olubee-sp-ai-overlay .combined-row .olubee-fallback-char[data-colour="Purple"] {
  text-shadow:
    1px 1px 0 #4D1D5D,
    2px 2px 0 #42184F,
    3px 3px 0 #35133F,
    4px 4px 0 rgba(35,10,44,.80),
    0 7px 8px rgba(0,0,0,.28) !important;
}

/* V5.9 — mobile containment only.
   Prevent the preview card and its AI action from being wider than the phone
   viewport. This does not change fonts, colours, sizing ratios, or the desktop
   layout. It also leaves enough room below the action/status area so mobile
   browser/theme floating controls cannot visually cover the next content. */
#olubee-signage-preview,
#olubee-signage-preview .olubee-sp-card,
#olubee-signage-preview .olubee-sp-preview-box,
#olubee-signage-preview .olubee-sp-ai-wrap,
#olubee-signage-preview .olubee-sp-ai-canvas-wrap {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#olubee-signage-preview .olubee-sp-ai {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#olubee-signage-preview .olubee-sp-status {
  position: relative !important;
  z-index: 1 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 700px) {
  #olubee-signage-preview {
    width: 100% !important;
    overflow: visible !important;
  }

  #olubee-signage-preview .olubee-sp-card {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: visible !important;
  }

  #olubee-signage-preview .olubee-sp-brand-entry,
  #olubee-signage-preview .olubee-sp-zoom,
  #olubee-signage-preview .olubee-sp-preview-box {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #olubee-signage-preview .olubee-sp-ai {
    margin-top: 16px !important;
    padding: 14px 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    border-radius: 10px !important;
  }

  #olubee-signage-preview .olubee-sp-status {
    margin-bottom: 18px !important;
    min-height: 21px !important;
  }

  #olubee-signage-preview .olubee-sp-ai-wrap {
    margin-top: 18px !important;
  }
}


/* V5.10 — mobile layout repair.
   Keep the AI action in normal document flow on phones. Some themes/plugins
   can apply floating/expanding button treatments that visually clip the CTA,
   status text, or the content immediately below it. The signage preview owns
   this control, so remove those inherited treatments on mobile only. */
#olubee-signage-preview .olubee-sp-ai,
#olubee-signage-preview .olubee-sp-ai:hover,
#olubee-signage-preview .olubee-sp-ai:focus,
#olubee-signage-preview .olubee-sp-ai:active {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  box-shadow: none !important;
}

#olubee-signage-preview .olubee-sp-ai::before,
#olubee-signage-preview .olubee-sp-ai::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 700px) {
  #olubee-signage-preview .olubee-sp-ai {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 18px 0 0 !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #olubee-signage-preview .olubee-sp-status {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 21px !important;
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    clear: both !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #olubee-signage-preview .olubee-sp-ai-wrap {
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #olubee-signage-preview .olubee-sp-ai-canvas-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}


/* V5.11 — mobile brand-preview containment.
   The complete customer brand must remain visible on phones. Do not clip the
   transformed text, and let the preview box grow vertically when the selected
   font has taller ink/descenders. Desktop styling is intentionally untouched. */
@media (max-width: 700px) {
  #olubee-signage-preview .olubee-sp-preview-box,
  #olubee-signage-preview .olubee-sp-single-preview,
  #olubee-signage-preview .olubee-sp-live {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #olubee-signage-preview .olubee-sp-live {
    width: 100% !important;
    height: auto !important;
    min-height: 165px !important;
    padding: 18px 8px !important;
    contain: none !important;
  }

  #olubee-signage-preview .olubee-sp-live .combined-row {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    overflow: visible !important;
    box-sizing: content-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #olubee-signage-preview .olubee-sp-live .olubee-font-char,
  #olubee-signage-preview .olubee-sp-live .olubee-fallback-char {
    overflow: visible !important;
  }
}


/* V5.12 — mobile font-ink safety buffer.
   iOS Safari may clip font ink that sits outside an inline element's line box,
   particularly with large custom OTF glyphs and transformed text. Give the
   combined row and each glyph a small transparent safety area so every stroke
   remains visible. This is mobile-only and does not alter the desktop design. */
@media (max-width: 700px) {
  #olubee-signage-preview .olubee-sp-live .combined-row {
    padding: 26px 24px 42px !important;
    box-sizing: content-box !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  #olubee-signage-preview .olubee-sp-live .combined-row .olubee-font-char,
  #olubee-signage-preview .olubee-sp-live .combined-row .olubee-fallback-char {
    display: inline-block !important;
    overflow: visible !important;
    line-height: 1.08 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  #olubee-signage-preview .olubee-sp-live {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
  }
}

/* V5.13 — iPhone/mobile brand-preview renderer.
   The live brand lettering is drawn to a dedicated canvas on narrow screens.
   This avoids iOS Safari clipping custom OTF ink that extends outside an
   inline element's line box. Desktop remains on the existing webfont path. */
@media (max-width: 700px) {
  #olubee-signage-preview .olubee-sp-live .olubee-mobile-brand-canvas {
    display: block !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    vertical-align: top !important;
  }
}


/* V5.17 — interactive AI wall with real 3D acrylic lettering. */
#olubee-signage-preview .olubee-sp-ai-canvas-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  touch-action: none !important;
}
#olubee-signage-preview .olubee-sp-ai-canvas-wrap img#olubee-sp-ai-bg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
#olubee-signage-preview .olubee-sp-ai-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4 !important;
  overflow: visible !important;
  cursor: grab !important;
  touch-action: none !important;
}
#olubee-signage-preview .olubee-sp-ai-overlay.is-dragging { cursor: grabbing !important; }
#olubee-signage-preview .olubee-wall-acrylic-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  pointer-events: none !important;
}
#olubee-signage-preview .olubee-wall-controls {
  margin: 12px 0 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
#olubee-signage-preview .olubee-wall-controls-title { font-weight: 700 !important; margin-bottom: 8px !important; }
#olubee-signage-preview .olubee-wall-control-row { display:flex !important; gap:6px !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; }
#olubee-signage-preview .olubee-wall-control-row button { min-width:38px !important; min-height:38px !important; padding:6px 10px !important; cursor:pointer !important; }
#olubee-signage-preview .olubee-wall-size-row { display:flex !important; align-items:center !important; gap:8px !important; margin-top:10px !important; }
#olubee-signage-preview .olubee-wall-size-row input[type=range] { flex:1 1 auto !important; min-width:0 !important; }
#olubee-signage-preview .olubee-wall-size-row strong { min-width:48px !important; text-align:right !important; }
@media (max-width:700px) {
  #olubee-signage-preview .olubee-wall-controls { padding:9px 10px !important; }
  #olubee-signage-preview .olubee-wall-control-row button { min-width:40px !important; min-height:40px !important; }
  #olubee-signage-preview .olubee-wall-size-row { font-size:13px !important; }
}

/* V5.17.3: customer save-preview control */
#olubee-sp-download.olubee-sp-download { border:0; cursor:pointer; text-decoration:none; }
#olubee-sp-download.olubee-sp-download:disabled { opacity:.6; cursor:default; }
@media (max-width:700px){ #olubee-sp-download.olubee-sp-download { display:block; width:100%; box-sizing:border-box; text-align:center; } }


/* V5.17.7 — Match the AI-wall physical proportion in the normal brand preview.
   20CM is the 100% reference and 10CM is exactly 50% of its display size.
   This applies to the live customer preview only; all other styling is preserved. */
#olubee-signage-preview .combined-row .olubee-font-char.size-20-char { font-size: 112px !important; }
#olubee-signage-preview .combined-row .olubee-font-char.size-10-char { font-size: 56px !important; }
@media (max-width: 700px) {
  #olubee-signage-preview .combined-row .olubee-font-char.size-20-char { font-size: clamp(52px, 14vw, 82px) !important; }
  #olubee-signage-preview .combined-row .olubee-font-char.size-10-char { font-size: clamp(26px, 7vw, 41px) !important; }
}