/* ==========================================================================
   LeeFlora — card motion layer
   ==========================================================================

   The product card's structure and its hover behaviour live here, not in the
   widget's own stylesheet, for two reasons:

     1. Elementor prints get_style_depends() assets from wp_footer(). A card
        whose layout arrives after the markup visibly reflows on a site this
        fast, so this file rides the head like brand.css does.

     2. There will be two ways onto a card: the Product Cards widget (Elementor
        pages) and, later, a WooCommerce hook on the shop archive. The archive
        is not an Elementor page at all, so the widget's stylesheet can never
        reach it. One file, two entries.

   The widget publishes its panel settings as custom properties on .lee-wall
   (--lee-lift, --lee-zoom, and so on). Nothing here hard-codes a tuned value;
   every var() falls back to the value the reference site uses, so the card
   still looks right if the properties are never set.

   House rules, same as brand.css: scoped to body.elementor-kit-840, no
   emphasis overrides anywhere, every var() carries a literal fallback.

   ⚠ Elementor writes the widget's variables as `{{WRAPPER}} .lee-wall`, which
   resolves to three classes (0,3,0). This file sits at 0,1,1 and loses to it.
   That is fine for properties Elementor never touches, but it is why the
   media-query blocks below override transition/transform and gap directly
   instead of redeclaring a --lee-* variable — doing that would look correct
   and silently do nothing.

   Motion is transform and opacity only — both are composited. The hover shadow
   is a separate layer that fades by opacity rather than an animated box-shadow,
   which would repaint the card on every frame.

   Reference values were measured from plantshop.hk (WoodMart, a paid theme):
   the image pushes in over 2s on an overshooting curve, the card rises 4px,
   the shadow spreads 32px at 8% black.
   ========================================================================== */

body.elementor-kit-840 .lee-wall {
  --lee-cols: 4;
  --lee-gap: 24px;
  --lee-card-pad: 0px;
  --lee-card-radius: 4px;
  --lee-img-ratio: 1;
  --lee-lift: 4px;
  --lee-lift-dur: 400ms;
  --lee-zoom: 1.06;
  --lee-zoom-dur: 2000ms;
  --lee-shadow-dur: 400ms;

  display: grid;
  grid-template-columns: repeat(var(--lee-cols, 4), minmax(0, 1fr));
  gap: var(--lee-gap, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.elementor-kit-840 .lee-wall__heading {
  margin: 0 0 20px;
}

body.elementor-kit-840 .lee-wall__empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--lee-line, #e0d7c6);
  color: var(--lee-grey, #5a5049);
}

/* -- The card ----------------------------------------------------------
   .lee-card carries no background of its own. That is deliberate: it takes a
   transform on hover, which makes it a stacking context, and its shadow layer
   sits at z-index -1. With a background here, the shadow would paint on top of
   it and smudge the artwork. The opaque surface belongs to .lee-card__inner. */

body.elementor-kit-840 .lee-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--lee-card-radius, 4px);
  transition: transform var(--lee-lift-dur, 400ms) ease;
}

body.elementor-kit-840 .lee-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lee-shadow-dur, 400ms) ease;
}

body.elementor-kit-840 .lee-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--lee-card-pad, 0px);
  overflow: hidden;
  border-radius: var(--lee-card-radius, 4px);
}

/* -- Image -------------------------------------------------------------- */

body.elementor-kit-840 .lee-card__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / var(--lee-img-ratio, 1);
  border-radius: var(--lee-card-radius, 4px);
}

body.elementor-kit-840 .lee-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The long, slow push. Two seconds against a half-second fade elsewhere is
     what makes the reference site feel unhurried; the curve overshoots
     (y2 = 1.18) so the image settles rather than stops. */
  transition: transform var(--lee-zoom-dur, 2000ms) cubic-bezier(0, 0, 0.44, 1.18);
}

/* Positioned here rather than left to the theme: on an Elementor page the
   surrounding markup is not WooCommerce's loop, so Astra's own badge rules
   do not line up. brand.css supplies the gold palette via the .woocommerce
   wrapper the widget prints. */
body.elementor-kit-840 .lee-card__frame .onsale {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  inset-inline-end: auto;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* -- Text --------------------------------------------------------------- */

body.elementor-kit-840 .lee-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 16px;
}

body.elementor-kit-840 .lee-card__cat {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lee-taupe, #b8a89a);
}

body.elementor-kit-840 .lee-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--lee-ink, #2d2926);
}

body.elementor-kit-840 .lee-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

/* The rest state is already dark ink, so hover has to lift rather than merely
   change hue — the same rule the navigation follows (see 02-sticky-header). */
body.elementor-kit-840 .lee-card__title a:hover,
body.elementor-kit-840 .lee-card__title a:focus-visible {
  color: var(--lee-olive-bright, #4a7c1f);
}

body.elementor-kit-840 .lee-card__title a:focus-visible {
  outline: 2px solid var(--lee-olive-bright, #4a7c1f);
  outline-offset: 2px;
}

body.elementor-kit-840 .lee-card__price {
  margin-top: auto;
  padding-top: 2px;
}

body.elementor-kit-840 .lee-card__price .price {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--lee-ink, #2d2926);
}

body.elementor-kit-840 .lee-card__price .price del {
  font-weight: 400;
  color: var(--lee-grey, #5a5049);
}

body.elementor-kit-840 .lee-card__price .price ins {
  text-decoration: none;
}

/* A fixed row height keeps the grid aligned whether or not a product has been
   reviewed — most on this site have not. */
body.elementor-kit-840 .lee-card__rating {
  display: flex;
  align-items: center;
  min-height: 14px;
}

body.elementor-kit-840 .lee-card__rating .star-rating {
  margin: 0;
  font-size: 12px;
  line-height: 1;
}

/* -- Motion -------------------------------------------------------------
   Gated on a real pointer. Without this, touch browsers latch the hover state:
   a visitor taps a card, goes to the product, comes back, and finds it still
   lifted. */

@media (hover: hover) {
  body.elementor-kit-840 .lee-card:hover,
  body.elementor-kit-840 .lee-card:focus-within {
    transform: translateY(calc(-1 * var(--lee-lift, 4px)));
  }

  body.elementor-kit-840 .lee-card:hover::after,
  body.elementor-kit-840 .lee-card:focus-within::after {
    opacity: 1;
  }

  body.elementor-kit-840 .lee-card:hover .lee-card__img,
  body.elementor-kit-840 .lee-card:focus-within .lee-card__img {
    transform: scale(var(--lee-zoom, 1.06));
  }
}

/* Not just the movement: the slow zoom is the part that unsettles a
   motion-sensitive reader, so it is switched off too.

   These rules turn off transition and transform directly instead of zeroing
   the --lee-* variables. Elementor prints the widget's settings as
   `{{WRAPPER}} .lee-wall`, which resolves to three classes (0,3,0) — anything
   this file declares at 0,1,1 loses to it, so resetting the variables here
   would look right and do nothing. transition and transform are properties
   Elementor never writes, so there is nothing to outrank. */
@media (prefers-reduced-motion: reduce) {
  body.elementor-kit-840 .lee-card,
  body.elementor-kit-840 .lee-card::after,
  body.elementor-kit-840 .lee-card__img {
    transition: none;
  }

  @media (hover: hover) {
    body.elementor-kit-840 .lee-card:hover,
    body.elementor-kit-840 .lee-card:focus-within {
      transform: none;
    }

    body.elementor-kit-840 .lee-card:hover::after,
    body.elementor-kit-840 .lee-card:focus-within::after {
      opacity: 0;
    }

    body.elementor-kit-840 .lee-card:hover .lee-card__img,
    body.elementor-kit-840 .lee-card:focus-within .lee-card__img {
      transform: none;
    }
  }
}

/* -- Narrow screens -----------------------------------------------------
   921px is Astra's breakpoint, not Elementor's (1024/767). Keeping to one set
   means the cards reflow at the same moment as the rest of the theme. Two
   across on a phone matches the shop archive. */

@media (max-width: 921px) {
  body.elementor-kit-840 .lee-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Capped rather than set. Redeclaring --lee-gap here would lose to the
       widget's own 0,3,0 rule (see the reduced-motion block above), so the
       gap is narrowed through the property instead — min() keeps whatever
       the panel asked for when it is already tighter. */
    gap: min(var(--lee-gap, 24px), 16px);
  }

  body.elementor-kit-840 .lee-card__body {
    padding: 10px 10px 14px;
  }
}