/* =============================================================================
   Liva Mall V2 — the product card, and the grid it lives in.
   PHASE 5.5. ONE card, used by the homepage, shop, categories, search, related
   products, upsells and cart recommendations. There is no second card.

   The two WooCommerce normalisations at the top are repairs, not styling —
   without them the catalogue renders a blank first cell and 62px cards.
   ========================================================================== */

/* 1. WooCommerce's float clearfix becomes a GRID ITEM (`ul.products::before/::after`
      carry content). Nothing floats here. */
body.lmv2-v3 ul.products::before,
body.lmv2-v3 ul.products::after{content:none;display:none}

/* 2. WooCommerce floats and percentage-sizes every card at up to (0,5,2). Matching
      that shape from `body.lmv2-v3` reaches (0,5,3) and wins on merit. */
body.lmv2-v3 ul.products li.product,
body.lmv2-v3 ul.products[class*="columns-"] li.product,
body.lmv2-v3 ul.products[class*="columns-"] li.product:nth-child(2n),
body.lmv2-v3 ul.products[class*="columns-"] li.product:nth-child(2n+1){
  float:none;width:auto;min-width:0;max-width:none;margin:0;clear:none;
}

/* ---------- The grid ------------------------------------------------------ */

.lmv2-v3 ul.products,
.lmv2-v3 .lmv2-cards{
  display:grid;
  grid-template-columns:repeat(var(--lmv2-cols-set,var(--lmv2-cols)),minmax(0,1fr));
  gap:var(--lmv2-card-gap);
  list-style:none;margin:0;padding:0;
}
@media (max-width:767px){ .lmv2-v3 .lmv2-cards{--lmv2-cols-set:2} }
@media (min-width:768px) and (max-width:1023px){ .lmv2-v3 .lmv2-cards{--lmv2-cols-set:3} }

/* ---------- The card ------------------------------------------------------ */

.lmv2-v3 .lmv2-c,
.lmv2-v3 ul.products li.product{position:relative;display:flex;flex-direction:column;min-width:0}
.lmv2-v3 .lmv2-c__link{
  display:flex;flex-direction:column;height:100%;gap:var(--s3);
  text-decoration:none;color:inherit;border-radius:var(--lmv2-radius-card);
  transition:transform var(--lmv2-t-base) ease;
}
.lmv2-v3.lmv2-hoverlift .lmv2-c__link:hover{transform:translateY(-3px)}

.lmv2-v3 .lmv2-c__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:var(--lmv2-card-ratio);
  border-radius:var(--lmv2-radius-card);
  background:var(--lmv2-surface-soft);
  box-shadow:inset 0 1px 0 var(--lmv2-edge),0 0 0 1px var(--lmv2-line-soft);
  /* Loading placeholder: a soft brand-tinted sheen painted BEHIND the image. It can
     never hide the merchandise, because the image is never touched. */
  background-image:linear-gradient(105deg,transparent 30%,var(--lmv2-brand-ghost) 50%,transparent 70%);
  background-size:280% 100%;background-position:120% 0;
  animation:lmv2-shimmer 1.6s ease-in-out infinite;
}
@keyframes lmv2-shimmer{ to{ background-position:-60% 0; } }
.lmv2-v3 .lmv2-c__media img,
.lmv2-v3 .lmv2-c__img{
  width:100%;height:100%;object-fit:var(--lmv2-card-fit);object-position:center;
  transition:transform var(--lmv2-t-slow) cubic-bezier(.2,0,0,1);
}
.lmv2-v3 .lmv2-c.has-zoom .lmv2-c__link:hover .lmv2-c__img,
.lmv2-v3 .lmv2-c.has-zoom .lmv2-c__link:focus-visible .lmv2-c__img{transform:scale(1.045)}

.lmv2-v3 .lmv2-c.has-surface .lmv2-c__link{
  background:var(--lmv2-surface);border-radius:var(--lmv2-radius-card);
  padding:var(--s3) var(--s3) var(--s5);
  box-shadow:inset 0 1px 0 var(--lmv2-edge),var(--lmv2-shadow-1);
}
.lmv2-v3 .lmv2-c.has-border .lmv2-c__link{border:1px solid var(--lmv2-line);border-radius:var(--lmv2-radius-card)}

/* The one sale badge: small, brand, honest text ("−20%" or "Sale"). */
.lmv2-v3 .lmv2-c__badge{
  position:absolute;top:var(--s3);left:var(--s3);z-index:2;
  display:inline-flex;align-items:center;min-height:24px;padding:0 var(--s2);border-radius:6px;
  background:var(--lmv2-brand);color:var(--lmv2-on-brand);
  font-family:var(--lmv2-label-ff);font-size:11.5px;font-weight:700;
  letter-spacing:.04em;line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:var(--lmv2-shadow-1);
}

/* Presentational only — the whole card is already the link. */
.lmv2-v3 .lmv2-c__quick{
  position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:2;
  display:none;align-items:center;justify-content:center;min-height:40px;
  border-radius:var(--lmv2-radius-btn);
  background:var(--lmv2-bg-a);color:var(--lmv2-ink);
  font-family:var(--lmv2-label-ff);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity var(--lmv2-t-base) ease,transform var(--lmv2-t-base) ease;
}
@media (hover:hover) and (min-width:768px){
  .lmv2-v3 .lmv2-c__quick{display:flex}
  .lmv2-v3 .lmv2-c__link:hover .lmv2-c__quick,
  .lmv2-v3 .lmv2-c__link:focus-visible .lmv2-c__quick{opacity:1;transform:none}
}

.lmv2-v3 .lmv2-c__body{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0;padding-inline:2px}  /* 5.7H: was 2px, which ran the category, title and price together as one block. */
.lmv2-v3 .lmv2-c__cat{
  font-family:var(--lmv2-label-ff);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lmv2-muted);
}
.lmv2-v3 .lmv2-c__title{
  font-family:var(--lmv2-ptitle-ff);font-size:var(--lmv2-ptitle-fs);font-weight:var(--lmv2-ptitle-fw);
  line-height:var(--lmv2-ptitle-lh);letter-spacing:var(--lmv2-ptitle-ls);
  color:var(--lmv2-ink);
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:var(--lmv2-card-lines);line-clamp:var(--lmv2-card-lines);
  min-height:calc(var(--lmv2-card-lines) * var(--lmv2-ptitle-lh) * 1em);
}
.lmv2-v3 .lmv2-c__link:hover .lmv2-c__title{color:var(--lmv2-brand)}
.lmv2-v3 .lmv2-c__rating{margin-top:2px}

/* Price pinned to the bottom so prices line up across a row whatever the titles do. */
.lmv2-v3 .lmv2-c__price{
  margin-top:auto;padding-top:var(--s2);
  font-family:var(--lmv2-price-ff);font-size:var(--lmv2-price-fs);font-weight:var(--lmv2-price-fw);
  line-height:var(--lmv2-price-lh);color:var(--lmv2-price);
}
.lmv2-v3 .lmv2-c__price del{color:var(--lmv2-muted);font-weight:400;font-size:.85em;margin-right:var(--s2);text-decoration-thickness:1px}
.lmv2-v3 .lmv2-c__price ins{text-decoration:none;color:var(--lmv2-sale)}
.lmv2-v3 .lmv2-c__price .woocommerce-Price-currencySymbol{font-size:.85em;opacity:.8}

/* ---------- Rails --------------------------------------------------------- */

.lmv2-v3 .related ul.products,
.lmv2-v3 .up-sells ul.products{--lmv2-cols-set:2}
@media (min-width:768px){
  .lmv2-v3 .related ul.products,
  .lmv2-v3 .up-sells ul.products{--lmv2-cols-set:4}
}

@media (prefers-reduced-motion:reduce){ .lmv2-v3 .lmv2-c__media{animation:none} }

/* ---------- Natural heights (5.6, owner call) ------------------------------
   Image shape = Natural: the frame takes the photograph's own ratio (from its width and
   height attributes, so nothing shifts while it loads) and the whole photograph shows.
   Rows align at the top so titles sit right under each photograph. */
.lmv2-v3.lmv2-card-natural .lmv2-c__media{aspect-ratio:auto}
.lmv2-v3.lmv2-card-natural .lmv2-c__media img,
.lmv2-v3.lmv2-card-natural .lmv2-c__img{height:auto;object-fit:initial}
.lmv2-v3.lmv2-card-natural ul.products,
.lmv2-v3.lmv2-card-natural .lmv2-cards{align-items:start}