/* Add custom CSS styles below */ 
فاهمك يا خالد.
نبقي التصميم الحلو، ونشيل أي تأثير خاص على صفحات السياسات والشروط، ونضبط الألوان والستايل بشكل أنظف للهدايا والتوزيعات.

اللي تسويه الآن
١. احذف الكود اللي حطيته قبل في سلة
٢. انسخ هذا الكود الجديد كامل وحطه مكانه في حقل CSS المخصص

هذا الكود خفيف
يضبط الخط والألوان والمنتجات والهيدر
وما يلمس صفحات السياسات والشروط بشكل خاص

html{
font-family:"Tajawal","Cairo","IBM Plex Sans Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body{
background:#f7f7f8;
color:#111827;
}

/* ألوان هوية صندوقي تقريبية */
:root{
--sf-main:#0d9488;      /* لون رئيسي يميل للفيروزي */
--sf-main-dark:#0b766d;
--sf-muted:#6b7280;     /* نص ثانوي */
}

/* الرأس والهيدر */
header,
.header,
.site-header{
background:#ffffff;
border-bottom:1px solid #e5e7eb;
}

/* اسم المتجر */
.site-logo-text,
.store-name{
font-weight:800;
letter-spacing:.3px;
}

/* روابط القائمة العلوية */
nav a{
color:#111827;
padding:.4rem .7rem;
border-radius:999px;
}
nav a:hover

/* الأزرار العامة */
button,
.btn,
.sf-button{
border-radius:999px;
font-weight:700;
}

/* زر رئيسي بلون الهوية */
button.sf-btn-primary,
.btn-primary,
.sf-button.primary{
background:var(--sf-main);
border:1px solid var(--sf-main);
color:#ffffff;
}
button.sf-btn-primary:hover,
.btn-primary:hover,
.sf-button.primary:hover{
background:var(--sf-main-dark);
border-color:var(--sf-main-dark);
}

/* أزرار ثانوية */
.btn-outline,
.sf-button.outline{
background:#ffffff;
border:1px solid #e5e7eb;
color:#111827;
}
.btn-outline:hover,
.sf-button.outline:hover

/* بطاقات المنتجات */
.product-card,
.product-item,
.sf-product-card{
border-radius:16px;
border:1px solid #e5e7eb;
background:#ffffff;
overflow:hidden;
box-shadow:0 6px 18px rgba(15,23,42,0.06);
transition:all .2s ease;
}
.product-card:hover,
.product-item:hover,
.sf-product-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(15,23,42,0.11);
}

/* صورة المنتج */
.product-card img,
.product-item img,
.sf-product-card img{
border-bottom:1px solid #f3f4f6;
}

/* عنوان المنتج */
.product-card .product-title,
.product-item-title,
.sf-product-card .product-title{
font-weight:700;
font-size:1rem;
margin-bottom:.2rem;
}

/* وصف بسيط تحت العنوان إذا موجود */
.product-card .product-subtitle,
.sf-product-card .product-subtitle{
color:var(--sf-muted);
font-size:.9rem;
}

/* السعر */
.product-card .product-price,
.product-item-price,
.sf-product-card .price{
font-weight:800;
color:#111827;
}

/* شارات مثل جديد أو عرض */
.product-card .badge,
.sf-badge,
.badge-offer{
background:var(--sf-main);
color:#ffffff;
border-radius:999px;
}

/* بطاقات أقسام رئيسية مثل الهدايا والتوزيعات */
.category-card,
.sf-category-card{
border-radius:18px;
overflow:hidden;
border:1px solid #e5e7eb;
background:#ffffff;
}
.category-card img,
.sf-category-card img{
filter:saturate(1.05);
}
.category-card .title,
.sf-category-card .title{
font-weight:800;
}

/* الفوتر */
footer,
.site-footer{
background:#ffffff;
border-top:1px solid #e5e7eb;
color:var(--sf-muted);
}

/* الحقول والفورم */
input,
textarea,
select{
border-radius:12px;
border:1px solid #d1d5db;
}
input:focus,
textarea:focus,
select:focus{
border-color:var(--sf-main);
box-shadow:0 0 0 2px rgba(13,148,136,0.2);
outline:none;
}

بعد ما تلصقه
افتح المتجر وتشيك
الصفحة الرئيسية
صفحة منتج
وواحدة من صفحات السياسات

لو حسيت شيء تحتاج نعدله
مثلاً تبغى لون أفتح
زوايا أقل
ظل أخف

قل لي وش تبي يتغير وأنا أضبطه على جو صندوقي بالضبط