/* 2) Hide cart count badge (all variants) */
div.counter.sb-qty,
.cart-count-bubble,
.header__cart-count,
.header__badge,
.header__icon-bubble{
  display:none !important;
  visibility:hidden !important;
}
/* =========================
   LAYOUT / CARDS
   ========================= */


[class*="card"],
[class*="tile"],
[class*="block"],
[class*="panel"],
[class*="service"],
[class*="provider"],
[class*="category"],
[class*="time"],
[class*="slot"]{
  border-radius: var(--ser-radius) !important;
}


/* Kill harsh dividers */
hr, [class*="divider"], [class*="separator"]{
  border-color: var(--ser-hairline) !important;
  opacity: 1 !important;
}

/* Reduce loud backgrounds if template adds them */
[class*="bg"], [style*="background"]{
  background-color: transparent;
}



/* Slots: glow outline */
a.cell.sb-cell.free.full-info-trigger{
  background: rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(235, 220, 170, 0.28) !important;
  border-radius: 18px !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 16px rgba(235, 220, 170, 0.14),
    0 0 40px rgba(235, 220, 170, 0.08) !important;

  transition:
    box-shadow 420ms ease,
    border-color 320ms ease,
    transform 260ms ease,
    background-color 320ms ease;
}

@media (hover:hover){
  a.cell.sb-cell.free.full-info-trigger:hover{
    transform: translateY(-1px);
    border-color: rgba(235, 220, 170, 0.42) !important;
    background: rgba(0,0,0,0.04) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.06) inset,
      0 0 22px rgba(235, 220, 170, 0.18),
      0 0 66px rgba(235, 220, 170, 0.10) !important;
  }
}/* 


   
/* ===============================
   PLUM AURA OVERRIDES (paste last)
   =============================== */
:root{
  --plum-stroke: rgba(159, 43, 104, 0.42); /* #9F2B68 */
  --plum-stroke-hover: rgba(159, 43, 104, 0.62);
  --plum-glow1: rgba(159, 43, 104, 0.24);
  --plum-glow2: rgba(50, 0, 102, 0.18);   /* #320066 */
  --plum-fill: rgba(50, 0, 102, 0.06);
  --plum-fill-hover: rgba(50, 0, 102, 0.09);
}

/* ===== Time slots (available) — brighter hover glow ===== */
a.cell.sb-cell.free.full-info-trigger{
  background: var(--plum-fill) !important;


  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 10px 22px rgba(0,0,0,0.14),
    0 0 18px var(--plum-glow1),
    0 0 44px var(--plum-glow2) !important;

  transition:
    transform 260ms ease,
    box-shadow 520ms ease,
    border-color 320ms ease,
    background-color 320ms ease,
    filter 420ms ease;
}

@media (hover:hover){
  a.cell.sb-cell.free.full-info-trigger:hover{
    transform: translateY(-2px);
    filter: saturate(1.06) brightness(1.03);
    background: var(--plum-fill-hover) !important;
    border-color: var(--plum-stroke-hover) !important;

    /* BRIGHTER bloom on hover */
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.07) inset,
      0 16px 32px rgba(0,0,0,0.18),
      0 0 28px rgba(159, 43, 104, 0.32),
      0 0 80px rgba(50, 0, 102, 0.24) !important;
  }
}



/* Location cards */
.sb-location, 
.location-item,
.locations-list .item,
[class*="location"]{
  border-radius: 22px !important;
  overflow: hidden;
  border: 1px solid rgba(50, 0, 102, 0.10) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.08),
    0 0 26px rgba(159, 43, 104, 0.10),
    0 0 44px rgba(50, 0, 102, 0.08) !important;
  transition: transform 260ms ease, box-shadow 520ms ease, border-color 320ms ease;
}

@media (hover:hover){
  .sb-location:hover, 
  .location-item:hover,
  .locations-list .item:hover,
  [class*="location"]:hover{
    transform: translateY(-2px);
    border-color: rgba(159, 43, 104, 0.18) !important;
    box-shadow:
      0 24px 60px rgba(0,0,0,0.10),
      0 0 34px rgba(159, 43, 104, 0.16),
      0 0 70px rgba(50, 0, 102, 0.12) !important;
  }
}

/* Left image column */
.sb-location img,
.location-item img,
[class*="location"] img{
  border-radius: 18px !important;
  object-fit: cover !important;
  height: 100% !important;
  filter: saturate(1.03) contrast(1.03);
}
/* Location names */
.sb-location .name,
.location-item .title,
[class*="location"] h3,
[class*="location"] .title{
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: rgba(25,25,35,0.86) !important;
}
/* Select button */
.sb-location .btn,
.location-item button,
button.select,
a.select{
  background: rgba(0,0,0,0.06) !important;
  color: rgba(25,25,35,0.92) !important;
  border: 1px solid rgba(159, 43, 104, 0.34) !important;
  border-radius: 18px !important;

  box-shadow:
    0 0 18px rgba(159, 43, 104, 0.14),
    0 0 40px rgba(50, 0, 102, 0.10) !important;

  transition: transform 220ms ease, box-shadow 420ms ease, border-color 320ms ease;
}

@media (hover:hover){
  .sb-location .btn:hover,
  .location-item button:hover,
  button.select:hover,
  a.select:hover{
    transform: translateY(-1px);
    border-color: rgba(159, 43, 104, 0.58) !important;
    box-shadow:
      0 0 26px rgba(159, 43, 104, 0.22),
      0 0 70px rgba(50, 0, 102, 0.18) !important;
  }
}
div.title-small{
  font-family: inherit !important;
  font-size: 16px !important;          /* tweak 15–18 */
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .38em !important;
  line-height: 1.15 !important;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;

  opacity: 1 !important;
  filter: none !important;
}



div.title-sub{
  font-family: inherit !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-size: 14px !important;          /* was 18px Avenir */
  line-height: 1.15 !important;

  color: rgba(255,255,255,.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}


div.title-sub *,
div.title-sub span,
div.title-sub a{
  font: inherit !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: transparent !important;
}


div.title-sub a{
  position: relative !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: .6em !important; /* space between moon + text */
}

/* moon before */
div.title-sub::before{
  content: "☾" !important;
  display: inline-block !important;
  opacity: .9 !important;

  /* keep it from inheriting your wide tracking */
  letter-spacing: .38rem !important;

  /* tiny optical tweak */
  transform: translateY(-0.5px);
}

/* Optional: slightly dimmer on mobile */
@media (max-width: 520px){
  div.title-sub::before{
    opacity: .8 !important;
  }
}

div.title-main{
  /* match the spaced, airy style */
  font-family: inherit !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .38em !important;
  font-size: 18px !important;            /* was 24px Avenir */
  line-height: 1.15 !important;

  color: rgba(70,70,75,.88) !important;  /* matches your light header screenshot */
  -webkit-text-fill-color: rgba(70,70,75,.88) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* keep your bottom spacing feel */
  padding: 0 0 18px 0 !important;        /* replaces the 30px padding-bottom */
  margin: 0 0 14px 0 !important; }

span.provider-name.provider-txt { color: black; font-size: 1.1rem;
font-family: inherit !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

.provider-time.provider-txt { color: black; 
}

/* keep the link clickable */
a.day-on.sb-available-date{
  position: relative;         /* anchor for the pseudo element */
  display: inline-block;      /* or inline-flex depending on layout */
}

/* draw the circle as decoration */
a.day-on.sb-available-date::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 35px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.4);
  border-color: black;
  background: transparent;
  pointer-events: none;       
}

.btn.book.btn-with-icon.custom{
  font-family: inherit !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

@media (hover:hover){
  .btn.book.btn-with-icon.custom:hover{
    font-style: italic;
  }
}