/* =========================================================================
   FLOATING WIDGETS  —  scroll button + WhatsApp, ported from lime-mouse

   Lifted from lime-mouse's LiteSpeed-combined stylesheet, where these rules
   sit minified among everything else. 87 rules, every one of them selected by
   matching `.mm-scroll-btn` or `.mm-wa-*`, plus the three keyframes those
   rules name (mm-wa-pop, mm-wa-pulse, mm-wa-live) - checked, not assumed.

   THREE THINGS CHANGED IN TRANSIT, ALL OF THEM NECESSARY

   1. `body .mm-scroll-btn` set `bottom: calc(var(--mm-bnav-h) + 18px)` with
      NO fallback. That variable is the height of lime-mouse's mobile bottom
      nav, which this site does not have - and an undefined variable inside
      calc() is invalid at computed-value time, so `bottom` would have
      resolved to `auto` and the button would have floated mid-page instead
      of sitting in the corner. It reads `var(--mm-bnav-h, 0px)` here, which
      is what the lower-specificity rule two lines above it already said.

   2. A combined reset - `.quantity__button:after, .field__button:after,
      .search__button:after, ... , .mm-scroll-btn:after { content: none }` -
      came along attached to our selector. Trimmed to `.mm-scroll-btn:after`
      so porting a floating button does not quietly restyle every quantity
      stepper and search field on the site.

   3. Nothing else. Colours, sizes, the conic-gradient progress ring, the
      stacking order and the open/close states are lime-mouse's own.

   RULES THAT REFER TO THINGS THIS SITE DOES NOT HAVE are deliberately kept:
   `html.mm-bnav-sub-open`, `html:has(.mm-mega-scrim.is-open)` and the
   `--mm-bnav-h` offset are inert here, and they are what makes the widget
   behave correctly the day those parts are ported too.
   ========================================================================= */

.mm-scroll-btn:after{content:none}
.mm-wa-launcher{position:fixed;right:18px;bottom:76px;z-index:9990;width:56px;height:56px;border:0;border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;background:#4f8a63;color:#fff;box-shadow:0 8px 22px -6px #1c1917b3,0 3px 8px #00000038;-webkit-tap-highlight-color:#fff0;transition:transform .18s cubic-bezier(.2,.9,.3,1.4),opacity .22s ease,visibility .22s ease}
.mm-wa-launcher:hover{transform:scale(1.06)}
.mm-wa-launcher:active{transform:scale(.95)}
.mm-wa-launcher:focus-visible{outline:3px solid #d6cec2;outline-offset:3px}
.mm-wa-launcher svg{width:30px;height:30px;display:block}
.mm-wa-launcher .mm-wa-i-close,.mm-wa-launcher.is-open .mm-wa-i-open{display:none}
.mm-wa-launcher.is-open .mm-wa-i-close{display:block}
.mm-wa-pulse{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;box-shadow:0 0 #1c19178c;animation:mm-wa-pulse 2.4s infinite}
.mm-wa-launcher.is-open .mm-wa-pulse{display:none}
@keyframes mm-wa-pulse{70%{box-shadow:0 0 0 15px #fff0}to{box-shadow:0 0 #fff0}}
.mm-wa-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#c0603c;color:#fff;border:2px solid #d6cec2;font-size:11px;font-weight:700;line-height:1;display:grid;place-items:center}
.mm-wa-launcher.is-open .mm-wa-badge{display:none}
.mm-wa-panel{position:fixed;right:18px;bottom:142px;z-index:9999;width:320px;max-width:calc(100vw - 36px);max-height:min(540px,calc(100vh - 160px));max-height:min(540px,calc(100dvh - 160px));background:#f3efe9;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -18px #00000080,0 6px 16px #00000038;font-family:Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;display:none;flex-direction:column;transform-origin:bottom right}
.mm-wa-panel.is-open{display:flex;animation:mm-wa-pop .24s cubic-bezier(.2,.9,.3,1.3)}
@keyframes mm-wa-pop{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
.mm-wa-head{flex:none;position:relative;overflow:hidden;background:linear-gradient(120deg,#241f1c,#4f8a63);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:11px}
.mm-wa-doodle{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;opacity:.15;pointer-events:none}
.mm-wa-head>:not(.mm-wa-doodle){position:relative;z-index:1}
.mm-wa-ava{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;background:#241f1c;color:#b8892b;font-weight:800;font-size:18px;box-shadow:inset 0 0 0 2px #ffffff80}
.mm-wa-ava img{width:100%;height:100%;object-fit:cover;display:block}
.mm-wa-id{flex:1;min-width:0}
.mm-wa-id h4{margin:0;font-size:14.5px;font-weight:600;line-height:1.2;color:#fff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-wa-tag{display:block;margin:1px 0 0;font-size:10.5px;font-style:italic;line-height:1.25;color:#fff;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-wa-id p{margin:1px 0 0;font-size:11.5px;opacity:.88;display:flex;align-items:center;gap:5px}
.mm-wa-id p i{width:8px;height:8px;border-radius:50%;background:#4f8a63;display:inline-block;box-shadow:0 0 #1c1917b3;animation:mm-wa-live 1.8s ease-out infinite}
@keyframes mm-wa-live{0%{box-shadow:0 0 #1c1917b3}70%{box-shadow:0 0 0 7px #fff0}to{box-shadow:0 0 #fff0}}
.mm-wa-x{background:#fff0;border:0;color:#fff;opacity:.85;cursor:pointer;padding:4px;border-radius:6px;line-height:0}
.mm-wa-x:hover{opacity:1;background:#ffffff26}
.mm-wa-x svg{width:18px;height:18px}
.mm-wa-body{flex:1 1 auto;min-height:0;padding:14px 12px 13px;overflow-y:auto;background-image:radial-gradient(rgb(0 0 0 / .035) 1px,transparent 1px);background-size:18px 18px}
.mm-wa-day{text-align:center;margin-bottom:12px}
.mm-wa-day span{background:#fff;color:#57534e;font-size:10.5px;padding:3px 10px;border-radius:8px;box-shadow:0 1px 1px #0000000f}
.mm-wa-greet{max-width:92%;background:#fff;color:#1c1917;font-size:13px;line-height:1.45;padding:8px 11px 9px;border-radius:2px 9px 9px;margin:0 auto 12px 0;box-shadow:0 1px .6px #00000021;white-space:pre-wrap}
.mm-wa-greet .mm-wa-t{display:block;text-align:right;font-size:10px;color:#57534e;margin-top:2px}
.mm-wa-prompt{text-align:center;font-size:11.5px;color:#57534e;margin:0 0 11px}
.mm-wa-chips{display:flex;flex-direction:column;gap:8px}
.mm-wa-chip{display:flex;align-items:center;gap:9px;text-decoration:none;background:#fff;border:1px solid #d6cec2;border-radius:12px;padding:9px 12px;color:#1c1917;font-size:12.8px;font-weight:500;line-height:1.3;box-shadow:0 1px 1px #0000000d;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.mm-wa-chip:hover{background:#e4efe7;border-color:#d6cec2;transform:translate(2px)}
.mm-wa-chip:focus-visible{outline:2px solid #d6cec2;outline-offset:2px}
.mm-wa-chip .mm-wa-q{width:24px;height:24px;flex:none;border-radius:50%;background:#e4efe7;display:grid;place-items:center;font-size:13px}
.mm-wa-chip .mm-wa-go{margin-left:auto;flex:none;color:#4f8a63}
.mm-wa-chip .mm-wa-go svg{width:15px;height:15px;display:block}
.mm-wa-foot{flex:none;background:#fff;text-align:center;padding:8px;font-size:10px;color:#57534e;border-top:1px solid #d6cec2}
.mm-wa-foot b{color:#4f8a63}
.mm-wa-chip--cta{background:linear-gradient(180deg,#fbf3e2,#fbf3e2);border-color:#d6cec2;color:#1c1917;font-weight:600}
.mm-wa-chip--cta:hover{background:#fbf3e2;border-color:#d6cec2}
.mm-wa-chip--cta .mm-wa-q{background:#fbf3e2}
.mm-wa-chip--cta .mm-wa-go{color:#c0603c}
.mm-wa-compose{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#faf8f5;border-top:1px solid #d6cec2}
.mm-wa-input{flex:1 1 auto;min-width:0;border:0;border-radius:20px;padding:9px 14px;font-family:inherit;font-size:13px;color:#1c1917;background:#fff;box-shadow:0 1px 1px #0000000f}
.mm-wa-input::placeholder{color:#8a827a}
.mm-wa-input:focus{outline:2px solid #d6cec2;outline-offset:0}
.mm-wa-send{flex:none;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;background:#4f8a63;color:#fff;display:grid;place-items:center;transition:background .15s ease}
.mm-wa-send:hover{background:#4f8a63}
.mm-wa-send:focus-visible{outline:2px solid #d6cec2;outline-offset:2px}
.mm-wa-send svg{width:18px;height:18px}
html:has(.mm-drawer.is-open) .mm-wa-launcher,html:has(.mm-drawer.is-open) .mm-wa-panel{opacity:0;visibility:hidden;pointer-events:none}
.mm-scroll-btn{position:fixed;right:18px;bottom:18px;z-index:9998;width:46px;height:46px;padding:0;border:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:conic-gradient(#b8892b var(--p,0%),rgb(255 255 255 / .22) 0);-webkit-tap-highlight-color:#fff0;transition:transform 0.2s ease,opacity 0.22s ease,visibility 0.22s ease}
.mm-scroll-btn::before{content:'';position:absolute;inset:3px;border-radius:50%;background:#241f1c}
.mm-scroll-btn svg{position:relative;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.25s ease}
.mm-scroll-btn.is-up svg{transform:rotate(180deg)}
.mm-scroll-btn:active{transform:scale(.92)}
.mm-scroll-btn:focus-visible{outline:3px solid #d6cec2;outline-offset:3px}
.mm-wa-launcher .mm-wa-i-close{display:none}
.mm-wa-launcher.is-open .mm-wa-i-open{display:none}
.mm-wa-pulse{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgb(28 25 23 / .55);animation:mm-wa-pulse 2.4s infinite}
.mm-wa-panel.is-open{display:flex;animation:mm-wa-pop 0.24s cubic-bezier(.2,.9,.3,1.3)}
.mm-wa-doodle{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.15;pointer-events:none}
.mm-wa-x:hover{opacity:1;background:rgb(255 255 255 / .15)}
.mm-wa-chip--cta{background:#fbf3e2;border-color:#d6cec2;color:#1c1917;font-weight:600}
html:has(.mm-mega-scrim.is-open) .mm-scroll-btn,html:has(.mm-mega-scrim.is-open) .mm-wa-launcher,html:has(.mm-mega-scrim.is-open) .mm-wa-panel{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:749px) {
  html body .mm-scroll-btn, html body .mm-wa-launcher, html body .mm-wa-panel, .mm-scroll-btn, .mm-wa-launcher, .mm-wa-panel { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
}
@media (prefers-reduced-motion:reduce) {
  .mm-scroll-btn,.mm-scroll-btn svg,.mm-wa-launcher,.mm-wa-panel,.mm-wa-chip,.mm-wa-pulse,.mm-wa-id p i{animation:none!important;transition:none!important}
  .mm-bnav,.mm-scroll-btn,.mm-bnav-sub,.mm-bnav-scrim{transition:none}
}
@media(max-width:749px),(hover:none),(pointer:coarse) {
  .cas .cas__card:hover .cas__img,.mmf-btn:hover,.mm-wa-chip:hover,.bsv2-section .bsv2-atc-btn:hover,.mm-ft .mm-ft-cta:hover,.mm-header .mm-cta:hover,.product-card__no-image.scale-border-hover:hover:before,.vertical-menu--hover__type2:hover .vertical-menu-item img,.vertical-menu--hover__type2:hover .vertical-menu-item svg:first-child,input[type=checkbox]:not(:checked)+.visual-display:hover .visual-display__image__content,input[type=checkbox]:not(:checked)+.visual-display:hover .visual-display-line,input[type=checkbox]:not(:checked)+.visual-display:hover [class*=visual-display__]:before,cart-drawer .drawer__close:hover svg,.popup-modal__toggle:hover svg{transform:none!important;filter:none!important}
  .mm-header.mm-style-zoku .mm-drawer-search .search__button:active,.mm-wa-launcher:hover,.mm-wa-launcher:active{transform:none!important}
  .btn,.button,.btn--secondary,.mm-btn,.mmf-btn,.mm-cta,.mm-ft-cta,.mm-wa-chip,.mm-wa-send,.phb-btn,.cas .cas__btn,.mm-view-all,.mm-half-cart,.mm-half-buy,.bsv2-section .bsv2-atc-btn,.product-form__submit,.quick-add__submit,.btn-quickview{transition:none!important}
}
@media(prefers-reduced-motion:reduce) {
  .mm-wa-launcher,.mm-wa-panel,.mm-wa-chip,.mm-wa-pulse,.mm-wa-id p i{animation:none!important;transition:none!important}
}

/* =========================================================================
   DARKSEAGREEN OVERRIDES

   Kept as a separate block at the end rather than edited into the rules
   above, so the port stays readable as a port and this stays reversible.
   ========================================================================= */

/* ---- 1. WhatsApp moves to the bottom LEFT ------------------------------
   lime-mouse stacks both widgets in the bottom right, WhatsApp riding 76px
   above the scroll button. Splitting them across the two corners means
   neither has to make room for the other, so the scroll button keeps
   lime-mouse's own bottom-right position untouched and nothing here needs
   to fight `body .mm-scroll-btn` or `html.mm-bnav-hidden .mm-scroll-btn`.

   `right: auto` is required, not tidiness: the ported rule sets `right:18px`,
   and an element with both left and right resolved is stretched between
   them, not moved. The panel needs the same treatment on top of the mobile
   rules, which set left AND right to pin it edge to edge.

   transform-origin follows the corner, or the open animation would scale out
   of a corner the panel no longer occupies. */
.mm-wa-launcher {
  left: 18px;
  right: auto;
  bottom: 18px;
}

.mm-wa-panel {
  left: 18px;
  right: auto;
  bottom: 84px;
  transform-origin: bottom left;
}

@media (max-width: 749px) {
  html body .mm-wa-panel,
  .mm-wa-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ---- 2. Make the panel scrollable again --------------------------------
   THE PANEL SCROLLED ON LIME-MOUSE AND DID NOT HERE, and the reason is not
   in the widget: this site runs Lenis and lime-mouse does not (checked -
   zero Lenis references in its markup or its bundle).

   `data-lenis-prevent` on the body is Lenis's documented opt-out and is set
   in the markup, but on this build it was not enough on its own - measured,
   with a wheel over the open panel moving neither the panel nor the page.
   The wheel is being swallowed, so float-widgets.js now scrolls that element
   itself. This rule is the companion: once it does scroll, reaching either
   end would otherwise chain the gesture on to the page behind it and scroll
   the whole site out from under the open panel. */
.mm-wa-body {
  overscroll-behavior: contain;
}
