/**
 * Shared FX layer for all Tunai themes — loaded before each theme's own
 * stylesheet. Generic mechanics only; each theme supplies the colours via
 * custom properties on its root:
 *
 *   --fx-accent  scroll-progress bar colour
 *   --fx-spot    cursor-spotlight tint (a translucent rgba)
 *
 * The matching behaviour lives in ThemeFX (data-tilt / data-spot /
 * data-magnetic / data-reveal / data-countup / data-parallax).
 */

/* Cursor spotlight — a soft light that follows the pointer across a card. */
[data-spot] {
  position: relative;
}

[data-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    var(--fx-spot, rgba(255, 255, 255, 0.12)),
    transparent 65%
  );
}

[data-spot]:hover::after {
  opacity: 1;
}

/* 3D tilt — ThemeFX drives --rx/--ry from the pointer; only under .tfx and a
   fine pointer, so touch devices and no-JS never get a stuck perspective.
   Hover also pops the card a touch (--tz) so tilt reads as a lift. */
.tfx [data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    scale(var(--tz, 1));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.16s ease;
}

.tfx [data-tilt]:hover {
  --tz: 1.02;
}

/* Magnetic CTAs — ThemeFX nudges `translate` toward the cursor; the spring
   back happens here. Composes with any theme `transform` (skews etc.).
   Hover adds an accent bloom so the pull reads as energy, not drift. */
[data-magnetic] {
  transition: translate 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
  will-change: translate;
}

.tfx [data-magnetic]:hover {
  filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--fx-accent, #888) 40%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .tfx [data-tilt] {
    transform: none;
    transition: none;
  }

  [data-spot]::after {
    display: none;
  }
}

/* ── FX v3 ──────────────────────────────────────────────────────────────── */

/* Headline sizing + wrap defence, for every split-text headline. Not gated on
   .tfx so it also holds pre-hydration / no-JS / reduced-motion. Theme hero
   rules consume --tx-scale inside their font-size calc(); --tx-auto is set per
   element by ThemeFX when the text is long, --tx-user comes from the studio's
   "Headline size" chips (emitted on the theme root by ThemeRender). */
[data-splittext] {
  text-wrap: balance;
  overflow-wrap: anywhere;
  --tx-scale: calc(var(--tx-auto, 1) * var(--tx-user, 1));
}

/* Split-text headline: ThemeFX wraps each character in .fx-w > .fx-c; chars
   rise out of their own clipping box with a slight settling rotation,
   staggered via --d.

   Themes often set display line-heights around ~1 (sometimes < 1). Glyph ink
   — ascenders, descenders, italic side bearings, serifs — paints outside that
   line box, so a bare overflow:hidden clip shaves the letters. Pad the clip
   past the overhang and cancel with negative margin so layout/spacing stay
   the same. */
.tfx [data-splittext] .fx-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: 0.28em;
  padding-inline: 0.14em;
  margin-block: -0.28em;
  margin-inline: -0.14em;
}

.tfx [data-splittext] .fx-c {
  display: inline-block;
  translate: 0 115%;
  rotate: 9deg;
  opacity: 0;
  transition: translate 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
    rotate 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
  transition-delay: var(--d, 0s);
}

.tfx [data-splittext].fx-ready .fx-c {
  translate: 0 0;
  rotate: 0deg;
  opacity: 1;
}

/* Curtain image reveal: an accent panel wipes off the image when it enters
   view, while the photo settles from a slight over-zoom. Uses ::before so it
   composes with themes that already use ::after on the same figure. */
.tfx [data-curtain] {
  position: relative;
  overflow: hidden;
}

.tfx [data-curtain]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--fx-accent, #000);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1) 0.1s;
  pointer-events: none;
}

.tfx [data-curtain].is-in::before {
  transform: scaleX(0);
}

.tfx [data-curtain] img {
  scale: 1.14;
  transition: scale 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}

.tfx [data-curtain].is-in img {
  scale: 1;
}

/* Pin theme app bar to the viewport (sticky fails under overflow-x: hidden).
   ThemeFX also earns the attribute its name: scrolling down slides the bar
   away (fx-nav-hidden), scrolling up brings it back; once past the fold it
   gains a soft drop shadow (fx-nav-scrolled) so it separates from content. */
[data-autohide].fx-nav-pinned {
  position: fixed !important;
  z-index: 50 !important;
}

.tfx [data-autohide].fx-nav-pinned {
  transition: translate 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.38s ease;
}

.tfx [data-autohide].fx-nav-hidden {
  translate: 0 -130%;
}

.tfx [data-autohide].fx-nav-scrolled {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* Accent-tinted text selection, everywhere the FX layer runs. */
.tfx ::selection {
  background: color-mix(in srgb, var(--fx-accent, #888) 28%, transparent);
}

/* Scrollspy: the nav link whose section is on screen lights up in accent. */
.tfx [data-nav] a.fx-active {
  color: var(--fx-accent, currentColor) !important;
}

/* Click ripple on CTAs. */
[data-ripple] {
  position: relative;
  overflow: hidden;
}

.fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  scale: 0;
  animation: fx-ripple 0.55s ease-out forwards;
  pointer-events: none;
}

@keyframes fx-ripple {
  to {
    scale: 1;
    opacity: 0;
  }
}

/* Marquee utility: render the track twice inside .fx-marquee. Edges fade out
   so the ticker melts into the page instead of clipping hard. */
.fx-marquee {
  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Let readers stop the ticker to read it. */
.fx-marquee:hover > span {
  animation-play-state: paused;
}

.fx-marquee > span {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 100%;
  justify-content: space-around;
  animation: fx-marquee var(--fx-mq, 28s) linear infinite;
}

@keyframes fx-marquee {
  to {
    translate: -100% 0;
  }
}

/* ── Theme hero carousel (ThemeHero) — drop-in for static hero <img>s ── */
.theme-hero {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.theme-hero:active {
  cursor: grabbing;
}

/* Full-bleed absolute hero frames (forge / ember / velocity). */
.fg-hero-bg > .theme-hero,
.em-hero-bg > .theme-hero,
.vx-hero-bg > .theme-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}

/*
 * Full-bleed heroes stack the image under copy. Raise the bg above the
 * gradient, let swipes hit the carousel, and keep CTAs clickable.
 */
.fg-hero-bg,
.em-hero-bg,
.vx-hero-bg {
  z-index: 0 !important;
}

.fg-hero::after,
.em-hero::after,
.vx-hero::after {
  z-index: 1;
  pointer-events: none;
}

.fg-hero-inner,
.em-hero-inner,
.vx-hero-inner {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.fg-hero-inner a,
.fg-hero-inner button,
.em-hero-inner a,
.em-hero-inner button,
.vx-hero-inner a,
.vx-hero-inner button {
  pointer-events: auto;
}

.theme-hero__sizer {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  max-width: none !important;
  filter: none !important;
  object-fit: cover;
  -webkit-user-drag: none;
}

.theme-hero__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.theme-hero__track {
  display: flex;
  height: 100%;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.theme-hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

/* Beat theme rules that absolute-position bare hero imgs (forge/ember/velocity). */
.theme-hero__slide img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
  filter: none !important;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Ken Burns drift: the visible slide's photo slowly settles outward, so the
   hero never sits perfectly still. Restarts each time a slide takes over. */
.tfx .theme-hero__slide--active img {
  animation: fx-kenburns 9s ease-out forwards;
}

@keyframes fx-kenburns {
  from {
    scale: 1;
  }
  to {
    scale: 1.07;
  }
}

/* Desktop arrows — appear on hover for fine pointers; swipe/dots elsewhere. */
.theme-hero__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, background 0.2s ease, scale 0.2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (hover: hover) and (pointer: fine) {
  .theme-hero__arrow {
    display: grid;
  }
}

.theme-hero__arrow--prev {
  left: 12px;
}

.theme-hero__arrow--next {
  right: 12px;
}

.theme-hero:hover .theme-hero__arrow,
.theme-hero__arrow:focus-visible {
  opacity: 1;
}

.theme-hero__arrow:hover {
  background: rgba(0, 0, 0, 0.55);
  scale: 1.08;
}

.theme-hero__dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}

.theme-hero__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
  pointer-events: auto;
}

.theme-hero__dot--active {
  width: 18px;
  background: #fff;
}

/* With FX running, the active dot becomes an autoplay timer: a white fill
   sweeps across it over the slide interval (--fx-dot-ms from ThemeHero).
   Hover pauses the fill together with autoplay. */
.tfx .theme-hero__dot--active {
  position: relative;
  overflow: hidden;
  width: 22px;
  background: rgba(255, 255, 255, 0.38);
}

.tfx .theme-hero__dot--active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  animation: fx-dotfill var(--fx-dot-ms, 4500ms) linear forwards;
}

.tfx .theme-hero:hover .theme-hero__dot--active::after {
  animation-play-state: paused;
}

@keyframes fx-dotfill {
  to {
    transform: scaleX(1);
  }
}

/* ── Gallery tiles (ThemeGallery arms [data-gallery-index]) ──
   Tiles are tap-to-enlarge everywhere; give them hover feedback and a real
   keyboard focus ring. Filter + translate compose with any theme transform. */
.tfx [data-gallery-index] {
  transition: filter 0.35s ease, translate 0.35s ease, scale 0.35s ease;
}

.tfx [data-gallery-index]:hover {
  filter: brightness(1.06) saturate(1.05);
  translate: 0 -3px;
  scale: 1.02;
}

[data-gallery-index]:focus-visible {
  outline: 2px solid var(--fx-accent, currentColor);
  outline-offset: 3px;
}

/* ── Back to top (rendered by ThemeFX) ──
   position is !important: ThemeFX chrome mounts as a direct child of the
   theme root, and some themes blanket-relative their children
   (`.x-theme > * { position: relative }`) which would drop it into flow. */
.fx-top {
  position: fixed !important;
  z-index: 40;
  right: 18px;
  bottom: 18px;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.55);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity 0.3s ease, translate 0.3s ease, background 0.2s ease;
}

/* Mobile keeps its bottom book bar clear; momentum-scroll covers the need. */
@media (min-width: 768px) {
  .fx-top {
    display: grid;
  }
}

.fx-top.is-vis {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.fx-top:hover {
  background: var(--fx-accent, rgba(20, 20, 24, 0.8));
}

/* Reading-progress ring around the button (--fx-progress set by ThemeFX). */
.tfx .fx-top::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(
    var(--fx-accent, #fff) calc(var(--fx-progress, 0) * 360deg),
    transparent 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .tfx [data-splittext] .fx-c {
    translate: 0 0;
    rotate: 0deg;
    opacity: 1;
    transition: none;
  }

  .tfx .theme-hero__dot--active::after {
    display: none;
  }

  .tfx [data-autohide].fx-nav-hidden {
    translate: 0 0;
  }

  .tfx [data-curtain]::before {
    display: none;
  }

  .tfx [data-curtain] img {
    scale: 1;
    transition: none;
  }

  .fx-marquee > span {
    animation: none;
  }

  .fx-ripple {
    display: none;
  }

  .theme-hero__track {
    transition: none;
  }
}

/* ── Theme outlet picker (ThemeOutletPicker) ──
   Frosted floating control so it stays readable on any theme palette.
   Positioned below the theme app bar via --theme-outlet-nav-offset. */
.theme-outlet-pill {
  position: fixed;
  z-index: 45;
  top: calc(var(--theme-outlet-nav-offset, 72px) + 10px);
  right: 16px;
  display: none;
}

@media (min-width: 1024px) {
  .theme-outlet-pill {
    display: block;
  }
}

.theme-outlet-pill__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.55);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.theme-outlet-pill__btn:hover {
  background: rgba(20, 20, 24, 0.7);
}

/* any.tunai.io — pull colours from the active template tokens */
.theme-outlet-pill--skinned .theme-outlet-pill__btn {
  border-color: color-mix(in srgb, var(--hairline) 70%, transparent);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  color: var(--ink);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 18%, transparent);
  font-family: var(--font-sans, inherit);
}

.theme-outlet-pill--skinned .theme-outlet-pill__btn:hover {
  background: var(--canvas);
}

.theme-outlet-pill--skinned .theme-outlet-pill__icon,
.theme-outlet-pill--skinned .theme-outlet-pill__chevron {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.theme-outlet-pill--skinned .theme-outlet-pill__city {
  opacity: 1;
  color: var(--muted);
}

.theme-outlet-pill__btn--static {
  cursor: default;
}

.theme-outlet-pill__icon,
.theme-outlet-pill__chevron {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.theme-outlet-pill__text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-outlet-pill__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.theme-outlet-pill__city {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.3;
  opacity: 0.78;
}

.theme-outlet-fab {
  position: fixed;
  z-index: 45;
  top: calc(var(--theme-outlet-nav-offset, 72px) + 8px);
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.55);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.theme-outlet-fab--skinned {
  border-color: color-mix(in srgb, var(--hairline) 70%, transparent);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  color: var(--accent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent);
}

@media (min-width: 1024px) {
  .theme-outlet-fab {
    display: none;
  }
}

/* Portaled outlet dialog — match template tokens (Design Studio host). */
.theme-outlet-modal-skin {
  font-family: var(--font-sans, inherit);
  color: var(--ink);
}

.theme-outlet-modal-skin .anim-modal-in {
  border-radius: var(--radius-lg, 20px);
  background: var(--canvas);
  box-shadow: 0 8px 40px color-mix(in srgb, var(--ink) 18%, transparent);
}

.theme-outlet-modal-skin .icon-circle-soft {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
}

.theme-outlet-modal-skin .icon-circle-accent {
  background: var(--accent);
  color: var(--on-accent, #fff);
}

/* ── Theme app-bar action cluster ──────────────────────────────────────────
   Tunai's own app-bar controls (store icon, language picker) plus the theme's
   Book CTA, kept as one flex item so `space-between` navs don't blow a gap
   between them. Order: store (1), language (2), Book (3).

   `data-compact` is set from JS while the theme's own bottom Book bar is on
   screen — each template reveals that bar at its own breakpoint (720…940px),
   so this mirrors the template instead of guessing a shared media query. It
   also has to do the hiding itself: wrapping Book in the cluster breaks the
   theme's own `nav > .xx-btn { display: none }` direct-child rule. */
.theme-appbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.theme-appbar-slot {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.theme-appbar-actions > .theme-appbar-book {
  order: 3;
}

/* Mobile: Book lives in the stacked bottom bar, so the app bar keeps only the
   brand + store icon + language picker. */
.theme-appbar-actions[data-compact="1"] > .theme-appbar-book {
  display: none !important;
}

/* ── Unified mobile Book bar ───────────────────────────────────────────────
   Every template ports its own bottom Book bar (`.xx-mobile-bar`), each with
   its own reveal breakpoint (720…940px) and its own padding/backdrop. That
   left phones between 720 and 900px with no pinned CTA at all, and the bar's
   look drifting per template.

   These rules take over the bar for all templates at one shared breakpoint:
   full-bleed, pinned to the viewport bottom, button stretched across it,
   safe-area padded, on a solid band. The band's colour comes from the
   `--fx-bar-*` tokens `ThemeRender` emits from `theme.brand`, so it matches
   the template it sits under on light and dark alike.

   fx.css loads BEFORE the template stylesheet, so the layout declarations
   need `!important` to outrank the template's own bar rule. The colour ones
   do not: this selector (two attribute matches) already outranks the
   template's single-class rule, so a template that wants its own backdrop can
   still take it back by raising specificity.

   `theme-appbar.ts` watches this bar's computed `display` and hides the
   in-nav Book while it is up, so templates that only drop their nav CTA at
   720px do not show two Book buttons in the 720–900 band. */
@media (max-width: 900px) {
  [class*="-theme"] [class*="-mobile-bar"] {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 99 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    background: var(--fx-bar-bg, #fff);
    border-top: 1px solid var(--fx-bar-line, rgba(0, 0, 0, 0.12));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  /* The CTA fills the bar — one button stretches, two share the row. */
  [class*="-theme"] [class*="-mobile-bar"] > a,
  [class*="-theme"] [class*="-mobile-bar"] > button {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* Nothing at the end of the page may hide under the bar. Matched on the
     `footer` ELEMENT, not on `[class*="-footer"]` alone — templates also name
     inner rows `xx-footer-row` / `xx-footer-social`, and padding each of those
     would stack up into a huge dead strip. */
  [class*="-theme"] footer[class*="-footer"] {
    padding-bottom: 120px !important;
  }
}

/* Above the shared breakpoint the bar is never on screen, whatever the
   template's own media query says. */
@media (min-width: 901px) {
  [class*="-theme"] [class*="-mobile-bar"] {
    display: none !important;
  }
}