/*
 * Luv, Mud — buddies (sections/luvmud-buddies.liquid, assets/luvmud-buddies.js)
 *
 * Every decoration is aria-hidden and ignores the pointer. Stacking: scroll drip 3 (with Sprout), peekers / jealous
 * buddy / post-landing catcher 5 (over the header, under Sprout's chat at 6), flight 1000 (over the cart drawer while it
 * lasts, 900ms), secret splatter 1500. Brand: cream #fff9f0, navy ink #17233a, mud #6b4426 #7d5130 #5a3820 #8a5d3b.
 */

.luvmud-buddies {
  display: contents;
}

.luvmud-buddies template {
  display: none;
}

/* --- Mud droplets (same look as the hero's) ----------------------------------------------------------------------- */

.lbd-drop {
  position: absolute;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.45) 0 16%, rgb(255 255 255 / 0) 26%),
    var(--mud, #6b4426);
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* --- 1. Fly to cart ----------------------------------------------------------------------------------------------- */

.lbd-fly-layer,
.lbd-splash-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.lbd-splash-layer {
  z-index: 3;
}

.lbd-fly {
  position: absolute;
  overflow: hidden;
  border: 3px solid #17233a;
  border-radius: 22%;
  background: #fff9f0;
  box-shadow: 0 5px 0 #17233a;
  will-change: transform;
}

.lbd-fly img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback when there is no product image: a little clay parcel with a lime ribbon */
.lbd-parcel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 42%, #b9f22a 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, #b9f22a 42% 58%, transparent 58%),
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 45%),
    #fb7e3b;
}

.lbd-catcher {
  position: absolute;
  display: block;
  transform-origin: 50% 100%;
}

.lbd-catcher__mini {
  width: 100%;
}

/* --- 2. Cart buddy ------------------------------------------------------------------------------------------------ */

.lbd-cartbud {
  position: absolute;
  left: calc(100% - 3px);
  bottom: -7px;
  z-index: 1;
  width: 26px;
  pointer-events: none;
}

.lbd-cartbud.is-tappable {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 699px) {
  .lbd-cartbud {
    left: calc(100% - 7px);
    bottom: -6px;
    width: 22px;
  }

  .lbd-cartbud__z {
    right: -1px;
  }
}

/* Too close to the screen edge: tuck the buddy under the icon's right side instead */
.lbd-cartbud.is-tight {
  left: auto;
  right: -4px;
}

.lbd-cartbud__hop {
  position: relative;
  display: block;
  transform-origin: 50% 100%;
}

.lbd-cartbud__mini {
  width: 100%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 1px 0 rgb(23 35 58 / 0.35));
  transition: scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* Sleepy: lids half closed (the mini's droop layer), slow breathing and a little "z" */
.lbd-cartbud[data-mood='sleepy'] .lm-mini__droop {
  transform: translateY(-50%);
}

.lbd-cartbud[data-mood='joy'] .lbd-cartbud__mini {
  scale: 1.16;
}

.lbd-cartbud__z {
  position: absolute;
  top: -9px;
  right: -5px;
  font-family: var(--heading-font-family);
  font-weight: var(--lbd-weight, 700);
  font-size: 11px;
  line-height: 1;
  color: #17233a;
  opacity: 0;
}

.lbd-cartbud[data-mood='sleepy'] .lbd-cartbud__z {
  opacity: 0.75;
}

.lbd-cartbud__hop.is-pulsing::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #b9f22a;
  animation: lbd-pulse 1.1s ease-out forwards;
}

@keyframes lbd-pulse {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .lbd-cartbud[data-mood='sleepy'] .lbd-cartbud__mini {
    animation: lbd-breathe 3.8s ease-in-out infinite;
  }

  .lbd-cartbud[data-mood='sleepy'] .lbd-cartbud__z {
    animation: lbd-z 3.8s ease-in-out infinite;
  }

  .lbd-cartbud[data-mood='joy'] .lbd-cartbud__mini {
    animation: lbd-joy 5.5s ease-in-out infinite;
  }
}

@keyframes lbd-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.05, 0.95); }
}

@keyframes lbd-z {
  0%, 20% { opacity: 0; transform: translate(0, 2px) scale(0.6); }
  45% { opacity: 0.8; }
  80%, 100% { opacity: 0; transform: translate(4px, -7px) scale(1.05); }
}

@keyframes lbd-joy {
  0%, 82%, 100% { transform: translateY(0) scale(1, 1); }
  85% { transform: translateY(0) scale(1.12, 0.86); }
  90% { transform: translateY(-6px) scale(0.94, 1.08); }
  95% { transform: translateY(0) scale(1.08, 0.92); }
}

/* --- 3. Footprints on product cards ------------------------------------------------------------------------------- */

.lbd-prints {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.lbd-print {
  position: absolute;
  width: 13px;
  height: 19px;
  opacity: 0;
  animation: lbd-print 1.2s ease-out forwards;
}

.lbd-print::before {
  content: '';
  position: absolute;
  inset: 6px 1px 0;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 36% 30%, rgb(255 255 255 / 0.3) 0 14%, rgb(255 255 255 / 0) 30%),
    #6b4426;
}

.lbd-print::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background:
    radial-gradient(circle at 14% 75%, #7d5130 0 1.9px, transparent 2.4px),
    radial-gradient(circle at 50% 36%, #6b4426 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 86% 75%, #7d5130 0 1.9px, transparent 2.4px);
}

@keyframes lbd-print {
  0% { opacity: 0; scale: 0.4; }
  14% { opacity: 0.92; scale: 1.08; }
  24% { scale: 1; }
  60% { opacity: 0.8; }
  100% { opacity: 0; scale: 1; }
}

/* --- 4. Scroll mud drip ------------------------------------------------------------------------------------------- */

.lbd-trail {
  position: fixed;
  top: calc(var(--header-height, 0px) + var(--announcement-bar-height, 0px) * var(--announcement-bar-is-sticky, 0) + 14px);
  bottom: 24px;
  left: 5px;
  z-index: 3;
  width: 6px;
  pointer-events: none;
  opacity: 0.88;
}

.lbd-trail.is-hidden {
  visibility: hidden;
}

.lbd-trail__drip {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #5a3820, #7d5130 35%, #a7784f 52%, #6b4426 72%, #5a3820);
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}

.lbd-trail__cap {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 12px;
  height: 7px;
  translate: -50% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgb(255 255 255 / 0.35) 0 14%, rgb(255 255 255 / 0) 34%),
    #6b4426;
}

.lbd-trail__tip {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 11px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background:
    radial-gradient(circle at 34% 56%, rgb(255 255 255 / 0.45) 0 12%, rgb(255 255 255 / 0) 24%),
    #6b4426;
  transform: translate(-50%, 0);
  transform-origin: 50% 70%;
  will-change: transform;
}

/* --- 5. Secret mud splatter --------------------------------------------------------------------------------------- */

.lbd-splatter {
  position: fixed;
  inset: 0;
  z-index: 1500;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.lbd-splat {
  position: absolute;
  border-radius: 47% 53% 44% 56% / 52% 45% 55% 48%;
  background:
    radial-gradient(circle at 33% 28%, rgb(255 255 255 / 0.38) 0 11%, rgb(255 255 255 / 0) 24%),
    radial-gradient(circle at 62% 74%, rgb(0 0 0 / 0.18), rgb(0 0 0 / 0) 60%),
    var(--mud, #6b4426);
  transform-origin: 50% 30%;
  will-change: transform, opacity;
}

.lbd-splat:nth-child(3n) {
  border-radius: 55% 45% 58% 42% / 44% 56% 46% 54%;
}

.lbd-splat:nth-child(3n + 1) {
  border-radius: 42% 58% 50% 50% / 58% 48% 52% 42%;
}

/* A satellite drop and a drip tail */
.lbd-splat::before,
.lbd-splat::after {
  content: '';
  position: absolute;
  background: var(--mud, #6b4426);
}

.lbd-splat::before {
  top: 4%;
  right: -22%;
  width: 24%;
  height: 26%;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
}

.lbd-splat::after {
  top: 78%;
  left: 38%;
  width: 20%;
  height: 52%;
  border-radius: 40% 40% 50% 50% / 18% 18% 82% 82%;
}

.lbd-splat:nth-child(2n)::before {
  top: auto;
  right: auto;
  bottom: -12%;
  left: -16%;
}

.lbd-splat:nth-child(4n)::after {
  left: 64%;
  height: 34%;
}

.lbd-secret {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1501;
  box-sizing: border-box;
  width: min(330px, calc(100vw - 32px));
  padding: 48px 24px 24px;
  border: 4px solid #f2c230;
  border-radius: 46px 58px 50px 54px / 52px 46px 58px 50px;
  background:
    radial-gradient(circle at 24% 14%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 40%),
    #fff9f0;
  box-shadow: 0 0 0 2.5px #17233a, 0 8px 0 2.5px #17233a;
  color: #17233a;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-2deg);
}

.lbd-secret__buddy {
  position: absolute;
  top: -44px;
  left: 50%;
  width: 76px;
  translate: -50% 0;
  pointer-events: none;
}

.lbd-secret__mini {
  width: 100%;
}

.lbd-secret__text {
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: var(--lbd-weight, 700);
  font-size: 1.3rem;
  line-height: 1.2;
  text-wrap: balance;
}

.lbd-secret__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.lbd-secret__code {
  padding: 8px 14px;
  border: 2px dashed #17233a;
  border-radius: 999px;
  background: #fff;
  font-family: var(--heading-font-family);
  font-weight: var(--lbd-weight, 700);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  user-select: all;
  -webkit-user-select: all;
}

.lbd-secret__copy,
.lbd-secret__close {
  border: 2.5px solid #17233a;
  color: #17233a;
  cursor: pointer;
  font-family: var(--heading-font-family);
  font-weight: var(--lbd-weight, 700);
  transition: transform 0.12s, box-shadow 0.12s;
}

.lbd-secret__copy {
  min-width: 84px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #b9f22a;
  box-shadow: 0 3px 0 #17233a;
  font-size: 0.95rem;
}

.lbd-secret__copy:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #17233a;
}

.lbd-secret__close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: #fff9f0;
  box-shadow: 0 2px 0 #17233a;
}

.lbd-secret__copy:focus-visible,
.lbd-secret__close:focus-visible {
  outline: 3px solid #5993f1;
  outline-offset: 2px;
}

/* --- 6. Peekers --------------------------------------------------------------------------------------------------- */

.lbd-peek {
  --lbd-s: 66px;
  position: fixed;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.lbd-peek--small {
  --lbd-s: 48px;
}

.lbd-peek--corner {
  bottom: 0;
  left: 22px;
  width: calc(var(--lbd-s) * 1.15);
  height: calc(var(--lbd-s) * 0.8);
}

.lbd-peek--small.lbd-peek--corner {
  left: 16px;
}

.lbd-peek--side {
  left: 0;
  width: calc(var(--lbd-s) * 0.78);
  height: calc(var(--lbd-s) * 1.15);
}

.lbd-peek .lbd-peek__mini {
  position: absolute;
  left: calc(var(--lbd-s) * 0.07);
  bottom: 0;
  width: var(--lbd-s);
  transform-origin: 50% 50%;
}

.lbd-peek--side .lbd-peek__mini {
  top: calc(var(--lbd-s) * 0.06);
  bottom: auto;
  left: 0;
}

/* Rotated 90°: turn the pupil offsets so the eyes still look at the pointer on screen */
.lbd-peek--side .lm-mini__pupil {
  transform: translate(calc(var(--lm-py) * 38%), calc(var(--lm-px) * -38%));
}

.lbd-has-peek {
  position: relative;
}

.lbd-gallery-peek {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.lbd-gallery-peek .lbd-peek__mini {
  position: absolute;
  bottom: 0;
  left: 12%;
  width: clamp(64px, 15%, 108px);
}

/* --- 7. Jealous buddy --------------------------------------------------------------------------------------------- */

.lbd-jealous {
  position: fixed;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.lbd-jealous__body {
  display: block;
  width: 78px;
  margin-left: 10px;
  transform-origin: 50% 100%;
  rotate: 6deg;
}

.lbd-jealous__mini {
  width: 100%;
  filter: drop-shadow(0 4px 0 rgb(23 35 58 / 0.22));
}

.lbd-bubble {
  position: relative;
  display: block;
  max-width: 260px;
  margin-left: 14px;
  padding: 0.6em 0.95em;
  border: 2.5px solid #17233a;
  border-radius: 1em;
  background: #fff9f0;
  box-shadow: 0 4px 0 #17233a;
  color: #17233a;
  font-family: var(--heading-font-family);
  font-weight: var(--lbd-weight, 700);
  font-size: 15px;
  line-height: 1.25;
  transform: rotate(-2deg);
}

.lbd-bubble.is-after {
  transform: rotate(2deg);
}

/* Tail pointing back at the buddy */
.lbd-bubble::before,
.lbd-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
}

.lbd-bubble::before {
  left: -13px;
  margin-top: -9px;
  border-width: 9px 13px 9px 0;
  border-color: transparent #17233a transparent transparent;
}

.lbd-bubble::after {
  left: -8.5px;
  margin-top: -6px;
  border-width: 6px 9px 6px 0;
  border-color: transparent #fff9f0 transparent transparent;
}

/* --- 8. Size picker with characters ------------------------------------------------------------------------------- */

variant-picker .lbd-size {
  --swatch-border-size: 2px;
  --swatch-disabled-strike-color: rgb(23 35 58 / 0.45);
  min-height: 2.75rem;
  padding: 0.3rem 1rem 0.3rem 0.5rem;
  column-gap: 0.45rem;
  border: 2px solid #17233a;
  border-radius: 999px;
  background: #fff9f0;
  box-shadow: 0 3px 0 #17233a;
  color: #17233a;
  font-family: var(--heading-font-family);
  font-weight: var(--lbd-weight, 700);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

variant-picker .lbd-size:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #17233a;
}

variant-picker :checked + .lbd-size,
variant-picker .lbd-size.is-selected {
  --swatch-disabled-strike-color: #17233a;
  border-color: #17233a;
  background: var(--lbd-c, #f36881);
  box-shadow: 0 1px 0 #17233a;
  color: #17233a;
  transform: translateY(2px);
}

variant-picker .lbd-size.is-disabled {
  border-color: rgb(23 35 58 / 0.45);
  background: #f4ede2;
  box-shadow: 0 3px 0 rgb(23 35 58 / 0.3);
  color: rgb(23 35 58 / 0.55);
}

variant-picker .lbd-size.is-disabled::before {
  border-radius: inherit;
}

variant-picker .lbd-size__blob {
  position: relative;
  flex: none;
  width: var(--lbd-blob, 20px);
  height: calc(var(--lbd-blob, 20px) * 0.92);
  border-radius: 52% 48% 46% 54% / 58% 56% 44% 42%;
  background:
    radial-gradient(circle at 32% 24%, rgb(255 255 255 / 0.55) 0 12%, rgb(255 255 255 / 0) 30%),
    radial-gradient(circle at 62% 86%, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0) 60%),
    var(--lbd-c, #f36881);
  box-shadow: 0 0 0 1.5px #17233a;
  transform-origin: 50% 100%;
}

variant-picker .lbd-size__eyes {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 46%, #17233a 0 8%, rgb(23 35 58 / 0) 9.5%),
    radial-gradient(circle at 66% 46%, #17233a 0 8%, rgb(23 35 58 / 0) 9.5%),
    radial-gradient(circle at 34% 46%, #fff 0 15%, rgb(255 255 255 / 0) 16.5%),
    radial-gradient(circle at 66% 46%, #fff 0 15%, rgb(255 255 255 / 0) 16.5%);
}

/* A tiny smile */
variant-picker .lbd-size__eyes::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 40%;
  width: 20%;
  height: 12%;
  border: solid #17233a;
  border-width: 0 0 max(1px, calc(var(--lbd-blob, 20px) * 0.06));
  border-radius: 0 0 50% 50%;
}

variant-picker :checked + .lbd-size .lbd-size__blob,
variant-picker .lbd-size.is-selected .lbd-size__blob {
  box-shadow: 0 0 0 1.5px #17233a, 0 0 0 3.5px #fff9f0;
}

/* Sold out: a sleepy, faded blob (the theme's strike line stays) */
variant-picker .lbd-size.is-disabled .lbd-size__blob {
  filter: saturate(0.3);
  opacity: 0.65;
}

variant-picker .lbd-size.is-disabled .lbd-size__eyes {
  background:
    linear-gradient(#17233a, #17233a) 26% 48% / 18% 7% no-repeat,
    linear-gradient(#17233a, #17233a) 74% 48% / 18% 7% no-repeat;
}

variant-picker .lbd-size.is-disabled .lbd-size__eyes::after {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  variant-picker .lbd-size:hover .lbd-size__blob {
    animation: lbd-wobble 0.6s ease-in-out;
  }
}

@keyframes lbd-wobble {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-9deg) scale(1.04, 0.96); }
  65% { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  variant-picker .lbd-size,
  .lbd-cartbud__mini {
    transition: none;
  }

  variant-picker .lbd-size:hover,
  variant-picker :checked + .lbd-size {
    transform: none;
  }
}