/* ============================================================
   style.css — التنسيق الرئيسي لموقع TailG Iraq
   ------------------------------------------------------------
   الفهرس:
   1) متغيرات التصميم (الألوان والخطوط)
   2) إعادة الضبط والأساسيات
   3) الهيدر (شفاف → صلب عند التمرير)
   4) قسم الهيرو بخلفية فيديو
   5) شبكة المنتجات وتأثيرات الحركة
   6) أقسام عامة (الفئات، التقنيات، من نحن...)
   7) نموذج الاتصال
   8) الفوتر وزر واتساب العائم
   9) حركات الظهور عند التمرير
   10) التجاوب (Responsive)
   ============================================================ */

/* ---------- 1) متغيرات التصميم ---------- */
:root {
    /* اللوحة: أبيض/رمادي فاتح + أخضر تقني (طاقة نظيفة) */
    --clr-bg:        #f7f8fa;   /* خلفية الصفحة */
    --clr-surface:   #ffffff;   /* خلفية البطاقات */
    --clr-ink:       #14181f;   /* النص الأساسي */
    --clr-muted:     #6b7280;   /* نص ثانوي */
    --clr-accent:    #cd1928;   /* أحمر TAILG الرسمي (مطابق tailg.com) */
    --clr-accent-dk: #a5131f;   /* أحمر أغمق للتحويم */
    --clr-line:      #e5e8ec;   /* حدود خفيفة */
    --clr-whatsapp:  #25d366;   /* أخضر واتساب الرسمي */

    --font-main: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;

    --radius:   14px;           /* استدارة الزوايا الموحدة */
    --shadow:   0 6px 24px rgba(20, 24, 31, .07);
    --shadow-lg:0 16px 40px rgba(20, 24, 31, .14);

    --header-h: 72px;           /* ارتفاع الهيدر */
    --container: 1180px;        /* أقصى عرض للمحتوى */
}

/* ---------- 2) إعادة الضبط والأساسيات ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background: var(--clr-bg);
    color: var(--clr-ink);
    line-height: 1.7;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}

/* عناوين الأقسام الموحدة */
.section { padding-block: 72px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head h2 { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
.section-head p  { color: var(--clr-muted); }
/* خط أخضر قصير تحت العنوان — لمسة الهوية */
.section-head h2::after {
    content: '';
    display: block;
    width: 56px; height: 4px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--clr-accent);
}

/* ---------- الأزرار الموحدة ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-accent {
    background: var(--clr-accent);
    color: #fff;
}
.btn-accent:hover { background: var(--clr-accent-dk); box-shadow: var(--shadow); }

.btn-whatsapp {
    background: var(--clr-whatsapp);
    color: #fff;
}
.btn-whatsapp:hover { background: #1fb659; box-shadow: var(--shadow); }

.btn-outline {
    background: transparent;
    color: var(--clr-ink);
    border-color: var(--clr-line);
}
.btn-outline:hover { border-color: var(--clr-ink); }

/* زر أبيض فوق الفيديو */
.btn-ghost {
    background: rgba(255,255,255,.14);
    color: #fff;
    border-color: rgba(255,255,255,.55);
    backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255,255,255,.26); }

/* ============================================================
   3) الهيدر — شفاف فوق الهيرو، صلب عند التمرير
   ------------------------------------------------------------
   الفكرة: الهيدر position:fixed دائماً.
   - .transparent          → خلفية شفافة ونص أبيض (فوق الفيديو)
   - .transparent.scrolled → JS يضيف .scrolled بعد التمرير
                             فيتحول لخلفية بيضاء ونص داكن بنعومة
   ============================================================ */
.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-line);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* الوضع الشفاف (صفحات الهيرو فقط) */
.site-header.transparent {
    background: transparent;
    border-bottom-color: transparent;
}
.site-header.transparent .main-nav a,
.site-header.transparent .logo-text { color: #fff; }
.site-header.transparent .menu-toggle span { background: #fff; }

/* بعد التمرير: يرجع أبيض صلب مع ظل خفيف */
.site-header.transparent.scrolled {
    background: var(--clr-surface);
    border-bottom-color: var(--clr-line);
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.site-header.transparent.scrolled .main-nav a,
.site-header.transparent.scrolled .logo-text { color: var(--clr-ink); }
.site-header.transparent.scrolled .menu-toggle span { background: var(--clr-ink); }

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* الشعار */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;   /* يحافظ على نسب اللوكو بدون تشوه */
}
.logo-mark {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--clr-accent);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
}
.logo-text { font-size: 1.15rem; font-weight: 500; letter-spacing: .3px; }
.logo-text b { font-weight: 800; color: var(--clr-accent); }

/* روابط التنقل */
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a {
    font-weight: 700;
    font-size: .95rem;
    position: relative;
    padding-block: 6px;
}
/* خط سفلي أخضر يتمدد عند التحويم وللرابط النشط */
.main-nav a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2.5px;
    border-radius: 2px;
    background: var(--clr-accent);
    transform: scaleX(0);
    transition: transform .25s ease;
}
.main-nav a:not(.nav-cta):hover::after,
.main-nav a.active::after { transform: scaleX(1); }

.nav-cta { padding: 9px 18px; }

/* زر الهامبرغر (مخفي على الشاشات الكبيرة) */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px;
}
.menu-toggle span {
    width: 26px; height: 3px;
    border-radius: 2px;
    background: var(--clr-ink);
    transition: transform .3s ease, opacity .3s ease;
}
/* تحويل الهامبرغر إلى X عند الفتح */
.menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   4) قسم الهيرو بخلفية فيديو متجاوبة
   ------------------------------------------------------------
   - الفيديو absolute يغطي القسم كاملاً بـ object-fit: cover
     فيبقى متجاوباً على كل المقاسات بدون تشوه.
   - طبقة تعتيم متدرجة فوقه تضمن وضوح النص الأبيض.
   - إذا فشل تحميل الفيديو تبقى خلفية متدرجة داكنة كبديل.
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh; /* دقة أفضل على متصفحات الموبايل */
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    /* خلفية بديلة إذا لم يتوفر الفيديو */
    background: linear-gradient(135deg, #0d0f13 0%, #1c2026 55%, #3d0a0e 100%);
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* سر التجاوب: يملأ القسم مع قص الزوائد */
    z-index: 0;
}

/* طبقة التعتيم فوق الفيديو */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(10, 14, 19, .82) 0%,
        rgba(10, 14, 19, .45) 45%,
        rgba(10, 14, 19, .35) 100%
    );
}
/* نسخة خفيفة جداً: للهيرو الصافي بدون نصوص — تعتيم بسيط أعلى
   الشاشة فقط حتى تظهر روابط الهيدر البيضاء بوضوح فوق الفيديو */
.hero-overlay.light {
    background: linear-gradient(
        to bottom,
        rgba(10, 14, 19, .45) 0%,
        rgba(10, 14, 19, 0) 30%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    padding-inline: 20px;
    /* حركة دخول ناعمة عند تحميل الصفحة */
    animation: heroIn 1s ease .15s both;
}
@keyframes heroIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.4);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
}

.hero h1 {
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 14px;
}
.hero h1 .accent { color: var(--clr-accent); }

.hero p {
    font-size: 1.1rem;
    color: rgba(255,255,255,.85);
    margin-bottom: 30px;
}

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* مؤشر التمرير للأسفل */
.hero-scroll {
    position: absolute;
    bottom: 26px;
    inset-inline: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ============================================================
   5) شبكة المنتجات + تأثيرات الحركة
   ------------------------------------------------------------
   CSS Grid بأعمدة مرنة auto-fill: تتكيف تلقائياً من عمود واحد
   على الموبايل حتى 3 أعمدة على الشاشات الكبيرة بدون media queries.
   تأثير التحويم بأسلوب TAILG: البطاقة ترتفع، الظل يتعمق،
   والصورة تتقرب (zoom) بنعومة.
   ============================================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 28px;
}

.product-card {
    position: relative;
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* شارة الفئة أعلى البطاقة */
.product-cat {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 2;
    background: rgba(20, 24, 31, .78);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* حاوية الصورة بنسبة ثابتة + تقريب عند التحويم */
.product-img {
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, #eef1f5, #e3e8ee);
    overflow: hidden;
}
.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.product-card:hover .product-img img { transform: scale(1.07); }

.product-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-name   { font-size: 1.35rem; font-weight: 800; }
.product-slogan { color: var(--clr-accent); font-weight: 700; font-size: .92rem; margin-bottom: 16px; }

/* قائمة المواصفات الأربع */
.product-specs {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-bottom: 20px;
}
.product-specs li {
    background: var(--clr-bg);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.spec-label { font-size: .72rem; color: var(--clr-muted); font-weight: 700; }
.spec-value { font-size: .88rem; font-weight: 800; }

.product-actions {
    margin-top: auto; /* تدفع الأزرار لأسفل البطاقة دائماً */
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.product-actions .btn { flex: 1; padding: 11px 14px; font-size: .88rem; }

/* ---------- فلتر الفئات بصفحة المنتجات ---------- */
.cat-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.cat-filter a {
    padding: 9px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--clr-line);
    background: var(--clr-surface);
    font-weight: 700;
    font-size: .9rem;
    transition: all .2s ease;
}
.cat-filter a:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.cat-filter a.active {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: #fff;
}

/* ============================================================
   6) أقسام عامة
   ============================================================ */

/* بطاقات الفئات بالصفحة الرئيسية */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
}
.cat-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    padding: 30px 24px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: var(--clr-accent);
}
.cat-card .cat-en {
    display: block;
    font-size: .78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-accent);
    font-weight: 800;
    margin-bottom: 6px;
}
.cat-card h3 { font-size: 1.1rem; font-weight: 800; }

/* بطاقات التقنيات */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.tech-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    padding: 28px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.tech-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tech-card .tech-code {
    display: inline-block;
    font-weight: 800;
    color: var(--clr-accent);
    font-size: .85rem;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.tech-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.tech-card p  { color: var(--clr-muted); font-size: .95rem; }

/* شريط دعوة للتواصل (CTA) */
.cta-band {
    background: linear-gradient(135deg, #7a0009, #c4000f);
    color: #fff;
    border-radius: var(--radius);
    padding: 48px 36px;
    text-align: center;
}
.cta-band h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 8px; }
.cta-band p  { color: rgba(255,255,255,.85); margin-bottom: 24px; }

/* نص صفحة من نحن */
.prose { max-width: 760px; margin-inline: auto; }
.prose p { margin-bottom: 16px; color: #3a4150; }
.prose strong { color: var(--clr-ink); }

/* ============================================================
   7) نموذج الاتصال
   ============================================================ */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 36px;
    align-items: start;
}

.contact-info {
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    padding: 30px;
}
.contact-info h3 { font-weight: 800; margin-bottom: 16px; }
.contact-info p  { display: flex; flex-direction: column; gap: 12px; color: #3a4150; }

.contact-form {
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    padding: 30px;
}

.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 6px;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--clr-line);
    border-radius: 10px;
    font-family: inherit;
    font-size: .95rem;
    background: var(--clr-bg);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(205,25,40, .15);
}
.form-group textarea { min-height: 130px; resize: vertical; }

/* رسائل النموذج */
.form-alert {
    padding: 14px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: 18px;
}
.form-alert.success { background: #e7f8f0; color: #0a7a4b; border: 1px solid #b8ecd4; }
.form-alert.error   { background: #fdecec; color: #b3261e; border: 1px solid #f5c6c4; }
.form-alert ul { margin-top: 6px; padding-inline-start: 18px; font-weight: 500; }

/* حقل الكابتشا */
.captcha-box {
    display: flex;
    align-items: center;
    gap: 12px;
}
.captcha-question {
    background: var(--clr-ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 800;
    white-space: nowrap;
    user-select: none;
}
.captcha-box input { flex: 1; }

/* ============================================================
   8) الفوتر + زر واتساب العائم
   ============================================================ */
.site-footer {
    background: #11151b;
    color: #cbd2dc;
    margin-top: 40px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 36px;
    padding-block: 56px 40px;
}
.footer-col h4 { color: #fff; font-weight: 800; margin-bottom: 14px; }
.footer-col p  { font-size: .93rem; }
.footer-logo { margin-bottom: 14px; }
.footer-logo .logo-text { color: #fff; }

.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { font-size: .93rem; transition: color .2s; }
.footer-nav a:hover { color: var(--clr-accent); }

.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact a:hover { color: var(--clr-accent); }

.social-links { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.social-links a {
    font-size: .85rem;
    font-weight: 700;
    padding: 7px 14px;
    border: 1px solid #2a3140;
    border-radius: 999px;
    transition: all .2s;
}
.social-links a:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

.footer-bottom {
    border-top: 1px solid #222a35;
    padding-block: 18px;
    font-size: .85rem;
    text-align: center;
    color: #8b93a1;
}

/* زر واتساب العائم — ثابت أسفل يسار الشاشة (يسار لأن الموقع RTL) */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    z-index: 90;
    width: 58px; height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--clr-whatsapp);
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 211, 102, .45);
    transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 28px rgba(37, 211, 102, .6);
}

/* ============================================================
   9) حركات الظهور عند التمرير
   ------------------------------------------------------------
   العناصر ذات .reveal تبدأ مخفية قليلاً، وعندما تدخل الشاشة
   يضيف JS كلاس .visible فتظهر بنعومة. تعمل بدون مكتبات خارجية
   عبر IntersectionObserver.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* احترام تفضيل تقليل الحركة (وصولية) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   10) التجاوب (Responsive)
   ============================================================ */
@media (max-width: 900px) {
    /* إظهار زر الهامبرغر وإخفاء القائمة الأفقية */
    .menu-toggle { display: flex; z-index: 110; }

    .main-nav {
        position: fixed;
        inset: 0;
        top: var(--header-h);
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 40px;
        gap: 8px;
        background: var(--clr-surface);
        transform: translateX(100%);   /* مخفية خارج الشاشة (RTL) */
        transition: transform .35s ease;
    }
    .main-nav.open { transform: translateX(0); }

    .main-nav a {
        font-size: 1.15rem;
        padding: 14px 0;
        color: var(--clr-ink) !important; /* دائماً داكن داخل القائمة البيضاء */
    }
    .nav-cta { margin-top: 12px; }

    .contact-layout { grid-template-columns: 1fr; }
    .section { padding-block: 52px; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr; }
    .product-specs { grid-template-columns: 1fr 1fr; }
    .hero-actions .btn { width: 100%; }
    .cta-band { padding: 36px 22px; }
}

/* ============================================================
   11) أسلوب Product Center — مطابق للموقع الأم TAILG
   ------------------------------------------------------------
   تبويبات الفئات، العنوان الكبير المكثف، الفاصل الأحمر،
   شبكة العمودين، شارة HOT، قائمة المواصفات بالنقاط الحمراء،
   وصفحة تفاصيل المنتج بمعرض الصور.
   ============================================================ */

/* خط الموديلات المكثف (مثل عناوين الموقع الأم) */
.tg-model,
.tg-cat-title,
.tg-params-title {
    font-family: 'Bebas Neue', 'Tajawal', sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ---------- تبويبات الفئات ---------- */
.tg-tabs {
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-line);
}
.tg-tabs-inner {
    display: flex;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}
.tg-tab {
    padding: 18px 4px 14px;
    font-weight: 700;
    font-size: .98rem;
    color: var(--clr-ink);
    border-bottom: 3px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.tg-tab:hover  { color: var(--clr-accent); }
.tg-tab.active { color: var(--clr-ink); border-bottom-color: var(--clr-accent); }

/* ---------- عنوان الفئة الكبير مع الفاصل الأحمر ---------- */
.tg-cat-head { text-align: center; padding: 52px 20px 34px; }
.tg-cat-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: #2b2f36;
    line-height: 1.15;
}
.tg-cat-sub { color: var(--clr-muted); font-weight: 700; margin-top: 4px; }
.tg-divider {
    display: block;
    width: 84px; height: 4px;
    margin: 18px auto 0;
    background: var(--clr-accent);
    border-radius: 2px;
}

/* ---------- بانر الفئة ---------- */
.tg-banner {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.tg-banner img { width: 100%; display: block; }

/* ---------- شبكة العمودين (مثل الموقع الأم) ---------- */
.tg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px 72px;
}

.tg-item { display: flex; flex-direction: column; }

.tg-item-head { margin-bottom: 10px; }
.tg-model {
    font-size: 2rem;
    font-weight: 700;
    color: #23262c;
    line-height: 1.1;
}
.tg-model-lg { font-size: clamp(2.2rem, 4.5vw, 3rem); }
.tg-slogan {
    color: var(--clr-muted);
    font-weight: 700;
    font-size: 1rem;
    margin-top: 2px;
}

/* صورة المنتج مع شارة HOT */
.tg-img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: transparent;
}
.tg-img img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tg-img:hover img { transform: scale(1.06); }

/* شارة HOT الحمراء (مثل الموقع الأم) */
.tg-hot {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    z-index: 2;
    background: var(--clr-accent);
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: 1px;
    padding: 5px 13px;
    /* شكل الشارة السداسي المائل */
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

/* ---------- قائمة المواصفات بالنقاط الحمراء ---------- */
.tg-params { margin-top: 18px; }
.tg-params-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #23262c;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--clr-line);
    margin-bottom: 14px;
}
.tg-params-list { list-style: none; }
.tg-params-list li {
    position: relative;
    padding: 6px 24px 6px 0;
    color: #3a4150;
    font-size: .97rem;
}
/* الدائرة الحمراء المفرغة قبل كل مواصفة (مثل الموقع الأم) */
.tg-params-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 4px;
    top: 14px;
    width: 8px; height: 8px;
    border: 2px solid var(--clr-accent);
    border-radius: 50%;
}
.tg-params-list li { padding-inline-start: 26px; padding-inline-end: 0; }

/* زر التفاصيل بمحاذاة نهاية السطر (مثل Learn More بالموقع الأم) */
.tg-item-cta {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--clr-line);
    display: flex;
    justify-content: flex-end;
}
.tg-learn { min-width: 190px; }

/* ============================================================
   صفحة تفاصيل المنتج
   ============================================================ */
.tg-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--clr-muted);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.tg-breadcrumb a:hover { color: var(--clr-accent); }
.tg-breadcrumb b { color: var(--clr-ink); }

.tg-detail {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* معرض الصور */
.tg-gallery-main {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    overflow: hidden;
}
.tg-gallery-main img {
    max-width: 94%;
    max-height: 94%;
    object-fit: contain;
}
.tg-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.tg-thumb {
    width: 76px; height: 60px;
    padding: 4px;
    background: var(--clr-surface);
    border: 2px solid var(--clr-line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease;
}
.tg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tg-thumb:hover, .tg-thumb.active { border-color: var(--clr-accent); }

/* معلومات المنتج */
.tg-desc {
    color: #3a4150;
    margin: 16px 0 26px;
    line-height: 1.9;
}
.tg-params-full li { font-size: 1rem; }
.tg-params-full b { color: var(--clr-ink); }

.tg-detail-cta {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.tg-detail-cta .btn { flex: 1; min-width: 200px; }

/* ---------- تجاوب أسلوب الموقع الأم ---------- */
@media (max-width: 900px) {
    .tg-grid { grid-template-columns: 1fr; gap: 52px; }
    .tg-detail { grid-template-columns: 1fr; gap: 30px; }
    .tg-tabs-inner { gap: 18px; }
    .tg-tab { font-size: .9rem; padding: 14px 2px 11px; }
}

/* ============================================================
   12) صفحة تفاصيل المنتج — أسلوب صفحة الموديل بالموقع الأم
   ------------------------------------------------------------
   الهيرو الرمادي بعلامة TAILG المائية، شريط الأرقام الكبيرة،
   شريط صور التفاصيل، جدول المواصفات بعمودين، أقسام المميزات
   المتناوبة (صورة + مربع رمادي فاتح بنقاط حمراء).
   ============================================================ */

/* ---------- 1) الهيرو الرمادي بالعلامة المائية ---------- */
.pd-hero {
    position: relative;
    background: #e8eaee;           /* الرمادي الفاتح مثل الموقع الأم */
    padding: 60px 20px 34px;
    text-align: center;
    overflow: hidden;
}
/* كلمة TAILG الضخمة الباهتة بالخلفية */
.pd-watermark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-size: clamp(6rem, 22vw, 20rem);
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55); /* أبيض شفاف فوق الرمادي */
    user-select: none;
    pointer-events: none;
}
.pd-hero-img {
    position: relative;
    z-index: 1;
    max-width: min(760px, 92%);
    max-height: 480px;
    object-fit: contain;
    margin-inline: auto;
    filter: drop-shadow(0 22px 34px rgba(20, 24, 31, .18));
}
.pd-hot {
    top: 20px;
    inset-inline-end: 22px;
    font-size: .9rem;
}
/* الصور المصغرة داخل الهيرو */
.pd-hero-thumbs {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}
.pd-thumb { background: rgba(255,255,255,.7); }

/* ---------- 2) شريط الاسم والأرقام الكبيرة ---------- */
.pd-infobar {
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-line);
    padding-block: 30px;
}
.pd-infobar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex-wrap: wrap;
}
.pd-stats {
    display: flex;
    gap: clamp(24px, 5vw, 64px);
    flex-wrap: wrap;
}
.pd-stat { text-align: center; }
.pd-stat b {
    display: block;
    font-family: 'Bebas Neue', 'Tajawal', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: #23262c;
    line-height: 1.1;
}
.pd-stat span {
    display: block;
    margin-top: 4px;
    color: var(--clr-muted);
    font-size: .85rem;
    font-weight: 700;
}

/* ---------- 3) شريط صور التفاصيل الأفقي ---------- */
.pd-strip {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    background: var(--clr-surface);
    padding-block: 4px;
}
.pd-strip-item {
    flex: 0 0 clamp(240px, 24vw, 380px);
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
    background: #f1f3f6;
    overflow: hidden;
}
.pd-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.pd-strip-item:hover img { transform: scale(1.05); }

/* ---------- 4) جدول المواصفات الكامل ---------- */
.pd-params-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 56px;
    align-items: center;
}
/* الصورة الجانبية فوق درع مائي فاتح */
.pd-params-img {
    position: relative;
    display: grid;
    place-items: center;
    padding: 20px;
}
.pd-params-img img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    object-fit: contain;
}
/* درع TAILG الباهت خلف الصورة (مرسوم بـ CSS) */
.pd-shield {
    position: absolute;
    inset: 8%;
    background: #f1f3f6;
    clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%);
    opacity: .8;
}
.pd-params-heading {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 22px;
}
.pd-params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 36px;
}
.pd-param dt {
    font-weight: 800;
    color: #23262c;
    margin-bottom: 3px;
}
.pd-param dd { color: #4a5160; font-size: .95rem; }

/* ---------- 5) أقسام المميزات المتناوبة ---------- */
.pd-feature {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    max-width: var(--container);
    margin: 56px auto;
    padding-inline: 20px;
    gap: 0;
}
/* عكس الترتيب بالأقسام الفردية (صورة يسار/يمين بالتناوب) */
.pd-feature.flip .pd-feature-img { order: 2; }
.pd-feature.flip .pd-feature-box { order: 1; }

.pd-feature-img {
    min-height: 380px;
    overflow: hidden;
}
.pd-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* المربع الرمادي الفاتح بالنص (مثل الموقع الأم) */
.pd-feature-box {
    background: #eef0f4;
    padding: clamp(28px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* المربع ينزاح قليلاً للأسفل مثل تراكب الموقع الأم */
    margin-top: 48px;
    margin-bottom: -48px;
}
.pd-feature.flip .pd-feature-box {
    margin-top: -48px;
    margin-bottom: 48px;
}
.pd-feature-title {
    font-family: 'Bebas Neue', 'Tajawal', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: #23262c;
    margin-bottom: 18px;
    letter-spacing: .5px;
}

/* ---------- تجاوب صفحة التفاصيل ---------- */
@media (max-width: 900px) {
    .pd-params-layout { grid-template-columns: 1fr; gap: 26px; }
    .pd-params-grid   { grid-template-columns: 1fr; gap: 14px; }
    .pd-infobar-inner { justify-content: center; text-align: center; }
    .pd-feature {
        grid-template-columns: 1fr;
        margin-block: 34px;
    }
    /* إلغاء الإزاحات على الموبايل */
    .pd-feature-box,
    .pd-feature.flip .pd-feature-box { margin: 0; }
    .pd-feature.flip .pd-feature-img { order: 1; }
    .pd-feature.flip .pd-feature-box { order: 2; }
    .pd-feature-img { min-height: 240px; }
}

/* ============================================================
   13) اللوحة الجانبية + نافذة خيارات التواصل
   ------------------------------------------------------------
   بديل زر واتساب العائم — لوحة جانبية بيضاء مثل الموقع الأم:
   صندوق BACK (بصفحات الدراجات فقط) وصندوق CALL/TOP.
   زر CALL يفتح نافذة اختيار: واتساب / مكالمة / إيميل.
   ============================================================ */

/* ---------- اللوحة الجانبية ---------- */
.side-panel {
    position: fixed;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.side-box {
    background: var(--clr-surface);
    border-radius: 14px 0 0 14px;   /* زوايا مستديرة من جهة الشاشة فقط */
    box-shadow: 0 6px 24px rgba(20, 24, 31, .14);
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 14px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--clr-accent);       /* أحمر مثل الموقع الأم */
    border-radius: 10px;
    transition: background .2s ease, transform .2s ease;
}
.side-btn:hover { background: #faeaeb; transform: translateY(-1px); }
.side-btn span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--clr-accent);
}
.side-divider {
    border: 0;
    border-top: 1px solid var(--clr-line);
    margin: 2px 10px;
}

/* ---------- نافذة خيارات التواصل ---------- */
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 20px;
}
.contact-modal[hidden] { display: none; }

.contact-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 24, .55);
    backdrop-filter: blur(3px);
}
.contact-modal-box {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: var(--clr-surface);
    border-radius: 18px;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    animation: modalIn .25s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.contact-modal-close {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--clr-bg);
    color: var(--clr-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.contact-modal-close:hover { background: #faeaeb; color: var(--clr-accent); }

.contact-modal-box h3 {
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}
.contact-modal-sub {
    text-align: center;
    color: var(--clr-muted);
    font-size: .9rem;
    margin: 4px 0 18px;
}

/* خيارات التواصل الثلاثة */
.cm-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1.5px solid var(--clr-line);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cm-option:hover { transform: translateY(-2px); }
.cm-option b    { font-size: 1rem; }
.cm-option span { font-size: .82rem; color: var(--clr-muted); }

/* لمسة لونية لكل خيار */
.cm-wa:hover   { border-color: var(--clr-whatsapp); background: #f0fbf4; }
.cm-wa b       { color: #1a9e4b; }
.cm-tel:hover  { border-color: var(--clr-accent); background: #fdf1f2; }
.cm-tel b      { color: var(--clr-accent); }
.cm-mail:hover { border-color: #2563eb; background: #f0f5ff; }
.cm-mail b     { color: #2563eb; }

/* تجاوب اللوحة الجانبية على الموبايل */
@media (max-width: 600px) {
    .side-btn { padding: 10px 11px; }
    .side-btn svg { width: 19px; height: 19px; }
}

/* ============================================================
   القائمة المنسدلة للتواصل + الزر الرصاصي (إضافة جراحية v7)
   عنصر details أصلي بالمتصفح — يعمل بدون جافاسكربت نهائياً
   ============================================================ */
.btn-gray { background: #757b86; color: #fff; }
.btn-gray:hover { background: #5b616c; box-shadow: var(--shadow); }

.contact-dd { position: relative; flex: 1; min-width: 0; }
.contact-dd summary { list-style: none; width: 100%; cursor: pointer; user-select: none; }
.contact-dd summary::-webkit-details-marker { display: none; }

.dd-arrow { transition: transform .25s ease; flex: 0 0 auto; }
.contact-dd[open] .dd-arrow { transform: rotate(180deg); }
.contact-dd[open] summary.btn-accent { background: var(--clr-accent-dk); }

.contact-dd-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    z-index: 50;
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(20, 24, 31, .16);
    padding: 6px;
    animation: ddIn .18s ease;
}
@keyframes ddIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.contact-dd-menu a {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: .92rem;
    text-align: center;
    transition: background .15s ease;
}
.contact-dd-menu .dd-wa   { color: #1a9e4b; }
.contact-dd-menu .dd-wa:hover   { background: #f0fbf4; }
.contact-dd-menu .dd-tel  { color: var(--clr-accent); }
.contact-dd-menu .dd-tel:hover  { background: #fdf1f2; }
.contact-dd-menu .dd-mail { color: #2563eb; }
.contact-dd-menu .dd-mail:hover { background: #f0f5ff; }

/* ترتيب الزرين جنب بعض بنفس الارتفاع */
.product-actions,
.tg-item-cta { display: flex; gap: 10px; align-items: flex-start; }
.product-actions .btn-gray,
.tg-item-cta .btn-gray { flex: 1; }

@media (max-width: 480px) {
    .product-actions { flex-direction: column; align-items: stretch; }
    .contact-dd { width: 100%; }
}

/* ============================================================
   مؤشر SCROLL بالخط المتحرك + تصغير اللوحة الجانبية (v8)
   ============================================================ */

/* ---------- مؤشر SCROLL: وسط-اليسار مثل الموقع الأم ---------- */
.hero-scroll-v {
    position: absolute;
    left: 24%;                 /* وسط-اليسار: مو بالوسط ومو ملزوق بالحافة */
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.hero-scroll-v span {
    font-family: 'Bebas Neue', 'Tajawal', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 3px;
}
/* الخط العمودي: مسار باهت وبداخله مقطع أبيض ينزل بالتدرج */
.hero-scroll-v i {
    display: block;
    width: 2px;
    height: 84px;
    background: rgba(255, 255, 255, .22);
    position: relative;
    overflow: hidden;
}
.hero-scroll-v i::after {
    content: '';
    position: absolute;
    top: -45%;
    left: 0;
    width: 100%;
    height: 45%;
    background: #fff;
    animation: scrollLine 1.8s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes scrollLine { to { top: 110%; } }

/* ---------- تصغير اللوحة الجانبية (~70% من الحجم السابق) ---------- */
.side-box { padding: 4px; border-radius: 11px 0 0 11px; }
.side-btn { padding: 8px 10px; gap: 2px; }
.side-btn span { font-size: .58rem; letter-spacing: .8px; }
.side-divider { margin: 1px 8px; }

@media (max-width: 600px) {
    .hero-scroll-v { left: 18%; }
    .hero-scroll-v i { height: 58px; }
    .side-btn { padding: 7px 9px; }
    .side-btn svg { width: 16px; height: 16px; }
}

/* ============================================================
   أقسام الموقع الأم بالرئيسية + إصلاح حركة SCROLL بالحاسوب (v11)
   ============================================================ */

/* ---------- استثناء خط SCROLL من كتلة تقليل الحركة ----------
   كتلة prefers-reduced-motion فوق توقف كل الأنيميشن إذا كان
   ويندوز مفعّل "تقليل الحركات" — نستثني هذا الخط الزخرفي الصغير
   حتى يظل يتحرك على كل الحواسيب */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-v i::after { animation-duration: 1.8s !important; }
}

/* ---------- شريط الأرقام ---------- */
.stats-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.stat-cell {
    text-align: center;
    padding: 26px 14px;
    border-inline-start: 1px solid var(--clr-line);
}
.stat-cell:first-child { border-inline-start: 0; }
.stat-cell b {
    display: block;
    font-family: 'Bebas Neue', 'Tajawal', sans-serif;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 700;
    color: #191d24;
}
.stat-cell span { color: var(--clr-muted); font-size: .88rem; font-weight: 700; }

/* ---------- مربع TAILG الأحمر بالصورة المتراكبة ---------- */
.about-block {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
}
.about-photo {
    position: relative;
    z-index: 2;
    min-height: 400px;
    border-radius: 8px;
    background: #dfe3e9 center/cover no-repeat;
    box-shadow: var(--shadow-lg);
    margin-inline-end: -70px;   /* تتراكب فوق المربع الأحمر مثل الموقع الأم */
}
.about-red {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #c0392b, #a52a1d);
    color: #fff;
    padding: clamp(34px, 5vw, 70px) clamp(30px, 5vw, 80px);
    padding-inline-start: clamp(70px, 8vw, 120px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* درع TAILG الباهت داخل المربع */
.about-shield {
    position: absolute;
    inset-inline-end: -8%;
    top: 8%;
    width: 70%;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, .07);
    clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%);
    pointer-events: none;
}
.about-red h2 {
    font-family: 'Bebas Neue', 'Tajawal', sans-serif;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    letter-spacing: 1px;
    margin-bottom: 18px;
}
.about-red p {
    position: relative;
    max-width: 520px;
    line-height: 2;
    color: rgba(255, 255, 255, .92);
    font-size: .95rem;
}
.about-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    padding: 10px 26px;
    border: 1.5px solid rgba(255, 255, 255, .7);
    color: #fff;
    font-weight: 700;
    width: fit-content;
    border-radius: 4px;
    transition: background .2s ease;
}
.about-more:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- شبكة الأخبار ---------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.news-card { display: block; color: inherit; }
.news-img {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    background: #e8eaee center/cover no-repeat;
    transition: transform .3s ease, box-shadow .3s ease;
}
.news-card:hover .news-img { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.news-card time {
    display: block;
    margin: 14px 0 6px;
    color: var(--clr-muted);
    font-size: .82rem;
    font-weight: 700;
}
.news-card h3 {
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.75;
    color: #23262c;
    transition: color .2s ease;
}
.news-card:hover h3 { color: var(--clr-accent); }

/* ---------- تجاوب الأقسام الجديدة ---------- */
@media (max-width: 900px) {
    .stats-band { grid-template-columns: 1fr 1fr; }
    .stat-cell:nth-child(3) { border-inline-start: 0; }
    .about-block { grid-template-columns: 1fr; }
    .about-photo {
        min-height: 220px;
        margin-inline-end: 0;
        margin-bottom: -30px;
        width: 88%;
        margin-inline-start: auto;
    }
    .about-red { min-height: auto; padding: 56px 26px 34px; }
    .news-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   إصلاح المنسدلة المخفية + طبقات العرض (v12)
   ------------------------------------------------------------
   بطاقة المنتج عليها overflow:hidden لتدوير الزوايا — وهذا كان
   يقص قائمة التواصل المنفتحة ويخفيها. عند فتح القائمة نسمح
   بالظهور ونرفع البطاقة فوق جاراتها.
   ============================================================ */
.product-card:has(.contact-dd[open]),
.tg-item:has(.contact-dd[open]) {
    overflow: visible;
    z-index: 60;
}
/* نحافظ على تدوير زوايا الصورة حتى مع overflow المفتوح */
.product-card .product-media,
.product-card .product-media img {
    border-radius: var(--radius) var(--radius) 0 0;
}
.contact-dd-menu { z-index: 80; }

/* ============================================================
   أكورديون الفئات + بنر الفئة + بطاقة الخريطة (v13)
   ============================================================ */

/* ---------- أكورديون الفئات (مثل الموقع الأم) ----------
   كل بطاقة عمود ضيق يظهر ربع صورتها، وعند مرور الماوس
   تتوسع البطاقة وتكشف الصورة كاملة والبقية تنضغط */
.cat-accordion {
    display: flex;
    gap: 12px;
    height: clamp(340px, 46vw, 520px);
}
.cat-acc-card {
    position: relative;
    flex: 1;                              /* ربع العرض لكل بطاقة */
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 20px;
    transition: flex .55s cubic-bezier(.4, 0, .2, 1);
}
.cat-acc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 10, 14, .72), rgba(8, 10, 14, .05) 55%);
    transition: background .4s ease;
}
.cat-accordion:hover .cat-acc-card       { flex: .7; }   /* البقية تنضغط */
.cat-accordion .cat-acc-card:hover       { flex: 3; }    /* الممرَّر عليها تتوسع وتكشف الصورة كاملة */
.cat-acc-card:hover::before {
    background: linear-gradient(to top, rgba(8, 10, 14, .6), transparent 60%);
}
.cat-acc-en {
    position: relative;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
}
.cat-acc-ar {
    position: relative;
    color: rgba(255, 255, 255, .85);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    max-height: 0;
    transition: opacity .35s ease .12s, max-height .35s ease;
}
.cat-acc-card:hover .cat-acc-ar { opacity: 1; max-height: 2em; }

/* ---------- بنر الفئة أعلى صفحة المنتجات ---------- */
.cat-banner {
    position: relative;
    height: clamp(240px, 38vw, 460px);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.cat-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 10, 14, .65), rgba(8, 10, 14, .05) 55%);
}
.cat-banner-text {
    position: relative;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 20px 30px;
    color: #fff;
}
.cat-banner-en {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: .95rem;
    color: rgba(255, 255, 255, .8);
    text-transform: uppercase;
}
.cat-banner-text h1 {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 800;
    margin-top: 4px;
}

/* ---------- بطاقة الخريطة بصفحة اتصل بنا ---------- */
.map-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.map-card iframe {
    display: block;
    width: 100%;
    height: clamp(300px, 44vw, 460px);
    border: 0;
}
.map-btn {
    position: absolute;
    bottom: 18px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
[dir="ltr"] .map-btn { transform: translateX(-50%); }

/* ---------- تجاوب الموبايل ---------- */
@media (max-width: 760px) {
    /* بالموبايل ماكو ماوس — الأكورديون يصير شبكة 2×2 بصور كاملة */
    .cat-accordion { flex-direction: column; height: auto; }
    .cat-acc-card { min-height: 170px; flex: none !important; }
    .cat-acc-ar { opacity: 1; max-height: 2em; }
    .cat-banner { height: 220px; }
}

/* ============================================================
   أكورديون مطابق للموقع الأم + شريط الإعلان (v14)
   ============================================================ */

/* الأولى موسعة افتراضياً (مثل E-MOTORCYCLE بالموقع الأم) */
.cat-acc-card.is-open { flex: 3.2; }
.cat-acc-card.is-open .cat-acc-ar { opacity: 1; max-height: 2em; }

/* عند مرور الماوس على أي بطاقة: هي تتوسع والبقية (ومنها الأولى) تنضغط */
.cat-accordion:hover .cat-acc-card,
.cat-accordion:hover .cat-acc-card.is-open { flex: .75; }
.cat-accordion:hover .cat-acc-card.is-open .cat-acc-ar { opacity: 0; max-height: 0; }
.cat-accordion .cat-acc-card:hover,
.cat-accordion:hover .cat-acc-card.is-open:hover { flex: 3.2; }
.cat-accordion .cat-acc-card:hover .cat-acc-ar { opacity: 1 !important; max-height: 2em !important; }

/* البطاقات المضغوطة: الاسم وسطي أسفل البطاقة مثل الموقع الأم */
.cat-acc-card:not(:hover):not(.is-open) { align-items: center; }
.cat-accordion:hover .cat-acc-card.is-open:not(:hover) { align-items: center; }
.cat-acc-card { align-items: flex-start; }
.cat-acc-card:hover, .cat-accordion:not(:hover) .cat-acc-card.is-open { align-items: flex-start; }

/* شريط الإعلان أعلى الموقع (يُدار من لوحة الإدارة) */
.announce-bar {
    background: var(--clr-accent);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: .88rem;
    padding: 9px 16px;
    position: relative;
    z-index: 130;
}

@media (max-width: 760px) {
    .cat-acc-card.is-open { flex: none !important; }
}

/* ============================================================
   رفع الصور من صفحة المنتج (وضع الإدارة) + ترقيم الصفحات (v15)
   ============================================================ */

/* غلاف الصورة القابلة للرفع — يظهر فقط للأدمن */
.aimg-form { display: contents; }
.aimg-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: pointer;
}
.aimg-hint {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    background: rgba(205,25,40, .92);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    opacity: .92;
    transition: opacity .2s ease;
}
[dir="ltr"] .aimg-hint { transform: translateX(-50%); }
.aimg-wrap:hover .aimg-hint { opacity: 1; }
.aimg-wrap:hover img { outline: 3px dashed rgba(205,25,40, .6); outline-offset: 4px; }

/* شريط أرقام الصفحات */
.tg-pager {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 38px;
    flex-wrap: wrap;
}
.tg-pager a {
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid var(--clr-line);
    font-weight: 800;
    color: #23262c;
    transition: all .2s ease;
}
.tg-pager a:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.tg-pager a.on {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: #fff;
}
#plist { scroll-margin-top: calc(var(--header-h) + 10px); }

/* ============================================================
   مبدل اللغات الثلاث (v16)
   ============================================================ */
.lang-switch {
    display: inline-flex;
    gap: 4px;
    margin-inline-start: 14px;
    background: rgba(127, 135, 150, .14);
    border-radius: 999px;
    padding: 4px;
}
.lang-switch a {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 28px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .5px;
    color: inherit;
    opacity: .75;
}
.lang-switch a.on {
    background: var(--clr-accent);
    color: #fff;
    opacity: 1;
}
@media (max-width: 900px) {
    /* منع تمدد المبدل على كامل عرض القائمة العمودية */
    .lang-switch {
        margin: 10px auto 0;
        align-self: center;
        width: fit-content;
    }
}

/* ============================================================
   منسدلات التنقل الحمراء + مبدل لغة الكرة الأرضية (v18)
   — نفس أسلوب الموقع الأم tailg.com —
   ============================================================ */
.nav-dd { position: relative; display: inline-flex; align-items: center; }

/* اللوحة الحمراء المنسدلة */
.dd-panel {
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-start: -18px;
    min-width: 215px;
    background: #c24a41;
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 90;
}
/* جسر غير مرئي حتى ما تختفي اللوحة أثناء نزول الماوس */
.dd-panel::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}
.nav-dd:hover .dd-panel,
.nav-dd:focus-within .dd-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dd-panel a {
    color: #fff !important;
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 9px;
    opacity: .95;
    transition: opacity .15s, transform .15s;
}
.dd-panel a:hover { opacity: 1; transform: translateX(-3px); }
[dir="ltr"] .dd-panel a:hover { transform: translateX(3px); }
.dd-panel a.on { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.dd-panel.dd-end { inset-inline-start: auto; inset-inline-end: -10px; min-width: 150px; }

/* زر الكرة الأرضية */
.lang-globe > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 10px;
}
.lang-globe svg { width: 21px; height: 21px; }
.lang-globe b { font-size: .74rem; font-weight: 800; letter-spacing: .5px; }
.lang-globe i { font-style: normal; font-size: .6rem; opacity: .7; transition: transform .2s; }
.lang-globe:hover i { transform: rotate(180deg); }

/* الموبايل: القائمة عمودية — الروابط الفرعية تظهر دائماً بمسافة بادئة */
@media (max-width: 900px) {
    .nav-dd { flex-direction: column; align-items: stretch; }
    .dd-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        min-width: 0;
        padding: 6px 18px 10px;
        gap: 12px;
    }
    .dd-panel::before { display: none; }
    .dd-panel a { color: inherit !important; opacity: .8; font-size: .82rem; }
    .dd-panel.dd-end { padding-top: 6px; }
    .lang-globe > a { justify-content: center; margin: 4px 0 0; }
}

/* ============================================================
   ضغط المنسدلات نهائياً: 3 خيارات = 3 أسطر بلا أي فراغ (v20)
   قواعد حاسمة تتغلب على أي توريث من روابط التنقل
   ============================================================ */
.dd-panel {
    gap: 0 !important;
    padding: 8px 6px !important;
    min-width: 185px;
}
.dd-panel.dd-end { min-width: 135px; }
.dd-panel a {
    display: block !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
    font-size: .86rem !important;
    border-radius: 8px;
}
.dd-panel a:hover { background: rgba(255, 255, 255, .12); transform: none; }
.dd-panel a::after { display: none !important; }
@media (max-width: 900px) {
    .dd-panel { padding: 2px 14px 6px !important; }
    .dd-panel a { padding: 8px 6px !important; font-size: .95rem !important; }
}

/* ============================================================
   شريط الإعلان: أسفل الشاشة + نص متحرك (v21)
   ============================================================ */
.announce-bar {
    position: fixed !important;
    bottom: 0;
    top: auto !important;
    inset-inline: 0;
    z-index: 95;
    background: var(--clr-accent);
    color: #fff;
    overflow: hidden;
    padding: 11px 0 !important;
    font-weight: 700;
    font-size: .88rem;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
    text-align: initial !important;
}
/* مسافة بنهاية الصفحة حتى الشريط ما يغطي آخر الفوتر */
.announce-spacer { height: 42px; }

/* النص المتكرر يمشي بحلقة مغلقة سلسة */
.announce-track {
    display: flex !important;
    width: max-content !important;
    will-change: transform;
    animation: tg-marquee 70s linear infinite !important;
}
.announce-track span {
    white-space: nowrap;
    padding-inline: 45px;
}
@keyframes tg-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }        /* بالعربي/الكردي: يمشي لليمين */
}
[dir="ltr"] .announce-track { animation-name: tg-marquee-ltr !important; }
@keyframes tg-marquee-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }       /* بالإنجليزي: يمشي لليسار */
}
/* حوم عليه يوگف حتى ينقرأ */
.announce-bar:hover .announce-track { animation-play-state: paused; }

/* ============================================================
   v26 — إصلاح شامل للتلفون:
   1) منع تضخيم الخطوط التلقائي بكل صفحات الموقع
   2) خط كامل الدعم للحروف الكردية (سۆرانی)
   3) إعادة بناء قائمة الموبايل: ترتيب وفواصل ومنسدلات ولغات
   ============================================================ */

/* 1) الخطوط: منع التضخيم + دعم الكردي */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body { font-family: 'Tajawal', 'Noto Sans Arabic', Tahoma, sans-serif; }
html[lang="ku"] body,
html[lang="ku"] input,
html[lang="ku"] textarea,
html[lang="ku"] button {
    font-family: 'Noto Sans Arabic', 'Tajawal', Tahoma, sans-serif;
}

/* 3) قائمة الموبايل المرتبة */
@media (max-width: 900px) {
    .main-nav {
        padding: 18px 26px 40px;
        gap: 0;
        overflow-y: auto;
        align-items: stretch;
    }
    /* الروابط الرئيسية: صف كامل بفاصل سفلي موحد */
    .main-nav > a,
    .nav-dd > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 2px !important;
        font-size: 1.05rem !important;
        border-bottom: 1px solid #eef0f3;
    }
    .main-nav > a::after,
    .nav-dd > a::after { display: none !important; }
    .nav-dd {
        display: block !important;
        width: 100%;
    }
    /* اللوحة الفرعية: صندوق رمادي هادئ بمسافة بادئة */
    .nav-dd .dd-panel {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: #f7f8fa !important;
        border-radius: 10px;
        margin: 8px 0 14px;
        padding: 4px 14px !important;
        min-width: 0 !important;
        width: 100%;
    }
    .nav-dd .dd-panel a {
        color: var(--clr-ink) !important;
        font-size: .92rem !important;
        padding: 11px 4px !important;
        border-bottom: 1px dashed #e3e6eb;
        border-radius: 0;
        justify-content: flex-start;
    }
    .nav-dd .dd-panel a:last-child { border-bottom: 0; }
    .nav-dd .dd-panel a:hover { background: transparent; }

    /* اللغات: ثلاث كبسولات أفقية متوسطة بدل المنسدلة */
    .lang-globe { border-bottom: 0 !important; margin-top: 10px; }
    .lang-globe > a { display: none !important; }
    .lang-globe .dd-panel {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        gap: 10px;
        background: transparent !important;
        margin: 0;
        padding: 6px 0 !important;
    }
    .lang-globe .dd-panel a {
        flex: 0 0 auto;
        border: 1.5px solid var(--clr-line) !important;
        border-radius: 999px !important;
        padding: 9px 20px !important;
        font-weight: 800;
        font-size: .88rem !important;
        border-bottom-width: 1.5px !important;
        text-decoration: none !important;
    }
    .lang-globe .dd-panel a.on {
        background: var(--clr-accent) !important;
        border-color: var(--clr-accent) !important;
        color: #fff !important;
    }
}

/* v27 — صقل نهائي لقائمة الموبايل: محاذاة موحدة وبداية ثابتة */
@media (max-width: 900px) {
    .main-nav { text-align: start; padding-top: 14px; }
    .main-nav > a,
    .nav-dd > a { justify-content: flex-start; }
    .nav-cta { align-self: stretch; text-align: center; }
}

/* ============================================================
   v28 — زر ارجع لفوق + مشاركة الموديل + شارة نفذت الكمية
   ============================================================ */
.to-top {
    position: fixed;
    bottom: 64px;
    inset-inline-end: 16px;
    z-index: 94;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--clr-accent);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(205,25,40, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .25s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }

.share-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.share-row span { font-weight: 800; color: #6b7280; font-size: .88rem; }
.sh {
    border: 0;
    border-radius: 999px;
    padding: 9px 20px;
    font: inherit;
    font-weight: 800;
    font-size: .84rem;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.sh-wa { background: #1faa53; }
.sh-fb { background: #1877f2; }
.sh-cp { background: #3a4150; }
.sh:hover { filter: brightness(1.1); }

.product-img { position: relative; }
.soldout {
    position: absolute;
    top: 12px;
    inset-inline-start: -34px;
    background: #b02a1e;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    padding: 6px 40px;
    transform: rotate(-38deg);
    letter-spacing: 1px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
[dir="ltr"] .soldout { transform: rotate(38deg); }

/* v29 — حاسبة توفير البنزين */
.fuel-calc { background: linear-gradient(135deg, #14181f, #23262c); color: #fff; border-radius: 16px; padding: 22px 24px; text-align: center; }
.fuel-calc h3 { font-size: 1.05rem; margin-bottom: 12px; }
.fc-row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.fc-row label { font-size: .84rem; color: #aab2bf; font-weight: 700; }
.fc-row input { width: 110px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #3a4150; background: #1d222b; color: #fff; font: inherit; text-align: center; }
.fc-row button { border: 0; border-radius: 999px; padding: 10px 26px; background: var(--clr-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.fc-out { margin-top: 12px; font-size: 1.05rem; font-weight: 800; color: #4ade80; min-height: 1.4em; }
.fuel-calc .hint { color: #6b7280; display: block; margin-top: 6px; }

/* ============================================================
   v30 — مساعد TAILG الذكي 🤖 (وحذف زر السهم)
   ============================================================ */
.to-top { display: none !important; }

.ai-fab {
    position: fixed;
    bottom: 62px;
    inset-inline-end: 16px;
    z-index: 96;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-accent), #9e0410);
    font-size: 1.7rem;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(205,25,40, .4);
    display: grid;
    place-items: center;
    transition: transform .2s, opacity .2s;
    animation: ai-pulse 2.6s infinite;
}
.ai-fab:hover { transform: scale(1.08); }
.ai-fab.hide { opacity: 0; pointer-events: none; }
@keyframes ai-pulse {
    0%, 100% { box-shadow: 0 10px 26px rgba(205,25,40, .4); }
    50% { box-shadow: 0 10px 26px rgba(205,25,40, .4), 0 0 0 12px rgba(205,25,40, .08); }
}

.ai-panel {
    position: fixed;
    bottom: 58px;
    inset-inline-end: 12px;
    z-index: 97;
    width: min(370px, calc(100vw - 24px));
    height: min(520px, calc(100vh - 120px));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.97);
    transition: all .25s ease;
}
.ai-panel.open { opacity: 1; visibility: visible; transform: none; }

.ai-head {
    background: linear-gradient(135deg, #14181f, #23262c);
    color: #fff;
    padding: 13px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .92rem;
}
.ai-head button { background: none; border: 0; color: #9aa3b0; font-size: 1.1rem; cursor: pointer; }
.ai-head button:hover { color: #fff; }

.ai-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f4f6f9; }
.ai-m { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .84rem; line-height: 1.75; }
.ai-bot { background: #fff; color: #1c212b; align-self: flex-start; border-start-start-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.ai-me { background: var(--clr-accent); color: #fff; align-self: flex-end; border-start-end-radius: 4px; }

.ai-card {
    display: block;
    margin-top: 8px;
    background: #f7f8fa;
    border: 1.5px solid #e7eaef;
    border-radius: 10px;
    padding: 8px 12px;
    text-decoration: none;
    transition: border-color .15s;
}
.ai-card:hover { border-color: var(--clr-accent); }
.ai-card b { display: block; color: var(--clr-accent); font-size: .84rem; }
.ai-card span { color: #6b7280; font-size: .72rem; }

.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; }
.ai-chip {
    border: 1.5px solid #d7dbe2;
    background: #fff;
    border-radius: 999px;
    padding: 7px 13px;
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.ai-chip:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

.ai-form { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #eceff3; }
.ai-form input { flex: 1; border: 1.5px solid #dde1e8; border-radius: 999px; padding: 10px 16px; font: inherit; font-size: .84rem; }
.ai-form input:focus { outline: none; border-color: var(--clr-accent); }
.ai-form button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--clr-accent); color: #fff; font-size: 1rem; cursor: pointer; flex: 0 0 auto; }

.ai-dots { display: inline-flex; gap: 4px; }
.ai-dots b { width: 7px; height: 7px; border-radius: 50%; background: #c3c9d2; animation: ai-b 1.2s infinite; }
.ai-dots b:nth-child(2) { animation-delay: .2s; }
.ai-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes ai-b { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }

@media (max-width: 480px) {
    .ai-panel { bottom: 54px; inset-inline: 8px; width: auto; }
}

/* ============================================================
   v31 — سد الفيضان الأفقي بالموبايل (الصفحة كانت أعرض من الشاشة)
   ============================================================ */
/* 1) القفل العام: مستحيل أي عنصر يفتح تمرير جانبي */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
/* 2) شريطة "نفذت الكمية" وأي شارة تنحصر داخل إطار الصورة */
.product-img { overflow: hidden; }
/* 3) الصور والوسائط ما تفوت عرض حاويتها أبداً */
img, video, iframe { max-width: 100%; }
/* 4) صف الفئات بالموبايل: سطر واحد ينسحب بالإصبع (بدل التراكب الأعوج) */
@media (max-width: 900px) {
    .tg-tabs-inner {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        justify-content: flex-start;
        padding-inline: 12px;
    }
    .tg-tabs-inner::-webkit-scrollbar { display: none; }
    .tg-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ============================================================
   v32 — أزرار البطاقة بالموبايل: تنحصر داخل الشاشة بلا فيضان
   ============================================================ */
@media (max-width: 900px) {
    .product-actions {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }
    .product-actions .contact-dd,
    .product-actions > .btn {
        flex: 1 1 40%;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
    }
    .product-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding-inline: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   v33 — الحسم النهائي لأزرار البطاقة بالموبايل:
   عمودية، كل زر بصف كامل — لا تداخل ولا فيضان ولا وجع راس
   ============================================================ */
@media (max-width: 900px) {
    .product-actions {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .product-actions .contact-dd,
    .product-actions > .btn {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .product-actions .btn {
        width: 100% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* v34 — الحاوية الصحيحة لأزرار صفوف المنتجات: tg-item-cta */
@media (max-width: 1100px) {
    .tg-item-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .tg-item-cta .contact-dd,
    .tg-item-cta .btn,
    .tg-item-cta .tg-learn {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ===== branded image placeholder (missing product photo) — batch 2 ===== */
.product-img.is-ph { position: relative; background: #1c212b; overflow: hidden; }
.product-img.is-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-img.is-ph .ph-name {
    position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
    background: rgba(205,25,40,.92); color: #fff; font-weight: 800;
    font-size: .9rem; padding: 5px 14px; border-radius: 999px;
    white-space: nowrap; max-width: 88%; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

/* ===== batch 4: Bebas Neue على نص العرض اللاتيني (العربي يرجع تلقائياً لـTajawal) ===== */
.logo-text, .product-name { font-family: 'Bebas Neue', var(--font-main); letter-spacing: .6px; }
.product-name { font-size: 1.55rem; }