shop – الصفحة 21 – خدمة الابداع

shop

هيدر خدمة الإبداع

/* ===== متغيرات الألوان ===== */
:root{
–kia-white:#ffffff;
–kia-dark:#1c1c1c;
–kia-gray:#6b6b6b;
–kia-line:#ececec;
–kia-accent:#1c1c1c;
}
*{box-sizing:border-box;}
.kia-header{
background:var(–kia-white);
border-bottom:1px solid var(–kia-line);
direction:rtl;
font-family:”Tajawal”,”Segoe UI”,Arial,sans-serif;
position:relative;
z-index:999;
}
.kia-header-inner{
max-width:1280px;
margin:0 auto;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
padding:14px 20px;
gap:16px;
}
.kia-right{
display:flex;
align-items:center;
gap:10px;
justify-content:start;
}
.kia-logo{
display:flex;
justify-content:center;
}
.kia-logo img{
height:46px;
width:auto;
display:block;
}
.kia-left{
display:flex;
align-items:center;
justify-content:end;
gap:8px;
}
.kia-icon-btn{
background:none;
border:none;
cursor:pointer;
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:var(–kia-dark);
transition:background .2s ease;
text-decoration:none;
position:relative;
}
.kia-cart-badge{
position:absolute;
top:2px;
left:2px;
background:var(–kia-dark);
color:#fff;
font-size:10px;
line-height:1;
min-width:16px;
height:16px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
padding:0 3px;
font-family:inherit;
}
.kia-cart-badge.hide{
display:none;
}
.kia-icon-btn:hover{
background:#f2f2f2;
}
.kia-icon-btn svg{
width:22px;
height:22px;
}
/* ===== شريط البحث المنبثق ===== */
.kia-search-overlay{
position:absolute;
inset:0 0 auto 0;
top:0;
background:var(–kia-white);
border-bottom:1px solid var(–kia-line);
display:flex;
align-items:center;
padding:0 20px;
height:0;
overflow:hidden;
opacity:0;
transition:height .25s ease, opacity .2s ease;
}
.kia-search-overlay.open{
height:78px;
opacity:1;
}
.kia-search-form{
max-width:1280px;
margin:0 auto;
width:100%;
display:flex;
align-items:center;
gap:10px;
}
.kia-search-form input[type=”search”]{
flex:1;
border:1px solid var(–kia-line);
border-radius:8px;
padding:10px 14px;
font-size:15px;
font-family:inherit;
outline:none;
direction:rtl;
}
.kia-search-form input[type=”search”]:focus{
border-color:var(–kia-dark);
}
.kia-search-submit{
background:var(–kia-dark);
color:#fff;
border:none;
border-radius:8px;
padding:10px 18px;
cursor:pointer;
font-family:inherit;
font-size:14px;
}
.kia-search-close{
background:none;
border:none;
font-size:26px;
line-height:1;
cursor:pointer;
color:var(–kia-gray);
padding:4px 8px;
}
/* ===== قائمة البرجر (Drawer) ===== */
.kia-mobile-menu{
position:fixed;
top:0;
right:-300px;
width:280px;
height:100%;
background:var(–kia-white);
box-shadow:-4px 0 18px rgba(0,0,0,.08);
transition:right .25s ease;
z-index:1001;
padding:20px;
overflow-y:auto;
}
.kia-mobile-menu.open{
right:0;
}
.kia-menu-top{
display:flex;
justify-content:flex-end;
margin-bottom:10px;
}
.kia-mobile-menu ul{
list-style:none;
margin:0;
padding:0;
}
.kia-mobile-menu li{
border-bottom:1px solid var(–kia-line);
}
.kia-mobile-menu a{
display:block;
padding:14px 6px;
color:var(–kia-dark);
text-decoration:none;
font-size:16px;
}
/* تنسيق فرعي */
.kia-mobile-menu li.sub-item a { font-size:14px; padding-right:25px; color:var(–kia-gray); }
.kia-overlay-bg{
position:fixed;
inset:0;
background:rgba(0,0,0,.35);
opacity:0;
visibility:hidden;
transition:opacity .25s ease;
z-index:1000;
}
.kia-overlay-bg.show{
opacity:1;
visibility:visible;
}
@media (max-width:480px){
.kia-logo img{height:38px;}
.kia-header-inner{padding:10px 14px; gap:6px;}
.kia-mobile-menu{width:min(280px,85vw); right:-100%;}
}

:root{
–kia-navy:#1c2340;
–kia-gold:#e6a017;
–kia-bg:#f7f7fb;
–kia-line:#ececf3;
–kia-text:#5a5e75;
–kia-red:#c14b4b;
–kia-green:#2f9e63;
–kia-pink:#c2467f;
}
.kia-shop{
font-family:”Tajawal”,”Segoe UI”,Arial,sans-serif;
direction:rtl;
max-width:1280px;
margin:0 auto;
padding:16px 16px 50px;
}
/* ===================== شريط علوي: بحث + ترتيب ===================== */
.kia-shop-topbar{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
background:#fff;
border:1px solid var(–kia-line);
border-radius:14px;
padding:14px 18px;
margin-bottom:18px;
}
.kia-shop-search{
flex:1 1 260px;
position:relative;
}
.kia-shop-search input{
width:100%;
padding:11px 42px 11px 14px;
border:1px solid var(–kia-line);
border-radius:10px;
font-size:13.5px;
font-family:inherit;
outline:none;
color:var(–kia-navy);
}
.kia-shop-search input:focus{ border-color:var(–kia-navy); }
.kia-shop-search svg{
position:absolute;
left:14px; top:50%;
transform:translateY(-50%);
width:17px; height:17px;
color:#9a9eb0;
}
.kia-shop-sort{
flex:0 0 auto;
}
.kia-shop-sort select{
padding:11px 14px;
border:1px solid var(–kia-line);
border-radius:10px;
font-size:13px;
font-family:inherit;
color:var(–kia-navy);
background:#fff;
outline:none;
cursor:pointer;
}
.kia-shop-mobile-filter-btn{
display:none;
flex:0 0 auto;
align-items:center;
gap:6px;
background:var(–kia-navy);
color:#fff;
border:none;
border-radius:10px;
padding:11px 16px;
font-size:13px;
font-weight:700;
font-family:inherit;
cursor:pointer;
}
.kia-shop-mobile-filter-btn svg{ width:15px; height:15px; }
.kia-shop-result-count{
flex:0 0 100%;
font-size:12.5px;
color:#9a9eb0;
}
/* ===================== التخطيط: فلاتر + منتجات ===================== */
.kia-shop-layout{
display:grid;
grid-template-columns:250px 1fr;
gap:20px;
align-items:start;
}
/* ===================== الفلاتر (الشريط الجانبي) ===================== */
.kia-filters{
background:#fff;
border:1px solid var(–kia-line);
border-radius:14px;
padding:20px;
position:sticky;
top:16px;
}
.kia-filter-block{
margin-bottom:24px;
padding-bottom:20px;
border-bottom:1px solid var(–kia-line);
}
.kia-filter-block:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.kia-filter-title{
font-size:14px;
font-weight:800;
color:var(–kia-navy);
margin:0 0 12px;
display:flex;
align-items:center;
justify-content:space-between;
}
.kia-filter-clear{
font-size:11.5px;
color:var(–kia-pink);
cursor:pointer;
font-weight:700;
}
.kia-cat-list{
list-style:none;
margin:0; padding:0;
max-height:260px;
overflow-y:auto;
}
.kia-cat-list::-webkit-scrollbar{ width:5px; }
.kia-cat-list::-webkit-scrollbar-thumb{ background:var(–kia-line); border-radius:10px; }
.kia-cat-item{
display:flex;
align-items:center;
gap:8px;
padding:7px 0;
cursor:pointer;
font-size:13px;
color:var(–kia-text);
}
.kia-cat-item input{
accent-color:var(–kia-navy);
width:15px; height:15px;
cursor:pointer;
}
.kia-cat-item .kia-cat-count{
margin-right:auto;
font-size:11px;
color:#aeb2c4;
}
.kia-cat-item.active-label{ color:var(–kia-navy); font-weight:700; }
.kia-price-inputs{
display:flex;
align-items:center;
gap:8px;
margin-bottom:12px;
}
.kia-price-inputs input{
width:100%;
padding:9px 10px;
border:1px solid var(–kia-line);
border-radius:8px;
font-size:12.5px;
font-family:inherit;
text-align:center;
outline:none;
}
.kia-price-inputs input:focus{ border-color:var(–kia-navy); }
.kia-price-apply{
width:100%;
background:var(–kia-navy);
color:#fff;
border:none;
border-radius:8px;
padding:10px;
font-size:12.5px;
font-weight:800;
font-family:inherit;
cursor:pointer;
}
.kia-price-apply:hover{ background:var(–kia-gold); color:var(–kia-navy); }
.kia-active-filters{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:14px;
}
.kia-active-filters:empty{ display:none; }
.kia-chip{
display:flex;
align-items:center;
gap:5px;
background:var(–kia-bg);
border:1px solid var(–kia-line);
border-radius:20px;
padding:5px 10px 5px 6px;
font-size:11.5px;
color:var(–kia-navy);
}
.kia-chip button{
background:none; border:none; cursor:pointer;
color:#9a9eb0; font-size:14px; line-height:1; padding:0;
}
.kia-chip button:hover{ color:var(–kia-red); }
/* ===================== شبكة المنتجات العادية والاحترافية ===================== */
.kia-products-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
/* مواءمة التنسيق المعتمد بالكامل لبطاقات المنتجات */
.kia-product-card{
background:#fff;
border:1px solid var(–kia-line);
border-radius:16px;
overflow:hidden;
display:flex;
flex-direction:column;
position:relative;
transition:box-shadow .25s ease, transform .25s ease;
}
.kia-product-card:hover{
box-shadow:0 12px 32px rgba(28,35,64,.10);
transform:translateY(-4px);
}
.kia-product-thumb-wrap{
position:relative;
display:block;
aspect-ratio:1/1;
background:var(–kia-bg);
overflow:hidden;
}
.kia-product-thumb-wrap img{
width:100%; height:100%;
object-fit:cover;
display:block;
transition:transform .35s ease;
}
.kia-product-card:hover .kia-product-thumb-wrap img{
transform:scale(1.04);
}
.kia-product-badge{
position:absolute;
top:10px; right:10px;
font-size:10.5px;
font-weight:800;
padding:4px 10px;
border-radius:20px;
z-index:2;
pointer-events:none;
background:var(–kia-pink);
color:#fff;
}
.kia-product-badge.out-of-stock{ background:#9a9eb0; }
.kia-product-body{
padding:14px;
display:flex;
flex-direction:column;
flex:1;
gap:6px;
}
.kia-product-cat{
font-size:10.5px;
color:#aeb2c4;
text-transform:uppercase;
letter-spacing:.5px;
}
.kia-product-name{
font-size:13.5px;
font-weight:700;
color:var(–kia-navy);
text-decoration:none;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:38px;
}
.kia-product-name:hover{ color:var(–kia-gold); }
/* تنسيق السعر كما اعتمدناه */
.kia-product-price{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin-top:auto;
padding:8px 0 4px;
text-align:center;
}
.kia-product-price .now{
font-size:17px;
font-weight:800;
color:#1c2340;
display:flex;
align-items:baseline;
gap:2px;
direction:rtl;
}
.kia-product-price .now .price-num{
direction:ltr;
display:inline-block;
}
.kia-product-price .now .price-decimals{
font-size:11.5px;
font-weight:700;
opacity:0.85;
}
.kia-product-price .now .currency{
font-size:11.5px;
font-weight:700;
color:#7b4fa3;
margin-right:4px;
}
.kia-product-price .old{
font-size:11.5px;
color:#c0c4d4;
text-decoration:line-through;
display:flex;
align-items:baseline;
gap:3px;
direction:rtl;
}
.kia-product-price .old .price-num{
direction:ltr;
display:inline-block;
}
.kia-product-price .free{
font-size:14px;
font-weight:800;
color:var(–kia-green);
}
.kia-product-add-btn{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
width:100%;
padding:10px;
border-radius:10px;
font-size:13px;
font-weight:800;
font-family:inherit;
border:none;
cursor:pointer;
text-decoration:none;
background:var(–kia-navy);
color:#fff;
margin-top:10px;
transition:background .2s ease, color .2s ease;
}
.kia-product-add-btn:hover{ background:var(–kia-gold); color:var(–kia-navy); }
.kia-product-add-btn.adding { background:#9a9eb0; pointer-events:none; }
.kia-product-add-btn.added{ background:var(–kia-green); color:#fff; }
.kia-product-add-btn[disabled]{ opacity:.5; pointer-events:none; }
/* ===================== حالات خاصة ===================== */
.kia-shop-loading,
.kia-shop-empty{
grid-column:1/-1;
text-align:center;
color:#8a8fa3;
font-size:13.5px;
padding:50px 0;
}
.kia-shop-empty svg{ width:46px; height:46px; color:#d8dae6; margin-bottom:10px; }
.kia-loadmore-wrap{
text-align:center;
margin-top:32px;
}
.kia-loadmore-btn{
background:#fff;
border:2px solid var(–kia-navy);
color:var(–kia-navy);
font-weight:800;
font-size:13.5px;
padding:12px 36px;
border-radius:10px;
cursor:pointer;
font-family:inherit;
transition:background .2s, color .2s;
}
.kia-loadmore-btn:hover{ background:var(–kia-navy); color:#fff; }
.kia-loadmore-btn[disabled]{ opacity:.5; cursor:default; }
/* ===================== تجاوب الجوال ===================== */
@media (max-width:1100px){
.kia-products-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
.kia-shop-layout{ grid-template-columns:1fr; }
.kia-shop-mobile-filter-btn{ display:flex; }
.kia-filters{
position:fixed;
top:0; right:-100%;
width:min(300px,85vw);
height:100%;
z-index:1000;
border-radius:0;
overflow-y:auto;
transition:right .3s ease;
}
.kia-filters.open{ right:0; }
.kia-filters-overlay{
position:fixed; inset:0;
background:rgba(0,0,0,.35);
z-index:999;
display:none;
}
.kia-filters-overlay.show{ display:block; }
.kia-filters-close{
display:flex; justify-content:flex-end;
margin-bottom:10px;
}
.kia-filters-close button{
background:none; border:none;
font-size:24px; color:#9a9eb0; cursor:pointer;
}
}
@media (max-width:700px){
.kia-products-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.kia-product-name{ font-size:12.5px; min-height:34px; }
.kia-product-price .now{ font-size:14px; }
.kia-product-add-btn{ font-size:12px; padding:9px; }
}

الترتيب الافتراضي
الأكثر مبيعاً
الأحدث
السعر: من الأقل
السعر: من الأعلى

جاري تحميل المنتجات…

مميزات المتجر + الفوتر – خدمة الإبداع

*{box-sizing:border-box;}
body{margin:0;}
.kia-section{
font-family:”Tajawal”,”Segoe UI”,Arial,sans-serif;
direction:rtl;
}
/* ============================================================
1) قسم مميزات / جودة المتجر
ضعه فوق الفوتر مباشرة، أو كودجت HTML مستقل في أي مكان تحبه
============================================================ */
.kia-features{
background:#f7f7fb;
padding:30px 16px;
}
.kia-features-grid{
max-width:1280px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.kia-feature-item{
display:flex;
align-items:center;
gap:12px;
background:#fff;
border-radius:12px;
padding:16px;
border:1px solid #ececf3;
}
.kia-feature-icon{
flex:0 0 auto;
width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.kia-feature-icon svg{width:24px;height:24px;}
.kia-feature-title{
font-size:14px;
font-weight:800;
color:#1c2340;
margin:0 0 2px;
}
.kia-feature-text{
font-size:12px;
color:#8a8fa3;
margin:0;
line-height:1.5;
}
@media (max-width:900px){
.kia-features-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
.kia-features-grid{grid-template-columns:1fr;}
}
/* ============================================================
2) الشريط السفلي (الفوتر)
============================================================ */
.kia-footer{
background:#1c2340;
color:#c9cce0;
padding:46px 16px 0;
}
.kia-footer-inner{
max-width:1280px;
margin:0 auto;
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1.2fr;
gap:30px;
padding-bottom:34px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.kia-footer-logo-box{
background:#fff;
display:inline-block;
padding:10px 16px;
border-radius:10px;
margin-bottom:14px;
}
.kia-footer-logo-box img{
height:40px;
display:block;
}
.kia-footer-about{
font-size:13px;
line-height:1.8;
color:#9ea2c2;
margin:0 0 16px;
max-width:280px;
}
.kia-footer-social{
display:flex;
gap:10px;
}
.kia-footer-social a{
width:34px;
height:34px;
border-radius:50%;
background:rgba(255,255,255,.07);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
text-decoration:none;
transition:background .2s ease;
}
.kia-footer-social a:hover{
background:#e6a017;
}
.kia-footer-social svg{width:16px;height:16px;}
.kia-footer-col h4{
color:#fff;
font-size:15px;
font-weight:800;
margin:0 0 16px;
}
.kia-footer-col ul{
list-style:none;
margin:0;
padding:0;
}
.kia-footer-col li{
margin-bottom:11px;
}
.kia-footer-col a{
color:#aeb2cf;
text-decoration:none;
font-size:13.5px;
transition:color .2s ease;
}
.kia-footer-col a:hover{
color:#fff;
}
.kia-footer-contact li{
display:flex;
align-items:flex-start;
gap:8px;
font-size:13.5px;
color:#aeb2cf;
}
.kia-footer-contact svg{
width:16px;height:16px;flex:0 0 auto;margin-top:1px;color:#e6a017;
}
.kia-footer-bottom{
max-width:1280px;
margin:0 auto;
padding:18px 0;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:8px;
font-size:12.5px;
color:#7d81a3;
}
.kia-footer-bottom a{color:#aeb2cf;text-decoration:none;}
.kia-footer-bottom a:hover{color:#fff;}
@media (max-width:900px){
.kia-footer-inner{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
.kia-footer-inner{grid-template-columns:1fr;}
.kia-footer-bottom{flex-direction:column;text-align:center;}
}