/* ============================================================
   MUK Health — premium motion layer
   Loaded after muk-brand.css and muk-native.css.

   Ground rules, so nothing here can move the layout:
   - Animates ONLY transform, opacity, filter, box-shadow and
     background-position. Never width/height/margin/padding/top/left.
   - Every moving element is isolated in its own compositor layer.
   - Pointer-driven effects are gated behind (hover:hover)+(pointer:fine),
     so phones and tablets get the static layout and none of the cost.
   - The whole file no-ops under prefers-reduced-motion: reduce.
   ============================================================ */

:root{
  --mk-t-fast: .28s;
  --mk-t-med:  .55s;
  --mk-t-slow: .9s;
  --mk-glass: rgba(247,244,236,.86);
  --mk-shadow-1: 0 2px 10px rgba(14,28,19,.05);
  --mk-shadow-2: 0 18px 44px -12px rgba(14,28,19,.24), 0 4px 14px rgba(14,28,19,.07);
  --mk-z-drawer: 9000;
  --mk-z-modal: 9100;
}

/* ============================================================
   1. Scroll progress — a 2px gold thread across the very top
   ============================================================ */
.mk-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:9500;
  background:transparent; pointer-events:none;
}
.mk-progress__bar{
  height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--stone-dark),var(--stone),#e6cf9a);
  will-change:transform;
}

/* ============================================================
   2. Reveal — the existing .muk-rv system, given depth.
      muk-native.css already defines .muk-rv / .muk-rv.in.
      Cards and media get a 3D lift; body text keeps the clean
      vertical rise, because rotating type mid-flight looks soft.
   ============================================================ */
.muk .mk-3d{
  transform:perspective(1100px) rotateX(7deg) translate3d(0,34px,-40px);
  transform-origin:50% 100%;
  opacity:0;
  transition:opacity var(--mk-t-slow) var(--ease),
             transform var(--mk-t-slow) var(--ease);
  will-change:transform,opacity;
}
.muk .mk-3d.in{
  transform:perspective(1100px) rotateX(0) translate3d(0,0,0);
  opacity:1;
}
/* Stagger siblings so a row of cards cascades instead of snapping */
.muk .mk-3d[data-mk-i="1"]{transition-delay:.07s}
.muk .mk-3d[data-mk-i="2"]{transition-delay:.14s}
.muk .mk-3d[data-mk-i="3"]{transition-delay:.21s}
.muk .mk-3d[data-mk-i="4"]{transition-delay:.28s}
.muk .mk-3d[data-mk-i="5"]{transition-delay:.35s}

/* Once settled, drop the hint so hover transforms start from a clean slate */
.muk .mk-3d.mk-settled{transform:none;will-change:auto}

/* ============================================================
   3. Product cards — cursor-tracked 3D tilt with a specular sheen
   ============================================================ */
.muk .woocommerce ul.products li.product{
  transform-style:preserve-3d;
  transition:transform var(--mk-t-med) var(--ease),
             box-shadow var(--mk-t-med) var(--ease);
  box-shadow:var(--mk-shadow-1);
}
@media (hover:hover) and (pointer:fine){
  .muk .woocommerce ul.products li.product{
    /* rx/ry are written by JS; they stay 0 until the cursor arrives */
    transform:perspective(900px)
              rotateX(var(--mk-rx,0deg))
              rotateY(var(--mk-ry,0deg))
              translate3d(0,var(--mk-lift,0px),0);
  }
  .muk .woocommerce ul.products li.product:hover{
    box-shadow:var(--mk-shadow-2);
    z-index:2;
  }
  /* the sheen: a soft highlight that follows the pointer */
  .muk .woocommerce ul.products li.product::after{
    content:""; position:absolute; inset:0; z-index:3;
    pointer-events:none; opacity:0;
    transition:opacity var(--mk-t-med) ease;
    background:radial-gradient(
      420px circle at var(--mk-mx,50%) var(--mk-my,50%),
      rgba(255,255,255,.34), rgba(255,255,255,.06) 42%, transparent 62%);
    mix-blend-mode:soft-light;
  }
  .muk .woocommerce ul.products li.product:hover::after{opacity:1}

  /* image breathes in on hover */
  .muk .woocommerce ul.products li.product img{
    transition:transform 1.1s var(--ease), filter var(--mk-t-med) ease;
  }
  .muk .woocommerce ul.products li.product:hover img{
    transform:scale(1.055);
    filter:saturate(1.06);
  }
}
/* the image wrapper must clip the zoom without clipping the tilt shadow */
.muk .woocommerce ul.products li.product a img{will-change:transform}

/* Sale badge: a slow gold shimmer that sweeps on hover */
.muk .woocommerce ul.products li.product span.onsale{
  background-image:linear-gradient(115deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,.62) 50%,
    transparent 62%, transparent 100%);
  background-size:280% 100%;
  background-position:140% 0;
  background-repeat:no-repeat;
  transition:background-position 1.05s var(--ease);
  z-index:4;
}
.muk .woocommerce ul.products li.product:hover span.onsale{
  background-position:-60% 0;
}

/* ============================================================
   4. Quick View affordance on each card
   ============================================================ */
.mk-qv-btn{
  position:absolute; left:50%; z-index:5;
  top:38%; transform:translate(-50%,14px);
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; min-height:44px;
  border:0; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--forest-deep);
  background:var(--mk-glass);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 8px 24px -8px rgba(14,28,19,.4);
  opacity:0; visibility:hidden;
  transition:opacity var(--mk-t-med) var(--ease),
             transform var(--mk-t-med) var(--spring),
             visibility 0s linear var(--mk-t-med),
             background var(--mk-t-fast) ease, color var(--mk-t-fast) ease;
}
.mk-qv-btn svg{width:14px;height:14px;flex:none}
@media (hover:hover) and (pointer:fine){
  .muk li.product:hover .mk-qv-btn,
  .mk-qv-btn:focus-visible{
    opacity:1; visibility:visible;
    transform:translate(-50%,0);
    transition-delay:0s;
  }
}
/* Touch devices: always visible, pinned to the TOP-RIGHT of the card.
   It used to sit 8px from the bottom of its host, but the host is the
   link wrapping image + title + price, so "the bottom" was on top of
   the price. The top-right corner is inside the image at every card
   size and is the one corner the SALE badge never uses. */
@media (hover:none),(pointer:coarse){
  .mk-qv-btn{
    opacity:1; visibility:visible;
    position:absolute; inset:10px 10px auto auto;
    left:auto; bottom:auto;
    transform:none;
    width:42px; min-width:42px; height:42px;
    min-height:42px; padding:0; gap:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    color:var(--forest);
    box-shadow:0 0 0 1px rgba(14,28,19,.08), 0 4px 12px -4px rgba(14,28,19,.34);
  }
  .mk-qv-btn span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .mk-qv-btn svg{width:18px;height:18px}
}
@media (hover:none) and (max-width:480px),(pointer:coarse) and (max-width:480px){
  .mk-qv-btn{inset:8px 8px auto auto; width:40px; min-width:40px; height:40px; min-height:40px}
  .mk-qv-btn svg{width:17px;height:17px}
}
.mk-qv-btn:hover{background:var(--forest); color:var(--cream)}
.mk-qv-btn:focus-visible{outline:2px solid var(--stone-dark); outline-offset:3px}

/* ============================================================
   5. Magnetic buttons — the button leans toward the cursor
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .mk-mag{
    transition:transform var(--mk-t-med) var(--spring);
    will-change:transform;
  }
  .mk-mag.mk-mag-on{transition:transform .12s linear}
}

/* ============================================================
   6. Depth parallax on section media
   ============================================================ */
.mk-px{will-change:transform}
.mk-px > img,
.mk-px .elementor-widget-image img{
  transform:translate3d(0,var(--mk-py,0px),0) scale(1.12);
  will-change:transform;
}

/* ============================================================
   7. Header: condenses into a glass bar once you leave the top
   ============================================================ */
.muk .muk-hdr{
  transition:box-shadow var(--mk-t-med) ease,
             background-color var(--mk-t-med) ease,
             backdrop-filter var(--mk-t-med) ease;
}
.muk .muk-hdr.mk-stuck{
  background-color:rgba(247,244,236,.82) !important;
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 rgba(31,61,44,.10), 0 10px 30px -18px rgba(14,28,19,.5);
}

/* Nav links: a gold rule that draws in from the left */
.muk .muk-hdr .elementor-nav-menu .elementor-item{position:relative}
.muk .muk-hdr .elementor-nav-menu .elementor-item::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--stone-dark);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--mk-t-med) var(--ease);
}
.muk .muk-hdr .elementor-nav-menu .elementor-item:hover::after,
.muk .muk-hdr .elementor-nav-menu .elementor-item.elementor-item-active::after{
  transform:scaleX(1);
}

/* Header icons + cart: a gentle spring lift */
.muk .muk-util-icons a,
.muk .muk-hdr .elementor-menu-cart__toggle{
  transition:transform var(--mk-t-med) var(--spring);
}
.muk .muk-util-icons a:hover,
.muk .muk-hdr .elementor-menu-cart__toggle:hover{transform:translateY(-2px)}

/* ============================================================
   8. Section headings — the gold rule wipes in with the heading
   ============================================================ */
.muk .muk-sec-head.in .elementor-heading-title,
.muk .muk-eyebrow.in{animation:mkRise .85s var(--ease) both}
@keyframes mkRise{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}

/* ============================================================
   9. (The cart drawer was removed. An add is confirmed by the
       toast in 10b, which never covers the page.)
   ============================================================ */

/* Shared controls (used by Quick View and the toast). These live
   outside the Elementor tree, so the theme's broad `a`/`button`
   colour rules would otherwise win on specificity — that is what
   once turned a cream label into dark ink on dark green. */
.muk .mk-x,
.mk-x{
  width:44px; height:44px; border:0; cursor:pointer;
  background:transparent !important;
  color:var(--forest) !important; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:none !important;
  transition:transform var(--mk-t-fast) var(--spring), color var(--mk-t-fast) ease;
}
.muk .mk-x:hover,
.mk-x:hover{transform:rotate(90deg); color:var(--stone-dark) !important; background:transparent !important}
.muk .mk-x:focus,
.mk-x:focus{background:transparent !important; outline:none}
.muk .mk-x:focus-visible,
.mk-x:focus-visible{outline:2px solid var(--stone-dark); outline-offset:2px}

.mk-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 14px; text-align:center;
  font-family:'Jost',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--forest); cursor:pointer;
  transition:background var(--mk-t-fast) ease, color var(--mk-t-fast) ease;
}
.muk .mk-btn--ghost,
.mk-btn--ghost{background:transparent; color:var(--forest) !important}
.muk .mk-btn--ghost:hover,
.mk-btn--ghost:hover{background:var(--forest); color:var(--cream) !important}
.muk .mk-btn--solid,
.mk-btn--solid{background:var(--forest); color:var(--cream) !important}
.muk .mk-btn--solid:hover,
.mk-btn--solid:hover{background:var(--forest-deep); color:var(--cream) !important}
.mk-btn:focus-visible{outline:2px solid var(--stone-dark); outline-offset:2px}

/* ============================================================
   10. Quick View modal
   ============================================================ */
.mk-modal{
  position:fixed; inset:0; z-index:var(--mk-z-modal);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity var(--mk-t-med) var(--ease), visibility 0s linear var(--mk-t-med);
}
.mk-modal.mk-open{opacity:1;visibility:visible;transition-delay:0s}
.mk-modal__card{
  position:relative; z-index:1;
  width:min(940px,100%); max-height:88vh; overflow:auto;
  background:var(--cream);
  box-shadow:0 40px 90px -30px rgba(14,28,19,.6);
  display:grid; grid-template-columns:1fr 1fr;
  transform:perspective(1400px) rotateX(6deg) translate3d(0,26px,-60px) scale(.97);
  opacity:0;
  transition:transform .6s var(--ease), opacity .45s var(--ease);
  will-change:transform,opacity;
}
.mk-modal.mk-open .mk-modal__card{
  transform:perspective(1400px) rotateX(0) translate3d(0,0,0) scale(1);
  opacity:1;
}
.mk-modal__media{background:#fff;position:relative;overflow:hidden;min-height:320px}
.mk-modal__media img{width:100%;height:100%;object-fit:cover;display:block}
.mk-modal__body{padding:40px 38px;display:flex;flex-direction:column}
.mk-modal__eyebrow{
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone-dark);margin:0 0 10px;
}
.mk-modal__title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(26px,3vw,34px); line-height:1.22;
  color:var(--forest); margin:0 0 16px;
}
.mk-modal__price{font-family:'Jost',sans-serif;font-size:19px;color:var(--forest);margin:0 0 18px}
.mk-modal__price del{color:var(--muted);opacity:.7;margin-right:8px;font-size:15px}
.mk-modal__price ins{text-decoration:none;color:var(--forest);font-weight:500}
.mk-modal__desc{
  font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.75;
  color:var(--ink);margin-bottom:22px;
}
.mk-modal__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.mk-modal__acts .mk-btn{flex:1 1 170px}
/* sits over the cream body panel, so it needs its own disc to read */
.muk .mk-modal .mk-x,
.mk-modal .mk-x{
  position:absolute; top:10px; right:10px; z-index:2;
  background:rgba(255,255,255,.9) !important; border-radius:50%;
  box-shadow:0 2px 10px rgba(14,28,19,.14) !important;
}
.muk .mk-modal .mk-x:hover,
.mk-modal .mk-x:hover{background:#fff !important}
.mk-modal__spin{
  display:flex;align-items:center;justify-content:center;
  min-height:300px;grid-column:1/-1;
}
.mk-modal__spin::after{
  content:"";width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(31,61,44,.2);border-top-color:var(--forest);
  animation:mkSpin .7s linear infinite;
}
@keyframes mkSpin{to{transform:rotate(360deg)}}

@media (max-width:880px){
  .mk-modal{padding:14px}
  .mk-modal__card{grid-template-columns:1fr;max-height:92vh}
  .mk-modal__media{min-height:0;aspect-ratio:1/1}
  .mk-modal__body{padding:26px 22px}
}
@media (max-width:420px){
  .mk-modal__acts .mk-btn{flex:1 1 100%}
}

/* ============================================================
   10b. Phone confirmation toast
   On a small screen a 92vw drawer that locks the page is a
   takeover. This confirms the add, offers the bag, dismisses
   itself after five seconds, and never blocks anything.
   ============================================================ */
.mk-toast{
  position:fixed; z-index:calc(var(--mk-z-drawer) + 2);
  left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translate3d(0,140%,0);
  transition:transform .5s var(--spring), opacity .3s ease;
  opacity:0;
  pointer-events:none;
}
.mk-toast.mk-open{transform:translate3d(0,0,0); opacity:1; pointer-events:auto}
.mk-toast__body{
  display:flex; align-items:center; gap:11px;
  padding:10px 10px 10px 11px;
  background:rgba(247,244,236,.94);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 0 0 1px rgba(14,28,19,.10),
             0 16px 38px -14px rgba(14,28,19,.55);
}
.mk-toast__body img{width:44px;height:44px;object-fit:cover;flex:none;background:#fff}
.mk-toast__txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;gap:2px}
.mk-toast__k{
  font-family:'Jost',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--stone-text);
}
.mk-toast__n{
  font-family:'Cormorant Garamond',Georgia,serif; font-size:16px;
  color:var(--forest); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-toast__go{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 14px;
  background:var(--forest); color:var(--cream) !important; text-decoration:none;
  font-family:'Jost',sans-serif; font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.mk-toast__x{
  flex:none; width:40px; height:40px; border:0; background:none; cursor:pointer;
  color:var(--forest); font-size:21px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.mk-toast__go:focus-visible,.mk-toast__x:focus-visible{
  outline:2px solid var(--stone-dark); outline-offset:2px;
}
/* From tablet up the toast tucks into the bottom-right corner
   rather than spanning the screen. */
@media (min-width:768px){
  .mk-toast{left:auto; right:22px; bottom:22px; width:min(380px,44vw)}
  .mk-toast__n{font-size:17px}
}

/* body lock while an overlay is open — compensating for the scrollbar
   so the page behind does not jump sideways */
body.mk-locked{overflow:hidden}

/* ============================================================
   11. Respect the user's motion preference — switch it all off
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .mk-progress{display:none}
  .muk .mk-3d,
  .muk .mk-3d.in{transform:none !important;opacity:1 !important;transition:none !important}
  .muk .woocommerce ul.products li.product,
  .muk .woocommerce ul.products li.product img,
  .muk .woocommerce ul.products li.product::after,
  .mk-px > img,.mk-px .elementor-widget-image img,
  .mk-mag,.mk-qv-btn,.mk-scrim,.mk-modal,.mk-modal__card,.mk-toast{
    transform:none !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .muk .muk-sec-head.in .elementor-heading-title,
  .muk .muk-eyebrow.in{animation:none}
  .mk-qv-btn{opacity:1;visibility:visible;transform:translate(-50%,0) !important}
  .mk-modal.mk-open .mk-modal__card{transform:none !important}
  .mk-toast.mk-open{transform:none !important}
}