/* ============================================================
   يمن توب — الثيم الجديد (theme-v2.css)
   على نمط fast4top: شريط علوي كحلي ثابت في الوضعين، قائمة جانبية،
   بطاقات بحواف 8px، خط Tajawal.

   - يُحمَّل في layouts/app.blade.php بعد كل ملفات CSS الأخرى.
   - يعيد تعريف المتغيرات المشتركة (--ink, --navy, --orange ...)
     فتتبدّل ألوان كل الصفحات تلقائياً، حتى غير المعدّلة.
   - كل قاعدة تعدّل عنصراً قديماً تبدأ بـ :root لترفع أولويتها
     فوق catalog.css و home.css حتى لو حُمّلت بعد هذا الملف.
   - العناصر الجديدة تبدأ بالبادئة yt2-
   للتراجع: احذف سطر هذا الملف من القالب وأرجع الملفات من .bak
   ============================================================ */

/* ============ 1) المتغيرات — الوضع الداكن (الافتراضي) ============ */
:root:not([data-theme="light"]){
  --ink:#000628;            /* خلفية الصفحة */
  --navy:#0b1137;           /* البطاقات والأسطح */
  --navy-2:#000628;         /* القائمة الجانبية */
  --navy-3:#1a2150;         /* أسطح مرتفعة / الرسائل العابرة */
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --card:rgba(255,255,255,.05);
  --card-2:rgba(255,255,255,.08);
  --text:#ffffff;
  --muted:#a6abcb;
  --orange:#4caf50;         /* لون الإجراء الرئيسي (أخضر) */
  --orange-2:#47ff91;       /* الأخضر كنص فوق الخلفية الداكنة */
  --orange-deep:#43a047;
  --royal:#0288d1;          /* الأزرق */
  --royal-2:#4fc3f7;
  --royal-deep:#0277bd;
  --gold:#F6C44E;
  --info:#4fc3f7;
  --shadow:0 4px 20px -8px rgba(0,0,0,.65);
  --r:12px; --r-sm:10px; --r-lg:16px;

  --on-accent:#000628;      /* لون النص فوق الأخضر */
  --yt2-bar:#000628;        /* الشريط العلوي والسفلي (ثابت في الوضعين) */
  --yt2-brand:#0277bd;      /* بطاقة الدخول والمحفظة (ثابت في الوضعين) */
  --yt2-active:#3d425b;     /* العنصر النشط في القائمة */
  --yt2-field:rgba(255,255,255,.08);
  --yt2-art:#0b1a52;        /* خلفية الصورة عند غيابها */
  --yt2-art-2:#12297e;
  --yt2-icon-a:#47ff91;     /* أيقونات القائمة */
}

/* ============ 2) المتغيرات — الوضع الفاتح ============ */
:root[data-theme="light"]{
  --ink:#f1f1f1;
  --navy:#ffffff;
  --navy-2:#f1f1f1;
  --navy-3:#e6e7ee;
  --line:rgba(0,0,0,.12);
  --line-2:rgba(0,0,0,.2);
  --card:rgba(0,0,0,.03);
  --card-2:rgba(0,0,0,.06);
  --text:#23233c;
  --muted:#5d5d78;
  --orange:#2e7d32;
  --orange-2:#2e7d32;
  --orange-deep:#27692b;
  --royal:#0277bd;
  --royal-2:#0369a1;
  --royal-deep:#0277bd;
  --gold:#8f5d00;
  --good:#0b7a53;
  --bad:#c62f2f;
  --warn:#8f5d00;
  --info:#0369a1;
  --shadow:0 4px 20px -8px rgba(20,20,20,.23);
  --r:12px; --r-sm:10px; --r-lg:16px;

  --on-accent:#ffffff;
  --yt2-bar:#000628;
  --yt2-brand:#0277bd;
  --yt2-active:#d9d9de;
  --yt2-field:rgba(0,0,0,.06);
  --yt2-art:#dfe7fb;
  --yt2-art-2:#c8d6f7;
  --yt2-icon-a:#2e7d32;
}

/* ============ 3) الأساس ============ */
:root body{font-family:'Tajawal','Cairo',system-ui,sans-serif;background:var(--ink)}
:root body::before,:root body::after{display:none}          /* إيقاف التوهجات الملونة القديمة */
:root h1,:root h2,:root h3,:root .dpl{font-family:'Tajawal','Cairo',sans-serif}
:root :focus-visible{outline-color:var(--royal-2)}

/* الأزرار — بيضاوية مثل fast4top */
:root .btn{border-radius:28px}
:root .btn-primary{background:var(--orange);color:var(--on-accent);box-shadow:none}
:root .btn-primary:hover{background:var(--orange-deep);transform:translateY(-1px);box-shadow:var(--shadow)}
:root .btn-royal{background:var(--royal-deep);color:#fff;box-shadow:none}
:root .btn-ghost{background:var(--card-2)}

/* الحقول */
:root .input:focus,:root .search-box input:focus{border-color:var(--royal-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--royal-2) 22%,transparent)}
:root .check input:checked{background:var(--orange);border-color:var(--orange)}
:root .check input:checked::after{color:var(--on-accent)}
:root .cart-badge{background:var(--orange);color:var(--on-accent);border-color:var(--yt2-bar)}

/* العناصر القديمة التي استُبدلت (تبقى في الصفحة مخفية لتوافق js/app.js) */
:root .mobile-menu,:root .menu-overlay{display:none !important}
:root .yt-float-theme{display:none !important}               /* زر الهلال العائم — صار داخل القائمة */

/* ============ 4) الشريط العلوي ============ */
:root .site-header.yt2-header{position:sticky;top:0;z-index:60;background:var(--yt2-bar);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.yt2-hdr-in{max-width:1200px;margin-inline:auto;height:64px;padding-inline:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.yt2-hdr-tools,.yt2-hdr-end{display:flex;align-items:center;gap:4px;min-width:0}
.yt2-ibtn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  color:#fff;background:transparent;border:0;transition:background .18s}
.yt2-ibtn:hover{background:rgba(255,255,255,.1)}
.yt2-ibtn svg{width:24px;height:24px}
.yt2-cur{height:34px;max-width:96px;padding:0 8px;border-radius:8px;border:1px solid rgba(255,255,255,.28);
  background:transparent;color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.yt2-cur option{color:#111;background:#fff}
.yt2-logo{display:flex;align-items:center;gap:10px;color:#fff;min-width:0}
.yt2-logo img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.yt2-logo .t{display:flex;flex-direction:column;line-height:1.15;font-weight:800;font-size:18px;white-space:nowrap}
.yt2-logo small{font-size:11px;font-weight:500;color:rgba(255,255,255,.78)}
@media (min-width:1200px){.yt2-burger{display:none}}
@media (max-width:620px){
  .yt2-hdr-in{padding-inline:6px 10px}
  .yt2-logo img{width:36px;height:36px}
  .yt2-logo .t{font-size:16px}
  .yt2-logo small{display:none}
  .yt2-cur{max-width:82px;padding:0 6px}
}

/* ============ 5) القائمة الجانبية ============ */
.yt2-drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:210;width:290px;max-width:86vw;
  box-sizing:border-box;background:var(--navy-2);color:var(--text);border-inline-end:1px solid var(--line);
  padding:12px 12px 20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility .28s}
body.nav-open .yt2-drawer{transform:none;visibility:visible}
.yt2-overlay{position:fixed;inset:0;z-index:205;background:rgba(0,3,20,.6);opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility .28s}
body.nav-open .yt2-overlay{opacity:1;visibility:visible}
.preload .yt2-drawer,.preload .yt2-overlay{transition:none !important}
@media (max-width:1199.98px){
  body.nav-open{overflow:hidden}
  body.nav-open .wa-float{visibility:hidden}     /* زر واتساب العائم فوق الطبقة المعتمة */
}
@media (min-width:1200px){
  .yt2-drawer{transform:none;visibility:visible;z-index:40;box-shadow:var(--shadow)}
  .yt2-overlay{display:none}
  :root .page-scroll-wrap{margin-inline-start:290px}
}

.yt2-dr-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.yt2-dr-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;font-size:17px}
.yt2-dr-brand img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.yt2-dr-close{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--card-2);color:var(--text)}
.yt2-dr-close svg{width:20px;height:20px}
@media (min-width:1200px){.yt2-dr-top{display:none}}   /* الشعار وزر الإغلاق للجوال فقط */

/* بطاقة الدخول / بطاقة العميل */
.yt2-login,.yt2-user{background:var(--yt2-brand);color:#fff;border-radius:24px;padding:20px 16px 16px;
  display:flex;flex-direction:column;gap:10px}
.yt2-login h2{margin:0;font-size:24px;font-weight:800;color:#fff;line-height:1.3}
.yt2-login p{margin:0;font-size:14.5px;line-height:1.7;color:#fff}
.yt2-pill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 10px;
  border-radius:28px;font-weight:800;font-size:14.5px;text-align:center;white-space:nowrap;transition:filter .18s}
.yt2-pill:hover{filter:brightness(1.07)}
.yt2-pill-green{background:#4caf50;color:#000628}
.yt2-pill-white{background:#fff;color:#000628}
.yt2-pill-line{border:1.5px solid #fff;color:#fff}
.yt2-login small{font-size:12.5px;line-height:1.6;color:#fff;text-align:center}
.yt2-user{gap:12px;padding:16px}
.yt2-user-top{display:flex;align-items:center;gap:12px;color:#fff;min-width:0}
.yt2-user-top .av{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-weight:800;font-size:18px;flex:0 0 auto}
.yt2-user-top .who{min-width:0}
.yt2-user-top b{display:block;font-size:16px;font-weight:800;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt2-user-top small{display:block;font-size:12.5px;color:#fff;unicode-bidi:plaintext;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt2-wallet{background:rgba(0,0,0,.2);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.yt2-wallet span{font-size:13px}
.yt2-wallet b{font-size:20px;font-weight:800}
.yt2-user-acts{display:flex;gap:8px}
.yt2-user-acts .yt2-pill{flex:1}

/* روابط القائمة */
.yt2-dr-nav{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.yt2-dr-nav a{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 14px;border-radius:8px;
  color:var(--text);font-size:15.5px;font-weight:600;transition:background .18s}
.yt2-dr-nav a:hover{background:var(--card-2)}
.yt2-dr-nav a.is-active{background:var(--yt2-active);font-weight:800}
.yt2-dr-nav svg{width:21px;height:21px;color:var(--yt2-icon-a);flex:0 0 auto}
.yt2-dr-nav a.yt2-sub{min-height:40px;padding-inline-start:49px;font-size:14.5px;color:var(--muted)}
.yt2-dr-nav a.yt2-sub.is-active{color:var(--text)}

/* مفتاح الوضع الداكن */
.yt2-dr-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 14px;
  border-block:1px solid var(--line);font-size:15.5px;font-weight:600}
.yt2-switch{width:56px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.yt2-switch .tr{position:relative;display:block;width:38px;height:16px;border-radius:8px;background:rgba(0,0,0,.38);transition:background .2s}
.yt2-switch .th{position:absolute;top:50%;inset-inline-start:-3px;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:inset-inline-start .2s}
:root:not([data-theme="light"]) .yt2-switch .tr{background:#01a8f4}
:root:not([data-theme="light"]) .yt2-switch .th{inset-inline-start:calc(100% - 19px)}

.yt2-dr-wa{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:28px;
  background:var(--card-2);color:var(--text);font-weight:700;font-size:14.5px}
.yt2-dr-wa svg{width:20px;height:20px;color:#25D366;flex:0 0 auto}
.yt2-dr-logout button{width:100%;display:flex;align-items:center;gap:14px;min-height:44px;padding:0 14px;border-radius:8px;
  color:var(--bad);font-weight:700;font-size:15px;text-align:start}
.yt2-dr-logout button:hover{background:var(--card-2)}
.yt2-dr-logout svg{width:20px;height:20px}

/* ============ 6) الصفحة الرئيسية ============ */
/* السلايدر: بانر واحد بعرض كامل بدل العرض الدوّار */
:root .hero-slider{max-width:1200px;margin:16px auto 0;padding-inline:20px}
:root .hero-slider .hero-swiper{padding:0 0 4px}
:root .hero-slider .swiper-slide{width:100%;opacity:1;transform:none;filter:none;border:0;border-radius:8px;
  background:#0d2a8c;box-shadow:var(--shadow)}
:root .hero-slider .swiper-slide-active{box-shadow:var(--shadow)}
:root .hero-slider .slide-cap .btn{background:#4caf50;color:#000628;border-radius:28px;box-shadow:none}
:root .hero-slider .slide-cap .btn:hover{box-shadow:none}
:root .hero-slider .swiper-pagination{margin-top:10px}
:root .hero-slider .swiper-pagination-bullet-active{background:var(--royal-2)}
:root .hero-slider .swiper-button-next,:root .hero-slider .swiper-button-prev{display:none}   /* الأسهم تغطي نص البانر بعرضه الكامل؛ يكفي السحب والنقاط */
@media (max-width:720px){:root .hero-slider{padding-inline:14px;margin-top:12px}}

/* البحث */
.yt2-hsearch{display:flex;align-items:center;gap:10px;height:52px;padding:0 20px;margin:14px 0 22px;border-radius:28px;
  background:var(--yt2-field);color:var(--muted);transition:box-shadow .18s}
.yt2-hsearch:focus-within{box-shadow:0 0 0 2px var(--royal-2)}
.yt2-hsearch svg{width:20px;height:20px;flex:0 0 auto}
.yt2-hsearch input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);
  font-family:inherit;font-size:16px}
.yt2-hsearch input::placeholder{color:var(--muted);opacity:1}

/* شبكة الأقسام */
.yt2-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.yt2-cat{display:flex;flex-direction:column;color:var(--text)}
.yt2-cat-art{position:relative;display:grid;place-items:center;aspect-ratio:3/2;border-radius:8px;overflow:hidden;
  background:var(--yt2-art);box-shadow:var(--shadow);transition:transform .2s ease}
.yt2-cat:hover .yt2-cat-art{transform:translateY(-3px)}
.yt2-cat-art img{width:100%;height:100%;object-fit:cover}
.yt2-cat-art.is-ph::before{content:"";position:absolute;width:62%;aspect-ratio:1/1;border-radius:50%;
  background:var(--yt2-art-2);inset-inline-start:-14%;bottom:-38%}
.yt2-cat-ph{position:relative;font-size:46px;line-height:1}
.yt2-cat-name{padding:10px 4px 0;text-align:center;font-weight:700;font-size:14.5px;line-height:1.4}

/* شريط الثقة */
.yt2-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0 4px}
.yt2-trust-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:8px;background:var(--navy);
  border:1px solid var(--line)}
.yt2-trust-ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--card-2);color:var(--yt2-icon-a)}
.yt2-trust-ic svg{width:22px;height:22px}
.yt2-trust-item b{display:block;font-size:15px;font-weight:800}
.yt2-trust-item span{display:block;font-size:13px;color:var(--muted)}
:root .home-section .sec-head h2{font-size:20px;font-weight:800}

@media (max-width:760px){.yt2-trust{grid-template-columns:1fr}}
@media (max-width:620px){
  .yt2-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .yt2-hsearch{height:48px;margin:12px 0 18px}
  .yt2-cat-name{font-size:14px}
}

/* ============ 7) بطاقة المنتج (الأماكن الثلاثة) ============ */
:root .product-grid,:root .fav-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
:root .product-card{background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}
:root .product-card:hover{transform:none;border-color:transparent;box-shadow:none}
:root .product-card .pimg{aspect-ratio:3/2;border-radius:8px;background:var(--yt2-art);box-shadow:var(--shadow);
  transition:transform .2s ease}
:root .product-card:hover .pimg{transform:translateY(-3px)}
:root .product-card:hover .pimg img{transform:none}
:root .product-card .pimg::after{display:none}
:root .product-card .pimg .ph{font-family:inherit;font-size:44px;color:inherit;opacity:1;text-shadow:none}
:root .product-card .pbody{padding:10px 4px 0;align-items:center;text-align:center;gap:2px}
:root .product-card .pname{font-family:inherit;font-weight:700;font-size:15px;line-height:1.4}
:root .product-card:hover .pname{color:var(--text)}
:root .product-card .pdesc{min-height:0;margin-top:0;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:1;
  -webkit-box-orient:vertical;overflow:hidden}
:root .product-card .price-from{font-size:12.5px;color:var(--muted)}
:root .product-card .price-from b{display:inline;font-family:inherit;font-size:14.5px;font-weight:800;color:var(--gold);margin-inline-start:4px}
:root .ribbon{top:8px;inset-inline-start:8px;padding:3px 10px;border-radius:28px;font-size:11.5px;background:var(--royal-deep);color:#fff}
:root .ribbon.hot,:root .ribbon.off{background:#4caf50;color:#000628}
/* زر المفضلة (كان في <style> داخل partials/product-card) */
:root .fav-btn{position:absolute;top:8px;inset-inline-end:8px;z-index:5;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(0,6,40,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:transform .15s ease,background .15s ease}
:root .fav-btn:hover{transform:scale(1.1);background:rgba(0,6,40,.75)}
:root .fav-btn .fav-ico{font-size:17px;line-height:1}
:root .fav-btn.is-fav{background:rgba(244,63,94,.28)}
@media (max-width:1000px){:root .product-grid,:root .fav-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){:root .product-grid,:root .fav-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
@media (max-width:620px){:root .product-card .pname{font-size:14px}}

/* صفحة المنتجات: البحث والأقسام */
:root .search-box input{border-radius:28px;background:var(--yt2-field);border-color:transparent;padding-inline:44px 16px}  /* الأيقونة يميناً */
:root .cat-chip{border-radius:28px}
:root .cat-chip.active{background:var(--royal-deep);color:#fff;border-color:transparent;box-shadow:none}

/* ============ 8) صفحة المنتج ============ */
:root .pd-media{border:0;border-radius:8px;background:var(--yt2-art);box-shadow:var(--shadow)}
:root .pd-media::after{display:none}
:root .pd-media .ph{font-family:inherit;color:inherit;opacity:1}
:root .pd-cat{color:var(--royal-2)}
:root .pd-tag{border-radius:28px}
:root .pd-tag svg{color:var(--yt2-icon-a)}
.yt2-step{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
:root .sec-label{font-family:inherit;font-size:16px;margin-bottom:14px}
:root .sec-label .n,:root .pm-title .n,:root .receipt h3 .n{width:28px;height:28px;border-radius:50%;
  background:var(--royal-deep);color:#fff;font-size:13px}
:root .yt2-step .player-field{background:transparent;border:0;border-radius:0;padding:0;margin:0 0 14px}
:root .yt2-step .player-field:last-child{margin-bottom:0}
:root .player-field input{border-radius:10px;background:var(--ink);border-color:var(--line-2)}
:root .player-field input:focus{border-color:var(--royal-2)}
:root .player-field .req{color:var(--bad)}
:root .pkg-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:0}
:root .pkg{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px;min-height:78px;
  padding:16px 10px 12px;border-radius:10px;background:var(--card);border:1.5px solid var(--line-2)}
:root .pkg .pk-name{font-family:inherit;font-weight:800;font-size:15px;line-height:1.35}
:root .pkg .pk-price{text-align:center}
:root .pkg .pk-price b{font-family:inherit;font-size:14px;font-weight:800}
:root .pkg .pk-off{background:#4caf50;color:#000628}
:root .pkg:has(input:checked){border-color:var(--royal-2);background:color-mix(in srgb,var(--royal-2) 12%,transparent);box-shadow:none}
:root .pkg:has(input:checked)::after{content:"✓";position:absolute;top:6px;inset-inline-end:6px;width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;background:var(--royal-2);color:var(--ink);font-size:12px;font-weight:900}
:root .pkg:has(input:focus-visible){outline:2.5px solid var(--royal-2);outline-offset:2px}
@supports not (selector(:has(*))){
  :root .pkg.selected{border-color:var(--royal-2);background:rgba(79,195,247,.12)}
}
:root .buy-row.yt2-buybar{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:12px;gap:12px}
:root .buy-row .btn{min-width:150px;border-radius:28px}
:root .qty{border-radius:28px}
.yt2-total{display:flex;flex-direction:column;line-height:1.25;margin-inline-start:auto}
.yt2-total small{font-size:12px;color:var(--muted)}
:root .total-pill{margin:0;font-family:inherit;font-size:20px;font-weight:800;color:var(--gold)}
@media (max-width:1100px) and (min-width:761px){:root .pkg-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  :root .pkg-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* شريط الشراء يلتصق بأسفل الشاشة أثناء اختيار الباقة */
  :root .buy-row.yt2-buybar{position:sticky;bottom:0;z-index:30;margin-inline:-20px;border-radius:0;border-inline:0;border-bottom:0;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom));flex-wrap:nowrap;box-shadow:0 -10px 24px -14px rgba(0,0,0,.55)}
  :root .buy-row.yt2-buybar .btn{flex:1;min-width:0;padding-inline:14px}
  :root .buy-row.yt2-buybar .yt2-total{order:-1;margin-inline-start:0}
}
@media (max-width:620px){
  :root .buy-row.yt2-buybar{bottom:calc(62px + env(safe-area-inset-bottom))}
  :root .buy-row.yt2-buybar .qty button{width:36px}
  :root .buy-row.yt2-buybar .qty input{width:34px}
  :root body:has(.yt2-buybar) .wa-float{bottom:calc(158px + env(safe-area-inset-bottom)) !important}
}

/* ============ 9) بقية الصفحات (تتبع الألوان الجديدة تلقائياً) ============ */
:root .side-nav a.active{background:var(--yt2-active);color:var(--text);box-shadow:none}
:root .side-nav a.active svg{color:var(--yt2-icon-a)}
:root .side-nav .logout svg{width:19px;height:19px;flex:0 0 auto}   /* كانت الأيقونة بلا مقاس فتظهر ضخمة */
:root .side-head{background:transparent}
:root .side-head .av,:root .user-chip .av{background:var(--yt2-brand)}
:root .wallet-hero,:root .wallet-pay,:root .auth-aside{background:var(--yt2-brand)}
:root .wallet-hero::after,:root .wallet-pay::after,:root .auth-aside::after{display:none}
:root .pm:has(input:checked){border-color:var(--royal-2);background:color-mix(in srgb,var(--royal-2) 10%,transparent)}
:root .pm:has(input:checked) .pm-check{border-color:var(--royal-2);background:var(--royal-2)}
:root .amount-chip:hover,:root .file-drop:hover{border-color:var(--royal-2)}
:root .acard,:root .summary,:root .stat,:root .account-side,:root .cart-item,:root .od-head,:root .receipt{box-shadow:var(--shadow)}

/* الفوتر */
:root .site-footer{background:var(--navy);margin-top:32px}
:root .site-footer .brand img,:root .brand img{box-shadow:none}
:root .site-footer .lk a:hover{color:var(--royal-2)}

/* الشريط السفلي للجوال: كحلي ثابت مثل الشريط العلوي */
@media (max-width:620px){
  :root .bottom-nav{background:var(--yt2-bar);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -6px 18px rgba(0,0,0,.25)}
  :root .bn-item{color:rgba(255,255,255,.72)}
  :root .bn-item.bn-active{color:#47ff91}
  :root .bn-item.bn-active svg{filter:none}
}

/* ============ 10) صفحات الدخول والحساب ============ */
.yt2-gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:0 16px;
  background:#fff;color:#3c4043;border:1px solid #dadce0;border-radius:28px;font-weight:700;font-size:15px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);transition:background .15s}
.yt2-gbtn:hover{background:#f7f8f8}
.yt2-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:13px}
.yt2-or::before,.yt2-or::after{content:"";flex:1;height:1px;background:var(--line)}
.yt2-auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-4px 0 18px}
.yt2-remember{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.yt2-remember input{width:18px;height:18px;accent-color:var(--orange)}
.yt2-link{color:var(--royal-2);font-weight:700;font-size:14px}
.yt2-link:hover{text-decoration:underline}
.yt2-terms{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);text-align:center}
.yt2-terms a{color:var(--royal-2);font-weight:700}
.yt2-hp{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.yt2-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:28px;font-size:12px;font-weight:700;
  vertical-align:middle;margin-inline-start:6px}
.yt2-badge-ok{background:color-mix(in srgb,#4caf50 18%,transparent);color:var(--orange-2)}
.yt2-badge-warn{background:color-mix(in srgb,#f6c44e 22%,transparent);color:var(--gold)}
.yt2-badge-info{background:color-mix(in srgb,var(--royal-2) 18%,transparent);color:var(--royal-2)}
.yt2-sessions{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.yt2-sessions li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:10px 12px;border-radius:10px;
  background:var(--card);border:1px solid var(--line)}
.yt2-sessions .d{font-weight:700;font-size:14px}
.yt2-sessions .m{font-size:12.5px;color:var(--muted)}

/* الصفحات الثابتة: من نحن والسياسات */
.yt2-page{padding:20px 0 40px}
.yt2-doc{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:26px 24px;margin-top:12px;
  line-height:1.9;font-size:15.5px}
.yt2-doc h1{font-size:26px;margin:0 0 14px}
.yt2-doc h2{font-size:18px;margin:22px 0 8px}
.yt2-doc ul,.yt2-doc ol{padding-inline-start:22px;margin:0 0 12px}
.yt2-doc li{margin-bottom:4px}
.yt2-doc p{margin:0 0 12px}
.yt2-doc a{color:var(--royal-2);font-weight:700}
.yt2-doc-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.yt2-doc-nav a{padding:8px 16px;border-radius:28px;background:var(--card-2);font-size:14px;font-weight:700}
.yt2-doc-nav a:hover{background:var(--yt2-active)}
@media (max-width:620px){.yt2-doc{padding:20px 16px;font-size:15px}.yt2-doc h1{font-size:22px}}

/* ============ 11) الشراء: حاسبة الكمية + صفحة الدفع الموحدة ============ */
/* صفحة المنتج: بطاقة «كمية مخصصة» وحاسبة الكوينز */
:root .pkg.pkg-qty{border-style:dashed}
:root .pkg .pk-stock{font-size:11.5px;color:var(--bad);font-weight:700}
:root .pkg .pk-price small{font-size:11.5px;color:var(--muted);font-weight:600}
.yt2-level-tag{background:color-mix(in srgb,var(--gold) 18%,transparent) !important;color:var(--gold) !important}
.yt2-qty-row{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.yt2-qty-input{flex:1 1 220px;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 16px;border-radius:12px;
  background:var(--ink);border:1.5px solid var(--line-2)}
.yt2-qty-input:focus-within{border-color:var(--royal-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--royal-2) 22%,transparent)}
.yt2-qty-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-family:inherit;
  font-size:22px;font-weight:800;text-align:left}
.yt2-qty-input input[aria-invalid="true"]{color:var(--bad)}
.yt2-qty-input .u{font-weight:700;color:var(--muted);white-space:nowrap}
.yt2-qty-price{display:flex;flex-direction:column;justify-content:center;min-width:130px;padding:6px 16px;border-radius:12px;
  background:color-mix(in srgb,var(--royal-2) 10%,transparent);border:1px solid color-mix(in srgb,var(--royal-2) 30%,transparent)}
.yt2-qty-price small{font-size:12px;color:var(--muted)}
.yt2-qty-price b{font-size:20px;font-weight:800;color:var(--gold)}
.yt2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.yt2-chip{padding:7px 14px;border-radius:28px;background:var(--card-2);border:1px solid var(--line);color:var(--text);
  font-weight:800;font-size:14px;cursor:pointer}
.yt2-chip:hover{border-color:var(--royal-2)}
.yt2-qtybox .hint{margin:10px 0 0;font-size:13px;color:var(--muted)}
.yt2-qtybox .hint.is-bad{color:var(--bad);font-weight:700}
.yt2-price-note{margin:8px 2px 0;font-size:12.5px;color:var(--muted)}

/* مراحل الشراء */
.yt2-steps{display:flex;gap:6px;margin:4px 0 14px;font-size:13px;font-weight:700;color:var(--muted)}
.yt2-steps span{padding:6px 12px;border-radius:28px;background:var(--card-2)}
.yt2-steps .done{color:var(--orange-2)}
.yt2-steps .on{background:var(--royal-deep);color:#fff}

/* صفحة الدفع الموحدة */
:root .yt2-checkout .checkout-grid,:root .yt2-checkout .pay-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.yt2-paylist{display:grid;gap:10px}
:root .yt2-pm{margin:0}
:root .yt2-pm .pm-txt{min-width:0}
:root .yt2-pm .pm-sub b{color:var(--text)}
:root .yt2-pm .pm-logo.has-img{background:#fff;padding:4px}
:root .yt2-pm .pm-logo img{width:100%;height:100%;object-fit:contain;border-radius:8px}
:root .yt2-pm.is-off{opacity:.7;cursor:not-allowed}
:root .yt2-pm .pm-warn{margin-top:4px;font-size:12.5px;color:var(--warn,var(--gold));font-weight:700}
:root .yt2-pm .pm-warn a{color:var(--royal-2);text-decoration:underline}
:root .yt2-pm .pm-info{display:none}
:root .yt2-pm.selected .pm-info,:root .yt2-pm:has(input:checked) .pm-info{display:block}
.pm-steps{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;color:var(--text);font-size:13.5px}
.pm-ins{margin:0 0 6px}
.yt2-copy{margin-inline-start:4px;padding:2px 10px;border-radius:28px;border:1px solid var(--line-2);background:transparent;
  color:var(--royal-2);font-weight:700;font-size:12px;cursor:pointer}
.yt2-paybox{margin-top:14px}
.yt2-paybox h3{font-size:16px;margin:0 0 12px}
.yt2-note summary{cursor:pointer;font-weight:700}
.yt2-sum .yt2-save .v{color:var(--orange-2)}
.yt2-coupon{margin:14px 0;padding:12px;border:1px dashed var(--line-2);border-radius:10px}
.yt2-coupon summary{cursor:pointer;font-weight:700;color:var(--royal-2)}
.yt2-coupon-form{display:flex;gap:8px;margin-top:10px}
.yt2-coupon-form .input{flex:1;min-width:0}
.yt2-coupon-on{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--orange-2);font-weight:700}
.yt2-paybar-total{display:none}
.yt2-trust-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
@media (max-width:1000px){
  :root .yt2-checkout .checkout-grid,:root .yt2-checkout .pay-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* زر الدفع يلتصق بأسفل الشاشة على الجوال */
  .yt2-paybar{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:12px;
    margin-inline:-16px;padding:10px 16px;background:var(--navy);border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px rgba(0,0,0,.55)}
  .yt2-paybar-total{display:flex;flex-direction:column;line-height:1.2}
  .yt2-paybar-total small{font-size:12px;color:var(--muted)}
  .yt2-paybar-total b{font-size:18px;font-weight:800;color:var(--gold)}
  .yt2-paybar .btn{flex:1}
}

/* ============ 12) شريط الإعلانات والتنبيهات ============ */
.yt2-notices{max-width:1200px;margin:10px auto 0;padding-inline:16px;display:flex;flex-direction:column;gap:8px}
.yt2-notice{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:12px;font-size:14.5px;line-height:1.6;
  border:1px solid transparent;animation:yt2-in .35s ease}
.yt2-notice .ic{width:22px;height:22px;flex:0 0 auto}
.yt2-notice .msg{margin:0;flex:1;min-width:0;font-weight:600}
.yt2-notice .msg a{font-weight:800;text-decoration:underline;white-space:nowrap;margin-inline-start:6px}
.yt2-notice .x{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:transparent;border:0;
  color:inherit;opacity:.75;cursor:pointer}
.yt2-notice .x:hover{opacity:1;background:rgba(127,127,127,.15)}
.yt2-notice .x svg{width:16px;height:16px}
.yt2-notice.is-blue{background:color-mix(in srgb,#0277bd 16%,var(--navy));border-color:color-mix(in srgb,#0277bd 45%,transparent);color:var(--text)}
.yt2-notice.is-blue .ic,.yt2-notice.is-blue a{color:var(--royal-2)}
.yt2-notice.is-green{background:color-mix(in srgb,#4caf50 16%,var(--navy));border-color:color-mix(in srgb,#4caf50 45%,transparent);color:var(--text)}
.yt2-notice.is-green .ic,.yt2-notice.is-green a{color:var(--orange-2)}
.yt2-notice.is-gold{background:color-mix(in srgb,#f6c44e 18%,var(--navy));border-color:color-mix(in srgb,#f6c44e 50%,transparent);color:var(--text)}
.yt2-notice.is-gold .ic,.yt2-notice.is-gold a{color:var(--gold)}
.yt2-notice.is-red{background:color-mix(in srgb,#e53935 16%,var(--navy));border-color:color-mix(in srgb,#e53935 50%,transparent);color:var(--text)}
.yt2-notice.is-red .ic,.yt2-notice.is-red a{color:#ff6b6b}
:root[data-theme="light"] .yt2-notice.is-red .ic,:root[data-theme="light"] .yt2-notice.is-red a{color:#c62f2f}
.yt2-notice.is-navy{background:#000628;border-color:rgba(255,255,255,.12);color:#fff}
.yt2-notice.is-navy .ic,.yt2-notice.is-navy a{color:#47ff91}
.yt2-notice.is-purple{background:color-mix(in srgb,#7e57c2 18%,var(--navy));border-color:color-mix(in srgb,#7e57c2 50%,transparent);color:var(--text)}
.yt2-notice.is-purple .ic,.yt2-notice.is-purple a{color:#b39ddb}
:root[data-theme="light"] .yt2-notice.is-purple .ic,:root[data-theme="light"] .yt2-notice.is-purple a{color:#5e35b1}
@keyframes yt2-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.yt2-notice{animation:none}}
@media (max-width:620px){.yt2-notices{padding-inline:10px;margin-top:8px}.yt2-notice{font-size:13.5px;padding:8px 8px 8px 10px}}

/* ============ 13) تتبع الطلب ============ */
.yt2-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:s}
.yt2-track li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:4px;color:var(--muted)}
.yt2-track li::before{content:"";position:absolute;top:15px;inset-inline-start:calc(-50% + 14px);width:calc(100% - 28px);height:3px;
  border-radius:3px;background:var(--line-2)}
.yt2-track li:first-child::before{display:none}
.yt2-track li.done::before,.yt2-track li.now::before{background:var(--orange)}
.yt2-track .dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;border:3px solid var(--line-2);background:var(--navy)}
.yt2-track li.done .dot{border-color:var(--orange);background:var(--orange)}
.yt2-track li.done .dot::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:900;color:var(--on-accent)}
.yt2-track li.now .dot{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 25%,transparent)}
.yt2-track li.done,.yt2-track li.now{color:var(--text)}
.yt2-track .t{font-weight:800;font-size:13.5px}
.yt2-track .at{font-size:11.5px;color:var(--muted)}
@media (max-width:620px){
  .yt2-track{grid-template-columns:1fr;gap:0}
  .yt2-track li{flex-direction:row;text-align:start;padding:8px 0;gap:10px}
  .yt2-track li::before{top:-14px;inset-inline-start:10px;width:3px;height:28px}
  .yt2-track .at{margin-inline-start:auto}
}

/* ============ 14) الفوتر ============ */
:root .site-footer .cols{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.yt2-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.yt2-social a{padding:6px 12px;border-radius:28px;background:var(--card-2);font-size:13px;font-weight:700}
.yt2-social a:hover{color:var(--royal-2)}
@media (max-width:1000px){:root .site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:620px){:root .site-footer .cols{grid-template-columns:1fr}:root .site-footer{padding-bottom:80px}}

/* ============ 15) الرئيسية: الشريحة الافتراضية ============ */
:root .hero-slider .yt2-hero-default{min-height:220px;display:flex;align-items:center;
  background:linear-gradient(135deg,#000628 0%,#0b1a52 55%,#0277bd 100%)}
:root .hero-slider .yt2-hero-default .slide-cap{position:relative;inset:auto;padding:28px 26px;max-width:620px;color:#fff}
:root .hero-slider .yt2-hero-default h2{font-size:26px;margin:0 0 8px;color:#fff}
:root .hero-slider .yt2-hero-default p{margin:0 0 16px;color:rgba(255,255,255,.88)}
@media (max-width:620px){:root .hero-slider .yt2-hero-default{min-height:180px}:root .hero-slider .yt2-hero-default h2{font-size:21px}}

/* الخاصية hidden تتغلب على display المعرّف في CSS (عدّاد القطع، صناديق الدفع، الحاسبة) */
:root .qty[hidden],:root .yt2-step[hidden],:root .yt2-paybox[hidden],:root .yt2-fieldset[hidden]{display:none !important}

/* عناصر الشبكات لا تتمدد بعرض الجداول (كان الجدول يدفع صفحة الطلب خارج الشاشة على الجوال) */
:root .cart-grid > *,:root .checkout-grid > *,:root .pay-grid > *,:root .account-grid > *{min-width:0}
:root .table-wrap{max-width:100%}
:root .table-wrap .table{min-width:560px}
.yt2-level-card{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 14%,var(--navy)),var(--navy))}
.yt2-level-card .lv{font-size:20px;font-weight:800;color:var(--gold)}

/* ============ 16) البحث الفوري + بطاقات الأقسام + شارة فوري ============ */
form.yt2-has-suggest{position:relative}
.yt2-suggest{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:70;background:var(--navy);border:1px solid var(--line-2);
  border-radius:14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);padding:6px;max-height:min(70vh,460px);overflow-y:auto}
.yt2-suggest a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--text)}
.yt2-suggest a:hover,.yt2-suggest a.on{background:var(--card-2)}
.yt2-suggest img,.yt2-suggest .ph{width:54px;height:36px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--yt2-art);
  display:grid;place-items:center;font-size:20px}
.yt2-suggest .tx{display:flex;flex-direction:column;min-width:0;flex:1}
.yt2-suggest .tx b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt2-suggest .tx small{font-size:12px;color:var(--muted)}
.yt2-suggest .pr{font-size:13px;font-weight:800;color:var(--gold);white-space:nowrap}
.yt2-suggest .all{justify-content:center;font-weight:800;color:var(--royal-2);font-size:13.5px}
.yt2-suggest .empty{padding:14px;text-align:center;color:var(--muted);font-size:14px}

/* بطاقة القسم: الاسم على شريط فوق الصورة (قراءة أسرع وصور أكبر) */
.yt2-cat-v2 .yt2-cat-art{border-radius:16px}
.yt2-cat-bar{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:22px 10px 8px;background:linear-gradient(to top,rgba(0,6,40,.88),rgba(0,6,40,0));color:#fff}
.yt2-cat-v2 .yt2-cat-name{padding:0;text-align:start;font-size:14.5px;font-weight:800;color:#fff;line-height:1.3}
.yt2-cat-count{min-width:24px;height:22px;padding:0 7px;border-radius:28px;background:rgba(255,255,255,.18);font-size:12px;font-weight:800;
  display:grid;place-items:center}
.yt2-cat-v2:hover .yt2-cat-art{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(2,119,189,.7)}
@media (max-width:620px){
  .yt2-cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .yt2-cat-v2 .yt2-cat-art{aspect-ratio:1/1;border-radius:12px}
  .yt2-cat-v2 .yt2-cat-name{font-size:12px}
  .yt2-cat-bar{padding:16px 6px 6px}
  .yt2-cat-count{display:none}
}
:root .yt2-instant{position:absolute;bottom:8px;inset-inline-start:8px;z-index:4;padding:3px 9px;border-radius:28px;
  background:rgba(0,6,40,.78);color:#47ff91;font-size:11.5px;font-weight:800}

/* القائمة الجانبية: روابط التواصل */
.yt2-dr-social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.yt2-dr-social a{padding:6px 12px;border-radius:28px;background:var(--card-2);font-size:13px;font-weight:700}
/* الأقسام ثلاثة في الصف (صور أكبر وأسهل للمس) */
:root .yt2-cats{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ============ 17) البانر بصورة يظهر كاملاً + بطاقات أقسام بصورة واسم تحتها ============ */
/* كانت صورة البانر تُقص (object-fit:cover بنسبة ثابتة، 16:9 تحت 720px) فينقطع النص المرسوم داخلها.
   الآن الصورة بنسبتها الأصلية، والسلايدر يأخذ ارتفاعها (autoHeight في home/index). */
:root .hero-slider .swiper-slide.has-img{aspect-ratio:auto;display:flex;align-items:center;background:#000628}
:root .hero-slider .swiper-slide.has-img img{position:relative;inset:auto;width:100%;height:auto;max-height:560px;object-fit:contain}
:root .hero-slider .swiper-slide.has-img picture{display:block;width:100%}

/* بطاقة القسم بنمط مربعات كبيرة (مرجع سند): صورة مربعة كبيرة والاسم في شريط تحتها.
   الصورة كاملة دائماً: .fg بحجمها داخل المربع، و.bg نسخة مموّهة منها تملأ الفراغ
   (صورة القسم المربعة 800×800 تملأ المربع كله؛ صورة منتج 3:2 تظهر كاملة بلا قص). */
:root .yt2-cats{gap:18px}
.yt2-cat-v3{border-radius:18px;overflow:hidden;background:var(--navy);border:1px solid var(--line);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.7);isolation:isolate;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.yt2-cat-v3:hover{transform:translateY(-5px);border-color:rgba(41,182,246,.6);box-shadow:0 24px 44px -20px rgba(2,119,189,.8)}
.yt2-cat-v3 .yt2-cat-art{aspect-ratio:1/1;border-radius:0;box-shadow:none;transition:none;background:#0b1a52}
.yt2-cat-v3:hover .yt2-cat-art{transform:none}
.yt2-cat-v3 .yt2-cat-art .bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;
  filter:blur(18px) saturate(1.3) brightness(.75)}
.yt2-cat-v3 .yt2-cat-art .fg{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;transition:transform .45s ease}
.yt2-cat-v3:hover .yt2-cat-art .fg{transform:scale(1.06)}
.yt2-cat-v3 .yt2-cat-art.is-ph{background:linear-gradient(140deg,#0277bd 0%,#0b1a52 62%,#000628 100%)}
.yt2-cat-v3 .yt2-cat-art.is-ph::before{background:rgba(255,255,255,.07)}
.yt2-cat-ic{position:relative;display:grid;place-items:center;width:44%;aspect-ratio:1/1;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.yt2-cat-ic svg{width:54%;height:54%}
.yt2-cat-v3 .yt2-cat-ph{font-size:64px}
.yt2-cat-label{display:block;padding:14px 10px 15px;text-align:center;font-weight:800;font-size:17px;line-height:1.35;color:var(--text);
  border-top:1px solid var(--line)}
.yt2-cat-v3:hover .yt2-cat-label{color:#29b6f6}
@media (max-width:620px){
  :root .yt2-cats{gap:12px}
  .yt2-cat-v3{border-radius:14px}
  .yt2-cat-label{padding:10px 6px 11px;font-size:14.5px}
  .yt2-cat-v3 .yt2-cat-ph{font-size:44px}
}
/* الجوال: عمودان بمربعات كبيرة (أوضح وأسهل للمس) */
@media (max-width:480px){
  :root .yt2-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .yt2-cat-label{font-size:15px}
}

/* ============ 18) الهيدر على الجوال: اسم المتجر لا يخرج من الشاشة ============ */
/* الاسم الطويل (من إعدادات المتجر) مع قائمة العملة كانا يدفعان الهيدر خارج الشاشة فتركب الأيقونات على الشعار.
   الآن: الاسم يُختصر بنقاط، وعلى الجوال سطران كحد أقصى، والعملة تنتقل للقائمة الجانبية تحت 480px. */
.yt2-logo .t{min-width:0;overflow:hidden}
.yt2-logo .n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt2-dr-cur{display:none}
@media (max-width:480px){
  .yt2-hdr-tools .yt2-cur{display:none}
  .yt2-logo{gap:8px}
  .yt2-logo .t{font-size:14.5px}
  .yt2-logo .n{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.2}
  .yt2-dr-cur{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;
    border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600}
  .yt2-dr-cur select{height:38px;min-width:120px;padding:0 10px;border-radius:10px;border:1px solid var(--line-2);
    background:var(--card-2);color:var(--text);font-family:inherit;font-size:14px;font-weight:700}
}
/* شريط الثقة: الأيقونة في وسط مربعها. قاعدة النص «.yt2-trust-item span» كانت تنطبق على المربع (وهو span)
   فتجعله block بلون باهت، فتلتصق الأيقونة بالزاوية العليا */
:root .yt2-trust-item .yt2-trust-ic{display:grid;place-items:center;font-size:inherit;color:var(--yt2-icon-a)}
/* زر المفضلة: قلب SVG في وسط الدائرة تماماً (أبيض مفرّغ، وأحمر ممتلئ عند الإضافة) */
:root .fav-btn .fav-ico{display:grid;place-items:center;width:22px;height:22px;font-size:0;line-height:0}
:root .fav-btn .fav-ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:fill .15s ease,stroke .15s ease}
:root .fav-btn.is-fav .fav-ico svg{fill:#f43f5e;stroke:#f43f5e}

/* ============ 19) بطاقة المنتج بنمط مربعات سند كارد ============ */
/* صورة مربعة كبيرة (الصورة كاملة .fg فوق نسخة مموّهة منها .bg) والاسم والسعر في شريط تحتها.
   تنطبق على product-card و offer-card: الرئيسية والمتجر وصفحة القسم والمفضلة والعروض. */
:root .product-card{display:flex;flex-direction:column;background:var(--navy);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 12px 30px -20px rgba(0,0,0,.7);isolation:isolate;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
:root .product-card:hover{transform:translateY(-5px);border-color:rgba(41,182,246,.6);box-shadow:0 24px 44px -20px rgba(2,119,189,.8)}
:root .product-card .pimg{aspect-ratio:1/1;border-radius:0;box-shadow:none;background:#0b1a52}
:root .product-card:hover .pimg{transform:none}
:root .product-card .pimg .bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(18px) saturate(1.3) brightness(.75)}
:root .product-card .pimg .fg{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;transition:transform .45s ease}
:root .product-card:hover .pimg .fg{transform:scale(1.06)}
:root .product-card .pimg.is-ph{background:linear-gradient(140deg,#0277bd 0%,#0b1a52 62%,#000628 100%)}
:root .product-card .pbody{padding:11px 8px 13px;border-top:1px solid var(--line);gap:3px}
:root .product-card .pname{font-weight:800;font-size:16px}
:root .product-card:hover .pname{color:#29b6f6}
@media (max-width:620px){
  :root .product-card{border-radius:14px}
  :root .product-card .pbody{padding:9px 6px 11px}
  :root .product-card .pname{font-size:14.5px}
}

/* ============ 20) صفحة القسم (مرجع سند): بانر القسم + بحث كبير + شرائح بتمرير أفقي ============ */
.yt2-cat-hero{position:relative;overflow:hidden;isolation:isolate;margin:16px 0 0;border-radius:18px;min-height:220px;display:flex;align-items:center;
  background:linear-gradient(135deg,#000628 0%,#0b1a52 55%,#0277bd 100%);border:1px solid var(--line)}
.yt2-cat-hero .bg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(28px) saturate(1.4) brightness(.5);z-index:-2}
.yt2-cat-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(0,6,40,.1),rgba(0,6,40,.7))}
.yt2-cat-hero .in{display:flex;align-items:center;gap:26px;padding:26px 30px;width:100%}
.yt2-cat-hero .art{flex:0 0 auto;width:170px;aspect-ratio:1/1;border-radius:22px;overflow:hidden;display:grid;place-items:center;
  background:rgba(255,255,255,.08);box-shadow:0 22px 44px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.16)}
.yt2-cat-hero .art img{width:100%;height:100%;object-fit:contain}
.yt2-cat-hero .art.is-ph{background:linear-gradient(140deg,#0277bd,#0b1a52)}
.yt2-cat-hero .art .yt2-cat-ic{width:56%}
.yt2-cat-hero .tx{min-width:0;color:#fff}
.yt2-cat-hero .kicker{display:inline-block;padding:3px 12px;border-radius:28px;background:rgba(255,255,255,.14);font-size:12.5px;font-weight:700}
.yt2-cat-hero h1{margin:10px 0 6px;font-size:34px;font-weight:900;line-height:1.2;color:#fff}
.yt2-cat-hero p{margin:0 0 12px;max-width:560px;font-size:15px;color:rgba(255,255,255,.85)}
.yt2-cat-hero .count{font-size:13.5px;color:rgba(255,255,255,.78)}
.yt2-cat-hero .count b{font-size:16px;color:#47ff91}
/* صورة صفحة المنتج: كاملة بأي نسبة فوق نسخة مموّهة منها */
:root .pd-media .bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(22px) saturate(1.3) brightness(.7)}
:root .pd-media .fg{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
:root .pd-media.is-ph{background:linear-gradient(140deg,#0277bd 0%,#0b1a52 62%,#000628 100%)}
:root .pd-media .yt2-cat-ic{width:40%}
@media (max-width:760px){:root .pd-media{position:relative;top:auto}}   /* لتبقى الخلفية المموّهة داخل الإطار (top:auto: إزاحة التثبيت 90px للكمبيوتر فقط) */
@media (max-width:620px){
  .yt2-cat-hero{min-height:0;border-radius:14px;margin-top:12px}
  .yt2-cat-hero .in{gap:14px;padding:16px}
  .yt2-cat-hero .art{width:92px;border-radius:16px}
  .yt2-cat-hero h1{margin:6px 0 4px;font-size:22px}
  .yt2-cat-hero p{margin-bottom:6px;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  :root .cat-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:6px 20px 8px}
  :root .cat-filters::-webkit-scrollbar{display:none}
  :root .cat-chip{flex:0 0 auto;white-space:nowrap}
}

/* ============ 21) لمسات التصميم: أيقونات موحّدة، عناوين الأقسام، شريط المزايا، الشريط السفلي، لمعة المرور ============ */
/* الأيقونات من <x-yt-icon> (components/yt-icon): الحجم من السياق، واللون currentColor */
.yt-ic{width:1em;height:1em;flex:0 0 auto}

/* عناوين الأقسام: شارة أيقونة متدرّجة + خط لوني تحت العنوان + زر «عرض الكل» */
:root .yt2-sec-head{position:relative;padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line)}
:root .yt2-sec-head::after{content:"";position:absolute;bottom:-1px;right:0;width:72px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#29b6f6,#4caf50)}
:root .yt2-sec-head h2,.yt2-h-ic{display:flex;align-items:center;gap:10px}
.yt2-sec-ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:inline-grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#0277bd,#29b6f6);box-shadow:0 10px 20px -10px rgba(2,119,189,.9)}
.yt2-sec-ic .yt-ic{width:21px;height:21px}
.yt2-sec-ic.is-hot{background:linear-gradient(135deg,#ff8a00,#ff3d6e);box-shadow:0 10px 20px -10px rgba(255,61,110,.9)}
.yt2-sec-ic.is-deal{background:linear-gradient(135deg,#2e7d32,#4caf50);box-shadow:0 10px 20px -10px rgba(76,175,80,.9)}
.yt2-sec-ic.is-love{background:linear-gradient(135deg,#e11d48,#fb7185);box-shadow:0 10px 20px -10px rgba(225,29,72,.9)}
.yt2-sec-ic .yt2-cat-ic{width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:none;box-shadow:none}
.yt2-sec-ic .yt2-cat-ic svg{width:21px;height:21px}
.contact-head .yt2-h-ic{justify-content:center}
:root .yt2-see-all{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:28px;background:var(--card-2);
  border:1px solid var(--line);color:var(--text);font-weight:800;font-size:13.5px;transition:border-color .2s,color .2s}
:root .yt2-see-all:hover{border-color:#29b6f6;color:#29b6f6}
:root .yt2-see-all .yt-ic{width:16px;height:16px;transition:transform .2s ease}
:root .yt2-see-all:hover .yt-ic{transform:translateX(-3px)}

/* شريط المزايا: 4 مزايا بشارات ملوّنة (4 في الصف، 2×2 على التابلت والجوال بشكل مضغوط) */
:root .yt2-trust-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.yt2-trust-4 .yt2-trust-item{transition:border-color .2s ease,transform .2s ease}
.yt2-trust-4 .yt2-trust-item:hover{border-color:rgba(41,182,246,.5);transform:translateY(-2px)}
:root .yt2-trust-item .yt2-trust-ic{color:#fff;background:linear-gradient(135deg,#0277bd,#29b6f6);box-shadow:0 10px 20px -12px rgba(0,0,0,.8)}
:root .yt2-trust-ic.is-bolt{background:linear-gradient(135deg,#ff8a00,#ffc107)}
:root .yt2-trust-ic.is-shield{background:linear-gradient(135deg,#2e7d32,#4caf50)}
:root .yt2-trust-ic.is-headset{background:linear-gradient(135deg,#6d28d9,#a78bfa)}
.yt2-trust-ic .yt-ic{width:22px;height:22px}
@media (max-width:1000px){:root .yt2-trust-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  :root .yt2-trust-4{gap:10px}
  .yt2-trust-4 .yt2-trust-item{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 8px}
  .yt2-trust-4 .yt2-trust-item b{font-size:14px}
  .yt2-trust-4 .yt2-trust-item div > span{font-size:12px;line-height:1.55}
}

/* شارات بطاقة المنتج: نجمة «مميّز» وبرق «فوري» (ممتلئتان) */
:root .product-card .ribbon,:root .yt2-instant{display:inline-flex;align-items:center;gap:4px}
:root .product-card .ribbon .yt-ic,:root .yt2-instant .yt-ic{width:13px;height:13px;fill:currentColor;stroke:none}

/* لمعة خفيفة تعبر الصورة عند المرور (الكمبيوتر فقط) */
@media (hover:hover){
  :root .product-card .pimg::after,.yt2-cat-v3 .yt2-cat-art::after{content:"";display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.2) 48%,transparent 62%);transform:translateX(-130%);transition:transform .8s ease}
  :root .product-card:hover .pimg::after,.yt2-cat-v3:hover .yt2-cat-art::after{transform:translateX(130%)}
}

/* خط لوني رفيع أسفل الهيدر وأعلى الفوتر (هوية يمن توب: أزرق ← أخضر) */
:root .site-header.yt2-header::after,:root .site-footer::before{content:"";position:absolute;left:0;right:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(41,182,246,.85) 25%,rgba(76,175,80,.85) 50%,rgba(41,182,246,.85) 75%,transparent)}
:root .site-header.yt2-header::after{bottom:-1px}
:root .site-footer{position:relative}
:root .site-footer::before{top:0}
.yt2-ft-line{display:flex;align-items:flex-start;gap:8px}
.yt2-ft-line .yt-ic{width:17px;height:17px;margin-top:3px;color:#29b6f6}

/* الشريط السفلي (الجوال): العنصر النشط داخل كبسولة خضراء ناعمة، وخط لوني أعلى الشريط */
@media (max-width:620px){
  :root .bn-item svg{box-sizing:content-box;padding:4px 16px;border-radius:14px;transition:background .2s ease}
  :root .bn-item.bn-active svg{background:rgba(71,255,145,.15)}
  :root .bn-item.bn-active span{font-weight:800}
  :root .bottom-nav::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(41,182,246,.7),rgba(76,175,80,.7),transparent)}
}

/* أيقونات داخل نصوص وأزرار */
.yt2-trust-list li{display:flex;align-items:flex-start;gap:8px}
.yt2-trust-list .yt-ic{width:16px;height:16px;margin-top:2px;color:#29b6f6}
.yt2-level-card .lv{display:flex;align-items:center;gap:8px}
.yt2-level-card .lv .yt-ic{width:22px;height:22px;fill:currentColor}
.pk-name .yt-ic{width:15px;height:15px;margin-left:4px;vertical-align:-2px}
.yt2-empty-ic .yt-ic{width:64px;height:64px;color:#fb7185}

/* تفاصيل عامة: لون التحديد، شريط تمرير رفيع بلون الهوية، وإطار تركيز واضح للوحة المفاتيح */
::selection{background:rgba(41,182,246,.35)}
@media (hover:hover) and (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:#24306b transparent}
  html[data-theme="light"]{scrollbar-color:#c3cae3 transparent}
}
:root a:focus-visible,:root button:focus-visible{outline:2px solid #29b6f6;outline-offset:2px}

/* ===== توثيق رقم الجوال برمز SMS (account/phone-verify) ===== */
:root .yt2-otp-code{font-size:28px;font-weight:800;letter-spacing:.5em;text-indent:.5em;text-align:center;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
:root .yt2-otp-code::placeholder{letter-spacing:.5em;color:var(--muted);opacity:.55}
.yt2-otp-resend{margin-top:12px}
.yt2-otp-resend .btn:disabled{opacity:.7;cursor:not-allowed}
.yt2-otp-edit{font-weight:800;white-space:nowrap}
.yt2-otp-expired{color:var(--bad)!important;font-weight:700}