/* Add custom CSS styles below */ 
/* ====== Brand Base ====== */
:root{
  --brand:#009688;           /* لونك الأساسي */
  --brand-dark:#007d70;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --radius:14px;
  --shadow:0 8px 20px rgba(0,0,0,.07);
  --shadow-lg:0 18px 40px rgba(0,0,0,.12);
}

/* خط عربي أنيق (Tajawal) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
html, body {font-family:"Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color:var(--text);}

/* أزرار عامة + رئيسي */
[class*="btn-"], .btn, button{
  border-radius: var(--radius)!important;
  transition: .25s ease;
}
.btn-primary, a.btn-primary{
  background: var(--brand)!important; border-color: var(--brand)!important;
}
.btn-primary:hover{ background: var(--brand-dark)!important; border-color: var(--brand-dark)!important; transform: translateY(-1px); }

/* هيدر ثابت مع ظل خفيف */
header, .header, .site-header{
  position: sticky; top:0; z-index: 50; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* شريط التصنيفات/القائمة */
.nav, .navbar, .main-nav{ gap: .5rem; }
.nav a, .navbar a{ border-radius: 10px; padding: .5rem .8rem; }
.nav a:hover{ background: rgba(0,0,0,.04); }

/* بانر الهيرو */
.hero, .hero-section, .banner{
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); margin-block: 10px 20px;
}
.hero .title, .banner .title{ font-weight:800; letter-spacing:.3px; }
.hero .subtitle, .banner .subtitle{ color: var(--muted); }

/* بطاقات المنتجات (Raed) */
.product, .product-card, [class*="product-card"], .product-item{
  border-radius: 16px!important; overflow:hidden; box-shadow: var(--shadow); background:#fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product:hover, .product-card:hover, .product-item:hover{
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.product .product-title, .product-card .title, .product-item .title{
  font-weight:700; line-height:1.4; min-height: 2.6em; display:block;
}
.product .price, .product-card .price{ font-weight:800; color: var(--brand); }

/* شارة الخصم/التخفيض */
.badge, .sale-badge, [class*="badge-"]{
  background: var(--brand)!important; color:#fff!important; border-radius: 999px!important; padding:.25rem .6rem;
}

/* شبكة المنتجات – تقليل الفراغ وزيادة عدد الأعمدة على الشاشات العريضة */
.products-grid, .grid, [class*="products-grid"]{
  gap: 14px;
}
@media (min-width: 1200px){
  .products-grid{ grid-template-columns: repeat(4, minmax(0,1fr))!important; }
}

/* بطاقات المزايا الثلاث (شحن سريع/تسوق آمن/دفع متعدد) */
.features, [class*="features"] .feature{
  border-radius:16px; background:#f9fafb; padding:18px; box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.features .icon{ color: var(--brand); }

/* الفوتر */
footer, .footer{
  background:#0b0f14; color:#cbd5e1;
  border-radius: 18px; margin-top: 26px; padding: 28px;
}
.footer a{ color:#e5e7eb; }
.footer a:hover{ color:#fff; }



/* ====== أساسيات وهوية ====== */
:root{
  --brand:#6945db;            /* لونك الأساسي */
  --text:#1f2937;
  --muted:#6b7280;
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --shadow-lg:0 18px 44px rgba(0,0,0,.14);
}

/* شبكة المنتجات – مسافات وتخطيط أفضل */
.products-grid, .grid, [class*="products-grid"]{
  gap: 14px;
}
@media (min-width: 1200px){
  .products-grid{ grid-template-columns: repeat(4, minmax(0,1fr))!important; }
}

/* البطاقة العامة */
.product, .product-card, [class*="product-card"], .product-item{
  background:#fff; border-radius: var(--radius)!important; overflow:hidden;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.product:hover, .product-card:hover, .product-item:hover{
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}

/* غلاف الصورة بنسبة مربعة مع تكبير بسيط عند الهوفر */
.product .image, .product-card .image, .product-item .image, 
.product .product-image, .card-product .image-wrapper{
  aspect-ratio: 1/1; position:relative; overflow:hidden; background:#f8f9fb;
}
.product .image img, .product-card .image img, .product-item .image img,
.product .product-image img{
  width:100%; height:100%; object-fit:cover; transition: transform .35s ease;
}
.product:hover .image img, .product-card:hover .image img, .product-item:hover .image img{
  transform: scale(1.05);
}

/* شارة (بادج) البيع/التخفيض والوسم */
.p-badge, .badge, .sale-badge, [class*="badge-"]{
  position:absolute; z-index:3; top:10px; inset-inline-start:10px;
  background: var(--brand); color:#fff; border-radius: 999px; 
  padding:.35rem .6rem; font-weight:700; font-size:.78rem;
  box-shadow: 0 6px 16px rgba(105,69,219,.25);
}
.p-badge--save{ background: var(--brand); }
.p-badge--new{ background:#111; }

/* العنوان – سطرين كحد أقصى */
.product .title, .product-card .title, .product-item .title, .product .product-title{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight:700; color:var(--text); min-height: 2.6em; margin-top:10px;
}

/* السعر */
.price, .product .price, .product-card .price{
  display:flex; align-items:center; gap:.5rem; margin-top:8px;
}
.price .current, .price .price--current, .product .price-current{
  color: var(--brand); font-weight:800; font-size:1.05rem;
}
.price .old, .price .price--old, .product .price-old{
  color: var(--muted); text-decoration: line-through; font-weight:600;
  font-size:.92rem;
}

/* زر الشراء – يظهر دائماً أو ينساب عند الهوفر (حسب تفضيلك) */
.product .actions, .product-card .actions, .product-item .actions{
  display:flex; gap:.5rem; margin-top:12px;
}
.product .btn, .product-card .btn, .product-item .btn, .add-to-cart, button.add-to-cart{
  background:var(--brand)!important; border-color:var(--brand)!important; color:#fff!important;
  border-radius: 12px!important; width:100%; transition: .25s ease;
}
.product .btn:hover, .add-to-cart:hover{ filter: brightness(.95); transform: translateY(-1px); }

/* تقييم بالنجوم – لو موجود عناصر نجوم */
.rating i, .stars i, .product .rating i{ color: #f59e0b; }

/* أيقونة المفضلة (قلب) في زاوية الصورة – إن كان عندك عنصر مناسب */
.product .wish, .product-card .wishlist, .product-item .wishlist{
  position:absolute; top:10px; inset-inline-end:10px; z-index:3;
  background:#fff; border-radius:50%; width:36px; height:36px; display:grid; place-items:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.12); color:#111; transition:.25s;
}
.product .wish:hover{ transform: translateY(-2px); }

/* شريط ألوان/مقاسات إن وُجد */
.variants, .swatches{ margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.swatches .swatch{ width:22px; height:22px; border-radius:6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.is-active{ outline: 2px solid var(--brand); outline-offset:2px; }

/* وضع داكن مبدئي */
@media (prefers-color-scheme: dark){
  .product, .product-card, .product-item{ background:#0b0f14; }
  .product .title{ color:#e5e7eb; }
  .price .old{ color:#94a3b8; }
}

/* هيكل تحميل (Skeleton) — استخدم الكلاس skeleton على البطاقة عند اللود */
.skeleton{ position:relative; overflow:hidden; }
.skeleton::after{
  content:""; position:absolute; inset:0; 
  background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.08) 37%, rgba(0,0,0,.04) 63%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}


.is-new::after{
  content:'جديد'; position:absolute; top:10px; inset-inline-start:10px;
  background:#111; color:#fff; border-radius:999px; padding:.3rem .6rem; font-weight:700; font-size:.75rem;
}