.products-wrap{ max-width:1200px; margin-inline:auto; padding-inline:16px; }
#products-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; margin-top:12px; }

/* اخفي الكارت القديم لحد ما يتطبّع */
#products-grid .card.product{ display:none !important; }

.product-card{
  position:relative;
  background: linear-gradient(180deg, rgba(18,19,23,.92), rgba(15,16,19,.86));
  border: 1px solid rgba(255,80,80,.18);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 0 32px rgba(255,60,35,.12), 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,60,35,.10);
  transition: transform .15s ease, box-shadow .2s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 42px rgba(255,60,35,.16), 0 16px 36px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,60,35,.14);
}

.product-card .p-top{
  position:relative;
  min-height:200px; aspect-ratio:16/10;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:14px; overflow:hidden; background:#14161a;
}
.product-card .p-top::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(240px 140px at 50% -20px, rgba(255,90,90,.33), transparent 65%);
}
.product-card .p-top::after{
  content:""; position:absolute; inset:-18% -10% -28% -10%; pointer-events:none; border-radius:inherit;
  background: radial-gradient(40% 30% at 50% 0, rgba(255,95,80,.14), transparent 60%);
  filter: blur(18px); opacity:.6; animation:redGlow 6s ease-in-out infinite alternate;
}


.product-card .p-top img{ width:100%; height:100%; object-fit:cover; display:block; transform: translateZ(0); transition: transform .8s ease; will-change: transform; }
.product-card:hover .p-top img{ transform: scale(1.06) translateY(-2px); }

.product-card h3{ margin:0 0 8px; font-size:1.05rem; line-height:1.3; font-weight:700; }
.product-card .price{ font-weight:700; opacity:.95; margin-bottom:10px; }
.product-card .p-body{ display:flex; flex-direction:column; gap:10px; }
.product-card .actions{ margin-top:auto; display:flex; gap:12px; }
.product-card .actions .btn{ flex:1; }

/* الأزرار بدون وهج */
.product-card .actions .btn:focus,
.product-card .actions .btn:focus-visible{ outline:none; box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.5)); }

/* --- FIX: keep preview inside the card --- */
#products-grid .product-card{
  overflow: hidden;                 /* يقص أي تمدد خارج الحدود */
}

#products-grid .product-card .p-top{
  display: block;
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
  position: relative;               /* يثبت الـ ::before / ::after جوّاه */
  aspect-ratio: 16 / 10;
  min-height: 200px;
  border-radius: 14px;
  overflow: hidden;                 /* يقص أي جلو/صورة جوّا البريفيو نفسه */
  max-width: 100%;
}

#products-grid .product-card .p-top::before,
#products-grid .product-card .p-top::after{
  inset: 0;                         /* يضمن إن الجلو ما يطلعش برا */
}

#products-grid .product-card .p-top img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);         /* يمنع “قفزة” التحويل */
}



/* Price — always Number then $ */
#products-grid .price{
  display:inline-flex; gap:6px; align-items:baseline;
  direction:ltr; unicode-bidi:isolate; font-weight:700;
}
#products-grid .price .amount{ order:1 }
#products-grid .price .cur{ order:2 }

/* Product Detail */
.product-hero.card{ padding:24px }
.hero-grid{ display:grid; gap:24px; grid-template-columns: 1.6fr 1fr; align-items:start }
.media-box{ background:#0d0f12; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px }
.media-aspect{ position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden }
.media-aspect > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.thumbs{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap }
.thumbs img{ width:84px; height:84px; object-fit:cover; border-radius:10px; cursor:pointer; opacity:.85; border:1px solid rgba(255,255,255,.07) }
.thumbs img:hover{ opacity:1 }
.buy-card{ position:sticky; top:24px; padding:20px; border-radius:16px; background:#0d0f12; border:1px solid rgba(255,255,255,.06); box-shadow:0 12px 40px rgba(0,0,0,.25) }
.buy-title{ margin:0 0 8px 0; font-size:32px; line-height:1.2 }
.price{ font-size:22px; font-weight:700; margin:8px 0 14px }
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px }
.badges .tag{ background:#111; border:1px solid rgba(255,255,255,.09) }
.cta{ display:flex; gap:10px; flex-wrap:wrap }
.cta .btn{ padding:12px 18px; font-weight:700; border-radius:12px }
.card.section{ padding:22px; border-radius:16px }
.section h2{ margin:0 0 12px 0 }
.desc{ line-height:1.8 }
.desc ul{ margin:8px 0 8px 18px }
.meta{ color:#9aa4b2; font-size:14px; margin-top:8px }
.breadcrumbs{ font-size:14px; margin-bottom:12px; color:#9aa4b2 }
.breadcrumbs a{ color:#c9d1d9; text-decoration:none }
.breadcrumbs span{ color:#9aa4b2 }
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr }
  .buy-card{ position:static }
}