/* Single Product – YGX Cards
   ---------------------------------------------- */
.ygx {
  --t: #0f172a;
  --mut: #64748b;
  --key: #4B1AB1;
  --pri: #FFB300;
  --card: #fff;
  --glow: rgba(75,26,177,.14);
}
.ygx, .ygx * { box-sizing: border-box; }
.ygx-wrap { margin-inline:auto; width:100%; max-width:1200px; padding:10px; color:var(--t); }
.ygx-grid { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .ygx-grid{ gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .ygx-grid{ gap:14px; grid-template-columns:repeat(5,minmax(0,1fr)); } }

.ygx-card {
  background:var(--card);
  border:2px solid var(--key);
  border-radius:16px;
  padding:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:transform .12s, box-shadow .18s, border-color .18s;
  display:flex; flex-direction:column;
}
.ygx-card:hover {
  transform:translateY(-1px);
  box-shadow:0 12px 26px var(--glow);
  border-color:var(--pri);
}

.ygx-media {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:2px solid var(--key);
  background:#fff;
}
.ygx-media::before { content:""; display:block; padding-top:100%; }
.ygx-media > img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
@supports (aspect-ratio:1/1){
  .ygx-media::before{ content:none; padding:0; }
  .ygx-media > img{ position:static; aspect-ratio:1/1; height:auto; }
}

.ygx-ribbon {
  position:absolute; top:10px; inset-inline-end:-34px;
  transform:rotate(45deg);
  background:#E11D48; color:#fff; font-weight:900; font-size:.70rem;
  padding:4px 40px; box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.ygx-fav { position:absolute; top:8px; inset-inline-end:8px; z-index:3; }

.ygx-body { padding:6px 4px; display:flex; flex-direction:column; gap:4px; }
.ygx-title {
  margin:0; font-weight:900; font-size:.82rem; line-height:1.15; text-align:center;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden; min-width:0;
}
.ygx-status { display:flex; align-items:center; justify-content:center; gap:6px; }
.ygx-badge {
  display:inline-block; padding:3px 7px; border-radius:999px;
  font-size:.65rem; font-weight:900; background:#FFE08A; color:#111;
}
.ygx-badge.success { background:linear-gradient(90deg,var(--pri),#FFC94D); }
.ygx-badge.error { background:#0f172a; color:#fff; }

/* السعر */
.ygx-price {
  text-align:center; font-weight:900; font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ygx-price del {
  color:var(--mut); font-weight:700; font-size:.82rem; margin-inline-start:6px;
}

/* العدّاد */
.ygx-timer {
  text-align:center; font-size:.78rem; font-weight:800;
  color:#0f172a; background:#FFF6DB;
  border:1px dashed var(--pri); border-radius:10px; padding:6px;
}
.ygx-timer .lbl { color:#92400e; margin-inline-end:6px; font-weight:900; }
.ygx-timer.ended { opacity:.7; }

/* شراء */
.ygx-buywrap { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.ygx-buywrap a, .ygx-buywrap button, .ygx-buywrap .button {
  width:100%; font-size:.82rem; padding:.52rem .7rem; border-radius:10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ygx-btn {
  display:inline-block; padding:.52rem .7rem; border-radius:10px;
  font-weight:900; border:2px solid var(--pri); background:var(--pri); color:#111;
  box-shadow:0 8px 18px rgba(255,179,0,.22); font-size:.82rem; width:100%;
}
.ygx-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* مزيد من التفاصيل */
.ygx-more { margin-top:4px; }
.ygx-more > summary {
  list-style:none; cursor:pointer; user-select:none;
  font-size:.78rem; color:var(--key); font-weight:800;
  display:inline-flex; align-items:center; gap:6px;
}
.ygx-more > summary::-webkit-details-marker{ display:none; }
.ygx-more .ygx-more-body {
  margin-top:6px; padding:8px;
  border:1px dashed var(--key); border-radius:10px;
  font-size:.86rem; color:#374151; background:#fff;
}

.ygx-accent {
  height:2px; width:0; margin-top:6px;
  background:linear-gradient(90deg,var(--key),var(--pri));
  transition:width .25s;
}
.ygx-card:hover .ygx-accent { width:100%; }
.ygx-note {
  padding:12px; border:2px dashed var(--key);
  border-radius:12px; text-align:center; color:#64748b;
}

.ygx-qty{display:none;}

/* Responsive adjustments */
@media (max-width:480px){
  .ygx-grid{ gap:8px; }
  .ygx-card{ padding:6px; border-radius:12px; }
  .ygx-media{ border-radius:10px; }
  .ygx-body{ padding:4px 2px; gap:3px; }
  .ygx-title{ font-size:.78rem; }
  .ygx-price{ font-size:.88rem; }
  .ygx-badge{ font-size:.62rem; padding:2px 6px; }
  .ygx-more > summary{ font-size:.75rem; }
}

/* ترتيب السعر الرسمي + المخفض + العدّاد تحت بعض على الهاتف */
@media (max-width:576px){
  .ygx-price{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .ygx-price .price{
    display:grid;
    grid-auto-flow:row;
    justify-items:center;
    align-items:center;
    gap:4px;
  }
  .ygx-price .price > del,
  .ygx-price .price > ins{
    display:block !important;
    margin:0;
    width:100%;
    text-align:center;
    overflow-wrap:anywhere;
  }
  .ygx-timer{
    margin-top:6px;
    width:100%;
  }
  .ygx-price .price .amount{
    white-space:normal;
  }
}