:root { --radius: 16px; --shadow: 0 10px 25px rgba(0,0,0,.08); }

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:#f6f7fb; color:#111}
a{text-decoration:none}

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:#fff; box-shadow:var(--shadow);
}
.brand{display:flex; gap:10px; align-items:center}
.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#f2f3f7}
.title{font-weight:800}
.sub{font-size:12px;color:#666}

.lang-switch{display:flex; gap:8px}
.lang-switch a{
  padding:8px 10px;border-radius:12px; background:#f2f3f7; color:#111; font-weight:700; font-size:13px;
}
.lang-switch a.active{background:#111;color:#fff}

.container{max-width:980px;margin:0 auto;padding:16px}
.h1{margin:10px 0 16px; font-size:22px}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (min-width: 900px){
  .grid{grid-template-columns: repeat(3, minmax(0,1fr));}
}

.card{
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-img{
  height:110px; background:#eef0f6;
  display:grid; place-items:center; font-size:22px;
}
.card-body{padding:12px}
.card-title{font-weight:800;margin-bottom:6px}
.card-price{color:#333;margin-bottom:10px}

.btn{
  width:100%;
  border:0; padding:11px 12px;
  border-radius:14px;
  background:#111; color:#fff;
  font-weight:800; cursor:pointer;
}
.btn.primary{padding:14px 12px}

.cart{
  margin-top:16px;
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cart-title{font-weight:900}
.cart-total{font-weight:800;color:#333}

.cart-items{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:14px; background:#f2f3f7;
}
.item strong{font-size:14px}
.qty{display:flex; align-items:center; gap:8px}
.qty button{
  width:32px;height:32px;border-radius:12px;border:0;background:#111;color:#fff;font-weight:900;cursor:pointer;
}
.muted{color:#777;font-size:13px;padding:10px 0}

.label{display:block;font-weight:800;margin:10px 0 6px}
textarea{
  width:100%; border:1px solid #e5e7ef; border-radius:14px;
  padding:10px; resize:vertical; outline:none;
}


/*********************************************************************************/

.file-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.file-btn {
  background: #111;
  color: #fff;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: 0.2s;
}

.file-btn:hover {
  opacity: 0.85;
}

.file-name {
  font-size: 14px;
  color: #666;
}
/*******************************************************************************************/

/* الكارد نفسه */
.card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden; /* مهم */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
}

/* مكان الصورة فقط */
.card-img {
 /* height: 160px;  */         /* 👈 ده المفتاح */
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  height: auto;
}

/* الصورة نفسها */
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 👈 يمنع التمدد */
}

/* جسم الكارد */
.card-body {
  padding: 14px;
  text-align: center;
}
/**************************************************************************************************/
/* image modal */
.img-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  touch-action: pan-y;
  pointer-events: none;
}

.img-modal[style*="display: flex"] {
  pointer-events: auto;
}

.img-modal img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 12px;
}

.img-modal .close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

.img-modal .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  padding: 12px;
}

.img-modal .nav.prev { left: 10px; }
.img-modal .nav.next { right: 10px; }

.dots {
  position: absolute;
  bottom: 20px;
  display: flex;
  gap: 6px;
}

.dots span {
  width: 8px;
  height: 8px;
  background: #777;
  border-radius: 50%;
  cursor: pointer;
}

.dots span.active {
  background: #fff;
}

/***************************************************************************************************/

/* FIX: ensure buttons are clickable فوق أي overlay داخل الكارد */
.card { position: relative; }
.card-body { position: relative; z-index: 5; }
.card-img { position: relative; z-index: 1; }

/******************************************************************************************************/