/* =========================================================
   STA UTILITIES FLOATING MENU
========================================================= */

.sta-utilities-widget{
  --sta-utilities-offset:20px;
  --sta-utilities-size:62px;
  --sta-utilities-shadow:0 18px 34px rgba(63, 72, 58, .18);
  --sta-utilities-panel-shadow:0 22px 42px rgba(56, 66, 51, .16);
  position:fixed;
  right:max(var(--sta-utilities-offset), env(safe-area-inset-right));
  bottom:max(calc(var(--sta-utilities-offset) + 84px), calc(env(safe-area-inset-bottom) + 84px));
  z-index:9997;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
  pointer-events:none;
}

.sta-utilities-widget.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.sta-utilities-widget__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:auto;
}

.sta-utilities-widget__menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.96);
  transform-origin:bottom right;
  transition:opacity .24s ease, transform .24s ease, visibility .24s ease;
  pointer-events:none;
}

.sta-utilities-widget.is-open .sta-utilities-widget__menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.sta-utilities-widget__panel{
  width:min(320px, calc(100vw - 34px));
  padding:18px;
  border:1px solid rgba(83, 100, 77, .12);
  border-radius:24px;
  background:rgba(255, 252, 247, .98);
  box-shadow:var(--sta-utilities-panel-shadow);
  backdrop-filter:blur(12px);
}

.sta-utilities-widget__eyebrow{
  margin:0 0 6px;
  color:#7b7a70;
  font:700 11px/1.1 var(--sta-font-body);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.sta-utilities-widget__title{
  margin:0 0 14px;
  color:#2d372d;
  font:700 21px/1.15 var(--sta-font-heading);
}

.sta-utilities-widget__list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sta-utilities-widget__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid rgba(83, 100, 77, .12);
  border-radius:18px;
  background:#fff;
  color:#2c362d;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sta-utilities-widget__item:hover,
.sta-utilities-widget__item:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(83, 100, 77, .24);
  box-shadow:0 12px 22px rgba(49, 58, 46, .08);
}

.sta-utilities-widget__item:focus-visible,
.sta-utilities-widget__trigger:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.92), 0 0 0 6px rgba(60,68,52,.45);
}

.sta-utilities-widget__item-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:14px;
  background:linear-gradient(135deg, #f3efe4 0%, #ebe4d4 100%);
  color:#55624d;
}

.sta-utilities-widget__item-icon svg{
  width:21px;
  height:21px;
  display:block;
  fill:currentColor;
}

.sta-utilities-widget__item-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}

.sta-utilities-widget__item-copy strong{
  color:#2d372d;
  font:700 15px/1.2 var(--sta-font-body);
}

.sta-utilities-widget__item-copy small{
  color:#737268;
  font:400 12px/1.35 var(--sta-font-body);
}

.sta-utilities-widget__trigger-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.sta-utilities-widget__greeting{
  position:absolute;
  top:50%;
  right:calc(100% + 10px);
  padding:5px 15px;
  min-width:1em;
  max-width:21em;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1.93465px 7.73859px rgba(0, 0, 0, .15);
  opacity:0;
  visibility:hidden;
  transform:translate(-.5em, -50%);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events:none;
  z-index:1000;
}

.sta-utilities-widget:not(.is-open):hover .sta-utilities-widget__greeting,
.sta-utilities-widget:not(.is-open) .sta-utilities-widget__trigger:focus-visible + .sta-utilities-widget__greeting{
  opacity:1;
  visibility:visible;
  transform:translate(0, -50%);
}

.sta-utilities-widget__greeting p{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:#4a4d44;
  font:400 17px/21px var(--sta-font-body);
  white-space:nowrap;
}

.sta-utilities-widget__greeting::before{
  content:"";
  position:absolute;
  top:50%;
  right:-5px;
  width:0;
  height:0;
  border:5px solid transparent;
  border-right-width:0;
  border-left-color:#fff;
  transform:translate(.5em, -50%);
}

.sta-utilities-widget__trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--sta-utilities-size);
  height:var(--sta-utilities-size);
  border:0;
  border-radius:999px;
  padding:0;
  background:transparent;
  cursor:pointer;
  appearance:none;
  transform-origin:center bottom;
  will-change:transform;
}

.sta-utilities-widget__trigger-icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .22s ease, transform .22s ease;
}

.sta-utilities-widget__trigger-icon svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 18px 30px rgba(20, 28, 19, .22));
}

.sta-utilities-widget__trigger-art{
  position:absolute;
  inset:50% auto auto 50%;
  width:26px;
  height:26px;
  color:#f7efe1;
  transform:translate(-50%, -50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.sta-utilities-widget__trigger-art svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.sta-utilities-widget__trigger-icon--tools{
  opacity:1;
  transform:scale(1);
}

.sta-utilities-widget__trigger-icon--close{
  opacity:0;
  transform:scale(.72) rotate(-16deg);
}

.sta-utilities-widget.is-open .sta-utilities-widget__trigger-icon--tools{
  opacity:0;
  transform:scale(.72) rotate(16deg);
}

.sta-utilities-widget.is-open .sta-utilities-widget__trigger-icon--close{
  opacity:1;
  transform:scale(1) rotate(0deg);
}

@keyframes sta-utilities-widget-jump{
  0%, 20%, 100%{
    transform:none;
  }

  10%{
    transform:translateY(-1em);
  }
}

.sta-utilities-widget.is-visible:not(.is-open) .sta-utilities-widget__trigger{
  animation:5s cubic-bezier(.84, -.54, .31, 1.19) infinite sta-utilities-widget-jump;
}

@media (max-width: 767px){
  .sta-utilities-widget{
    right:max(14px, env(safe-area-inset-right));
    bottom:max(calc(env(safe-area-inset-bottom) + 78px), 78px);
  }

  .sta-utilities-widget__panel{
    width:min(290px, calc(100vw - 28px));
    padding:16px;
    border-radius:22px;
  }

  .sta-utilities-widget__title{
    font-size:19px;
  }

  .sta-utilities-widget__item{
    padding:12px 13px;
  }

  .sta-utilities-widget__greeting{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .sta-utilities-widget__menu,
  .sta-utilities-widget__item,
  .sta-utilities-widget__trigger-icon,
  .sta-utilities-widget__greeting{
    transition:none;
  }

  .sta-utilities-widget.is-visible:not(.is-open) .sta-utilities-widget__trigger{
    animation:none;
  }
}