/** Shopify CDN: Minification failed

Line 212:0 Unexpected "#"
Line 212:2 Unexpected "{"
Line 212:7 Expected ":"
Line 219:2 Unexpected "#"
Line 219:4 Unexpected "{"
Line 219:9 Expected ":"

**/
/* =========================================================
   butterfly-button.css — floating butterfly (final)
   ========================================================= */

/* ------------------ BASE STRUCTURE ------------------ */
.butterfly{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Courier New", Courier, monospace !important;
}

.butterfly__btn{
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: default;
  line-height: 0;
  width: 440px; /* overall wing width; adjust to your SVG */
  font-family: "Courier New", Courier, monospace !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ------------------ BACKGROUND IMAGE ------------------ */
.butterfly__bg,
.butterfly__img{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none !important; /* background never eats clicks */
}

/* ------------------ OVERLAY CONTENT ------------------ */
.butterfly__content{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, var(--plaque-y, -54%));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: normal !important;
  width: var(--plaque-w, 50%); /* adjustable */
  max-width: none;
  z-index: 10;
  pointer-events: auto !important; /* PLAQUE IS CLICKABLE */
  font-family: "Courier New", Courier, monospace !important;
}

/* keep plaque content above svg */
.butterfly__content *{ position: relative; z-index: 11; }

.butterfly__title{
  display: block;
  font-size: 10px !important;
  text-align: center;
  color: #333;
  text-decoration: none !important;
  line-height: 1.2 !important;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* long titles -> … */
}

.butterfly__price{
  font-size: 10px !important;
  line-height: 1.2;
  text-align: center;
  color: #222;
}

.butterfly__primary{
  font-size: 10px !important;
  letter-spacing: .06em;
  text-align: center;
}

/* ------------------ FLOATING SELECT (faux dropdown) ------------------ */
.bfly-select{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  max-width: 90%;
  margin-inline: auto;
  font-size: 10px !important;
  pointer-events: auto !important;
  z-index: 20;                 /* above button hotspot */
  cursor: pointer;
}
.bfly-select__label{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.bfly-select__chev{
  pointer-events: none;
  font-size: 10px !important;
  line-height: 1;
  transform: translateY(1px);
}

.butterfly__variant-select{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;                 /* invisible but clickable */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto !important;
  font-size: 10px !important;
  z-index: 21;                /* above everything in plaque */
}  
.butterfly__variant-select:focus{ outline: none; }
.butterfly__variant-select:disabled{ opacity: 1; cursor: not-allowed; }

/* ------------------ FLOATING CONTAINER ------------------ */
.butterfly.floating{
  position: fixed;
  left: 50%;
  top: auto !important;

  /* sit LOW on every device, and avoid iPhone home bar */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 85px);

  transform: translateX(-50%);
  z-index: 2147483647; /* stay above everything */
  opacity: 1;
  transition: opacity .2s ease;
}

/* ------------------ CTA HOTSPOT ------------------ */
.butterfly .js-bfly-add,
.butterfly.floating .bfly-mini{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  text-align: center;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.butterfly.floating .bfly-mini{
  position: absolute;
  left: 50%;
  top: var(--float-cta-top, 86%);      /* where the pill lives */
  transform: translate(-50%, -50%);
  width: var(--float-cta-w, 30%);
  height: var(--float-cta-h, 38px);
  background: transparent;
  z-index: 15;                          /* BELOW select so it never blocks it */

  /* visible label in pill */
  text-indent: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: 9px !important;
  font-weight: 500;
  color: #fff;
}

.butterfly.floating .bfly-mini{
  z-index: 50;     /* make the pill text visible & clickable */
}

.butterfly.floating .bfly-mini{
  width: var(--float-cta-w, 46%);
  height: var(--float-cta-h, 52px);
}

/* debug: visualize the Add-to-Bag hitbox */
.butterfly.floating .bfly-mini{
  outline: 2px dashed rgba(0,128,255,.5);
  background: rgba(0,0,0,.08);
}

/* Bags: Book Appointment text for floating butterfly */
#{{ _id }} .butterfly__btn[aria-label="Book Appointment"] .butterfly__label{
  font-size: 9px !important;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

@media (max-width: 989px){
  #{{ _id }} .butterfly__btn[aria-label="Book Appointment"] .butterfly__label{
    font-size: 10px !important;
    letter-spacing: -0.3px;
  }
}

@media (max-width: 989px){
  .butterfly__btn{
    width: 310px;     
  }
}