:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
  --primary:#f7c9d9;
  --primaryText:#111111;
  --shadow:0 10px 25px rgba(0,0,0,.06);
}

html[data-theme="dark"]{
  --bg:#0f1115;
  --text:#f5f5f5;
  --muted:#a1a1aa;
  --card:#171a21;
  --border:#2a2f3a;
  --primary:#f7c9d9;
  --primaryText:#111111;
  --shadow:0 10px 25px rgba(0,0,0,.25);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,Segoe UI,Cairo,Arial;
}

.container{padding:14px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden
}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.meta{padding:10px;display:flex;flex-direction:column;justify-content:space-between;min-height:80px}
.addBtn{
  width:40px;height:40px;border-radius:50%;
  border:0;background:var(--primary);
  font-weight:900;cursor:pointer
}

/* ===== Mobile fixes ===== */
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr !important; }
  .container{ padding: 12px !important; }
  body{ overflow-x: hidden; }
}

/* === force equal product cards === */
.grid{
  align-items:stretch !important;
}

.grid .card{
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.grid .card img{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  flex-shrink:0 !important;
}

.grid .card .meta{
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  min-height:118px !important;
}

.grid .card .meta > div:first-child,
.grid .card .meta .name,
.grid .card .meta .title{
  line-height:1.25 !important;
  min-height:2.5em !important;
  max-height:2.5em !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}