/*
Theme Name: Gargour Child
Theme URI: https://gargour.com/
Description: Child theme for Divi 5 - Gargour Technologies L.L.C (bilingual EN/AR, RTL ready).
Author: Mostafa Abdelazim
Author URI: https://mostafaabdelazim.com/
Template: Divi
Version: 1.1.0
Text Domain: gargour-child
Requires at least: 6.0
Requires PHP: 7.4
*/
/* ==========================================================================
فهرس الملف
1. المتغيرات (ألوان، أبعاد، خطوط)
2. الخطوط والنصوص (إنجليزي / عربي)
3. كلاسات مساعدة عامة (utilities)
3b. التخطيط العام (هامش الأقسام)
4. الهيدر
4.1 أزرار الإجراءات: Call / WhatsApp / Quote list
4.2 البحث
4.3 شريط التنقل (Section 2)
4.4 المنيو على الديسكتوب (DiviFlash Advanced Menu + Mega Menu)
4.5 زرار اللغة
4.5b شريط التنقل + زرار اللغة على الموبايل
4.5c الهامش الجانبي للهيدر
4.6 المنيو على الموبايل (slide من الجنب)
4.7 Hero slider (Divi Slider)
4.8 About stats (بوكسات الأرقام)
4.9 Category circles (carousel التصنيفات)
4.10 Brands strip (شريط اللوجوهات)
4.11 Product cards (Featured Products)
4.12 Featured products (DiviFlash CPT Grid)
4.13 Promo banner (بانر الصورة والزرارين)
4.14 Featured products (DiviFlash Product Carousel)
4.16 About (الصورة والنص و Mission/Vision)
4.17 Our Solutions (DiviFlash Content Carousel)
4.18 Promo cards (كارتين العروض)
4.19 Newsletter (كارت الاشتراك)
4.20 Footer (الفوتر العام)
4.21 Product category: الهيدر (Breadcrumb + H1 + وصف)
4.22 Product category: السايدبار والشريط والشبكة
4.23 Single product page
4.24 Quote list: الـ drawer والفورم
4.25 About page
4.26 Our Solutions page (CPT Filter)
5. تقليل الحركة (accessibility)
========================================================================== */
/* ==========================================================================
1. المتغيرات
لازم تتكرر نفس القيم في Divi 5 Design Variables عشان الـ Builder والكود يتطابقوا.
========================================================================== */
:root {
/* ألوان البراند */
--gg-brand: #2E3192; /* اللون الأساسي (Primary) */
--gg-brand-d: #23267A; /* hover للأزرق */
--gg-deep: #14164F; /* الأزرق الداكن (Secondary) */
--gg-tint: #E9ECFA; /* خلفية زرقاء فاتحة */
/* ألوان الـ Spectrum (تفاصيل صغيرة فقط) */
--gg-red: #E6232A;
--gg-orange: #F7941D;
--gg-yellow: #FFD200;
--gg-green: #39B54A;
--gg-cyan: #00AEEF;
--gg-violet: #662D91;
--gg-magenta: #EC008C;
--gg-spectrum: linear-gradient(90deg, #E6232A, #F7941D, #FFD200, #39B54A, #00AEEF, #2E3192, #662D91, #EC008C);
/* الرمادي والأسود */
--gg-ink-900: #0A0A0A; /* العناوين */
--gg-ink-700: #2B2B2B; /* النص الأساسي */
--gg-ink-500: #5C5C5C; /* النص الثانوي */
--gg-ink-300: #C9C9C9; /* حدود متوسطة */
--gg-ink-200: #E4E4E8; /* حدود خفيفة */
--gg-ink-100: #F2F3F7; /* خلفية الأقسام */
--gg-wa: #25D366; /* أخضر WhatsApp */
/* الأشكال والحركة */
--gg-r-sm: 10px;
--gg-r-md: 16px;
--gg-r-lg: 22px;
--gg-r-full: 999px;
--gg-ease: cubic-bezier(.16, 1, .3, 1);
/* التخطيط */
--gg-gutter: clamp(16px, 3vw, 32px); /* الهامش الجانبي */
--gg-wrap: 1240px; /* أقصى عرض للمحتوى */
/* الخط الافتراضي (إنجليزي) */
--gg-font: "IBM Plex Sans", system-ui, sans-serif;
}
/* في العربي: نبدّل الخط للنص والعناوين */
html[lang^="ar"],
html[dir="rtl"] {
--gg-font: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
--gg-font-h: "Cairo", system-ui, sans-serif;
}
/* ==========================================================================
2. الخطوط والنصوص
========================================================================== */
body {
font-family: var(--gg-font);
color: var(--gg-ink-700);
}
/* العربي: سطر أعلى وبدون letter-spacing (بيقطّع الحروف المتصلة) */
html[lang^="ar"] body,
html[dir="rtl"] body {
line-height: 1.85;
letter-spacing: 0;
}
/* العناوين العربية بخط Cairo */
html[lang^="ar"] :is(h1, h2, h3, h4, h5, h6),
html[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--gg-font-h);
letter-spacing: 0;
}
/* الأرقام والإيميلات تفضل LTR جوه الصفحات العربية */
.gg-ltr,
a[href^="tel:"],
a[href^="mailto:"] {
direction: ltr;
unicode-bidi: isolate;
}
/* ==========================================================================
3. كلاسات مساعدة (تتحط في خانة CSS Class لأي عنصر في Divi)
========================================================================== */
/* شريط الـ spectrum الرفيع تحت عناوين الأقسام (بيتعكس تلقائي في RTL) */
.gg-spectrum-bar::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin-block-start: 12px;
background: var(--gg-spectrum);
border-radius: var(--gg-r-full);
}
/* كارت المنتج / الحل: حد خفيف ورفع عند hover */
.gg-card {
border: 1px solid var(--gg-ink-200);
border-radius: var(--gg-r-md);
transition: transform .25s var(--gg-ease), box-shadow .25s var(--gg-ease);
}
.gg-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(10, 10, 10, .08);
}
/* حلقة تركيز واضحة للكيبورد (accessibility) */
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid rgba(46, 49, 146, .35);
outline-offset: 2px;
}
/* نص مخفي بصريًا لكن مقروء لقارئات الشاشة */
.gg-sr {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* عكس الأيقونات الاتجاهية في RTL (مش اللوجو) */
html[dir="rtl"] .gg-flip {
transform: scaleX(-1);
}
/* ==========================================================================
3b. التخطيط العام (Global layout): هامش جانبي موحّد لكل الأقسام
كل Section ياخد هامش 16px على الموبايل ويكبر لحد 32px، والـ Row بيقف عند 1240px ومتوسّط.
عشان كده مش لازم تظبط padding و width في كل Section و Row من الـ Builder.
========================================================================== */
.et-l--body .et_pb_section,
.et-l--footer .et_pb_section,
#main-content .et_pb_section {
padding-inline: var(--gg-gutter) !important;
}
.et-l--body .et_pb_section > .et_pb_row,
.et-l--footer .et_pb_section > .et_pb_row,
#main-content .et_pb_section > .et_pb_row {
width: 100%;
max-width: var(--gg-wrap);
margin-inline: auto;
padding-inline: 0;
}
/* ==========================================================================
4. الهيدر
========================================================================== */
/* ---------- 4.1 أزرار الإجراءات (DiviFlash Advanced Blurb) ----------
الكلاس gg-act على كل Blurb، و gg-open-quote على Quote list */
.gg-act .df_ab_blurb_container {
display: flex;
flex-direction: column; /* الأيقونة فوق النص */
align-items: center;
gap: 2px;
min-width: 62px;
padding: 6px 8px;
border-radius: var(--gg-r-sm);
cursor: pointer;
position: relative; /* عشان الـ badge */
transition: background .2s;
}
.gg-act:hover .df_ab_blurb_container { background: var(--gg-ink-100); }
.gg-act .df_ab_blurb_image { margin: 0; line-height: 1; }
.gg-act .df-blurb-icon,
.gg-act svg {
font-size: 24px;
width: 24px;
height: 24px;
color: var(--gg-ink-900);
fill: currentColor;
}
.gg-act .df_ab_blurb_title {
margin: 0;
font: 500 .74rem/1.2 var(--gg-font);
color: var(--gg-ink-900);
}
/* عدّاد Quote list (دايرة حمراء، الـ JS هيملّي الرقم) */
.gg-open-quote .gg-badge {
position: absolute;
top: 0;
inset-inline-end: 10px;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: var(--gg-r-full);
background: var(--gg-red);
color: #fff;
font: 600 .7rem/19px var(--gg-font);
text-align: center;
}
/* ---------- 4.2 البحث (Divi Search module) ----------
الكلاس gg-search على الـ module */
.gg-search input[type=search],
.gg-search input.et_pb_s {
height: 46px;
background: var(--gg-ink-100);
border: 1px solid var(--gg-ink-200);
border-radius: var(--gg-r-sm);
padding-inline: 16px 56px; /* مساحة لزرار البحث */
font: 400 .95rem/1.2 var(--gg-font);
}
.gg-search input:focus {
background: #fff;
border-color: var(--gg-brand);
box-shadow: 0 0 0 3px rgba(46, 49, 146, .2);
outline: none;
}
.gg-search .et_pb_searchsubmit {
background: var(--gg-brand);
color: #fff;
border-radius: 0 var(--gg-r-sm) var(--gg-r-sm) 0;
}
html[dir=rtl] .gg-search .et_pb_searchsubmit {
border-radius: var(--gg-r-sm) 0 0 var(--gg-r-sm);
}
/* زرار البحث: عدسة بدل كلمة Search (SVG مدمج، من غير طلب خارجي) */
.gg-search .et_pb_searchsubmit {
/* gg-search-icon */
width: 62px !important;
font-size: 0 !important; /* نخفي النص */
background: var(--gg-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / 22px no-repeat !important;
border: 0 !important;
}
.gg-search .et_pb_searchsubmit:hover { background-color: var(--gg-brand-d) !important; }
/* ---------- 4.2b تخطيط الصف العلوي للهيدر (Section 1 في Theme Builder) ----------
لوجو | بحث (ياخد المتبقي) | أزرار الإجراءات (آخر السطر)
بيستهدف Row رقم 0 في الهيدر، فمش محتاج كلاس إضافي */
.et_pb_section_0_tb_header .et_pb_row_0_tb_header {
align-items: center;
gap: 24px;
}
.et_pb_row_0_tb_header > .et_pb_column {
width: auto !important;
flex: 0 0 auto !important; /* بدل ثلث ثلث (8/24) */
}
.et_pb_row_0_tb_header > .et_pb_column:nth-child(2) {
flex: 1 1 auto !important; /* عمود البحث ياخد المتبقي */
max-width: 620px;
}
.et_pb_row_0_tb_header > .et_pb_column:last-child {
display: flex !important;
flex-direction: row !important; /* الأزرار جنب بعض مش تحت بعض */
align-items: center;
gap: 12px;
margin-inline-start: auto; /* آخر السطر (يمين في EN، شمال في AR) */
}
.et_pb_row_0_tb_header .et_pb_image_wrap img { display: block; height: 44px; width: auto; }
/* مربع البحث: نشيل الحد والخلفية الافتراضية للـ module */
.gg-search.et_pb_search { border: 0 !important; background: none !important; margin: 0; padding: 0; }
.gg-search form, .gg-search form > div { width: 100%; }
/* عنوان الزرار جوه Blurb هو لينك، نخليه يورّث الخط واللون */
.gg-act .df_ab_title_link { font: inherit !important; color: inherit !important; text-decoration: none; }
/* موبايل (767px وأقل): سطر أول = اللوجو شمال + 3 أيقونات يمين (من غير كتابة)،
وسطر تاني = البحث بعرض كامل */
@media (max-width: 767px) {
.et_pb_row_0_tb_header {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px 12px;
}
/* اللوجو: أول عنصر */
.et_pb_row_0_tb_header > .et_pb_column:nth-child(1) {
order: 1;
flex: 0 0 auto !important;
max-width: none !important;
}
/* الأيقونات: نفس سطر اللوجو، في آخره */
.et_pb_row_0_tb_header > .et_pb_column:last-child {
order: 2;
flex: 0 0 auto !important;
max-width: none !important;
margin-inline-start: auto;
gap: 4px;
}
/* البحث: سطر لوحده بعرض كامل */
.et_pb_row_0_tb_header > .et_pb_column:nth-child(2) {
order: 3;
flex: 1 1 100% !important;
max-width: none !important;
}
.et_pb_row_0_tb_header .et_pb_image_wrap img { height: 40px; }
/* الأيقونات بس: النص يتخبى بصريًا (يفضل لقارئات الشاشة) وحجم الأيقونة أكبر شوية */
.gg-act .df_ab_blurb_container { min-width: 0; padding: 8px; }
.gg-act .df-blurb-icon,
.gg-act svg { font-size: 26px; width: 26px; height: 26px; }
.gg-act .df_ab_blurb_content_container {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
}
/* ---------- 4.3 شريط التنقل (Section 2، الكلاس gg-nav) ---------- */
.gg-nav {
background: var(--gg-ink-100);
border-bottom: 1px solid var(--gg-ink-200);
padding: 0 !important; /* Divi بيكتب padding inline على السكشن */
}
.gg-nav .et_pb_row {
max-width: var(--gg-wrap);
min-height: 56px; /* زودناه من 46 عشان زرار Products الأكبر */
align-items: center;
gap: 6px;
padding-inline: 0; /* الهامش الجانبي على الـ Section (قسم 4.5c) */
}
/* DiviFlash بيوسّط المنيو: نخليه يبدأ من أول السطر ونخفي الأعمدة الفاضية */
.gg-nav .difl_advancedmenu .df-am-row .row-inner { justify-content: flex-start; }
.gg-nav .difl_advancedmenu .df-am-col:empty { display: none; }
.gg-nav .difl_advancedmenu .df-am-col.center { flex: 1; min-width: 0; text-align: start; }
/* ---------- 4.4 المنيو على الديسكتوب ----------
بنحصر الـ selectors في .df-normal-menu-wrap عشان ما تأثرش على منيو الموبايل */
/* القائمة الرئيسية: أفقية */
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 {
display: flex;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.menu-item-level-0 {
margin: 0;
padding: 0;
}
/* لينكات المستوى الأول */
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li > a {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 9px;
font: 500 .88rem/1 var(--gg-font);
color: var(--gg-ink-900);
background: none;
border-radius: var(--gg-r-sm);
white-space: nowrap;
transition: background .2s, color .2s;
}
/* Products (الـ Mega Menu) أثقل شوية */
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.df-mega-menu > a {
font-weight: 600;
padding-inline: 12px;
}
/* hover */
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li > a:hover,
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li:hover > a {
background: #fff;
color: var(--gg-brand);
}
/* الصفحة الحالية */
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.current-menu-item > a {
color: var(--gg-brand);
background: #fff;
}
/* تركيز الكيبورد */
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li > a:focus-visible {
outline: 3px solid rgba(46, 49, 146, .35);
outline-offset: -3px;
}
/* Products مميز: خلفية بلون البراند ونص أبيض (زي زرار)
لازم يفضل بعد قواعد hover/current اللي فوق عشان يكسبها */
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.df-mega-menu > a,
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.df-mega-menu.current-menu-item > a {
background: var(--gg-brand);
color: #fff;
margin-inline-end: 8px; /* مسافة بينه وبين Home */
padding: 16px 22px; /* أكبر من باقي اللينكات (14px 9px) */
font-size: 1rem; /* الباقي .88rem */
font-weight: 600;
gap: 10px;
}
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.df-mega-menu > a:hover,
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.df-mega-menu:hover > a {
background: var(--gg-brand-d); /* أغمق شوية عند hover والـ panel مفتوح */
color: #fff;
}
/* سهم الـ dropdown يمشي مع لون النص */
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.df-mega-menu > a .dropdown-arrow,
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.df-mega-menu > a .dropdown-arrow:before,
.gg-nav .df-normal-menu-wrap .df-menu-nav-level-0 > li.df-mega-menu > a .dropdown-arrow:after {
color: #fff;
border-color: #fff;
}
/* لوحة الـ Mega Menu (الفتح والقفل بيتحكم فيه JS بتاع DiviFlash)
القياسات مأخوذة من التصميم المرجعي:
- عرض اللوحة = عرض الـ container (1240px)
- 4 أعمدة متساوية، وكل عمود حوالي 305px
- كل عنصر صندوق ارتفاعه حوالي 51px وخطه حوالي 17px */
.gg-nav .df-mega-menu-item {
width: min(1240px, calc(100vw - 2 * var(--gg-gutter))) !important;
max-width: none !important;
padding: 14px 16px !important; /* DiviFlash بيحط padding كبير، بنوحّده */
margin: 0 !important;
background: #fff;
border: 0;
border-radius: 22px; /* زوايا مدوّرة كبيرة زي المرجع */
box-shadow: 0 10px 30px rgba(10, 10, 10, .12);
}
/* الأعمدة: متساوية العرض، والعناصر بتبدأ من فوق */
.gg-nav .df-mega-menu-item .col {
flex: 1 1 0; /* عرض متساوي بدل على حسب المحتوى */
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-self: flex-start;
gap: 2px;
padding: 0; /* الـ padding على العنصر نفسه مش العمود */
}
.gg-nav .df-mega-menu-item li {
flex: none;
height: auto;
margin: 0;
list-style: none;
}
/* العنصر: صندوق بعرض العمود كله، قسم في سطر واحد */
.gg-nav .df-mega-menu-item li > a {
display: block;
padding: 12px 15px; /* ارتفاع الصندوق حوالي 45px */
font-family: var(--gg-font);
font-size: .92rem !important; /* كان 1.05rem. !important لأن DiviFlash بيكتب الحجم من إعدادات الـ module */
font-weight: 500;
line-height: 1.3 !important;
color: var(--gg-ink-900);
background: none;
border-radius: 12px;
white-space: nowrap !important; /* قسم في سطر واحد */
overflow: hidden;
text-overflow: ellipsis; /* لو اسم أطول من العمود يتقص بدل ما يكسر التصميم */
transition: background .2s, color .2s;
}
/* hover: خلفية زرقاء فاتحة ونص بلون البراند */
.gg-nav .df-mega-menu-item li > a:hover {
background: var(--gg-tint);
color: var(--gg-brand);
}
/* ---------- 4.5 زرار اللغة ----------
الكلاس gg-lang على الزرار نفسه () مش على العمود */
/* العمود اللي فيه الزرار: نزقّه لآخر السطر */
.gg-nav .et_pb_column:has(.gg-lang) {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* شكل الـ pill */
a.gg-lang.et_pb_button {
font: 600 .85rem/1 var(--gg-font);
color: var(--gg-ink-900);
background: #fff;
border: 1px solid var(--gg-ink-300);
border-radius: var(--gg-r-full);
padding: 9px 14px;
text-decoration: none;
transition: border-color .2s;
}
a.gg-lang.et_pb_button:hover {
border-color: var(--gg-ink-900);
background: #fff;
padding: 9px 14px; /* يمنع Divi من تحريك الـ padding عند hover */
}
a.gg-lang.et_pb_button:after { display: none; } /* إخفاء سهم hover بتاع Divi */
/* ---------- 4.5b شريط التنقل + زرار اللغة (تحسين الشكل والموبايل) ---------- */
/* لون النص بالقوة، لأن Divi بيكتب لون الزرار الأزرق الافتراضي بـ !important */
.gg-nav a.gg-lang.et_pb_button,
.gg-nav a.gg-lang.et_pb_button:visited {
color: var(--gg-ink-900) !important;
background: #fff !important;
border: 1px solid var(--gg-ink-300) !important;
border-radius: var(--gg-r-full) !important;
font-family: var(--gg-font) !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
.gg-nav a.gg-lang.et_pb_button:hover {
color: var(--gg-brand) !important;
border-color: var(--gg-brand) !important;
background: #fff !important;
}
/* موبايل: الهامبرجر شمال + اللغة يمين في نفس السطر (بدل ما يتكدسوا فوق بعض) */
@media (max-width: 767px) {
.gg-nav .et_pb_row {
flex-wrap: nowrap !important;
justify-content: space-between;
align-items: center;
min-height: 56px;
padding-inline: 0;
}
.gg-nav .et_pb_row > .et_pb_column {
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
}
.gg-nav .et_pb_row > .et_pb_column:first-child { flex: 1 1 auto !important; min-width: 0; }
.gg-nav .et_pb_column:has(.gg-lang) { margin-inline-start: auto; }
/* الهامبرجر على الحافة بدل ما يكون منزاح */
.gg-nav .difl_advancedmenu .df-am-col.center { text-align: start; }
.gg-nav .df-mobile-menu-button {
margin: 0 !important;
padding: 8px 0 !important;
text-align: start;
}
/* زرار اللغة أصغر شوية وأنضف */
.gg-nav a.gg-lang.et_pb_button {
padding: 9px 16px !important;
font-size: .88rem !important;
min-height: 38px;
}
}
/* ---------- 4.5c الهامش الجانبي للهيدر (الصفين) ----------
16px على الموبايل ويكبر لحد 32px على الشاشات الأكبر.
الصف نفسه max-width 1240px فيفضل متوسّط، والـ Section هو اللي بيدّي الهامش */
.et_pb_section_0_tb_header,
.gg-nav {
padding-inline: var(--gg-gutter) !important;
}
.et_pb_section_0_tb_header .et_pb_row,
.gg-nav .et_pb_row {
width: 100%;
max-width: var(--gg-wrap);
margin-inline: auto;
}
/* DiviFlash بيحط مسافة حوالين الهامبرجر: نصفّرها عشان يلزق في الهامش زي اللوجو */
.gg-nav .difl_advancedmenu .df-mobile-menu-wrap,
.gg-nav .difl_advancedmenu .df-am-col { padding-inline: 0; margin-inline: 0; }
/* ---------- 4.6 المنيو على الموبايل (slide من الجنب) ---------- */
@media (max-width: 980px) {
/* نخفي القائمة الأفقية (بتبان بدلها زرار الهامبرجر) */
.gg-nav .df-normal-menu-wrap .df-menu-wrap { display: none; }
/* زرار الهامبرجر / X يفضل فوق اللوحة */
.gg-nav .df-mobile-menu-button {
position: relative;
z-index: 10001;
color: var(--gg-ink-900);
}
/* لما اللوحة تتفتح: ننقل زرار X لأعلى طرف اللوحة (يمين في EN، شمال في AR)
عرض اللوحة = min(86vw, 340px)، فبنطرح منه مساحة الزرار.
--wp-admin--admin-bar--height بيزيح الزرار تحت شريط ووردبريس لو أنت مسجل دخول */
.gg-nav .difl_advancedmenu:has(.df-mobile-menu[style*="block"]) .df-mobile-menu-button {
position: fixed;
inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 14px);
inset-inline-start: calc(min(86vw, 340px) - 52px);
width: 38px;
height: 38px;
display: grid;
place-items: center;
padding: 0;
background: var(--gg-ink-100);
border-radius: var(--gg-r-full);
line-height: 1;
}
/* اللوحة نفسها: ثابتة على الجنب بعرض 340px كحد أقصى
الـ !important لأن DiviFlash بيكتب display/height inline أثناء الفتح */
.gg-nav .df-mobile-menu {
position: fixed !important;
inset-block: 0 !important;
inset-inline-start: 0 !important; /* شمال في EN، يمين في AR */
inset-inline-end: auto !important;
width: min(86vw, 340px) !important;
height: 100dvh !important;
margin: 0 !important;
padding: 72px 12px 24px !important; /* مساحة فوق لزرار الإغلاق */
overflow-y: auto;
background: #fff;
border: 0;
border-radius: 0;
box-shadow: 0 0 0 100vmax rgba(10, 10, 10, .45); /* خلفية معتمة حوالين اللوحة */
z-index: 10000;
--gg-from: -100%; /* اتجاه الدخول */
animation: ggSlideIn .3s var(--gg-ease);
}
html[dir=rtl] .gg-nav .df-mobile-menu { --gg-from: 100%; }
/* القائمة رأسية */
.gg-nav .df-mobile-menu .df-menu-nav-level-0 {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
/* لينكات اللوحة */
.gg-nav .df-mobile-menu li > a {
display: flex;
align-items: center;
justify-content: space-between; /* السهم في الطرف */
padding: 16px 14px;
font: 500 1.1rem/1.3 var(--gg-font); /* كان .95rem */
color: var(--gg-ink-900);
border-bottom: 1px solid var(--gg-ink-100);
white-space: normal;
}
.gg-nav .df-mobile-menu li.current-menu-item > a { color: var(--gg-brand); }
/* Products في لوحة الموبايل: خلفية زرقاء فاتحة ونص بلون البراند */
.gg-nav .df-mobile-menu .df-menu-nav-level-0 > li.df-mega-menu > a {
background: var(--gg-tint);
color: var(--gg-brand);
font-size: 1.1rem; /* نفس حجم باقي الروابط */
font-weight: 600;
border-radius: var(--gg-r-sm);
border-bottom: 0;
margin-bottom: 4px;
}
/* قائمة Products الفرعية (الفتح والقفل بيتحكم فيه JS) */
.gg-nav .df-mobile-menu .sub-menu {
background: var(--gg-ink-100);
border-radius: var(--gg-r-sm);
margin: 4px 0;
padding: 4px;
}
.gg-nav .df-mobile-menu .sub-menu li > a {
padding: 12px 14px;
font-size: 1rem; /* كان .88rem، أصغر من الرئيسي بدرجة واحدة */
border-bottom: 0;
}
}
/* حركة دخول اللوحة: من الجنب مع fade خفيف */
@keyframes ggSlideIn {
from { transform: translateX(var(--gg-from)); opacity: .6; }
to { transform: translateX(0); opacity: 1; }
}
/* ==========================================================================
4.7 Hero slider (Divi 5 Slider module، الكلاس gg-hero على الـ module)
========================================================================== */
.gg-hero {
border-radius: var(--gg-r-lg);
overflow: hidden;
background: #E8ECFA;
aspect-ratio: 12 / 5; /* نسبة الصورة (ديسكتوب 2400x1000) */
}
/* Divi بيكتب height بالـ px على .et_pb_container، فنثبّت الارتفاع على الـ slider */
.gg-hero .et_pb_slides,
.gg-hero .et_pb_slide { height: 100%; }
.gg-hero .et_pb_slide {
background-color: #E8ECFA;
background-size: cover;
background-position: center;
}
.gg-hero .et_pb_slide .et_pb_container {
height: 100% !important;
min-height: 0;
display: flex;
align-items: center;
justify-content: flex-start !important;
padding-inline: 0 !important;
}
.gg-hero .et_pb_slider_container_inner {
width: 100%;
display: flex;
justify-content: flex-start !important; /* النص على أول السطر (شمال EN / يمين AR) */
padding: 0;
}
/* عمود النص: 48% بحد أقصى 560px */
.gg-hero .et_pb_slide_description {
width: min(48%, 560px);
margin-inline-start: 0 !important; /* Divi بيحط margin:auto فيوسّط الصندوق */
margin-inline-end: auto !important;
align-items: flex-start;
text-align: start;
padding: clamp(20px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(52px, 5vw, 64px);
}
/* النصوص: داكنة (Divi بيحطها بيضاء لأن الـ layout "dark") */
.gg-hero .et_pb_slide_title {
padding: 0;
font-size: clamp(1.7rem, 3.3vw, 2.9rem) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: var(--gg-ink-900) !important;
}
.gg-hero .et_pb_slide_content { margin-top: 14px; }
.gg-hero .et_pb_slide_content,
.gg-hero .et_pb_slide_content p {
max-width: 44ch;
font-size: 1.02rem;
line-height: 1.6;
color: var(--gg-ink-700) !important;
}
/* الأزرار: زرار Divi الأصلي وزراري HTML (.gg-btn) بنفس الشكل */
.gg-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gg-hero .et_pb_more_button,
.gg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 12px 16px !important;
font: 600 .92rem/1.2 var(--gg-font) !important;
color: #fff !important;
background: var(--gg-brand) !important;
border: 2px solid transparent !important;
border-radius: var(--gg-r-sm) !important;
text-decoration: none;
transition: transform .3s var(--gg-ease), box-shadow .3s var(--gg-ease), background .2s;
}
.gg-hero .et_pb_more_button:after { display: none !important; } /* سهم hover بتاع Divi */
.gg-hero .et_pb_more_button:hover,
.gg-btn:hover { background: var(--gg-brand-d) !important; box-shadow: 0 8px 18px rgba(46, 49, 146, .3); }
.gg-btn svg { width: 20px; height: 20px; flex: none; }
.gg-btn-wa { background: var(--gg-wa) !important; color: var(--gg-ink-900) !important; }
.gg-btn-wa:hover { background: var(--gg-wa) !important; box-shadow: 0 8px 18px rgba(37, 211, 102, .35); }
/* الأسهم مش موجودة في التصميم الأصلي */
.gg-hero .et-pb-slider-arrows { display: none !important; }
/* الدوايل الكلاسيكية (.et-pb-controllers): أسفل أول السطر، 10px، والنشطة بلون البراند */
.gg-hero .et-pb-controllers {
position: absolute;
inset-inline: clamp(20px, 4vw, 56px) auto;
bottom: 16px;
width: auto;
padding: 0;
text-align: start;
display: flex;
gap: 8px;
}
.gg-hero .et-pb-controllers a {
display: block;
width: 10px !important;
height: 10px !important;
margin: 0 !important;
padding: 0;
font-size: 0; /* نخفي الرقم */
border-radius: 50%;
background: #9aa0d6 !important;
opacity: 1;
transition: background .2s, transform .3s var(--gg-ease);
}
.gg-hero .et-pb-controllers a.et-pb-active-control {
background: var(--gg-brand) !important;
transform: scale(1.2);
}
/* الـ controls: نخفي العدّاد و SWIPE ونحوّل الخطوط لدوائر 10px زي الأصل */
.gg-hero .et-pb-slider-bottom-controls {
position: absolute;
inset-inline: clamp(20px, 4vw, 56px) auto;
bottom: 16px;
display: flex;
justify-content: flex-start;
padding: 0;
}
.gg-hero .et-pb-slider-bottom-controls-counter,
.gg-hero .et-pb-slider-bottom-controls-swipe { display: none !important; }
.gg-hero .et-pb-slider-bottom-controls-progress { display: flex; gap: 8px; flex: none; width: auto; }
.gg-hero .et-pb-slider-bottom-controls-progress a {
display: block;
flex: none !important;
width: 10px !important;
height: 10px !important;
padding: 0;
font-size: 0; /* نخفي الرقم جوه اللينك */
border-radius: 50%;
background: #9aa0d6 !important;
opacity: 1;
transition: background .2s, transform .3s var(--gg-ease);
}
.gg-hero .et-pb-slider-bottom-controls-progress a.et-pb-active-control {
background: var(--gg-brand) !important;
transform: scale(1.2);
}
/* موبايل: صورة 4:3 فوق، والنص تحتها على #E8ECFA، والأزرار بعرض كامل */
@media (max-width: 760px) {
.gg-hero { aspect-ratio: auto; }
.gg-hero .et_pb_slides,
.gg-hero .et_pb_slide { height: auto; }
.gg-hero .et_pb_slide {
position: relative; /* الـ slides المخفية display:none فمفيش تكديس */
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
padding-top: 75%; /* ارتفاع الصورة 4:3: يفترض إن خلفية Phone هي صورة الموبايل 1200x900.
لو لسه صورة الديسكتوب (12:5) فالنسبة الصح 41.67% */
}
.gg-hero .et_pb_slide .et_pb_container { height: auto !important; }
.gg-hero .et_pb_slide_description { width: auto; padding: 18px 18px 56px; }
.gg-cta .gg-btn { flex: 1 1 100%; }
/* زرار Divi الأصلي بعرض كامل زي أزرار HTML */
.gg-hero .et_pb_button_wrapper { width: 100%; }
.gg-hero .et_pb_more_button { width: 100%; }
.gg-hero .et_pb_slide_title { font-size: 1.7rem !important; }
}
/* ==========================================================================
4.8 About stats: 3 بوكسات (1973 / 2 / 2022)
الكلاسات: gg-stats على الحاوية، gg-stat على كل بوكس،
gg-stat-num على الرقم، gg-stat-label على الوصف
========================================================================== */
.gg-stats {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 أعمدة متساوية حتى على الموبايل (زي الأصل) */
gap: 12px;
list-style: none !important; /* Divi بيحط bullets على القوائم */
margin: 0 !important;
padding: 0 !important; /* Divi بيحط padding شمال على ul */
}
.gg-stats > li,
.gg-stat {
list-style: none !important;
}
.gg-stat::marker { content: none; }
.gg-stat {
background: #EEF2FB;
border-radius: var(--gg-r-md);
padding: 16px 12px;
text-align: center;
}
.gg-stat-num,
.gg-stat-num * {
display: block;
margin: 0;
font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--gg-font) !important;
color: var(--gg-brand) !important;
}
.gg-stat-label,
.gg-stat-label * {
margin: 6px 0 0;
font: 400 .84rem/1.5 var(--gg-font) !important;
color: var(--gg-ink-700) !important;
}
/* نفس البوكسات لو اتبنت بـ modules الـ Builder: Row (gg-stats) فيه 3 أعمدة، كل عمود gg-stat فيه Text (gg-stat-num) و Text (gg-stat-label) */
.et_pb_row.gg-stats { margin-inline: auto !important; } /* الـ Row يفضل في النص (الـ margin:0 فوق كانت بتشيله) */
.et_pb_row.gg-stats > .et_pb_column { width: auto !important; min-width: 0; } /* 3 أعمدة متساوية حتى على الموبايل (زي الأصل) */
.et_pb_column.gg-stat { display: flex; flex-direction: column; align-items: center; gap: 0 !important; }
.et_pb_column.gg-stat .et_pb_text_inner,
.et_pb_column.gg-stat p { margin: 0 !important; padding: 0 !important; }
.et_pb_column.gg-stat .gg-stat-label { margin-top: 6px !important; }
/* ==========================================================================
4.9 Category circles (DiviFlash Content Carousel، الكلاس gg-cats على الـ module)
الصور PNG دواير جاهزة (category-icons/png/circle-512) فمش بنرسم الدايرة بالـ CSS
========================================================================== */
.gg-cats { --gg-circ: clamp(72px, 9vw, 104px); } /* قطر الدايرة */
/* مساحة جنب الـ carousel للأسهم */
.gg-cats .df_cc_inner_wrapper {
position: relative;
padding-inline: 56px;
}
/* العنصر: دايرة فوق، والاسم تحتها */
.gg-cats .df_cci_container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 6px;
text-align: center;
cursor: pointer;
}
.gg-cats .df_cci_image_container {
width: var(--gg-circ);
aspect-ratio: 1;
border-radius: 50%;
transition: transform .35s var(--gg-ease), box-shadow .25s;
}
.gg-cats .df_cci_image {
display: block;
width: 100% !important;
height: auto !important;
border-radius: 50%;
}
/* hover: رفع 3px وحلقة بلون البراند (زي الأصل) */
.gg-cats .swiper-slide:hover .df_cci_image_container {
transform: translateY(-3px);
box-shadow: 0 0 0 2px var(--gg-brand);
}
/* الاسم */
.gg-cats .df_cc_title {
margin: 0;
padding-inline: 4px;
font: 500 .86rem/1.3 var(--gg-font) !important;
color: var(--gg-ink-900) !important;
text-align: center;
overflow-wrap: anywhere;
hyphens: auto;
}
/* حاوية الأسهم في DiviFlash (الكلاس arrow-bottom) متحطة تحت: نلغي تموضعها
عشان الأسهم تتحسب من .df_cc_inner_wrapper (اللي position:relative) */
.gg-cats .df_cc_arrows {
position: static !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* الأسهم: دواير 44px على الجانبين، بمنتصف الدواير مش منتصف الـ carousel */
.gg-cats .df_cc_arrows .swiper-button-prev,
.gg-cats .df_cc_arrows .swiper-button-next {
position: absolute !important;
top: 50% !important; /* نص ارتفاع الدايرة + الاسم (زي الأصل) */
bottom: auto !important;
transform: translateY(-50%);
margin: 0 !important;
width: 44px !important;
height: 44px !important;
display: grid !important;
place-items: center;
background: #fff !important;
color: var(--gg-ink-900) !important;
border: 1px solid var(--gg-ink-300) !important;
border-radius: 50% !important;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.gg-cats .df_cc_arrows .swiper-button-prev { inset-inline-start: 0 !important; inset-inline-end: auto !important; left: auto; right: auto; }
.gg-cats .df_cc_arrows .swiper-button-next { inset-inline-end: 0 !important; inset-inline-start: auto !important; left: auto; right: auto; }
.gg-cats .df_cc_arrows .swiper-button-prev:hover,
.gg-cats .df_cc_arrows .swiper-button-next:hover {
background: var(--gg-brand) !important;
color: #fff !important;
border-color: var(--gg-brand) !important;
}
/* أيقونة السهم تمشي مع لون الزرار */
.gg-cats .df_cc_arrows .swiper-button-prev:before,
.gg-cats .df_cc_arrows .swiper-button-prev:after,
.gg-cats .df_cc_arrows .swiper-button-next:before,
.gg-cats .df_cc_arrows .swiper-button-next:after {
color: inherit !important;
font-size: 16px !important;
line-height: 1;
}
/* السهم الأول معطّل في أول العناصر لو loop مقفول */
.gg-cats .swiper-button-disabled { opacity: .35; cursor: default; }
/* موبايل: الأسهم مخفية (swipe بس) والـ carousel بعرض كامل */
@media (max-width: 560px) {
.gg-cats .df_cc_inner_wrapper { padding-inline: 0; }
.gg-cats .df_cc_arrows { display: none !important; }
}
/* ==========================================================================
4.10 Brands strip (DiviFlash Logo Carousel، الكلاس gg-brands على الـ module)
يفضّل Spacing Between = 0 في إعدادات الـ module
========================================================================== */
/* الصندوق الخارجي: حد 1px وزوايا 16px */
.gg-brands .bx-viewport {
box-sizing: border-box;
height: 94px !important; /* 92px للخلية + 2px للحدود (bxSlider بيكتب height inline) */
background: #fff;
border: 1px solid var(--gg-ink-200);
border-radius: var(--gg-r-md);
overflow: hidden !important;
}
/* الخلية: فاصل 1px على الجنب، وارتفاع ثابت */
.gg-brands .difl_logocarouselitem {
box-sizing: border-box;
height: 92px;
margin-right: 0 !important; /* الفاصل من border مش margin */
border-inline-end: 1px solid var(--gg-ink-200);
background: #fff;
}
.gg-brands .difl_logocarouselitem:last-child { border-inline-end: 0; }
.gg-brands .df_lci_container {
height: 100%;
display: grid;
place-items: center;
padding: 10px 12px;
}
/* اللوجو: حجم ثابت (الصور الصغيرة بتتكبّر)، رمادي وشفافية 80%، ويرجع بلونه عند hover */
.gg-brands .df-lc-image {
width: 80% !important;
height: 54px !important;
max-width: 100%;
max-height: none !important;
object-fit: contain; /* يحافظ على النسبة بدون قص */
filter: grayscale(1);
opacity: .8;
mix-blend-mode: multiply; /* يخفي الخلفية البيضا للوجوهات PNG */
transition: filter .25s, opacity .25s;
}
.gg-brands .difl_logocarouselitem:hover .df-lc-image {
filter: none;
opacity: 1;
}
/* ديسكتوب: نوزّع اللوجوهات على العرض كله بالتساوي بغض النظر عن حساب bxSlider
(بيطلع عرض الخلية أصغر لو Spacing Between مش 0، فبيتبقى فراغ على الجنب) */
@media (min-width: 981px) {
.gg-brands .df_lc_container {
display: flex !important;
width: 100% !important;
transform: none !important;
}
.gg-brands .difl_logocarouselitem {
float: none !important;
flex: 1 1 0;
width: auto !important;
min-width: 0;
}
}
/* ==========================================================================
4.13 Promo banner: صورة بخلفية + عنوان + نص + زرارين (Sunmi / Videojet / Date coding)
الكلاسات: gg-ban-sec على الـ Section، gg-ban على الـ Row، gg-ban-b على صف الزرارين
الصور (Row Background): Desktop 2400x595، Tablet 1600x800، Phone 900x600
========================================================================== */
.gg-ban-sec { padding-block-start: clamp(28px, 4vw, 44px) !important; }
/* الصف = البانر: نسبة 2400:596 والنص فوق الصورة على الشمال */
.gg-ban {
position: relative;
aspect-ratio: 2400 / 596;
align-items: stretch !important;
justify-content: flex-start !important;
padding: 0 !important;
background-color: #EEF2FB;
background-size: cover;
background-position: center;
border-radius: var(--gg-r-md);
overflow: hidden;
}
html[dir="rtl"] .gg-ban { flex-direction: row-reverse; } /* النص يفضل على الشمال الفعلي زي الأصل (المنتج على اليمين) */
/* عمود النص: 46% وبحد أقصى 520px، وموسّط رأسيًا */
.gg-ban > .et_pb_column {
width: min(46%, 520px) !important;
flex: 0 0 auto !important;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(16px, 3vw, 44px);
}
.gg-ban h2,
.gg-ban .et_pb_heading_container h2 {
margin: 0;
font-size: clamp(1.3rem, 2.6vw, 2.2rem);
line-height: 1.2;
color: var(--gg-ink-900);
}
.gg-ban p {
max-width: 42ch;
margin: 8px 0 16px !important;
font-weight: 500;
color: var(--gg-ink-700);
}
/* الزرارين */
.gg-ban-b { display: flex; flex-wrap: wrap; gap: 10px; }
.gg-ban-b .gg-btn { padding: 10px 16px; min-height: 42px; font-size: .88rem; }
.gg-btn-line { /* زرار بحد: خلفية بيضا وحد 2px غامق */
background: #fff !important;
color: var(--gg-ink-900) !important;
border: 2px solid var(--gg-ink-900) !important;
}
.gg-btn-line:hover { background: var(--gg-ink-100) !important; box-shadow: none !important; }
/* تابلت (761 لـ 1100): الصورة فوق (2:1) والنص تحتها على #EEF2FB */
@media (min-width: 761px) and (max-width: 1100px) {
.gg-ban {
aspect-ratio: auto;
padding-top: 50% !important; /* ارتفاع الصورة 2:1 */
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
}
.gg-ban > .et_pb_column { width: 100% !important; padding: 22px 28px; }
.gg-ban p { max-width: none; }
}
/* موبايل (760 وأقل): الصورة 3:2 والأزرار تحت بعض لو ضاقت */
@media (max-width: 760px) {
.gg-ban {
aspect-ratio: auto;
padding-top: 66.667% !important; /* ارتفاع الصورة 3:2 */
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
}
.gg-ban > .et_pb_column { width: 100% !important; padding: 18px; }
.gg-ban p { max-width: none; }
}
/* ==========================================================================
4.14 Featured products (DiviFlash Product Carousel)
بيشتغل على أي .difl_product_carousel من غير ما تحتاج كلاس مخصص
========================================================================== */
/* الشرائح بنفس الارتفاع، والكارت ياخد الارتفاع كله */
.et_pb_module.difl_product_carousel .swiper-slide { height: auto; }
.et_pb_module.difl_product_carousel .df-product-outer-wrap { height: 100%; }
/* الكارت: حد 1px وزوايا 16px و hover بظل ورفع */
.et_pb_module.difl_product_carousel .df-product-inner-wrap {
display: flex !important;
flex-direction: column;
height: 100%;
padding: 16px !important;
background: #fff;
border: 1px solid var(--gg-ink-200) !important;
border-radius: var(--gg-r-md) !important;
transition: box-shadow .3s var(--gg-ease), border-color .3s, transform .3s var(--gg-ease);
}
.et_pb_module.difl_product_carousel .df-product-inner-wrap:hover {
box-shadow: 0 14px 30px rgba(20, 22, 79, .12);
border-color: #c7cbea !important;
transform: translateY(-3px);
}
/* الصورة: مربعة بعرض الكارت، ومسافة تحتها */
/* صندوق الصورة: نلغي أي ارتفاع ثابت أو overflow hidden (تأثير hover بتاع DiviFlash)
لأنه بيقص حوالي 10px من تحت ويشيل الإطار الأزرق السفلي */
.et_pb_module.difl_product_carousel .df-product-image-wrap {
height: auto !important;
margin: 0 0 12px !important;
overflow: visible !important;
}
.et_pb_module.difl_product_carousel .df-product-image-wrap a,
.et_pb_module.difl_product_carousel .df-product-image-wrap .df-hover-effect {
display: block;
height: auto !important;
overflow: visible !important;
line-height: 0;
}
.et_pb_module.difl_product_carousel .df-product-image-wrap img {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: contain; /* الصور فيها إطار أزرق جاهز، فمنقصّش منها */
background: #fff;
border-radius: var(--gg-r-sm);
}
/* العنوان */
.et_pb_module.difl_product_carousel .df-product-title-wrap { margin: 0 !important; }
.et_pb_module.difl_product_carousel .df-product-title {
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
line-height: 1.3 !important;
}
.et_pb_module.difl_product_carousel .df-product-title a { color: var(--gg-ink-900) !important; text-decoration: none; }
/* الوصف المختصر: 3 أسطر بالكتير ويتقص بـ ... عشان الكروت تفضل بنفس الحجم
(عدد الكلمات نفسه بيتحدد من إعدادات الـ module: Content ← Excerpt Length) */
.et_pb_module.difl_product_carousel .df-product-content-wrap {
margin: 8px 0 14px !important;
padding: 0 !important;
}
.et_pb_module.difl_product_carousel .df-product-content-wrap p {
margin: 0 !important;
font-size: .88rem !important;
line-height: 1.5 !important;
color: var(--gg-ink-500) !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/* لو المنتج من غير وصف، نسيب مسافة صغيرة بس */
.et_pb_module.difl_product_carousel .null_item_builder { display: block; height: 0; margin: 0 0 14px; }
/* الزرار: ينزل لآخر الكارت بعرض كامل */
.et_pb_module.difl_product_carousel .df-product-button-wrap { margin: auto 0 0 !important; padding: 0 !important; }
.et_pb_module.difl_product_carousel .df-product-button-wrap .df_button,
.et_pb_module.difl_product_carousel a.df_button.df-product-read-more {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
min-height: 44px;
margin: 0 !important;
padding: 11px 12px !important;
font: 600 .88rem/1.2 var(--gg-font) !important;
color: #fff !important;
background: var(--gg-brand) !important;
border: 2px solid transparent !important;
border-radius: var(--gg-r-sm) !important;
text-decoration: none;
transition: background .2s, box-shadow .3s var(--gg-ease);
}
.et_pb_module.difl_product_carousel .df-product-button-wrap .df_button:hover,
.et_pb_module.difl_product_carousel a.df_button.df-product-read-more:hover {
background: var(--gg-brand-d) !important;
box-shadow: 0 8px 18px rgba(46, 49, 146, .3);
}
@media (max-width: 480px) { .et_pb_module.difl_product_carousel .df-product-inner-wrap { padding: 12px !important; } }
/* لينك "View all products →" بجنب عنوان القسم (الكلاس gg-view-all على الـ ) */
.gg-view-all {
font: 600 .95rem/1.2 var(--gg-font);
color: var(--gg-brand) !important;
text-decoration: none;
white-space: nowrap;
}
.gg-view-all:hover { text-decoration: underline; }
/* رأس القسم: العنوان وlink "View all" في سطر واحد، والـ Carousel تحتهم بعرض كامل.
بيشتغل تلقائي على أي عمود فيه Advanced Heading + Product Carousel (من غير كلاس) */
.et_pb_column:has(> .difl_df_adh_heading):has(> .difl_product_carousel) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px 16px;
}
.et_pb_column:has(> .difl_df_adh_heading):has(> .difl_product_carousel) > .difl_product_carousel {
flex: 0 0 100%;
width: 100%;
}
.et_pb_column:has(> .difl_product_carousel) > .difl_df_adh_heading .df-heading {
margin: 0;
font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: var(--gg-ink-900) !important;
}
/* أسهم الـ Product Carousel: دواير 44px بتتراكب على حواف الكروت */
.et_pb_module.difl_product_carousel.difl_product_carousel .df_product_carousel_container { position: relative; }
/* DiviFlash حاطط transform على .df_pc_arrows فبقى هو الـ containing block للأسهم.
بنخليه يملا الـ Carousel كله عشان top:50% يبقى نص ارتفاع الكروت (اتقاس على الصفحة) */
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none; /* عشان ما يغطيش الكروت */
}
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-prev,
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-next { pointer-events: auto; }
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-prev,
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-next {
position: absolute !important;
top: 50% !important;
inset-block-start: 50% !important;
bottom: auto !important;
inset-block-end: auto !important;
transform: translateY(-50%);
margin: 0 !important;
width: 44px !important;
height: 44px !important;
display: grid !important;
place-items: center;
background: #fff !important;
color: var(--gg-ink-900) !important;
border: 1px solid var(--gg-ink-300) !important;
border-radius: 50% !important;
box-shadow: 0 4px 12px rgba(10, 10, 10, .10);
cursor: pointer;
z-index: 5;
transition: background .2s, color .2s, border-color .2s;
}
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-prev { inset-inline-start: -22px !important; inset-inline-end: auto !important; left: auto; right: auto; }
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-next { inset-inline-end: -22px !important; inset-inline-start: auto !important; left: auto; right: auto; }
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-prev:hover,
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-next:hover {
background: var(--gg-brand) !important;
color: #fff !important;
border-color: var(--gg-brand) !important;
}
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-prev:before, .et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-prev:after,
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-next:before, .et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-next:after {
color: inherit !important;
font-size: 16px !important;
line-height: 1;
}
@media (max-width: 1100px) {
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-prev { inset-inline-start: -10px !important; }
.et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows .swiper-button-next { inset-inline-end: -10px !important; }
}
@media (max-width: 640px) { .et_pb_module.difl_product_carousel.difl_product_carousel.difl_product_carousel .df_pc_arrows { display: none !important; } } /* موبايل: swipe بس */
/* سطر العنوان: العمود اللي فيه "View all" يدفعه لآخر السطر، وCenter مع العنوان */
.et_pb_row:has(.gg-view-all) {
align-items: center;
padding-block: 0 !important;
margin-bottom: 18px; /* المسافة بين العنوان والكروت (كانت حوالي 100px) */
}
.et_pb_row:has(.gg-view-all) + .et_pb_row { padding-top: 0 !important; }
.et_pb_section:has(> .et_pb_row .gg-view-all) { row-gap: 0 !important; } /* Divi 5 بيحط gap:60px بين الصفوف */
.et_pb_column:has(.gg-view-all) {
display: flex;
flex-direction: row !important; /* أعمدة Divi 5 افتراضيًا column */
justify-content: flex-end; /* آخر السطر (يمين في EN، شمال في AR) */
align-items: center;
}
.et_pb_column:has(.gg-view-all) .et_pb_code,
.et_pb_column:has(.gg-view-all) .et_pb_code_inner { width: auto; }
@media (max-width: 767px) {
.et_pb_row:has(.gg-view-all) { flex-wrap: wrap; }
.et_pb_column:has(.gg-view-all) { justify-content: flex-start; }
}
/* ==========================================================================
4.16 About (نص / أزرار / Mission و Vision)
الأرقام (1973 / 2 / 2022) في قسم 4.8 (gg-stats)
========================================================================== */
/* الفقرة (Text module، الكلاس gg-ab-p) */
.gg-ab-p p {
max-width: 60ch;
margin: 12px 0 20px !important;
line-height: 1.7;
color: var(--gg-ink-700);
}
/* صف الأزرار: زرار + لينك */
.gg-ab-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gg-link {
font-weight: 600;
color: var(--gg-brand) !important;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.gg-link:hover { color: var(--gg-brand-d) !important; }
/* Mission / Vision */
.gg-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gg-mv > div {
padding: 20px;
border: 1px solid #E3E6EF;
border-radius: var(--gg-r-md);
}
.gg-mv h3 { margin: 0; font-size: 1.1rem; }
.gg-mv p { margin: 8px 0 0; line-height: 1.65; color: var(--gg-ink-700); }
@media (max-width: 760px) {
.gg-mv { grid-template-columns: 1fr; }
}
/* Mission / Vision لو اتبنت بـ modules الـ Builder: Row (gg-mv) فيه عمودين، والعمود نفسه هو الكارت (القاعدة .gg-mv > div فوق بتغطيه) */
.et_pb_row.gg-mv { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px; }
.et_pb_row.gg-mv > .et_pb_column { width: auto !important; min-width: 0; gap: 0 !important; }
.et_pb_row.gg-mv .et_pb_text_inner { margin: 0; padding: 0; }
.gg-ap-sec .gg-mv h3 { margin: 0 !important; font-size: 1.1rem !important; } /* عناوين الفعاليات (H3) */
@media (max-width: 760px) { .et_pb_row.gg-mv { grid-template-columns: 1fr; } }
/* ==========================================================================
4.17 Our Solutions (DiviFlash Blog Carousel في الرئيسية + Post Grid في صفحة Our Solutions، الكلاس gg-sols على الـ module)
اتقاس على الصفحة الحية: مركز الأسهم = مركز (العنوان + السطر)، والمسافة للكروت 18px
========================================================================== */
/* رأس القسم: عنوان + سطر وصف، وبعدهم الـ Carousel */
.et_pb_column:has(> .difl_blogcarousel) { gap: 0 !important; } /* Divi 5 بيحط gap:30px بين الـ modules */
.et_pb_column:has(> .difl_blogcarousel) > .difl_df_adh_heading .df-heading {
margin: 0;
font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: var(--gg-ink-900) !important;
}
.et_pb_column:has(> .difl_blogcarousel) > .et_pb_text { margin: 4px 0 0; }
.et_pb_column:has(> .difl_blogcarousel) > .et_pb_text p { margin: 0; padding: 0; font-size: .98rem; color: var(--gg-ink-500); }
.difl_blogcarousel.gg-sols { margin-top: 18px !important; --gg-sols-arrows-top: -79px; } /* -79px = نقطة منتصف العنوان والسطر. عدّلها لو غيّرت حجم العنوان */
/* الكارت */
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-item { height: auto; }
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-outer-wrap {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden; /* البادج بيتراكب على الصورة بـ margin سالب */
background: #fff;
border-radius: var(--gg-r-md);
box-shadow: 0 2px 14px rgba(20, 22, 79, .1);
transition: box-shadow .3s var(--gg-ease), transform .3s var(--gg-ease);
}
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-item:hover .df-post-outer-wrap {
box-shadow: 0 14px 30px rgba(20, 22, 79, .16);
transform: translateY(-3px);
}
/* الصورة: 8:5 */
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-image-wrap { aspect-ratio: 8 / 5; margin: 0 !important; overflow: hidden; background: var(--gg-tint); }
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-image-wrap a { display: block; height: 100%; }
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-image-wrap img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
/* المحتوى: بالترتيب (order): البادج، العنوان، الوصف، الزرار */
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-inner-wrap { display: flex; flex-direction: column; flex: 1; padding: 0 !important; }
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-date-wrap,
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-author-wrap { display: none !important; } /* التاريخ والكاتب مش في التصميم */
/* البادج: عنصر Categories فوق الصورة (فعّله من إعدادات الـ module) */
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-categories-wrap {
order: 0;
align-self: flex-start;
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: -39px 12px 12px !important; /* -39px = ارتفاع البادج + 12px، فمش بيزق اللي بعده */
}
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-categories-wrap { font-size: 0; } /* يخفي الفاصلة "," اللي بين التصنيفات */
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-categories-wrap a:not(:first-of-type) { display: none; } /* بادج واحد بس (أول تصنيف) */
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-categories-wrap a {
padding: 7px 11px;
font: 600 .82rem/1 var(--gg-font);
color: #fff !important;
background: var(--gg-brand);
border-radius: 5px;
text-decoration: none;
}
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-title-wrap { order: 1; margin: 0 !important; padding: 20px 22px 10px !important; }
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-title { margin: 0 !important; padding: 0 !important; font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.3 !important; }
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-title a { color: var(--gg-ink-900) !important; text-decoration: none; }
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-content-wrap {
order: 2;
margin: 0 !important;
padding: 0 22px 14px !important;
font-size: .95rem;
line-height: 1.6;
color: var(--gg-ink-500);
}
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-content-wrap p {
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 3 أسطر بالكتير */
line-clamp: 3;
overflow: hidden;
}
/* Read More: حد 2px وينزل لآخر الكارت (فعّل عنصر Button من الـ module) */
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-button-wrap { order: 3; margin: auto 0 0 !important; padding: 0 22px 22px !important; }
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-read-more {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 16px !important;
font: 600 .86rem/1.2 var(--gg-font) !important;
color: var(--gg-ink-900) !important;
background: #fff !important;
border: 2px solid var(--gg-ink-900) !important;
border-radius: var(--gg-r-sm) !important;
text-decoration: none;
transition: background .2s;
}
:is(.difl_blogcarousel, .difl_postgrid).gg-sols .df-post-read-more:hover { background: var(--gg-ink-100) !important; }
/* الأسهم (arrow-top): أعلى اليمين على مستوى العنوان، دواير 44px */
.difl_blogcarousel.gg-sols .df_bc_arrows {
position: absolute !important;
top: var(--gg-sols-arrows-top) !important;
left: auto !important;
right: auto !important;
inset-inline-end: 0 !important;
width: auto !important;
height: auto !important;
transform: none !important; /* DiviFlash حاطط transform فكان بيبقى containing block */
justify-content: flex-end;
gap: 8px;
z-index: 5;
}
.difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-prev,
.difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-next {
position: static !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
display: grid !important;
place-items: center;
background: #fff !important;
color: var(--gg-ink-900) !important;
border: 1px solid var(--gg-ink-300) !important;
border-radius: 50% !important;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-prev:hover,
.difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-next:hover { background: var(--gg-brand) !important; color: #fff !important; border-color: var(--gg-brand) !important; }
.difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-prev:before, .difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-prev:after,
.difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-next:before, .difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-next:after { color: inherit !important; font-size: 16px !important; line-height: 1; }
.difl_blogcarousel.gg-sols .df_bc_arrows .swiper-button-disabled { opacity: .35; cursor: default; }
@media (max-width: 767px) { .difl_blogcarousel.gg-sols .df_bc_arrows { display: none !important; } } /* موبايل: swipe بس */
/* ==========================================================================
4.18 Promo cards: كارتين ملوّنين (نص + زرار على الشمال، وصورة على اليمين)
الكلاسات: gg-promos على الـ Row، gg-promo على الـ Group، و gg-promo-1 / gg-promo-2 للألوان
========================================================================== */
.gg-promos { gap: 18px; }
.gg-promos > .et_pb_column { flex: 1 1 0 !important; min-width: 0; display: flex !important; flex-direction: column; } /* الكارتين بنفس الارتفاع */
/* الكارت = Group: عمودين (نص 1fr، صورة 0.8fr) */
.gg-promo {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
gap: 14px;
align-items: center;
min-height: 190px;
padding: clamp(18px, 2.6vw, 30px) !important;
overflow: hidden;
border-radius: var(--gg-r-md);
}
.gg-promo-1 { background-color: #DDF3E6 !important; } /* أخضر فاتح */
.gg-promo-2 { background-color: #FDE7D3 !important; } /* خوخي فاتح */
/* لو العناصر (Heading/Text/Button/Image) على نفس المستوى جوه الـ Group (من غير Group للنص):
العنوان والنص والزرار في العمود الأول، والصورة في التاني على الارتفاع كله */
.gg-promo { flex: 1 1 auto; align-content: center; grid-template-rows: auto auto auto; row-gap: 0; }
.gg-promo > .et_pb_heading { grid-column: 1; grid-row: 1; align-self: end; }
.gg-promo > .et_pb_text { grid-column: 1; grid-row: 2; }
.gg-promo > .et_pb_button_module_wrapper { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; }
.gg-promo > .et_pb_image { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
/* العنوان والنص (بالكلاس مش بالـ tag، فيشتغل سواء H1 أو H3) */
.gg-promo h3,
.gg-promo .et_pb_module_header {
margin: 0 !important;
padding: 0 !important;
font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: var(--gg-ink-900) !important;
}
.gg-promo .et_pb_text p {
margin: 6px 0 16px;
font: 600 1.05rem/1.35 var(--gg-font);
color: var(--gg-ink-700);
}
/* الزرار الأبيض */
.gg-promo .et_pb_button,
.gg-btn-white {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 16px !important;
font: 600 .86rem/1.2 var(--gg-font) !important;
color: var(--gg-ink-900) !important;
background: #fff !important;
border: 2px solid transparent !important;
border-radius: var(--gg-r-sm) !important;
transition: box-shadow .3s var(--gg-ease);
}
.gg-promo .et_pb_button:after { display: none !important; } /* سهم hover بتاع Divi */
.gg-promo .et_pb_button:hover,
.gg-btn-white:hover { background: #fff !important; box-shadow: 0 8px 18px rgba(20, 22, 79, .12); }
/* الصورة */
.gg-promo .et_pb_image_wrap,
.gg-promo .et_pb_image_wrap img { display: block; width: 100%; }
.gg-promo img {
max-height: 150px !important;
object-fit: cover !important;
border-radius: 12px;
}
/* موبايل وتابلت صغير (767 وأقل): الكارتين فوق بعض بعرض كامل (القاعدة اللي فوق كانت بتمنع التكديس) */
@media (max-width: 767px) {
.gg-promos { flex-wrap: wrap; }
.gg-promos > .et_pb_column { flex: 1 1 100% !important; width: 100% !important; }
}
/* موبايل (760 وأقل): جوه الكارت: النص فوق والصورة تحته */
@media (max-width: 760px) {
.gg-promo { grid-template-columns: 1fr; }
.gg-promo > .et_pb_heading,
.gg-promo > .et_pb_text,
.gg-promo > .et_pb_button_module_wrapper,
.gg-promo > .et_pb_image { grid-column: 1; grid-row: auto; } /* نلغي وضع الصورة في العمود التاني */
.gg-promo > .et_pb_button_module_wrapper { justify-self: start; }
.gg-promo > .et_pb_image { margin-top: 14px; }
.gg-promo img { max-height: 120px !important; }
.gg-promo .et_pb_button { white-space: nowrap; } /* الزرار في سطر واحد */
}
/* ==========================================================================
4.19 Newsletter: كارت بخلفية #E9ECFA (أيقونة | عنوان + نص | فورم) وتحتهم سطر ملاحظة
gg-nl بيتحط على Group، أو على Row (وقتها الكارت هو العمود اللي جواه).
جوه الكارت بالترتيب: أيقونة gg-nl-ic، Group العنوان والنص gg-nl-t، الفورم gg-nl-f، الملاحظة gg-nl-n
========================================================================== */
:is(.et_pb_group.gg-nl, .et_pb_row.gg-nl > .et_pb_column) {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
gap: 16px clamp(16px, 3vw, 32px);
align-items: center;
width: 100%;
padding: clamp(18px, 2.6vw, 30px) !important;
background-color: var(--gg-tint) !important;
border-radius: var(--gg-r-md);
}
.et_pb_row.gg-nl { display: block !important; padding: 0 !important; background: none !important; } /* لو الكلاس على Row: الكارت هو العمود */
/* الأيقونة: دايرة بيضا 64px (Divi بيحط أيقونة زرقا كبيرة افتراضيًا) */
.gg-nl-ic {
display: grid !important;
place-items: center;
width: 64px !important;
height: 64px !important;
border-radius: 50%;
background: #fff;
}
.gg-nl-ic .et_pb_icon_wrap { display: grid; place-items: center; width: 100%; height: 100%; }
.gg-nl-ic .et-pb-icon,
.gg-nl-ic svg { font-size: 30px !important; width: auto; height: auto; line-height: 1; color: var(--gg-brand) !important; }
/* العنوان والنص */
.gg-nl-t h1, .gg-nl-t h2, .gg-nl-t .et_pb_module_header {
margin: 0 !important; padding: 0 !important;
font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
font-weight: 700 !important; line-height: 1.2 !important;
color: var(--gg-ink-900) !important;
}
.gg-nl-t p { margin: 4px 0 0; font-size: .95rem; color: var(--gg-ink-500); }
.gg-nl-n { grid-column: 1 / -1; }
.gg-nl-n p { margin: 0; font-size: .82rem; color: var(--gg-ink-500); }
/* ---- الفورم (gg-nl-f): حقل الإيميل + الكابتشا + Subscribe في سطر واحد ----
بيغطي Divi Contact Form (اللي عندك) و WPForms و Divi Email Optin */
.gg-nl-f form { display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin: 0; }
.gg-nl-f :is(.et_pb_contact_field, .wpforms-field-container, .et_pb_newsletter_fields) { flex: 1 1 auto; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; }
.gg-nl-f .et_contact_bottom_container { display: flex; align-items: center; flex: none; gap: 10px; margin: 0; padding: 0; }
.gg-nl-f .et_pb_contact_right { float: none; width: auto; margin: 0; padding: 0; }
.gg-nl-f :is(.et_pb_contact_right, .et_pb_button_wrapper) p, .gg-nl-f .et_pb_contact_right p { margin: 0; padding: 0; }
.gg-nl-f .et_pb_contact_captcha_question { font-size: .9rem; }
.gg-nl-f .et_pb_contact_right label { display: flex; align-items: center; gap: 6px; font-size: .9rem; white-space: nowrap; }
/* الـ label مخفي بصريًا (يفضل لقارئات الشاشة). حقل الـ honeypot بيفضل مخفي بقاعدة الـ plugin */
.gg-nl-f :is(.wpforms-field-label, .et_pb_contact_form_label) {
position: absolute !important;
width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* حقل الإيميل والكابتشا */
.gg-nl-f :is(input.input, input[type="email"], input.et_pb_newsletter_email) {
width: 100% !important;
max-width: none !important;
height: 48px !important;
padding: 0 16px !important;
font: 400 .95rem/1.2 var(--gg-font) !important;
color: var(--gg-ink-900) !important;
background: #fff !important;
border: 1px solid #8c8c93 !important;
border-radius: var(--gg-r-sm) !important;
text-align: start;
}
.gg-nl-f input.et_pb_contact_captcha { width: 56px !important; padding: 0 !important; text-align: center; }
.gg-nl-f :is(input.input, input[type="email"]):focus { outline: none; border-color: var(--gg-brand) !important; box-shadow: 0 0 0 3px rgba(46, 49, 146, .2); }
/* Subscribe */
.gg-nl-f :is(.et_pb_contact_submit, .wpforms-submit, .et_pb_newsletter_button, button[type="submit"]) {
min-height: 48px;
padding: 0 22px !important;
font: 600 .92rem/1 var(--gg-font) !important;
color: #fff !important;
background: var(--gg-brand) !important;
border: 0 !important;
border-radius: var(--gg-r-sm) !important;
cursor: pointer;
}
.gg-nl-f :is(.et_pb_contact_submit, .wpforms-submit, .et_pb_newsletter_button):hover { background: var(--gg-brand-d) !important; }
.gg-nl-f .et_pb_button:after { display: none !important; }
.gg-nl-f :is(.et-pb-contact-message, .wpforms-error, .wpforms-confirmation-container-full) { margin-top: 8px; font-size: .88rem; }
@media (max-width: 760px) {
:is(.et_pb_group.gg-nl, .et_pb_row.gg-nl > .et_pb_column) { grid-template-columns: auto minmax(0, 1fr); } /* أيقونة + نص، والفورم تحتهم */
.gg-nl-f { grid-column: 1 / -1; }
.gg-nl-f form { flex-wrap: wrap; }
.gg-nl-f :is(.et_pb_contact_field, .wpforms-field-container) { flex: 1 1 100%; }
}
/* ==========================================================================
4.20 Footer (Theme Builder ← Global Footer): Section واحد gg-ft فيه 3 Rows
Row 1 العملاء gg-ft-clients | Row 2 الأعمدة gg-ft-grid | Row 3 الحقوق gg-ft-rights
========================================================================== */
.gg-ft {
position: relative;
margin-top: clamp(36px, 5vw, 64px);
padding-block: clamp(32px, 4vw, 48px) 22px !important;
color: #d6d8ee;
background-color: var(--gg-deep) !important;
}
.gg-ft::before { /* شريط الـ spectrum 3px فوق الفوتر */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--gg-spectrum);
}
.gg-ft p { margin: 0; color: #d6d8ee; }
.gg-ft h3,
.gg-ft h4,
.gg-ft .et_pb_module_header { margin: 0 0 12px !important; padding: 0 !important; font-size: .98rem !important; font-weight: 700 !important; color: #fff !important; }
/* Row 1: العملاء */
.gg-ft-clients { padding-bottom: 26px !important; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.gg-ft-clients p { font-size: .92rem; }
.gg-ft-clients strong { color: #fff; }
/* اللوجوهات: كروت بيضا (DiviFlash Logo Carousel، الكلاس gg-clients) */
.gg-clients .bx-viewport { height: 62px !important; background: none; border: 0; overflow: hidden !important; }
.gg-clients .difl_logocarouselitem { height: 62px; background: #fff; border-radius: 10px; }
.gg-clients .df_lci_container { height: 100%; display: grid; place-items: center; padding: 10px; }
.gg-clients .df-lc-image { width: auto !important; height: auto !important; max-width: 100%; max-height: 40px !important; object-fit: contain; }
@media (min-width: 981px) {
.gg-clients .df_lc_container { display: flex !important; gap: 8px; width: 100% !important; transform: none !important; }
.gg-clients .difl_logocarouselitem { float: none !important; flex: 1 1 0; width: auto !important; min-width: 0; margin-right: 0 !important; }
}
/* Row 2: الأعمدة الأربعة */
.gg-ft-grid { gap: 28px 40px; padding-block: 32px 28px !important; align-items: flex-start; font-size: .92rem; }
.gg-ft-pill { /* اللوجو جوه كبسولة بيضا */
display: inline-flex !important;
align-self: flex-start !important; /* موديول الصورة بيتمدد لعرض العمود، فبنمنعه */
width: fit-content !important;
max-width: 100% !important;
padding: 8px 12px;
background: #fff;
border-radius: 10px;
}
.gg-ft-pill .et_pb_image_wrap { display: block; }
.gg-ft-pill img { display: block; width: 130px !important; max-width: 100% !important; height: auto !important; }
.gg-ft-tag { max-width: 34ch; margin-top: 14px !important; line-height: 1.65; }
.gg-ft-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.gg-ft-list li { margin: 0 0 8px !important; padding: 0 !important; line-height: 1.5; list-style: none !important; }
.gg-ft-list li::marker { content: none; }
.gg-ft a { color: #d6d8ee; text-decoration: none; }
.gg-ft a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* Row 3: الحقوق */
.gg-ft-rights { padding-block: 24px 0 !important; border-top: 1px solid rgba(255, 255, 255, .18); }
.gg-ft-rights p { font-size: .92rem; text-align: start; }
/* ==========================================================================
4.21 Product category page: هيدر الصفحة (Breadcrumb + H1 + وصف) على خلفية #F4F6FC
Theme Builder ← Template لـ All Product Categories. الكلاسات: gg-ph على الـ Section،
gg-bc على الـ Breadcrumbs، gg-lead على Text الوصف
========================================================================== */
.gg-ph {
background-color: #F4F6FC !important;
padding-block: 0 clamp(24px, 4vw, 44px) !important;
}
.gg-ph > .et_pb_row { padding-block: 0 !important; }
.gg-ph { gap: 0 !important; } /* Divi 5 بيحط gap:60px بين الـ Rows: نصفّره عشان الـ breadcrumb والعنوان يتراصّوا */
/* Divi 5 بيحط gap:30px بين الـ modules: نشيله عشان الـ breadcrumb والعنوان والوصف يتراصّوا زي الأصل */
.gg-ph .et_pb_column { gap: 0 !important; }
/* Breadcrumbs (DiviFlash Breadcrumbs). الـ selectors بـ 3 كلاسات لأن DiviFlash كاتب أنماطه بقوة عالية (اتقاس على الصفحة) */
.gg-ph .gg-bc { margin-inline-start: -10px !important; } /* DiviFlash حاطط padding:10px على القايمة، فبنعوّضه عشان يتراصّ مع العنوان */
.gg-ph .gg-bc.gg-bc .df-breadcrumbs { gap: 0 !important; padding-block: 14px 6px !important; color: var(--gg-ink-700); }
.gg-ph .gg-bc.gg-bc .df-breadcrumbs > li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.gg-ph .gg-bc.gg-bc .df-breadcrumbs-text { font-size: .88rem !important; }
.gg-ph .gg-bc.gg-bc a { color: var(--gg-brand); text-decoration: underline; text-underline-offset: 3px; }
.gg-ph .gg-bc.gg-bc .df-breadcrumbs-end,
.gg-ph .gg-bc.gg-bc .df-breadcrumbs-end .df-breadcrumbs-text { color: var(--gg-ink-900); font-weight: 600; text-decoration: none; }
/* الفاصل: بنخفي أيقونة DiviFlash (لونها الأزرق بيكسب على أي قاعدة) ونرسم سهم 6px رمادي بـ CSS زي الأصل */
.gg-ph .gg-bc.gg-bc .df-breadcrumbs > li.df-breadcrumbs-separator { display: flex; align-items: center; margin-inline: 8px !important; }
.gg-ph .gg-bc.gg-bc .df-breadcrumbs-separator-icon { display: none !important; }
.gg-ph .gg-bc.gg-bc .df-breadcrumbs-separator::after {
content: "";
display: block;
width: 6px;
height: 6px;
border-inline-end: 1.5px solid #8A8FA3;
border-block-end: 1.5px solid #8A8FA3;
transform: rotate(-45deg);
}
html[dir="rtl"] .gg-ph .gg-bc.gg-bc .df-breadcrumbs-separator::after { transform: rotate(135deg); }
/* العنوان H1 (اسم التصنيف) والوصف */
.gg-ph h1,
.gg-ph .et_pb_module_header {
margin: 0 !important;
padding: 12px 0 4px !important;
max-width: 70ch;
font-size: clamp(2rem, 4vw, 3rem) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: var(--gg-ink-900) !important;
}
.gg-lead p:empty { display: none; } /* الوصف الديناميكي بييجي بفقرتين فاضيتين قبله وبعده */
.gg-lead p {
max-width: 58ch;
margin: 12px 0 0 !important;
font-size: 1.05rem;
line-height: 1.7;
color: var(--gg-ink-700);
}
/* ==========================================================================
4.22 Product category page: السايدبار (فلاتر) + شريط الأدوات + الشبكة
الكلاسات: gg-cp على الـ Row (عمودين)، gg-cp-side على عمود السايدبار،
gg-cp-bar على شريط العدد والترتيب، gg-cp-grid على Product Grid
(مبني على بنية WooCommerce/DiviFlash، ومحتاج ضبط بعد ما تبعتلي الـ HTML الفعلي)
========================================================================== */
.gg-cp {
display: grid !important;
grid-template-columns: 260px minmax(0, 1fr);
gap: clamp(20px, 3vw, 40px);
align-items: start;
padding-top: clamp(24px, 3vw, 36px) !important;
}
.gg-cp > .et_pb_column { width: auto !important; min-width: 0; }
/* السايدبار: ثابت وهو بيتحرك مع الصفحة. الأسماء اتقاست من HTML الصفحة الفعلية */
.gg-cp-side { position: sticky; top: 130px; }
.gg-cp-side .et_pb_widget_area { margin: 0; padding: 0 !important; border: 0 !important; } /* Divi بيحط خط عمودي على يمين الـ widget area */
.gg-cp-side .et_pb_widget { width: 100%; margin: 0 0 18px; padding: 0; }
.gg-cp-side .widget_search { display: none; } /* البحث مش في التصميم */
.gg-cp-side .widgettitle {
margin: 0 0 8px !important;
padding: 0 !important;
font-size: .95rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--gg-ink-900);
}
/* فلتر Brand: checkbox + الاسم، والعدد على الطرف التاني (WooCommerce Brand Layered Nav) */
.gg-cp-side :is(.widget_layered_nav, .widget_brand_nav) ul { margin: 0; padding: 0; list-style: none; }
.gg-cp-side li.wc-layered-nav-term {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
padding: 0 !important;
border: 0;
}
.gg-cp-side li.wc-layered-nav-term > a {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
color: var(--gg-ink-700);
text-decoration: none;
}
.gg-cp-side li.wc-layered-nav-term > a:hover { background: #F4F6FC; }
.gg-cp-side li.wc-layered-nav-term > a::before { /* مربع الـ checkbox */
content: "";
flex: none;
width: 18px;
height: 18px;
box-sizing: border-box;
border: 1.5px solid #8c8c93;
border-radius: 4px;
background: #fff center / 12px no-repeat;
}
.gg-cp-side li.wc-layered-nav-term.chosen > a { color: var(--gg-ink-900); font-weight: 600; }
.gg-cp-side li.wc-layered-nav-term.chosen > a::before { /* البراند المختار: مربع بلون البراند وعلامة صح */
border-color: var(--gg-brand);
background-color: var(--gg-brand);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}
.gg-cp-side li.wc-layered-nav-term .count { padding-inline-end: 10px; font-size: .88rem; color: var(--gg-ink-500); }
/* قايمة Categories (WooCommerce Product Categories widget أو block) */
.gg-cp-side :is(.product-categories, .wc-block-product-categories-list) {
display: flex; flex-direction: column;
max-height: 320px; margin: 0; padding: 0; overflow: auto; list-style: none;
}
.gg-cp-side :is(.product-categories, .wc-block-product-categories-list) li { margin: 0; padding: 0; }
.gg-cp-side :is(.product-categories, .wc-block-product-categories-list) a {
display: block; padding: 8px 10px; border-radius: 8px; color: var(--gg-ink-900); text-decoration: none;
}
.gg-cp-side :is(.product-categories, .wc-block-product-categories-list) a:hover { background: #F4F6FC; }
.gg-cp-side :is(.current-cat > a, .wc-block-product-categories-list-item--current > a) { background: #EEF2FB; color: var(--gg-brand); font-weight: 600; }
.gg-cp-side .product-categories .count { color: var(--gg-ink-500); font-size: .88rem; }
/* Categories (WooCommerce block): الاسم والعدد في سطر واحد، والعدد على الطرف التاني زي Brand (اتقاس من HTML الصفحة) */
.gg-cp-side .wc-block-product-categories-list-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
padding: 0;
}
.gg-cp-side .wc-block-product-categories-list-item > a { flex: 1; min-width: 0; }
.gg-cp-side .wc-block-product-categories-list-item-count {
flex: none;
padding-inline-end: 10px;
font-size: .88rem;
color: var(--gg-ink-500);
}
.gg-cp-side .wc-block-product-categories-list-item-count::before { content: "("; }
.gg-cp-side .wc-block-product-categories-list-item-count::after { content: ")"; }
/* التصنيف الافتراضي Uncategorized: مخفي مؤقتًا (الحل الأنضف: وزّع منتجاته على تصنيفات وامسحه) */
.gg-cp-side .wc-block-product-categories-list-item:has(> a[href*="/product-category/uncategorized"]) { display: none; }
/* ---- DiviFlash Product Grid (gg-cp-grid على الـ module) ----
الـ module بيعرض العدد والترتيب والـ pagination لوحده (فعّلهم من إعداداته)، والـ selectors بكلاسين مضاعفين
عشان تكسب على أنماط DiviFlash. اتقاس على الصفحة الفعلية. */
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce {
display: grid !important;
grid-template-columns: 1fr auto; /* العدد على الأول، والترتيب على الآخر */
align-items: center;
gap: 12px 16px;
}
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce > .woocommerce-notices-wrapper { display: none; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-result-count { grid-column: 1; margin: 0 !important; float: none !important; color: var(--gg-ink-700); }
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-ordering { grid-column: 2; margin: 0 !important; float: none !important; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-ordering select {
padding: 9px 12px;
font: inherit;
font-size: .92rem;
background: #fff;
border: 1px solid var(--gg-ink-200);
border-radius: 8px;
}
.difl_productgrid.gg-cp-grid.gg-cp-grid ul.products { grid-column: 1 / -1; gap: 18px !important; margin: 6px 0 0 !important; } /* 3 أعمدة، والمسافة 18px */
/* الكارت */
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-outer-wrap { height: 100%; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-inner-wrap {
display: flex !important;
flex-direction: column;
height: 100%;
padding: 16px !important;
background: #fff;
border: 1px solid var(--gg-ink-200) !important;
border-radius: var(--gg-r-md) !important;
transition: box-shadow .3s var(--gg-ease), border-color .3s, transform .3s var(--gg-ease);
}
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-inner-wrap:hover { box-shadow: 0 14px 30px rgba(20, 22, 79, .12); border-color: #c7cbea !important; transform: translateY(-3px); }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-image-wrap { margin: 0 0 12px !important; overflow: visible !important; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-image-wrap img { display: block; width: 100% !important; height: auto !important; object-fit: contain; border-radius: var(--gg-r-sm); }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-title { margin: 0 !important; padding: 0 !important; font-size: 1rem !important; line-height: 1.3 !important; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-title a { color: var(--gg-ink-900) !important; text-decoration: none; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-categories-wrap { margin: 2px 0 0 !important; font-size: .88rem; color: var(--gg-ink-500); } /* نوع المنتج: Barcode printer (فعّل Categories) */
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-categories-wrap a { color: inherit !important; text-decoration: none; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-content-wrap { margin: 8px 0 0 !important; font-size: .92rem; line-height: 1.55; color: var(--gg-ink-500); }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-content-wrap p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-price-wrap.null_item_builder { display: none; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .df-product-button-wrap { margin: auto 0 0 !important; padding: 14px 0 0 !important; }
.difl_productgrid.gg-cp-grid.gg-cp-grid :is(.df-product-read-more, .df_button) {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
min-height: 44px;
padding: 11px 12px !important;
font: 600 .88rem/1.2 var(--gg-font) !important;
color: #fff !important;
background: var(--gg-brand) !important;
border: 2px solid transparent !important;
border-radius: var(--gg-r-sm) !important;
text-decoration: none;
}
/* Pagination: أرقام في مربعات مدوّرة، والحالية بلون البراند */
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-pagination { grid-column: 1 / -1; margin-top: 28px; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-pagination li { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-pagination .page-numbers {
display: grid; place-items: center;
min-width: 40px; height: 40px; padding: 0 10px;
font-size: .92rem; color: var(--gg-ink-900);
background: #fff; border: 1px solid var(--gg-ink-200); border-radius: 10px;
text-decoration: none;
}
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-pagination a.page-numbers:hover { border-color: var(--gg-brand); color: var(--gg-brand); }
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-pagination .page-numbers.current { color: #fff; background: var(--gg-brand); border-color: var(--gg-brand); font-weight: 600; }
.difl_productgrid.gg-cp-grid.gg-cp-grid .woocommerce-pagination .page-numbers.dots { border: 0; background: none; }
@media (max-width: 760px) {
.gg-cp { grid-template-columns: 1fr; }
.gg-cp-side { position: static; padding: 0 14px; border: 1px solid var(--gg-ink-200); border-radius: var(--gg-r-md); }
}
/* ==========================================================================
4.23 Single product page (Theme Builder ← Template لـ All Products)
الكلاسات: gg-ph + gg-ph-white على Section الـ breadcrumb، gg-pd على Row (عمودين)،
gg-pd-gal على عمود الصور، gg-pd-info على عمود المعلومات، gg-pd-tabs على التابات
(الجزء الخاص بـ Woo Images والجدول مبني على توقّع، ومحتاج ضبط بعد ما تبعتلي الـ HTML الفعلي)
========================================================================== */
.gg-ph.gg-ph-white { background-color: #fff !important; padding-bottom: 0 !important; } /* breadcrumb أبيض في صفحة المنتج */
/* عمودين: الصور | المعلومات */
.gg-pd {
--gg-pd-img: .9fr; /* عرض عمود الصور: كل ما قلّ الرقم الصورة بتصغر (1fr = نص الصفحة، .8fr تقريبًا 40%) */
--gg-pd-info: 1.1fr; /* عرض عمود المعلومات */
display: grid !important;
grid-template-columns: minmax(0, var(--gg-pd-img)) minmax(0, var(--gg-pd-info));
gap: clamp(24px, 4vw, 56px);
align-items: start;
padding-top: 8px !important;
}
.gg-pd > .et_pb_column { width: auto !important; min-width: 0; }
@media (max-width: 760px) { .gg-pd { grid-template-columns: 1fr; } }
/* Divi بيحط padding:54px فوق وتحت على الـ Section، والأصل 8px بس: نصفّره عشان الـ breadcrumb يلزق في الصور */
.et_pb_section:has(> .gg-pd) { padding-block: 0 !important; }
/* الصور (Divi Woo Product Images): إطار وصورة مصغّرة */
.gg-pd-gal .woocommerce-product-gallery {
padding: 16px;
overflow: hidden;
background: #fff;
border: 1px solid var(--gg-ink-200);
border-radius: var(--gg-r-md);
}
.gg-pd-gal .woocommerce-product-gallery img { max-width: 100%; height: auto; object-fit: contain; }
.gg-pd-gal .flex-control-thumbs { display: flex; gap: 10px; margin: 12px 0 0 !important; padding: 0; list-style: none; }
.gg-pd-gal .flex-control-thumbs li { width: 84px !important; margin: 0 !important; float: none !important; }
.gg-pd-gal .flex-control-thumbs img { padding: 6px; background: #fff; border: 1px solid var(--gg-ink-200); border-radius: 10px; opacity: 1; cursor: pointer; }
.gg-pd-gal .flex-control-thumbs img.flex-active { border-color: var(--gg-brand); box-shadow: inset 0 0 0 2px var(--gg-brand); }
/* المعلومات: العنوان والوصف المختصر */
.gg-pd-info .et_pb_module_header,
.gg-pd-info h1 { margin: 8px 0 12px !important; padding: 0 !important; font-size: clamp(1.6rem, 3vw, 2.3rem) !important; line-height: 1.2 !important; text-align: start; }
.gg-pd-lead { max-width: 62ch; margin-bottom: 20px; } /* سطر قراءة مريح، ومسافة قبل الأزرار */
.gg-pd-lead p { margin: 0; line-height: 1.7; color: var(--gg-ink-700); }
.gg-pd-info .et_pb_wc_meta :is(.tagged_as, .sku_wrapper) { display: none; } /* الـ Tag والـ SKU مش في التصميم */
/* عمود المعلومات: بنشيل gap:30px بتاع Divi 5 وبنتحكم في المسافات بنفسنا */
.gg-pd-info { display: flex !important; flex-direction: column; gap: 0 !important; }
/* ترتيب العناصر بالـ CSS (من غير ما تحرّك modules): Category، العنوان، الوصف، السعر، الأزرار، الثقة */
.gg-pd-info .et_pb_wc_meta { order: 1; margin: 0; }
.gg-pd-info .et_pb_wc_title { order: 2; }
.gg-pd-info .gg-pd-lead { order: 3; }
.gg-pd-info .gg-pd-price { order: 4; }
.gg-pd-info .et_pb_code:has(.gg-pd-act) { order: 5; }
.gg-pd-info .et_pb_code:has(.gg-pd-trust) { order: 6; }
.gg-pd-info .gg-pd-price p { margin: 0 0 16px; } /* إيقاع المسافات: العنوان 16، الوصف 20، السعر 16، الأزرار 20 */
.gg-pd-info .gg-pd-act { margin: 0 0 20px; }
.gg-pd-info .gg-pd-trust { margin: 0 !important; }
.gg-pd-info .et_pb_wc_title h1 { margin: 6px 0 16px !important; padding: 0 !important; font-size: clamp(1.6rem, 3vw, 2.3rem) !important; font-weight: 700 !important; line-height: 1.2 !important; }
/* Woo Meta (Category: Barcode Printers) بشكل سطر البراند/النوع: بلون البراند من غير كلمة "Category:" */
.gg-pd-info .et_pb_wc_meta .product_meta { margin: 0; padding: 0; border: 0; }
.gg-pd-info .et_pb_wc_meta .posted_in { font-size: 0; } /* يخفي كلمة "Category:" */
.gg-pd-info .et_pb_wc_meta .posted_in a { font-size: .92rem; font-weight: 600; color: var(--gg-brand); text-decoration: none; }
/* أيقونة التكبير (🔍) فوق الصورة */
.gg-pd-gal .woocommerce-product-gallery__trigger {
position: absolute; top: 12px; inset-inline-end: 12px; z-index: 9;
display: grid; place-items: center; width: 36px; height: 36px;
font-size: 1rem; text-indent: 0; background: #fff; border-radius: 50%;
box-shadow: 0 2px 8px rgba(10, 10, 10, .15);
}
/* السعر والأزرار والثقة */
.gg-pd-price p { margin: 6px 0 16px; font: 700 1.2rem/1 var(--gg-font); }
.gg-pd-act { display: flex; flex-wrap: wrap; gap: 10px; }
.gg-pd-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0 !important; padding: 0 !important; list-style: none !important; font-size: .88rem; color: var(--gg-ink-700); }
.gg-pd-trust li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.gg-pd-trust li::before { content: "\2713"; margin-inline-end: 6px; font-weight: 700; color: var(--gg-brand); }
/* ---- التابات: Woo Tabs / Divi Tabs / DiviFlash Advanced Tab (الكلاس gg-pd-tabs على الـ module) ----
نفس شكل شريط الروابط: خط تحت، والتاب النشط بلون البراند وخط سميك تحته */
.gg-pd-tabs .woocommerce-tabs ul.tabs,
.gg-pd-tabs .et_pb_tabs_controls {
display: flex; flex-wrap: nowrap; gap: 6px;
margin: 0 !important; padding: 0 !important;
overflow-x: auto; list-style: none;
background: none !important;
border: 0 !important; border-bottom: 1px solid var(--gg-ink-200) !important;
}
.gg-pd-tabs .woocommerce-tabs ul.tabs::before, .gg-pd-tabs .woocommerce-tabs ul.tabs::after { display: none; }
.gg-pd-tabs .woocommerce-tabs ul.tabs li,
.gg-pd-tabs .et_pb_tabs_controls li {
margin: 0 !important; padding: 0 !important;
background: none !important; border: 0 !important; border-radius: 0 !important;
}
.gg-pd-tabs .woocommerce-tabs ul.tabs li a,
.gg-pd-tabs .et_pb_tabs_controls li a {
display: block; padding: 14px 16px !important;
font-size: 1rem; font-weight: 600; white-space: nowrap;
color: var(--gg-ink-700) !important; text-decoration: none;
background: none !important;
border-bottom: 3px solid transparent;
}
.gg-pd-tabs .woocommerce-tabs ul.tabs li a:hover,
.gg-pd-tabs .et_pb_tabs_controls li a:hover { color: var(--gg-brand) !important; border-bottom-color: var(--gg-brand); }
.gg-pd-tabs .woocommerce-tabs ul.tabs li.active a,
.gg-pd-tabs .et_pb_tabs_controls li.et_pb_tab_active a { color: var(--gg-brand) !important; border-bottom-color: var(--gg-brand); }
.gg-pd-tabs .woocommerce-Tabs-panel,
.gg-pd-tabs .et_pb_all_tabs { padding: clamp(20px, 3vw, 32px) 0 0 !important; border: 0 !important; background: none !important; }
.gg-pd-tabs .woocommerce-Tabs-panel > h2:first-child { display: none; } /* عنوان "Description" التلقائي (فيه عنوان التاب) */
/* محتوى التابات: الوصف وجدول Additional information */
.gg-pd-tabs h2, .gg-pd-tabs .et_pb_module_header { margin: 0 0 14px !important; font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; }
.gg-pd-tabs p { max-width: 70ch; line-height: 1.8; color: var(--gg-ink-700); }
.gg-pd-tabs ul { display: grid; gap: 10px; max-width: 960px; margin: 0; padding-inline-start: 20px; line-height: 1.6; }
.gg-pd-tabs table { /* جدول Additional information بتاع WooCommerce */
width: 100%; max-width: 960px;
border-collapse: separate; border-spacing: 0;
font-size: .95rem;
border: 1px solid var(--gg-ink-200); border-radius: var(--gg-r-md); overflow: hidden;
}
.gg-pd-tabs :is(th, td) { padding: 12px 16px; text-align: start; vertical-align: top; line-height: 1.5; border: 0; border-bottom: 1px solid var(--gg-ink-200); }
.gg-pd-tabs tr:last-child :is(th, td) { border-bottom: 0; }
.gg-pd-tabs th { width: 34%; font-weight: 600; background: #F4F6FC; }
/* ==========================================================================
4.24 Quote list: الـ drawer (الفورم) + الرسالة الصغيرة + حالة الأزرار (assets/quote.js و drawer-*.html)
========================================================================== */
html.gg-lock { overflow: hidden; }
.gg-drawer {
position: fixed;
inset: 0 0 0 auto;
width: min(440px, 100%);
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: #fff;
color: var(--gg-ink-700);
box-shadow: -20px 0 50px rgba(0, 0, 0, .25);
}
.gg-drawer[dir="rtl"] { inset: 0 auto 0 0; box-shadow: 20px 0 50px rgba(0, 0, 0, .25); } /* يفتح من الشمال في العربي */
.gg-drawer::backdrop { background: rgba(10, 10, 30, .5); }
.gg-drawer[open] { animation: ggDrawerIn .45s var(--gg-ease); }
.gg-drawer[dir="rtl"][open] { animation-name: ggDrawerInR; }
@keyframes ggDrawerIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ggDrawerInR { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gg-drawer[open] { animation: none; } }
.gg-d-in { height: 100%; overflow: auto; padding: 20px clamp(18px, 3vw, 26px) 28px; }
.gg-d-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--gg-ink-200); }
.gg-d-top h2 { margin: 0; padding: 0; font-size: 1.2rem; color: var(--gg-ink-900); }
.gg-d-x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--gg-ink-900); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.gg-d-x:hover { background: var(--gg-ink-100); }
.gg-d-list { margin: 8px 0; padding: 0; list-style: none; }
.gg-d-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 12px 0; font-weight: 500; color: var(--gg-ink-900); border-bottom: 1px solid var(--gg-ink-200); list-style: none; }
.gg-d-list button { padding: 10px 4px; font: 600 .85rem/1 var(--gg-font); color: var(--gg-brand); background: none; border: 0; cursor: pointer; text-underline-offset: 3px; }
.gg-d-list button:hover { text-decoration: underline; }
.gg-d-empty { margin-block: 14px; font-size: .95rem; color: var(--gg-ink-500); }
.gg-d-empty[hidden], .gg-open-quote .gg-badge[hidden] { display: none; }
.gg-form { display: grid; gap: 14px; margin-top: 16px; }
.gg-form label { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--gg-ink-900); }
.gg-form :is(input, select, textarea) {
width: 100%; min-height: 46px; padding: 11px 14px;
font: 400 1rem/1.4 var(--gg-font); color: var(--gg-ink-900);
background: #fff; border: 1px solid #8c8c93; border-radius: var(--gg-r-sm);
}
.gg-form textarea { min-height: 84px; resize: vertical; }
.gg-form :is(input, select, textarea):hover { border-color: var(--gg-ink-900); }
.gg-form :is(input, select, textarea):focus { outline: none; border-color: var(--gg-brand); box-shadow: 0 0 0 3px rgba(46, 49, 146, .22); }
.gg-form :is(input, select, textarea):user-invalid { border-color: var(--gg-red); }
.gg-d-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gg-d-actions .gg-btn { flex: 1 1 150px; cursor: pointer; }
.gg-d-note { margin: 0; font-size: .82rem; color: var(--gg-ink-500); }
/* الرسالة الصغيرة تحت الشاشة (Added to your quote list) */
.gg-toast {
position: fixed; inset-inline: 0; bottom: 22px; z-index: 99999;
width: max-content; max-width: calc(100% - 32px); margin-inline: auto;
padding: 12px 20px; font-size: .92rem; font-weight: 500; color: #fff;
background: var(--gg-ink-900); border-radius: var(--gg-r-full);
box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
opacity: 0; transform: translateY(14px); pointer-events: none;
transition: opacity .3s var(--gg-ease), transform .4s var(--gg-ease);
}
.gg-toast.on { opacity: 1; transform: none; }
/* زرار Add to quote بعد ما المنتج يتضاف (In your quote): أبيض بحد بلون البراند */
.gg-add-quote[aria-pressed="true"],
.gg-quote-cards .df-product-read-more[aria-pressed="true"] {
color: var(--gg-brand) !important;
background: #fff !important;
border: 2px solid var(--gg-brand) !important;
}
/* ==========================================================================
4.25 About page: الهيرو + الأقسام (ap-sec/two) + الفروع
بيعيد استخدام: gg-ph (الهيدر الفاتح والـ breadcrumb)، gg-stats، gg-mv، gg-btn
========================================================================== */
/* الهيرو: عمودين (نص | صورة) جوه Section الـ gg-ph */
.gg-ap-hero {
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: clamp(20px, 4vw, 48px);
align-items: center;
margin-top: 12px;
}
.gg-ap-hero > .et_pb_column { width: auto !important; min-width: 0; gap: 0 !important; }
.gg-ap-hero h1,
.gg-ap-hero .et_pb_module_header { margin: 0 !important; padding: 0 !important; font-size: clamp(2rem, 4vw, 3.2rem) !important; font-weight: 700 !important; line-height: 1.12 !important; color: var(--gg-ink-900) !important; }
.gg-ap-hero .gg-lead { margin: 16px 0 24px; }
/* الصورة لو اتحطت بـ Image module (مش Code figure): زوايا مدوّرة وعرض كامل */
.gg-ap-hero .et_pb_image_wrap { display: block; overflow: hidden; border-radius: var(--gg-r-md); }
.gg-ap-hero .et_pb_image_wrap img { display: block; width: 100%; height: auto; }
.gg-ap-hero .gg-lead p { margin: 0 !important; font-size: 1.05rem; }
/* الأقسام: مسافة فوق، وعنوان H2 */
.gg-ap-sec { padding-block: clamp(28px, 4vw, 52px) 0 !important; }
.gg-ap-sec h2,
.gg-ap-sec .et_pb_module_header { margin: 0 !important; font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important; }
.gg-ap-sec .gg-mv h2 { margin: 0 !important; font-size: 1.2rem !important; }
.gg-ap-sec > .et_pb_row > .et_pb_column { gap: 16px; }
/* صف بعمودين: العنوان (ضيّق) | المحتوى (واسع) */
.gg-ap-two {
display: grid !important;
grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
gap: 16px 40px;
align-items: start;
}
.gg-ap-two > .et_pb_column { width: auto !important; min-width: 0; }
.gg-ap-story p, .gg-ap-p, .gg-ap-p p { max-width: 64ch; margin: 0; line-height: 1.8; color: var(--gg-ink-700); }
.gg-ap-story p + p { margin-top: 14px; }
/* الفروع */
.gg-ap-brs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gg-ap-br { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid #E3E6EF; border-radius: var(--gg-r-md); }
.gg-ap-br strong { font-size: 1.05rem; color: var(--gg-ink-900); }
.gg-ap-br span { font-size: .92rem; line-height: 1.5; color: var(--gg-ink-700); }
.gg-ap-br a { margin-top: 4px; font-weight: 600; color: var(--gg-brand); text-decoration: none; }
.gg-ap-br a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* الفروع لو اتبنت بـ Group في الـ Builder: Group كبير (gg-ap-brs) فيه Group لكل فرع (gg-ap-br) */
.et_pb_group.gg-ap-brs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; }
.et_pb_group.gg-ap-br { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px !important; padding: 18px !important; }
.gg-ap-br .et_pb_module_header { margin: 0 !important; font-size: 1.05rem !important; color: var(--gg-ink-900); } /* اسم الفرع (H3) */
.gg-ap-br .et_pb_text_inner,
.gg-ap-br .et_pb_text p { margin: 0 !important; padding: 0 !important; font-size: .92rem; line-height: 1.5; color: var(--gg-ink-700); }
.gg-ap-br .et_pb_text:last-child p { margin-top: 4px !important; }
.gg-ap-br .et_pb_text a { font-weight: 600; color: var(--gg-brand); text-decoration: none; }
.gg-ap-br .et_pb_text a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
.gg-ap-hero, .gg-ap-two, .gg-ap-brs { grid-template-columns: 1fr; }
.et_pb_group.gg-ap-brs { grid-template-columns: 1fr; }
}
/* ==========================================================================
4.26 Our Solutions page: DiviFlash CPT Filter (فلتر التصنيفات + الشبكة في module واحد، الكلاس gg-sols على الـ module)
الأسماء اتقاست من HTML الصفحة الفعلية (df-cpt-*). الكارت نفس تصميم كروت الحلول في الرئيسية (4.17)
========================================================================== */
/* شيبس الفلتر: حبوب بحد، والنشط بلون البراند. بنلغي الـ sticky بتاع DiviFlash */
.difl_cptfilter.gg-sols .filter_section, .difl_cptfilter.gg-sols .df-cpt-filter-nav { position: static !important; }
.difl_cptfilter.gg-sols .df-cpt-filter-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px !important; padding: 0 !important; list-style: none !important; }
.difl_cptfilter.gg-sols .df-cpt-filter-nav-item {
margin: 0 !important; padding: 9px 16px !important;
font: 500 .9rem/1.2 var(--gg-font);
color: var(--gg-ink-900); background: #fff;
border: 1px solid #CFD4E6; border-radius: 999px;
cursor: pointer; list-style: none !important;
transition: border-color .2s, color .2s, background .2s;
}
.difl_cptfilter.gg-sols .df-cpt-filter-nav-item:hover { color: var(--gg-brand); border-color: var(--gg-brand); }
.difl_cptfilter.gg-sols .df-cpt-filter-nav-item.df-active { color: #fff; background: var(--gg-brand); border-color: var(--gg-brand); }
/* الكارت */
.difl_cptfilter.gg-sols .df-cpt-item { cursor: pointer; }
.difl_cptfilter.gg-sols .df-cpt-outer-wrap {
display: flex; flex-direction: column; height: 100%; overflow: hidden;
background: #fff; border-radius: var(--gg-r-md);
box-shadow: 0 2px 14px rgba(20, 22, 79, .1);
transition: box-shadow .3s var(--gg-ease), transform .3s var(--gg-ease);
}
.difl_cptfilter.gg-sols .df-cpt-item:hover .df-cpt-outer-wrap { box-shadow: 0 14px 30px rgba(20, 22, 79, .16); transform: translateY(-3px); }
.difl_cptfilter.gg-sols .df-cpt-inner-wrap { display: flex; flex: 1; flex-direction: column; padding: 0 !important; }
/* الصورة 8:5 */
.difl_cptfilter.gg-sols .df-cpt-image-wrap { aspect-ratio: 8 / 5; margin: 0 !important; overflow: hidden; background: var(--gg-tint); }
.difl_cptfilter.gg-sols .df-cpt-image-wrap a { display: block; height: 100%; }
.difl_cptfilter.gg-sols .df-cpt-image-wrap img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
/* بادج التصنيف فوق الصورة (فعّل عنصر Categories من الـ module) */
.difl_cptfilter.gg-sols .df-cpt-categories-wrap { order: 0; align-self: flex-start; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: -39px 12px 12px !important; font-size: 0; }
.difl_cptfilter.gg-sols .df-cpt-categories-wrap a:not(:first-of-type) { display: none; }
.difl_cptfilter.gg-sols .df-cpt-categories-wrap a { padding: 7px 11px; font: 600 .82rem/1 var(--gg-font); color: #fff !important; background: var(--gg-brand); border-radius: 5px; text-decoration: none; }
.difl_cptfilter.gg-sols .df-cpt-title-wrap { order: 1; margin: 0 !important; padding: 20px 22px 10px !important; }
.difl_cptfilter.gg-sols .df-cpt-title { margin: 0 !important; padding: 0 !important; font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.3 !important; }
.difl_cptfilter.gg-sols .df-cpt-title a { color: var(--gg-ink-900) !important; text-decoration: none; }
.difl_cptfilter.gg-sols .df-cpt-content-wrap { order: 2; margin: 0 !important; padding: 0 22px 14px !important; font-size: .95rem; line-height: 1.6; color: var(--gg-ink-500); }
.difl_cptfilter.gg-sols .df-cpt-content-wrap p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
/* Read More: حد 2px وينزل لآخر الكارت */
.difl_cptfilter.gg-sols .df-cpt-button-wrap { order: 3; margin: auto 0 0 !important; padding: 0 22px 22px !important; }
.difl_cptfilter.gg-sols .df-cpt-read-more {
display: inline-flex !important; align-items: center; justify-content: center;
min-height: 42px; padding: 10px 16px !important;
font: 600 .86rem/1.2 var(--gg-font) !important;
color: var(--gg-ink-900) !important; background: #fff !important;
border: 2px solid var(--gg-ink-900) !important; border-radius: var(--gg-r-sm) !important;
text-decoration: none; transition: background .2s;
}
.difl_cptfilter.gg-sols .df-cpt-read-more:hover { background: var(--gg-ink-100) !important; }
/* ==========================================================================
5. تقليل الحركة (للي مفعّل Reduce Motion في جهازه)
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.gg-card:hover { transform: none; }
}