/*
 * MG: Product Grid
 */

:root{
  --mg-bg-hero:#F7F8F9;
  --mg-bg-white:#FFFFFF;
  --mg-bg-highlight:#f3fbfb;
  --mg-ink:#1F2937;
  --mg-ink-soft:#6B7280;
  --mg-ink-faint:#9CA3AF;
  --mg-border:#E5E7EB;
  --mg-primary:#1ab744;
  --mg-primary-dark:#159a3a;
  --mg-primary-soft:#EAFBF0;
  --mg-badge-bg:#F1F2F4;
  --mg-badge-ink:#374151;
  --mg-danger:#DC2626;
  --mg-radius-lg:22px;
  --mg-radius-md:14px;
  --mg-radius-sm:10px;
  --mg-shadow:0 20px 45px -18px rgba(31,41,55,0.14);
  --mg-shadow-sm:0 8px 20px -10px rgba(31,41,55,0.10);
  --mg-font-display:'Sora','Segoe UI',system-ui,-apple-system,sans-serif;
  --mg-font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
.mg-product-grid *{ box-sizing:border-box; }

/* ---------------- Grid ---------------- */
.mg-product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  font-family:var(--mg-font-body);
}

/* ---------------- Card ---------------- */
.mg-product-card{
  border:1px solid var(--mg-border); border-radius:var(--mg-radius-md); overflow:hidden;
  background:var(--mg-bg-white); display:flex; flex-direction:column;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.mg-product-card:hover{ box-shadow:var(--mg-shadow-sm); border-color:#DADFE5; }

.mg-product-card__thumb{
  position:relative; aspect-ratio:1500/700; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#F1F2F4,var(--mg-bg-hero));
}
.mg-product-card__thumb svg{ width:34px; height:34px; color:var(--mg-ink-faint); }
.mg-product-card__thumb a{ position:absolute; inset:0; top:0; left:0; right:0; bottom:0; }
.mg-product-card__thumb img {
  width: 100%;
  aspect-ratio: 1500/700;
  object-fit: cover;
  object-position: top;
}

.mg-product-card__license{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--mg-badge-ink);
}

/* Wishlist toggle — outline when not saved, filled + red when saved */
.mg-product-card__wishlist{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -4px rgba(17,24,39,.25);
  transition:background .15s ease, transform .15s ease;
}
.mg-product-card__wishlist:hover{ background:#fff; transform:scale(1.06); }
.mg-product-card__wishlist svg{ width:17px; height:17px; color:var(--mg-ink-soft); transition:color .15s ease; }
.mg-product-card__wishlist svg{ fill:none; stroke:currentColor; stroke-width:2; }
/* DYNAMIC: add class "mg-is-saved" when the product is already in the visitor's wishlist */
.mg-product-card__wishlist.mg-is-saved svg{ fill:var(--mg-danger); stroke:var(--mg-danger); }

.mg-product-card__body{ padding:16px; display:flex; flex-direction:column; flex:1; }
.mg-product-card__category{ font-size:11.5px; font-weight:700; color:var(--mg-ink-faint); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.mg-product-card__title{
  font-size:14.5px; font-weight:700; color:var(--mg-ink); text-decoration:none; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-bottom:6px;
}
.mg-product-card__title:hover{ text-decoration:underline; }
.mg-product-card__author{ font-size:12.5px; color:var(--mg-ink-soft); margin:0 0 14px; }

.mg-product-card__price-row{ margin-top:auto; margin-bottom:12px; }
.mg-product-card__price{ font-size:15px; font-weight:700; }

/* ---------------- Footer actions: Preview (compact) + Add to Cart (primary) ---------------- */
.mg-product-card__actions{ display:flex; gap:8px; }

.mg-product-card__preview{
  flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--mg-border); border-radius:10px; background:var(--mg-bg-white);
  color:var(--mg-ink); cursor:pointer; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.mg-product-card__preview:hover{ background:var(--mg-bg-highlight); border-color:var(--mg-ink-faint); }
.mg-product-card__preview svg{ width:17px; height:17px; }

.mg-product-card__add{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--mg-font-body); font-size:13px; font-weight:700; color:#fff;
  background:var(--mg-primary); border:none; border-radius:10px; padding:10px 12px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.mg-product-card__add:hover{ background:var(--mg-primary-dark); transform:translateY(-1px); }
.mg-product-card__add svg{ width:14px; height:14px; }

/* Already-in-cart state */
.mg-product-card__add.mg-is-in-cart{
  background:var(--mg-bg-white); color:var(--mg-ink); border:1px solid var(--mg-border); cursor:default;
}
.mg-product-card__add.mg-is-in-cart:hover{ transform:none; }

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .mg-product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .mg-product-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .mg-product-card__body{ padding:12px; }
}
@media (max-width:420px){
  .mg-product-grid{ grid-template-columns:1fr; }
}
/*****************/