*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#2563EB;
  --primary-dark:#1E40AF;
  --gold:#93C5FD;
  --dark:#0F172A;
  --text:#1E293B;
  --muted:#64748B;
  --bg:#F8FAFC;
  --line:#E2E8F0;
  --danger:#DC2626;
  --success:#059669;
  --radius:18px;
  --shadow:0 4px 20px rgba(15,23,42,.08);
  --shadow-h:0 16px 38px rgba(15,23,42,.16);
}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden} /* ★ شبكة أمان */
::selection{background:var(--gold)}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}

/* ═══ الهيدر — ★ 1400 ═══ */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-in{max-width:1400px;margin:auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* الشعار: قرص دائري مباشر */
.logo{display:inline-flex;align-items:center;text-decoration:none;
      background:none;border:none;padding:0;box-shadow:none;
      transition:opacity .25s,transform .25s}
.logo img{height:48px;width:48px;border-radius:50%;
          object-fit:cover;object-position:center;display:block}
.logo:hover{opacity:.85;transform:scale(1.05)}
.logo:active{transform:scale(.96)}

/* زر السلة */
.cart-btn{position:relative;width:46px;height:46px;border-radius:50%;
          border:1px solid var(--line);background:#fff;font-size:1.15rem;
          box-shadow:0 2px 10px rgba(15,23,42,.06);
          transition:border-color .25s,box-shadow .25s}
.cart-btn:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(37,99,235,.18)}
.cart-count{position:absolute;top:-5px;inset-inline-start:-5px;min-width:22px;height:22px;
            border-radius:999px;background:var(--primary);color:#fff;
            font-size:.72rem;font-weight:800;display:grid;place-items:center;
            padding:0 6px;border:2px solid #fff;box-shadow:0 2px 8px rgba(37,99,235,.4)}

/* ═══ البانر ═══ */
.hero{text-align:center;padding:58px 20px 34px;background:linear-gradient(180deg,#EAF2FE,transparent)}
.hero h1{font-size:2.1rem;color:var(--dark)}
.hero p{color:var(--muted);margin-top:6px}
.hero .go{padding:12px 34px;border:none;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-weight:800;font-size:1rem;box-shadow:0 8px 22px rgba(37,99,235,.4);transition:box-shadow .25s}
.hero .go:hover{box-shadow:0 14px 30px rgba(37,99,235,.5)}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
/* انسخي فوق قاعدة .go.ghost — وللتجربة فقط */
.go.ghost{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none}         box-shadow:0 4px 14px rgba(37,99,235,.12)}
.go.ghost:hover{box-shadow:0 8px 20px rgba(37,99,235,.25)}
/* ═══ أقسام الصفحة — ★ 1400 ═══ */
.sec{max-width:1400px;margin:auto;padding:30px 20px 6px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sec-head h2{font-size:1.35rem;color:var(--dark)}

/* ═══ شريط الأقسام — ★ full-bleed + بطاقات أكبر ═══ */
.cat-strip{overflow:hidden;position:relative;padding:4px 0;
           width:100vw;margin-inline:calc(50% - 50vw)}   /* ★ يكسر القفص */
.cat-track{display:flex;gap:16px;width:max-content;animation:marquee 22s linear infinite}
.cat-strip:hover .cat-track{animation-play-state:paused}
[dir="ltr"] .cat-track{animation-direction:reverse}
@keyframes marquee{to{transform:translateX(50%)}}

.cat-card{flex:0 0 auto;width:280px;aspect-ratio:4/3;position:relative;   /* ★ 280 */
          border-radius:20px;overflow:hidden;cursor:pointer;
          border:3px solid transparent;background:linear-gradient(135deg,#E8F0FE,#DBEAFE);
          box-shadow:var(--shadow);transition:box-shadow .3s,border-color .3s}
.cat-card:hover{box-shadow:var(--shadow-h)}
.cat-card.active{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.cat-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .45s}
.cat-card:hover img{transform:scale(1.08)}
.cat-card .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:3.4rem}
.cat-card .ph svg{width:64px;height:64px}
.cat-card .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,23,42,.75));display:flex;align-items:flex-end;padding:12px}
.cat-card .ov b{color:#fff;font-size:1.02rem}

/* ═══ المجموعات الفرعية ═══ */
.sub-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px}
.sub-card{flex:0 0 auto;width:98px;text-align:center;cursor:pointer;transition:.25s;background:none;border:none}
.sub-card .sq{width:98px;height:98px;border-radius:18px;overflow:hidden;position:relative;border:3px solid var(--line);background:linear-gradient(135deg,#E8F0FE,#DBEAFE);display:grid;place-items:center;font-size:2.3rem;transition:border-color .25s;margin:auto}
.sub-card:hover .sq{border-color:var(--primary)}
.sub-card.active .sq{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.sub-card img{width:100%;height:100%;object-fit:cover}
.sub-card span{display:block;font-size:.8rem;font-weight:700;margin-top:6px;color:var(--text)}
.sub-title{font-weight:800;color:var(--dark);margin-bottom:10px;font-size:.95rem}

/* ═══ مسار التنقل ═══ */
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.crumb button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:7px 16px;font-weight:700;font-size:.88rem;transition:border-color .2s}
.crumb button:hover{border-color:var(--primary)}
.crumb .cur{color:var(--primary-dark);font-weight:800}

/* ═══ شبكة المنتجات — ★ 1400 + 320 ═══ */
main{max-width:1400px;margin:auto;padding:0 20px 60px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}

.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .3s;cursor:pointer}
.card:hover{box-shadow:var(--shadow-h)}
.card-img{height:240px;position:relative;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.card:hover .card-img img{transform:scale(1.08)}
.ph{position:absolute;inset:0;display:grid;place-items:center;font-size:4rem;background:linear-gradient(135deg,#E8F0FE,#DBEAFE)}
.badges{position:absolute;top:12px;inset-inline-start:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.badge{padding:4px 12px;border-radius:999px;font-size:.74rem;font-weight:800;width:max-content;color:#fff}
.badge.new{background:var(--success)}
.badge.off{background:var(--danger)}
.badge.out{background:#555}
.card-body{padding:16px}
.card-cat{font-size:.78rem;color:var(--muted);font-weight:600}
.card-body h3{font-size:1.05rem;color:var(--dark);margin:4px 0 10px}
.card-price{display:flex;align-items:center;gap:10px}
.card-price b{color:var(--primary-dark);font-size:1.15rem}
.card-price del{color:var(--muted);font-size:.9rem}
.empty{grid-column:1/-1;text-align:center;padding:70px 0;color:var(--muted)}

/* ═══ نافذة المنتج ═══ */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(5px);z-index:100;display:none;place-items:center;padding:16px}
.overlay.open{display:grid;animation:fade .25s}
.modal{background:#fff;border-radius:24px;max-width:780px;width:100%;max-height:90vh;overflow-y:auto;display:grid;grid-template-columns:1fr 1.1fr;position:relative;animation:up .3s}
.m-close{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;border-radius:50%;border:none;background:#E2E8F0;font-size:1rem;z-index:3;transition:background .2s}
.m-close:hover{background:var(--danger);color:#fff}
.m-img{min-height:320px;position:relative}
.m-img img{width:100%;height:100%;object-fit:cover}
.m-img .ph{font-size:5rem}
.m-info{padding:28px 24px}
.m-info h2{color:var(--dark);margin:6px 0 10px;font-size:1.4rem}
.m-desc{color:var(--muted);font-size:.93rem;margin-bottom:16px}
.m-label{font-weight:800;font-size:.9rem;margin-bottom:8px;color:var(--dark)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{border:2px solid var(--line);background:#fff;border-radius:12px;padding:9px 14px;font-weight:700;font-size:.88rem;transition:border-color .2s}
.chip:hover:not(:disabled){border-color:var(--primary)}
.chip.active{border-color:var(--primary);background:#EFF6FF;color:var(--primary-dark);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.chip:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.low{color:#B7791F;background:#FDF3DC;display:inline-block;padding:4px 12px;border-radius:999px;font-size:.82rem;font-weight:700;margin-bottom:12px}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.stepper{display:flex;align-items:center;gap:14px;border:2px solid var(--line);border-radius:12px;padding:5px 10px}
.stepper button{width:30px;height:30px;border:none;border-radius:9px;background:#E8F0FE;font-size:1.1rem;font-weight:800;color:var(--primary-dark);transition:background .2s}
.stepper button:hover{background:var(--primary);color:#fff}
.cta{width:100%;padding:14px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:1.02rem;font-weight:800;transition:box-shadow .25s;box-shadow:0 6px 18px rgba(37,99,235,.35)}
.cta:hover:not(:disabled){box-shadow:0 10px 26px rgba(37,99,235,.45)}
.cta:disabled{background:#94A3B8;box-shadow:none;cursor:not-allowed}

/* ═══ السلة ═══ */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:120;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(400px,94vw);background:#fff;z-index:130;transform:translateX(-105%);transition:transform .38s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:8px 0 40px rgba(15,23,42,.25)}
.drawer.open{transform:none}
.d-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.d-head button{width:34px;height:34px;border:none;border-radius:10px;background:#E2E8F0;transition:background .2s}
.d-head button:hover{background:var(--danger);color:#fff}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px}
.empty-cart{text-align:center;color:var(--muted);padding:60px 0}
.empty-cart div{font-size:3.4rem;margin-bottom:8px}
.c-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.c-emoji{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#EAF2FE,#DBEAFE);display:grid;place-items:center;font-size:1.5rem;flex-shrink:0}
.c-info{flex:1}
.c-info b{display:block;font-size:.92rem;color:var(--dark)}
.c-info span{font-size:.78rem;color:var(--muted)}
.c-price{color:var(--primary-dark)!important}
.c-qty{display:flex;align-items:center;gap:8px}
.c-qty button{width:26px;height:26px;border:none;border-radius:8px;background:#E8F0FE;font-weight:800;color:var(--primary-dark);transition:background .2s}
.c-qty button:hover{background:var(--primary);color:#fff}
.c-qty span{font-weight:800;min-width:18px;text-align:center}
.c-del{background:transparent!important}
.c-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:1.05rem;color:var(--dark)}
.c-total b{color:var(--primary-dark);font-size:1.25rem}
form input,form textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;font-family:inherit;font-size:.93rem;margin-bottom:10px;background:#F8FAFC;transition:border-color .2s;resize:none}
form input:focus,form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.success{text-align:center;padding:50px 10px}
.success div{font-size:3.4rem;margin-bottom:10px}

/* ═══ إشعارات وفوتر ═══ */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,90px);background:var(--dark);color:#fff;padding:13px 26px;border-radius:999px;font-weight:700;font-size:.92rem;opacity:0;transition:transform .35s,opacity .35s;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.err{background:var(--danger)}
footer{text-align:center;padding:26px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(30px);opacity:0}}

/* ═══ زر اللغة + أزرار الهيدر ═══ */
.header-actions{display:flex;align-items:center;gap:10px}
.lang-btn{height:46px;min-width:48px;border-radius:999px;border:1px solid var(--line);
          background:#fff;font-weight:800;font-size:.95rem;color:var(--primary-dark);
          padding:0 14px;box-shadow:0 2px 10px rgba(15,23,42,.06);
          transition:border-color .25s,box-shadow .25s}
.lang-btn:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(37,99,235,.18)}

/* السلة تنزلق من اليمين في النسخة الإنجليزية */
[dir="ltr"] .drawer{left:auto;right:0;transform:translateX(105%)}
[dir="ltr"] .drawer.open{transform:none}

/* ═══ هيكل التحميل ═══ */
.sk{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.sk-img{height:200px;background:linear-gradient(90deg,#E8F0FE 25%,#F4F8FE 50%,#E8F0FE 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}
.sk-line{height:16px;border-radius:8px;margin:14px 16px;background:linear-gradient(90deg,#E8F0FE 25%,#F4F8FE 50%,#E8F0FE 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}
.sk-line.short{width:55%}
@keyframes shimmer{to{background-position:-200% 0}}

/* ═══ الأيقونات SVG ═══ */
.cart-btn svg{width:22px;height:22px;color:var(--dark);display:block;margin:auto}
.ph svg{width:60px;height:60px;color:var(--primary-dark);opacity:.5}
.cat-ic{display:inline-flex;align-items:center;width:15px;height:15px;margin-inline-end:5px;color:var(--primary)}
.cat-ic svg{width:15px;height:15px}
.sq svg{width:42px;height:42px;color:var(--primary-dark)}
.crumb .cur .cat-ic{color:var(--primary-dark)}

/* ═══ الموبايل — كتلة واحدة موحدة ═══ */
@media(max-width:680px){
  .header-in{padding:8px 14px}
  .logo img{height:36px;width:36px}
  .cart-btn{width:42px;height:42px}
  .header-actions{gap:8px}
  .lang-btn{height:42px;min-width:42px;padding:0 12px;font-size:.85rem}

  .hero{padding:36px 16px 26px}
  .hero h1{font-size:1.4rem}
  .hero p{font-size:.9rem}
  .hero .go{padding:11px 26px;font-size:.9rem}

  .sec{padding:22px 14px 4px}
  .sec-head h2{font-size:1.1rem}

  /* ★ لا حاجة لمسافة سالبة — 100vw تتكفل */
  .cat-card{width:160px}
  .cat-card .ov b{font-size:.9rem}

  .sub-card .sq{width:84px;height:84px;font-size:2rem}
  .sub-card{width:84px}

  main{padding:0 14px 40px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-img{height:150px}
  .card-body{padding:12px}
  .card-body h3{font-size:.95rem;margin:3px 0 8px}
  .card-price b{font-size:1rem}
  .badge{font-size:.68rem;padding:3px 10px}

  .modal{grid-template-columns:1fr;max-height:92vh;border-radius:20px}
  .m-img{min-height:200px;max-height:250px}
  .m-info{padding:20px 16px}
  .m-info h2{font-size:1.15rem}
  .m-desc{font-size:.88rem}

  .stepper button{width:36px;height:36px}
  .c-qty button{width:30px;height:30px}
  form input,form textarea{font-size:16px}

  .ph svg{width:44px;height:44px}
  .sq svg{width:34px;height:34px}
}/* ═══ الهاتف: الناقل يتحول لمسح يدوي ═══ */
@media(hover:none) and (pointer:coarse){
  .cat-strip{
    overflow-x:auto;                     /* ★ القافس الأب هو من يتمرر */
    -webkit-overflow-scrolling:touch;    /* انسيابية iOS */
    scroll-snap-type:x proximity;
    scrollbar-width:none;                /* إخفاء شريط التمرير */
  }
  .cat-strip::-webkit-scrollbar{display:none}
  .cat-track{
    animation:none !important;           /* إيقاف الدوران التلقائي */
  }
  .cat-card{scroll-snap-align:center}
}
/* ═══ الخدمات ═══ */
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.service-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .3s}
.service-card:hover{box-shadow:var(--shadow-h)}
.service-img{height:170px;position:relative;overflow:hidden;background:linear-gradient(135deg,#E8F0FE,#DBEAFE)}
.service-img img{width:100%;height:100%;object-fit:cover}
.service-img svg{width:56px;height:56px;color:var(--primary-dark);opacity:.6;position:absolute;inset:0;margin:auto}
.service-body{padding:16px}
.service-body h3{color:var(--dark);font-size:1.05rem;margin-bottom:6px}
.service-body p{color:var(--muted);font-size:.88rem;margin-bottom:12px}
.service-foot{display:flex;align-items:center;justify-content:space-between}
.service-foot b{color:var(--primary-dark);font-size:1.1rem}
.service-btn{padding:9px 18px;border:none;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-weight:800;font-size:.88rem;transition:box-shadow .25s}
.service-btn:hover{box-shadow:0 6px 16px rgba(37,99,235,.4)}

@media(max-width:680px){
  .services-grid{grid-template-columns:1fr;gap:14px}
  .service-img{height:150px}
}