/* FMKE announcement bar — sits above the header/nav. [fmke_announcement_bar] */
.fmke-announce{position:relative;z-index:50;background:linear-gradient(90deg,var(--fmke-dark,#1F3D2C),#2f5b43);color:var(--fmke-primary,#FF6A00);font-size:13px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.fmke-announce *{box-sizing:border-box}
.fmke-announce__inner{max-width:66.4989em;margin:0 auto;padding:0 2.617em;display:flex;align-items:center;justify-content:center;gap:14px;min-height:36px;position:relative}
@media(max-width:782px){.fmke-announce__inner{padding:0 14px}}
/* Desktop: widen the bar's content to 90% of its own bar, centered.
   This block must stay AFTER the plain .fmke-announce__inner/__track/__msg
   rules below: with equal selector specificity, source order decides which
   wins, and an earlier media query loses to a later plain rule. */

.fmke-announce__track{position:relative;flex:1;max-width:560px;height:1.5em;overflow:hidden}
.fmke-announce__msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;opacity:0;transform:translateY(60%);transition:opacity .45s ease,transform .45s cubic-bezier(.3,.8,.3,1);text-shadow:0 1px 2px rgba(0,0,0,.18)}
.fmke-announce__msg.is-active{opacity:1;transform:translateY(0)}
.fmke-announce__msg.is-leaving{opacity:0;transform:translateY(-60%);transition:opacity .35s ease,transform .35s cubic-bezier(.5,0,.7,.4)}
.fmke-announce__msg em{font-style:normal;font-weight:800;color:var(--fmke-dark,#1F3D2C);background:rgba(255,255,255,.9);padding:1px 7px;border-radius:999px;text-shadow:none}
.fmke-announce__icon{display:flex;align-items:center;line-height:1;flex:0 0 auto}

.fmke-announce__info{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding-left:14px;border-left:1px solid rgba(255,255,255,.3)}
.fmke-announce__infoitem{display:flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap;color:inherit;text-decoration:none}
.fmke-announce__infoitem svg{width:14px;height:14px;flex:0 0 auto}
.fmke-announce__infoitem--link{transition:opacity .2s}
.fmke-announce__infoitem--link:hover{opacity:.8;text-decoration:underline}
@media(max-width:900px){.fmke-announce__info{display:none}}
@media(max-width:1024px){
 .fmke-announce__infoitem:nth-child(4){display:none}
}
@media(max-width:782px){.fmke-announce__close{right:10px}}

@media(min-width:1025px){
 /* Plain % width instead of vw: `.fmke-announce` is already edge-to-edge,
    so a percentage of it centers perfectly with margin:auto. The previous
    vw-based version was measured against the full document width including
    the scrollbar, while this bar's real box excludes it — that mismatch
    pushed the right edge past the bar's own boundary, and `overflow:hidden`
    on .fmke-announce sliced off whatever spilled over (the last item). A
    plain % avoids the mismatch entirely, so nothing can get clipped. */
 .fmke-announce__inner{width:90%;max-width:1800px;margin:0 auto;padding:0;min-height:46px;justify-content:space-between}
 .fmke-announce__track{flex:0 0 330px;max-width:none}
 /* The ticker text (.fmke-announce__msg) is absolutely positioned inside
    this box so it can cross-fade between messages of different lengths
    without the box resizing/jumping — that's why the box has its own
    fixed width instead of shrink-wrapping the visible text. 330px is
    sized to fit the longest rotating message ("Same-day flower delivery
    across Nairobi") so there's minimal unused space left inside the box
    before the next item begins. */
 .fmke-announce__msg{justify-content:flex-start}
 /* Flatten the info wrapper so each item becomes its own flex child of
    .fmke-announce__inner, instead of one grouped block — this is what lets
    every item (ticker + each info item) share the 90vw width evenly via
    justify-content:space-between above, rather than two clumps with a gap
    between them. */
 .fmke-announce__info{display:contents}
}

.fmke-announce.is-hidden{max-height:0;min-height:0;padding:0}
.fmke-announce.is-closing{transition:max-height .3s ease,opacity .3s ease;max-height:0;opacity:0}

@media(prefers-reduced-motion:reduce){
  .fmke-announce__msg{transition:opacity .3s ease!important;transform:none!important}
}

/* Text, icons and the phone link all inherit the theme orange; hover goes a little lighter. */
.fmke-announce a.fmke-announce__infoitem:hover{color:#FF8A33}