/* MoonLight_X — products-grid.css
   Styles for the MLX Products Grid Elementor widget (v2).
   Also used by WPBakery element and native shop archive. */

/* ─── Grid ────────────────────────────────────────────────────── */
.mlx-pg-grid {
  display: grid;
  gap: 1.5rem;
  width: 100%;
}
@media (max-width: 767px) {
  .mlx-pg-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 479px) {
  .mlx-pg-grid { grid-template-columns: 1fr !important; }
}

/* ─── Card shell ──────────────────────────────────────────────── */
.mlx-pg-item { display: flex; }

.mlx-pg-card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.mlx-pg-card__inner:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,.10);
  transform: translateY(-3px);
}

/* ─── Thumbnail area ──────────────────────────────────────────── */
.mlx-pg-card__thumb {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
}
.mlx-pg-card__thumb-link {
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.mlx-pg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease, filter .3s ease, opacity .3s ease;
}

/* ─── Image hover effects ─────────────────────────────────────── */
.mlx-pg-card__inner:hover .mlx-img-fx--zoom      { transform: scale(1.07); }
.mlx-pg-card__inner:hover .mlx-img-fx--zoom_out  { transform: scale(.94); }
.mlx-pg-card__inner:hover .mlx-img-fx--move_left { transform: translateX(-4%); }
.mlx-pg-card__inner:hover .mlx-img-fx--grayscale { filter: grayscale(100%); }
.mlx-pg-card__inner:hover .mlx-img-fx--fade      { opacity: .7; }
.mlx-img-fx--none { transition: none; }

/* ─── Sale / Out-of-stock badges ──────────────────────────────── */
.mlx-pg-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  padding: .2rem .625rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-radius: 4px;
  line-height: 1.4;
}
.mlx-pg-badge--sale    { background: #e84545; color: #fff; }
.mlx-pg-badge--new     { background: #22c55e; color: #fff; }
.mlx-pg-badge--hot     { background: #f97316; color: #fff; }
.mlx-pg-badge--out     { background: #888; color: #fff; }

/* Multiple badges stack vertically */
.mlx-pg-badge:nth-child(2) { top: calc(.75rem + 28px); }
.mlx-pg-badge:nth-child(3) { top: calc(.75rem + 56px); }

/* ─── Action buttons (quick view, wishlist) ───────────────────── */
.mlx-pg-actions {
  position: absolute;
  display: flex;
  z-index: 10;
  transition: opacity .25s, transform .25s;
}

/* Position: hover overlay (center bottom of image) */
.mlx-pg-actions--hover_overlay {
  bottom: .875rem;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  gap: .5rem;
  opacity: 0;
}
.mlx-pg-card__inner:hover .mlx-pg-actions--hover_overlay {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Position: side stack (right edge) */
.mlx-pg-actions--side_stack {
  top: .75rem;
  right: .75rem;
  flex-direction: column;
  gap: .4rem;
  opacity: 0;
  transform: translateX(6px);
}
.mlx-pg-card__inner:hover .mlx-pg-actions--side_stack {
  opacity: 1;
  transform: translateX(0);
}

/* Position: below image (always visible) */
.mlx-pg-actions--below_image {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  opacity: 1;
  justify-content: center;
  padding: .5rem .75rem;
  gap: .5rem;
  background: transparent;
}
.mlx-pg-card__inner:hover .mlx-pg-actions--below_image {
  opacity: 1;
  transform: none;
}

/* Individual action button */
.mlx-pg-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: 38px;
  height: 38px;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 500;
  color: #333;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: background .2s, color .2s, transform .2s;
  white-space: nowrap;
}
.mlx-pg-action:hover {
  background: var(--mlx-color-primary, #0a0a0a);
  color: #fff;
  transform: scale(1.1);
}
.mlx-pg-action svg { flex-shrink: 0; }

/* Wishlist active state */
.mlx-pg-action.mlx-action--wishlist.is-active { color: #e84545; }
.mlx-pg-action.mlx-action--wishlist.is-active svg path { fill: #e84545; stroke: #e84545; }

/* Icon+text action buttons (below_image or text mode) */
.mlx-pg-actions--below_image .mlx-pg-action,
.mlx-pg-action:has(span) {
  width: auto;
  padding: .4rem .875rem;
  border-radius: 9999px;
}

/* ─── Card body ───────────────────────────────────────────────── */
.mlx-pg-card__body {
  padding: .875rem 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  flex: 1;
}

/* ─── Category ────────────────────────────────────────────────── */
.mlx-pg-card__cats {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mlx-color-accent, #e84545);
  line-height: 1;
}
.mlx-pg-card__cats a {
  color: inherit;
  text-decoration: none;
}
.mlx-pg-card__cats a:hover { opacity: .7; }

/* ─── Title ───────────────────────────────────────────────────── */
.mlx-pg-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: .125rem 0 0;
}
.mlx-pg-card__title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mlx-pg-card__title a:hover { color: var(--mlx-color-accent, #e84545); }

/* ─── Rating ──────────────────────────────────────────────────── */
.mlx-pg-card__rating { margin: .125rem 0; }
.mlx-pg-card__rating .star-rating { font-size: .875rem; }

/* ─── Price ───────────────────────────────────────────────────── */
.mlx-pg-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  margin-top: auto;
  padding-top: .375rem;
}
.mlx-pg-card__price .woocommerce-Price-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mlx-color-primary, #0a0a0a);
}
.mlx-pg-card__price del {
  font-size: .875rem;
  font-weight: 400;
  opacity: 1;
}
.mlx-pg-card__price del .woocommerce-Price-amount {
  color: #aaa;
  font-size: inherit;
  font-weight: 400;
}
.mlx-pg-card__price ins {
  text-decoration: none;
}
.mlx-pg-card__price ins .woocommerce-Price-amount {
  color: var(--mlx-color-accent, #e84545);
}

/* ─── Add to cart button ──────────────────────────────────────── */
.mlx-pg-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .625rem .875rem;
  margin-top: .625rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .22s, color .22s, border-color .22s;
}
.mlx-pg-card__btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Filled (default) */
.mlx-pg-btn--filled {
  background: var(--mlx-btn-cart-bg, #0a0a0a);
  color: var(--mlx-btn-cart-color, #fff);
  border-color: var(--mlx-btn-cart-bg, #0a0a0a);
}
.mlx-pg-btn--filled:hover {
  background: var(--mlx-btn-cart-hover-bg, #e84545);
  color: var(--mlx-btn-cart-hover-color, #fff);
  border-color: var(--mlx-btn-cart-hover-bg, #e84545);
}

/* Outline */
.mlx-pg-btn--outline {
  background: transparent;
  color: var(--mlx-btn-cart-bg, #0a0a0a);
  border-color: currentColor;
}
.mlx-pg-btn--outline:hover {
  background: var(--mlx-btn-cart-bg, #0a0a0a);
  color: var(--mlx-btn-cart-color, #fff);
  border-color: var(--mlx-btn-cart-bg, #0a0a0a);
}

/* Ghost */
.mlx-pg-btn--ghost {
  background: rgba(255,255,255,.85);
  color: var(--mlx-color-primary, #0a0a0a);
  border-color: rgba(0,0,0,.12);
  backdrop-filter: blur(4px);
}
.mlx-pg-btn--ghost:hover {
  background: var(--mlx-btn-cart-bg, #0a0a0a);
  color: #fff;
  border-color: var(--mlx-btn-cart-bg, #0a0a0a);
}

/* Text only */
.mlx-pg-btn--text {
  background: transparent;
  color: var(--mlx-color-accent, #e84545);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mlx-pg-btn--text:hover { text-decoration: none; }