/* ===== 1-tokens.css ===== */
/* ==========================================================================
1. TOKENS — مصدر الحقيقة الوحيد للتصميم
الألوان مأخوذة حرفياً من إعدادات Woostify الحالية حتى ما يتغير هوية المتجر،
بس منظّمة بسلّم واضح ومضاف إلها درجات ناقصة (hover, press, حدود, نصوص ثانوية).
========================================================================== */
/* ==========================================================================
الوضع الليلي القسري — مهم جداً
==========================================================================
كروم (وبعض متصفحات أندرويد) عنده خاصية تقلب ألوان أي موقع للوضع الليلي
تلقائياً إذا الجهاز على Dark Mode. المشكلة: يقلب الخلفيات والنصوص بس
ما يقلب الصور — فالمتجر يطلع خلفيته بلَم غامقة، النصوص مطموسة، وكروت
المنتجات بلا خلفية بيضاء، بينما الصور طبيعية.
`color-scheme: only light` يخبر المتصفح إن هذا الموقع تصميمه فاتح فقط،
فيمتنع عن قلبه. (نفس المشكلة كانت مرقّعة موضعياً بالبوت القديم.)
========================================================================== */
:root {
color-scheme: light;
}
/* ==========================================================================
لوحة الألوان — مسحوبة من اللوگو نفسه
==========================================================================
خمس قيم بس موجودة فعلياً بملف اللوگو، وهذي هي كل الهوية:
#603D50 البلَم — اسم "Aerolit" و "Store" والخطين
#C2A7B4 الموڤ — نجمتان
#FFE5F2 وردي فاتح — نجمتان
#FFDBEE وردي — مركز خلفية اللوگو
#FFEBF6 وردي أفتح — وسط الخلفية
#FFFBFF شبه أبيض — حافة الخلفية
كل درجة تحت مؤشّر عليها: (لوگو) = القيمة حرفياً من الملف،
(مشتقة) = محسوبة على نفس درجة اللون حتى تكمّل السلّم (hover، حدود،
نص ثانوي) — لأن اللوگو ما يوفّر درجات وسطى صالحة للنص.
========================================================================== */
:root {
/* --- البلَم: لون التنفيذ الأساسي (أزرار، عناوين، أيقونات) --- */
--ae-plum: #603d50; /* (لوگو) تباين 9.2:1 على الأبيض */
--ae-plum-700: #4c3040; /* (مشتقة) hover */
--ae-plum-900: #35222d; /* (مشتقة) press / نص قوي */
/* --- الموڤ: زخرفة وحدود. فاتح جداً للنص، فإله نسخة داكنة --- */
--ae-mauve: #c2a7b4; /* (لوگو) */
--ae-mauve-700: #8e7182; /* (مشتقة) أيقونات ونص ثانوي — 4.6:1 */
/* --- الوردي: نفس درجة لون ورديات اللوگو (333°) بس مشبّعة،
لأن ورديات اللوگو كلها فاتحة ما تصلح لتأكيد أو زر --- */
--ae-pink: #c24a80; /* (مشتقة) تأكيدات، شارة الخصم، شريط علوي — 4.6:1 */
--ae-pink-600: #a33a6b; /* (مشتقة) hover — 6.2:1 */
--ae-pink-300: #f5c4dd; /* (مشتقة) حدود وردية واضحة */
--ae-pink-200: #ffdbee; /* (لوگو) خلفية الأزرار الثانوية والفوتر */
--ae-pink-100: #ffe5f2; /* (لوگو) خلفيات ناعمة */
--ae-pink-050: #fff3f9; /* (مشتقة) أخف غسلة */
/* --- الأسطح --- */
--ae-bg: #fffbff; /* (لوگو) خلفية الصفحة = خلفية اللوگو */
--ae-surface: #ffffff; /* الكروت */
--ae-surface-2: #fff6fb; /* (مشتقة) كرت ثانوي */
--ae-line: #f3dce8; /* (مشتقة) حدود ناعمة */
--ae-line-strong: #dcbacc; /* (مشتقة) حدود واضحة */
/* --- النصوص: كلها مسحوبة على درجة البلَم حتى ما يصير رمادي غريب --- */
--ae-ink: #2f1c26; /* (مشتقة) نص المتن — 14.6:1 */
--ae-ink-muted: #6a5260; /* (مشتقة) نص ثانوي — 6.9:1 */
--ae-ink-faint: #93808b; /* (مشتقة) placeholder */
--ae-on-dark: #fffbff; /* (لوگو) نص فوق البلَم */
/* --- حالات --- */
--ae-success: #2e7d5b;
--ae-success-bg: #eaf6f0;
--ae-danger: #c0392b;
--ae-danger-bg: #fdecea;
--ae-warning: #b26b00;
--ae-warning-bg: #fff6e5;
--ae-info-bg: var(--ae-pink-100);
/* --- الخطوط --- */
--ae-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
/* خط واحد للموقع كله.
كان Baloo للعناوين وCairo للباقي. بالعربي هذا ما يشتغل مثل اللاتيني:
شكل الحرف يتغيّر بين قسم وقسم فيحس القارئ إنه انتقل لموقع ثاني.
التمييز هسه بالوزن والحجم — Cairo عنده 400 حتى 700.
لو رجّعت Baloo: شغّل تحميله بـ inc/enqueue.php وبدّل هالسطر. */
--ae-font-display: var(--ae-font);
--ae-font-num: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
/* سلّم أحجام مبني للعربي — العربي يحتاج حجم أكبر من اللاتيني لنفس الوضوح */
--ae-fs-xs: 0.75rem; /* 12 */
--ae-fs-sm: 0.875rem; /* 14 */
--ae-fs-base: 1rem; /* 16 — كان 14، صغير على الموبايل */
--ae-fs-md: 1.0625rem; /* 17 */
--ae-fs-lg: 1.25rem; /* 20 */
--ae-fs-xl: 1.5rem; /* 24 */
--ae-fs-2xl: 1.875rem; /* 30 */
--ae-fs-3xl: 2.25rem; /* 36 */
--ae-lh-tight: 1.35; /* عناوين */
--ae-lh-base: 1.85; /* متن عربي — يحتاج تباعد أكبر من اللاتيني */
--ae-lh-snug: 1.6;
--ae-fw-regular: 400;
--ae-fw-medium: 500;
--ae-fw-semi: 600;
--ae-fw-bold: 700;
/* --- المسافات (سلّم 4px) --- */
--ae-1: 0.25rem;
--ae-2: 0.5rem;
--ae-3: 0.75rem;
--ae-4: 1rem;
--ae-5: 1.25rem;
--ae-6: 1.5rem;
--ae-8: 2rem;
--ae-10: 2.5rem;
--ae-12: 3rem;
--ae-16: 4rem;
/* --- الحواف --- */
--ae-r-sm: 8px;
--ae-r: 12px;
--ae-r-lg: 16px;
--ae-r-xl: 22px;
--ae-r-pill: 999px;
/* --- الظلال --- */
--ae-shadow-sm: 0 1px 2px rgba(96, 61, 80, 0.06), 0 1px 3px rgba(96, 61, 80, 0.08);
--ae-shadow: 0 2px 8px rgba(96, 61, 80, 0.08), 0 4px 16px rgba(96, 61, 80, 0.06);
--ae-shadow-lg: 0 8px 24px rgba(96, 61, 80, 0.12);
--ae-ring: 0 0 0 3px rgba(194, 74, 128, 0.3); /* focus */
/* --- الحركة --- */
--ae-t-fast: 0.15s ease;
--ae-t: 0.25s ease;
/* --- القياسات --- */
--ae-tap: 44px; /* أصغر مساحة لمس مقبولة */
--ae-tap-lg: 52px; /* عناصر سطر الشراء — الكمية والزر والمفضلة بنفس الارتفاع */
--ae-bottombar-h: 58px;
}
/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
:root {
--ae-t-fast: 0s;
--ae-t: 0s;
}
}
/* ===== 2-base.css ===== */
/* ==========================================================================
2. BASE — التايبوغرافي العربي والأساسيات
المشكلة الأصلية: الثيم مضبوط على Arimo + Montserrat وهذي خطوط لاتينية ما بيها
حرف عربي واحد، فكل النص العربي كان ينزل على خط النظام (يختلف بين آيفون وأندرويد
وويندوز). هنا نثبّت Cairo لكل شي.
========================================================================== */
/* ==========================================================================
0. أهم قاعدة بالملف — لا تحذفها
الثيم الأب ما يضبط box-sizing عالمياً، يحطه على عناصر مفردة بس. يعني أي
عنصر عرضه 100% ومعاه padding يصير أعرض من أبوه، والصفحة كلها تتجاوز عرض
الشاشة أفقياً بالموبايل: النص ينقص من الجهة، والأزرار تطلع برة الشاشة.
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* حاجز التجاوز الأفقي.
تحذير مهم — لا تحطه على html:
حسب المواصفة، إذا محور واحد صار clip والثاني visible، الثاني يتحوّل
لـ auto. يعني `html { overflow-x: clip }` يخلي overflow-y = auto،
فيصير html حاوية تمرير بارتفاع صفر على كروم أندرويد → صفحة بيضاء
كاملة رغم إن المحتوى موجود (يبين مؤشر التمرير بس ما ينرسم شي).
مثبّت على جهاز حقيقي: مع هذي القاعدة الصفحة بيضاء، وبدونها تشتغل.
الحاجز على body بس، وبـ hidden المدعومة بكل مكان. والسبب الجذري
(box-sizing) منحل فوق أصلاً، فهذا احتياط مو علاج. */
body {
overflow-x: hidden;
}
/* --- توحيد الخط على كل الموقع، بما بيه Elementor والبلگنات --- */
body,
button,
input,
select,
optgroup,
textarea,
.woocommerce-page,
.elementor-widget-container,
.elementor-button,
.jkit-color-scheme,
.tinvwl-theme-style,
.woocommerce-Price-amount,
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.widget-title {
font-family: var(--ae-font) !important;
}
body {
font-size: var(--ae-fs-base);
line-height: var(--ae-lh-base);
color: var(--ae-ink);
background-color: var(--ae-bg);
font-weight: var(--ae-fw-regular);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* الأرقام: نخليها لاتينية دائماً ومحاذاة صح داخل النص العربي */
.woocommerce-Price-amount,
.price,
.quantity input,
.order-total,
.cart-subtotal {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* --- العناوين --- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
color: var(--ae-plum);
line-height: var(--ae-lh-tight);
font-weight: var(--ae-fw-bold);
letter-spacing: 0; /* العربي ما يتقبل letter-spacing — يكسر الوصل */
margin-top: 0;
}
/* العناوين الكبيرة.
`--ae-font-display` صار نفس `--ae-font` (Cairo) — خط واحد للموقع كله،
والتمييز بالوزن 700 والحجم. القاعدة باقية بمكانها حتى لو رجعت تشغّل
خط عناوين منفصل يوم من الأيام ما تحتاج تدور على العناصر من جديد. */
h1, h2,
.entry-title,
.product_title,
.ae-hero__title,
.ae-section-head__title,
.page-header .page-header-title,
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
font-family: var(--ae-font-display) !important;
font-weight: 700;
}
h1, .entry-title { font-size: var(--ae-fs-3xl); margin-bottom: var(--ae-4); }
h2 { font-size: var(--ae-fs-2xl); margin-bottom: var(--ae-4); }
h3 { font-size: var(--ae-fs-xl); margin-bottom: var(--ae-3); }
h4 { font-size: var(--ae-fs-lg); margin-bottom: var(--ae-3); }
h5, h6 { font-size: var(--ae-fs-md); margin-bottom: var(--ae-2); }
@media (max-width: 767px) {
h1, .entry-title { font-size: var(--ae-fs-xl); }
h2 { font-size: var(--ae-fs-lg); }
h3 { font-size: var(--ae-fs-md); }
}
p { margin: 0 0 var(--ae-4); }
p:last-child { margin-bottom: 0; }
/* --- الروابط --- */
a {
color: var(--ae-plum);
text-decoration: none;
transition: color var(--ae-t-fast);
}
/* --- التركيز: مهم للكيبورد وللوصولية، وكان مفقود --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--ae-pink);
outline-offset: 2px;
border-radius: var(--ae-r-sm);
}
/* نشيل الـ outline القبيح للماوس بس نبقيه للكيبورد */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
/* --- الصور --- */
img {
max-width: 100%;
height: auto;
}
/* --- روابط التخطي (كانت إنكليزية وظاهرة) --- */
.skip-link {
background: var(--ae-plum);
color: var(--ae-on-dark);
font-weight: var(--ae-fw-semi);
border-radius: 0 0 var(--ae-r-sm) var(--ae-r-sm);
}
/* --- التحديد --- */
::selection {
background: var(--ae-pink-200);
color: var(--ae-plum-900);
}
/* --- شريط التمرير (ديسكتوب) --- */
@media (min-width: 1024px) {
* {
scrollbar-width: thin;
scrollbar-color: var(--ae-mauve) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
background: var(--ae-mauve);
border-radius: var(--ae-r-pill);
border: 3px solid var(--ae-bg);
}
*::-webkit-scrollbar-track { background: transparent; }
}
/* --- SVG المضمّنة كانت تسرّب النص "image/svg+xml" لقارئات الشاشة --- */
svg title:empty { display: none; }
/* --- الفواصل --- */
hr {
border: 0;
border-top: 1px solid var(--ae-line);
margin: var(--ae-8) 0;
}
/* --- عرض المحتوى: قراءة مريحة للنصوص الطويلة --- */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
max-width: 72ch;
}
/* ==========================================================================
HOVER — على الموبايل، :hover يعلق بعد اللمس ويبقى الزر بلونه الثاني.
لهذا كل تأثيرات الـ hover محصورة بأجهزة عندها ماوس حقيقي.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
a:hover,
a:focus {
color: var(--ae-pink-600); /* كان #C2A7B4 — تباين واطي جداً، غيّرناه */
}
}
/* ===== 3-components.css ===== */
/* ==========================================================================
3. COMPONENTS — أزرار، حقول، بادجات، تنبيهات
الهدف: زر واحد بشكل واحد بكل الموقع بدل 6 أشكال مختلفة (ثيم + ووكومرس +
Elementor + الويشلست + الفورمات).
========================================================================== */
/* --- الأزرار: شكل موحّد --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
button,
input[type="submit"],
.wp-block-button__link,
.elementor-button {
font-family: var(--ae-font);
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-semi);
line-height: 1.4;
min-height: var(--ae-tap);
padding: var(--ae-3) var(--ae-6);
border: 1px solid transparent;
border-radius: var(--ae-r-pill);
cursor: pointer;
transition: background-color var(--ae-t-fast), color var(--ae-t-fast),
box-shadow var(--ae-t-fast), transform var(--ae-t-fast);
text-align: center;
}
/* الزر الأساسي — الشراء والإجراءات المهمة */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button,
#place_order,
.checkout-button,
button[type="submit"].button {
background-color: var(--ae-plum);
color: var(--ae-on-dark);
box-shadow: var(--ae-shadow-sm);
}
.woocommerce a.button.alt:active,
.single_add_to_cart_button:active,
#place_order:active,
.checkout-button:active {
background-color: var(--ae-plum-900);
transform: translateY(0);
box-shadow: var(--ae-shadow-sm);
}
/* الزر الثانوي — الوردي الناعم */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
background-color: var(--ae-pink-200);
color: var(--ae-plum);
}
/* زر معطّل */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
button:disabled {
background-color: var(--ae-line);
color: var(--ae-ink-faint);
cursor: not-allowed;
box-shadow: none;
transform: none;
opacity: 1;
}
/* --- الحقول --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea,
.select2-container .select2-selection--single {
font-family: var(--ae-font);
font-size: var(--ae-fs-base); /* 16px يمنع تكبير الصفحة تلقائياً على آيفون */
line-height: 1.5;
min-height: var(--ae-tap);
width: 100%;
padding: var(--ae-3) var(--ae-4);
color: var(--ae-ink);
background-color: var(--ae-surface);
border: 1px solid var(--ae-line-strong);
border-radius: var(--ae-r);
transition: border-color var(--ae-t-fast), box-shadow var(--ae-t-fast);
box-shadow: none;
}
/* ⚠️ select2 يحتاج معاملة خاصة رغم إنه ياخذ نفس الستايل فوق.
القاعدة فوق تحط `padding: 10.5px 14px` على الصندوق، وselect2 يحط على
النص الداخلي `height` و`line-height` بمقدار ارتفاع الصندوق **كامل**.
يعني نص بارتفاع 50px داخل صندوق داخلي 27px. قِسناه بالشيك أوت:
صندوق الاختيار : 50px بحشوة عمودية 10.5px → الداخلي 27px
النص المعروض : h=50px lh=50px
→ فوق 12px / تحت -11px — النص طالع 11px تحت الصندوق
نفس نمط "الارتفاع المثبّت" اللي عضّنا بالسلة الجانبية وبنموذج الشراء.
الحل: نشيل الحشوة العمودية ونخلي الصندوق `flex` يتوسّط، والنص يرجع
لارتفاع طبيعي بدل ما نلاحق أرقاماً ثابتة. */
.select2-container .select2-selection--single {
display: flex;
align-items: center;
padding-block: 0;
}
.select2-container .select2-selection--single .select2-selection__rendered {
flex: 1 1 auto;
min-width: 0;
height: auto;
line-height: 1.5;
}
input::placeholder,
textarea::placeholder {
color: var(--ae-ink-faint);
opacity: 1;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
border-color: var(--ae-pink);
box-shadow: var(--ae-ring);
outline: none;
}
/* حقل فيه خطأ */
.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
input[aria-invalid="true"] {
border-color: var(--ae-danger);
background-color: var(--ae-danger-bg);
}
.woocommerce-validated input.input-text {
border-color: var(--ae-success);
}
label {
display: inline-block;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
margin-bottom: var(--ae-2);
}
.required {
color: var(--ae-danger);
text-decoration: none;
font-weight: var(--ae-fw-bold);
}
/* زر يشتغل (loading) */
.is-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: ae-spin 0.7s linear infinite;
}
@keyframes ae-spin {
to { transform: rotate(360deg); }
}
/* --- البادجات (تخفيض، نفد المخزون، جديد) --- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: auto;
min-width: auto;
padding: var(--ae-1) var(--ae-3);
font-size: var(--ae-fs-xs);
font-weight: var(--ae-fw-bold);
line-height: 1.6;
color: var(--ae-on-dark);
background-color: var(--ae-pink);
border-radius: var(--ae-r-pill);
box-shadow: var(--ae-shadow-sm);
top: var(--ae-3);
margin: 0;
}
.ae-badge {
display: inline-flex;
align-items: center;
gap: var(--ae-1);
padding: var(--ae-1) var(--ae-3);
font-size: var(--ae-fs-xs);
font-weight: var(--ae-fw-semi);
border-radius: var(--ae-r-pill);
background: var(--ae-pink-100);
color: var(--ae-plum);
}
.ae-badge--out {
background: var(--ae-line);
color: var(--ae-ink-muted);
}
.ae-badge--low {
background: var(--ae-warning-bg);
color: var(--ae-warning);
}
/* --- التنبيهات والرسائل --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-3);
font-size: var(--ae-fs-base);
line-height: var(--ae-lh-snug);
padding: var(--ae-4) var(--ae-5);
margin: 0 0 var(--ae-6);
border: 1px solid transparent;
border-radius: var(--ae-r);
background-color: var(--ae-info-bg);
color: var(--ae-plum);
list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
position: static;
margin: 0;
font-size: 1.1em;
}
.woocommerce-message {
background-color: var(--ae-success-bg);
border-color: rgba(46, 125, 91, 0.25);
color: #1f5c42;
}
.woocommerce-message::before { color: var(--ae-success); }
.woocommerce-error {
background-color: var(--ae-danger-bg);
border-color: rgba(192, 57, 43, 0.25);
color: #93281c;
flex-direction: column;
align-items: stretch;
}
.woocommerce-error li { margin: 0; }
.woocommerce-error::before { color: var(--ae-danger); }
/* أيقونة كل سطر تجي بيضاء من الثيم الأب — تختفي على خلفيتنا الفاتحة */
.woocommerce-error li::before { color: var(--ae-danger); }
/*
* ⚠️ سطور الخطأ تصير **روابط** بعد العرض — مو بالماركب الأصلي.
*
* ووكومرس ١١ عنده `wrapMessagesInsideLink()` بـ checkout.js: كل
* `li[data-id]` ينلف بـ`` حتى الضغط عليه
* ينقلك للحقل. الماركب اللي يجي من السيرفر `…`
* بس — فلو فحصته ساكن يطلع لونه سليم، والزبون يشوف نص شبه أبيض على وردي.
*
* السبب قاعدة بالثيم الأب مكتوبة لماركب أقدم:
* .woocommerce-error li a { display: none; order: 2; margin-left: auto;
* color: #fff; text-decoration: underline }
* يوم كتبوها كان الرابط عنصر جانبي صغير جوّا سطر أحمر — أبيض عليه منطقي.
* هسة الرابط صار **السطر كله** وخلفيتنا فاتحة، فصار نص أبيض على وردي.
*
* لازم نطابق أخصّيتها (كلاس + عنصرين) وإلا ما نفوز — جرّبنا
* `.woocommerce-error a` وانهزمت. ونرجّع خصائص التخطيط لأصلها بعد، لأن
* الرابط ما عاد عنصراً جانبياً بصف مرن.
*/
.woocommerce-error li a,
.woocommerce-message li a,
.woocommerce-info li a {
display: inline;
order: 0;
margin-left: 0;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: currentcolor;
}
.woocommerce-error a:hover,
.woocommerce-error a:focus-visible {
color: var(--ae-danger);
}
.woocommerce-info {
background-color: var(--ae-pink-100);
border-color: var(--ae-line-strong);
}
/* زر داخل التنبيه ما ياخذ كل العرض */
.woocommerce-message .button,
.woocommerce-info .button {
margin: 0;
margin-inline-start: auto;
flex: 0 0 auto;
}
/* --- الكروت --- */
.ae-card {
background: var(--ae-surface);
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
box-shadow: var(--ae-shadow-sm);
padding: var(--ae-5);
}
/* --- عناوين الأقسام (موحّدة بكل الصفحات) --- */
.ae-section-title {
display: block;
text-align: center;
font-size: var(--ae-fs-xl);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum);
margin: 0 0 var(--ae-6);
}
.ae-section-title span {
display: inline-block;
position: relative;
padding-bottom: var(--ae-2);
}
.ae-section-title span::after {
content: "";
position: absolute;
bottom: 0;
right: 50%;
transform: translateX(50%);
width: 52px;
height: 3px;
border-radius: var(--ae-r-pill);
background: linear-gradient(90deg, var(--ae-mauve), var(--ae-plum));
}
/* --- سكيليتون التحميل بدل القفزات --- */
.ae-skeleton {
background: linear-gradient(90deg, var(--ae-line) 25%, var(--ae-pink-050) 50%, var(--ae-line) 75%);
background-size: 200% 100%;
animation: ae-shimmer 1.4s infinite;
border-radius: var(--ae-r);
}
@keyframes ae-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ==========================================================================
HOVER — على الموبايل، :hover يعلق بعد اللمس ويبقى الزر بلونه الثاني.
لهذا كل تأثيرات الـ hover محصورة بأجهزة عندها ماوس حقيقي.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.single_add_to_cart_button:hover,
#place_order:hover,
.checkout-button:hover {
background-color: var(--ae-plum-700);
color: var(--ae-on-dark);
box-shadow: var(--ae-shadow);
transform: translateY(-1px);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
background-color: var(--ae-pink-100);
color: var(--ae-plum-900); /* كان #C2A7B4 على خلفية فاتحة = تباين 1.9:1، غير مقروء */
box-shadow: var(--ae-shadow-sm);
}
.ae-qty-btn:hover {
background: var(--ae-pink-200);
}
}
/* --------------------------------------------------------------------------
أيقونات رسائل ووكومرس: كانت تعتمد على خط أيقونات ما يتحمّل دائماً،
فيطلع مربع فاضي جنب النص. نشيلها ونستخدم نقطة ملوّنة بدلها.
-------------------------------------------------------------------------- */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.cart-empty::before {
content: "" !important;
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.55;
font-size: 0;
padding: 0;
margin: 0;
}
/* أزرار داخل الرسائل ما تاخذ عرض الصفحة كامل */
.woocommerce .return-to-shop .button,
.woocommerce .cart-empty + .return-to-shop .button,
.woocommerce-info .button,
.woocommerce-message .button {
display: inline-flex;
width: auto;
min-width: 180px;
max-width: 100%;
}
.woocommerce .return-to-shop {
text-align: center;
margin-top: var(--ae-4);
}
/* --------------------------------------------------------------------------
أزرار التواصل — مكوّن مشترك
⚠️ كان هذا الستايل بـ4-woocommerce.css أيام ما كان يستعمل بالشيك أوت بس.
ذاك الملف ما ينحمّل بالصفحات غير المتجرية (شوف aerolit_is_woo_page()
بـinc/enqueue.php)، والفوتر موجود بكل صفحة — فلو تركناه هناك تطلع
أزرار الفوتر بلا ستايل بصفحة "من نحن" وأي صفحة ساكنة. نقلناه هنا.
-------------------------------------------------------------------------- */
.ae-contact__lead {
margin: 0 0 var(--ae-3);
line-height: var(--ae-lh-snug);
}
.ae-contact__links {
display: flex;
flex-wrap: wrap;
gap: var(--ae-2);
}
.ae-contact__link {
display: inline-flex;
align-items: center;
gap: var(--ae-2);
min-height: var(--ae-tap);
padding: var(--ae-2) var(--ae-4);
border: 1px solid var(--ae-line-strong);
border-radius: var(--ae-r-pill);
background: var(--ae-surface);
color: var(--ae-ink);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
text-decoration: none;
transition: border-color var(--ae-t-fast), background var(--ae-t-fast);
}
.ae-contact__link:hover,
.ae-contact__link:focus-visible {
border-color: var(--ae-pink);
background: var(--ae-pink-050);
color: var(--ae-ink);
}
/* الأيقونات مملوءة بلون التطبيق نفسه — الشعار المعروف ينعرف بلمحة،
والنص يبقى بلون المتن حتى ما يصير الزر مزركش. */
.ae-contact__link svg {
width: 20px;
height: 20px;
flex: none;
fill: currentColor;
stroke: none;
}
.ae-contact__link--whatsapp svg { color: #25d366; }
.ae-contact__link--telegram svg { color: #229ed9; }
.ae-contact__link--instagram svg { color: #e1306c; }
/* صفحة ما بعد الطلب: الصندوق أوسع، فالأزرار تملأ السطر بالموبايل */
@media (max-width: 480px) {
.ae-contact__links--thankyou .ae-contact__link {
flex: 1 1 100%;
justify-content: center;
}
}
/* الفوتر: أرضيته وردية أصلاً، فحد الزر الوردي يضيع عليها — نخليه أبيض
مصمت بحد شفاف وظل خفيف يفصله عن الأرضية. */
.ae-footer__social {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ae-3);
margin-top: var(--ae-8);
padding-top: var(--ae-6);
border-top: 1px solid var(--ae-pink-300);
}
.ae-footer__social h3 {
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum);
margin: 0;
}
.ae-contact__links--footer {
justify-content: center;
}
/* ⚠️ زر البوت العائم مثبّت أسفل يسار الشاشة، وأزرار التواصل صارت آخر شي
بالصفحة — فعند آخر تمرير كان الزر العائم يگع فوق زر واتساب ويبلع
الضغطة. نحجز مساحة فاضية تحتهن حتى يگع الزر العائم عليها. */
@media (max-width: 767px) {
.ae-footer {
padding-bottom: calc(var(--ae-6) + 76px) !important;
}
}
.ae-contact__links--footer .ae-contact__link {
border-color: transparent;
box-shadow: var(--ae-shadow-sm);
color: var(--ae-plum);
}
.ae-contact__links--footer .ae-contact__link:hover,
.ae-contact__links--footer .ae-contact__link:focus-visible {
background: var(--ae-surface);
border-color: var(--ae-pink);
transform: translateY(-1px);
}
/* ===== 4-woocommerce.css ===== */
/* ==========================================================================
4. WOOCOMMERCE — المتجر، كرت المنتج، صفحة المنتج، السلة، الشيك أوت
========================================================================== */
/* --------------------------------------------------------------------------
4.1 رأس الصفحة والبريدكرمب
-------------------------------------------------------------------------- */
.page-header {
background: linear-gradient(160deg, var(--ae-pink-100) 0%, var(--ae-pink-200) 100%);
border-bottom: 1px solid var(--ae-pink-300);
padding: var(--ae-8) var(--ae-4);
margin-bottom: var(--ae-8);
text-align: center;
}
.page-header .page-header-title,
.page-header h1 {
font-size: var(--ae-fs-2xl);
color: var(--ae-plum);
margin: 0 0 var(--ae-2);
}
.woocommerce-breadcrumb {
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
}
.woocommerce-breadcrumb a {
color: var(--ae-ink-muted);
}
@media (max-width: 767px) {
.page-header {
padding: var(--ae-5) var(--ae-4);
margin-bottom: var(--ae-5);
}
.page-header .page-header-title,
.page-header h1 { font-size: var(--ae-fs-lg); }
}
/* --------------------------------------------------------------------------
4.1.1 بلا سايدبار — ضمانة ثانية فوق إعداد الثيم
السايدبار كان ينضغط بعمود ضيق ويطلع النص العربي حرف بكل سطر.
-------------------------------------------------------------------------- */
.woocommerce #secondary,
.woocommerce-page #secondary,
.archive #secondary,
#secondary.shop-widget {
display: none !important;
}
.woocommerce #primary,
.woocommerce-page #primary,
.archive #primary {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin-inline: auto !important;
}
/* حاوية المحتوى تاخذ العرض الكامل */
.woocommerce .content-area,
.woocommerce-page .content-area {
width: 100%;
}
/* --------------------------------------------------------------------------
4.2 شريط أدوات المتجر (الترتيب + عدد النتائج)
-------------------------------------------------------------------------- */
.woocommerce-products-header + .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce .woocommerce-result-count {
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
margin-bottom: var(--ae-4);
}
.woocommerce .woocommerce-ordering select,
.woocommerce-ordering .orderby {
min-height: var(--ae-tap);
border-radius: var(--ae-r-pill);
border-color: var(--ae-line-strong);
background-color: var(--ae-surface);
padding-inline: var(--ae-5) var(--ae-4);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-medium);
color: var(--ae-plum);
width: auto;
max-width: 100%;
}
/* --------------------------------------------------------------------------
4.3 شبكة المنتجات — الشبكة الأصلية 5 أعمدة ضيقة، نخليها متنفسة
-------------------------------------------------------------------------- */
.woocommerce ul.products {
display: grid;
gap: var(--ae-5);
margin: 0 0 var(--ae-8);
padding: 0;
list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
content: none; /* نلغي الـ clearfix القديم — ما ينفع مع grid */
}
.woocommerce ul.products li.product {
width: 100% !important;
margin: 0 !important;
float: none !important;
clear: none !important;
padding: 0;
}
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) {
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.woocommerce ul.products,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ae-3);
}
}
/* --------------------------------------------------------------------------
4.4 كرت المنتج
-------------------------------------------------------------------------- */
.woocommerce ul.products li.product .product-loop-wrapper {
position: relative; /* مرجع لزر المفضلة فوق الصورة */
display: flex;
flex-direction: column;
height: 100%;
background: var(--ae-surface);
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
overflow: hidden;
transition: box-shadow var(--ae-t), transform var(--ae-t), border-color var(--ae-t);
}
/* الصورة: نسبة ثابتة حتى ما تقفز الشبكة أثناء التحميل (CLS).
ونشيل الحد المتقطع اللي كان محطوط بإعدادات الثيم — الكرت نفسه إله حد،
فصار حدّين فوق بعض ومنظرها مزدحم. */
.woocommerce ul.products li.product .product-loop-image-wrapper {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--ae-surface-2);
border: 0 !important;
}
.woocommerce ul.products li.product .product-loop-image-wrapper img,
.woocommerce ul.products li.product .product-loop-hover-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ae-t);
}
.woocommerce ul.products li.product .product-loop-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: var(--ae-1);
padding: var(--ae-3) var(--ae-3) var(--ae-4);
}
/* اسم القسم فوق العنوان */
.woocommerce-loop-product__category {
font-size: var(--ae-fs-xs);
color: var(--ae-ink-muted);
line-height: 1.5;
}
.woocommerce-loop-product__category a { color: inherit; }
/* العنوان: سطرين ثابتين حتى تبقى الكروت بنفس الطول */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: var(--ae-fs-base) !important;
font-weight: var(--ae-fw-semi);
line-height: 1.5;
color: var(--ae-plum) !important;
margin: 0;
min-height: calc(2 * 1.5em);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: var(--ae-fs-md) !important;
}
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: inherit; }
/* السعر — أكبر وأغمق، هو ثاني أهم شي بالكرت بعد الصورة */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
font-size: var(--ae-fs-lg) !important;
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900) !important;
}
.woocommerce ul.products li.product .price {
margin: var(--ae-1) 0 var(--ae-3);
display: block;
line-height: 1.5;
}
/* اسم القسم فوق العنوان: واضح مو باهت */
.woocommerce ul.products li.product .woocommerce-loop-product__category {
font-size: var(--ae-fs-xs);
font-weight: var(--ae-fw-semi);
color: var(--ae-pink-600);
}
.woocommerce ul.products li.product .price del {
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-regular);
color: var(--ae-ink-faint);
margin-inline-end: var(--ae-2);
}
.woocommerce ul.products li.product .price ins {
text-decoration: none;
color: var(--ae-pink-600);
}
/* مسافة بين الرقم والعملة — كانت ملزوقة: "15,000د.ع" */
.woocommerce-Price-currencySymbol {
margin-inline-start: 0.25em;
font-weight: var(--ae-fw-medium);
}
/* منطقة الأزرار تلتصق بأسفل الكرت */
.woocommerce ul.products li.product .product-loop-meta {
margin-top: auto;
display: block;
}
.woocommerce ul.products li.product .animated-meta {
display: block;
width: 100%;
}
/* زر الإضافة للسلة — كامل العرض بأسفل الكرت، بلون قوي مو باهت.
كان وردي فاتح على خلفية بيضاء: يضيع ولا يبين إنه زر. */
.woocommerce ul.products li.product .loop-add-to-cart-btn,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_variable {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: var(--ae-2);
min-height: 42px;
padding: var(--ae-2) var(--ae-3);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
border-radius: var(--ae-r-pill);
background: var(--ae-plum) !important;
color: var(--ae-on-dark) !important;
box-shadow: var(--ae-shadow-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.woocommerce ul.products li.product .loop-add-to-cart-btn .woostify-svg-icon,
.woocommerce ul.products li.product .add_to_cart_button .woostify-svg-icon {
color: var(--ae-on-dark) !important;
}
.woocommerce ul.products li.product .loop-add-to-cart-btn svg path {
fill: currentColor;
}
.woocommerce ul.products li.product .woostify-svg-icon svg {
width: 16px;
height: 16px;
}
/* الويشلست: كان يطبع النص ٣ مرات بكل كرت — صار قلب فوق الصورة مثل المعاينة */
.woocommerce ul.products li.product .tinv-wraper {
position: absolute;
top: var(--ae-2);
inset-inline-end: var(--ae-2);
z-index: 3;
margin: 0;
}
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--ae-line);
color: var(--ae-plum);
box-shadow: var(--ae-shadow-sm);
transition: background var(--ae-t-fast), color var(--ae-t-fast), transform var(--ae-t-fast);
}
/* الفراغ الفاضي اللي يتركه البلگن حول زر المفضلة */
.woocommerce ul.products li.product .tinv-wishlist-clear {
display: none;
}
/* النص المكرر يختفي بصرياً بس يبقى لقارئات الشاشة.
بلگن المفضلة يطبع الكلمة مرتين: مرة كنص الزر ومرة بـ span جواه. بكروت
المتجر كنا مخفينها، بس بصفحة المنتج كانت تظهر "أضف للمفضلة" سطرين
فوق بعض. نخفي الـ span بالمكانين. */
.woocommerce ul.products li.product .tinvwl_add_to_wishlist-text,
.woocommerce ul.products li.product .tinvwl-tooltip,
.woocommerce div.product .tinvwl_add_to_wishlist-text,
.woocommerce div.product .tinvwl-tooltip {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* نفد المخزون */
.woocommerce ul.products li.product.outofstock .product-loop-image-wrapper::after {
content: "نفد من المخزون";
position: absolute;
inset-inline: 0;
bottom: 0;
padding: var(--ae-2);
text-align: center;
font-size: var(--ae-fs-xs);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
background: rgba(255, 229, 242, 0.94);
}
/* --------------------------------------------------------------------------
4.5 صفحة المنتج
-------------------------------------------------------------------------- */
.single-product div.product .product_title {
font-size: var(--ae-fs-2xl);
margin-bottom: var(--ae-3);
}
.single-product div.product .summary p.price,
.single-product div.product .summary .price {
font-size: var(--ae-fs-2xl);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
margin-bottom: var(--ae-5);
}
.single-product div.product .summary .price del {
font-size: var(--ae-fs-lg);
color: var(--ae-ink-faint);
}
.single-product div.product .woocommerce-product-details__short-description {
font-size: var(--ae-fs-base);
line-height: var(--ae-lh-base);
color: var(--ae-ink);
margin-bottom: var(--ae-5);
}
/* الكمية: أكبر وأوضح للمس */
.woocommerce .quantity .qty {
min-height: var(--ae-tap);
width: 72px;
text-align: center;
border-radius: var(--ae-r);
font-weight: var(--ae-fw-semi);
}
.single-product form.cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-3);
margin-bottom: var(--ae-6);
}
.single-product form.cart .single_add_to_cart_button {
flex: 1 1 220px;
min-height: 52px;
font-size: var(--ae-fs-md);
}
/* خيارات المنتج (الألوان/المقاسات) */
.woocommerce div.product form.cart .variations {
margin-bottom: var(--ae-4);
width: 100%;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
padding: var(--ae-2) 0;
vertical-align: middle;
}
.woocommerce div.product form.cart .variations label {
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
margin: 0;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
border-radius: var(--ae-r-sm);
box-shadow: 0 0 0 1px var(--ae-line-strong);
}
.woo-variation-swatches .variable-items-wrapper .variable-item.selected:not(.radio-variable-item) {
box-shadow: 0 0 0 2px var(--ae-pink);
}
/* حالة المخزون */
.woocommerce div.product .stock {
display: inline-flex;
align-items: center;
gap: var(--ae-2);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
padding: var(--ae-1) var(--ae-3);
border-radius: var(--ae-r-pill);
}
.woocommerce div.product .stock.in-stock {
color: var(--ae-success);
background: var(--ae-success-bg);
}
.woocommerce div.product .stock.out-of-stock {
color: var(--ae-danger);
background: var(--ae-danger-bg);
}
/* معرض الصور */
.woocommerce div.product div.images img {
border-radius: var(--ae-r-lg);
}
/* التبويبات */
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: var(--ae-2);
padding: 0;
margin: 0 0 var(--ae-5);
border-bottom: 1px solid var(--ae-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
content: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
margin: 0;
padding: 0;
border: 0;
background: transparent;
border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
content: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: var(--ae-3) var(--ae-4);
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-semi);
color: var(--ae-ink-muted);
border-bottom: 3px solid transparent;
}
/* منتجات ذات صلة / قد يعجبك */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
font-size: var(--ae-fs-xl);
text-align: center;
margin-bottom: var(--ae-6);
}
/* --------------------------------------------------------------------------
4.6 السلة
-------------------------------------------------------------------------- */
.woocommerce table.shop_table {
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--ae-surface);
}
.woocommerce table.shop_table th {
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
background: var(--ae-pink-050);
padding: var(--ae-4);
}
.woocommerce table.shop_table td {
padding: var(--ae-4);
border-top: 1px solid var(--ae-line);
vertical-align: middle;
}
.woocommerce table.shop_table img {
border-radius: var(--ae-r-sm);
width: 64px;
height: 64px;
object-fit: cover;
}
.woocommerce a.remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: 18px;
line-height: 1;
color: var(--ae-danger);
background: var(--ae-danger-bg);
border-radius: 50%;
}
.cart_totals h2 {
font-size: var(--ae-fs-lg);
}
.woocommerce-cart .cart-collaterals .cart_totals {
background: var(--ae-surface);
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
padding: var(--ae-5);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
display: block;
width: 100%;
min-height: 52px;
font-size: var(--ae-fs-md);
}
/* السلة الفارغة */
.cart-empty,
.wc-empty-cart-message {
text-align: center;
font-size: var(--ae-fs-lg);
color: var(--ae-ink-muted);
}
.return-to-shop {
text-align: center;
}
/* --------------------------------------------------------------------------
4.7 الشيك أوت — أهم صفحة بالموقع
-------------------------------------------------------------------------- */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
float: none;
width: 100%;
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
background: var(--ae-surface);
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
padding: var(--ae-5);
margin-bottom: var(--ae-5);
}
.woocommerce-checkout h3 {
font-size: var(--ae-fs-lg);
padding-bottom: var(--ae-3);
margin-bottom: var(--ae-4);
border-bottom: 1px solid var(--ae-line);
}
.woocommerce form .form-row {
display: flex;
flex-direction: column;
gap: var(--ae-1);
padding: 0;
margin: 0 0 var(--ae-4);
}
.woocommerce form .form-row label {
margin-bottom: 0;
}
/* رسالة الخطأ تحت الحقل نفسه بدل ما تكون بأعلى الصفحة بس */
.woocommerce form .form-row .ae-field-error {
font-size: var(--ae-fs-xs);
color: var(--ae-danger);
}
/* جدول مراجعة الطلب */
.woocommerce-checkout-review-order-table {
font-size: var(--ae-fs-base);
}
.woocommerce-checkout-review-order-table .order-total .amount {
font-size: var(--ae-fs-lg);
color: var(--ae-plum-900);
}
/* أجرة التوصيل: تظهر بوضوح مو مخفية بسطر صغير */
.woocommerce-checkout-review-order-table tr.shipping th,
.woocommerce-checkout-review-order-table tr.shipping td {
background: var(--ae-pink-050);
font-weight: var(--ae-fw-semi);
}
/* طرق الدفع */
.woocommerce-checkout #payment {
background: transparent;
border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
padding: 0;
border: 0;
display: flex;
flex-direction: column;
gap: var(--ae-2);
}
.woocommerce-checkout #payment ul.payment_methods li {
list-style: none;
padding: var(--ae-4);
border: 1px solid var(--ae-line-strong);
border-radius: var(--ae-r);
background: var(--ae-surface);
transition: border-color var(--ae-t-fast), background var(--ae-t-fast);
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
border-color: var(--ae-pink);
background: var(--ae-pink-050);
}
.woocommerce-checkout #payment ul.payment_methods li label {
font-size: var(--ae-fs-base);
margin: 0;
cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
background: transparent;
padding: var(--ae-3) 0 0;
margin: var(--ae-2) 0 0;
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
}
.woocommerce-checkout #payment div.payment_box::before {
content: none;
}
.woocommerce-checkout #place_order {
width: 100%;
min-height: 56px;
font-size: var(--ae-fs-md);
margin-top: var(--ae-4);
}
/* صفحة شكراً */
.woocommerce-order-received .woocommerce-thankyou-order-received {
font-size: var(--ae-fs-lg);
font-weight: var(--ae-fw-semi);
color: var(--ae-success);
background: var(--ae-success-bg);
padding: var(--ae-5);
border-radius: var(--ae-r-lg);
text-align: center;
}
/* --------------------------------------------------------------------------
4.8 حسابي وتسجيل الدخول
-------------------------------------------------------------------------- */
/* ووكومرس يحط حد متقطع حول فورم الدخول — منظره مثل مربع مقصوص.
نخليه كرت نظيف. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
background: var(--ae-surface);
box-shadow: var(--ae-shadow-sm);
padding: var(--ae-6) var(--ae-5);
margin: 0 auto var(--ae-6);
max-width: 460px;
}
.woocommerce-account .u-columns.col2-set {
display: grid;
gap: var(--ae-5);
}
@media (min-width: 992px) {
.woocommerce-account .u-columns.col2-set {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
width: 100%;
float: none;
}
}
/* زر الدخول: أساسي، بلون قوي */
.woocommerce form.login button[type="submit"],
.woocommerce form.register button[type="submit"],
.woocommerce form.lost_reset_password button[type="submit"] {
width: 100%;
min-height: 48px;
background: var(--ae-plum) !important;
color: var(--ae-on-dark) !important;
font-size: var(--ae-fs-base);
box-shadow: var(--ae-shadow-sm);
}
.woocommerce-form-login__rememberme {
display: flex;
align-items: center;
gap: var(--ae-2);
margin-bottom: var(--ae-4);
}
.woocommerce-LostPassword {
text-align: center;
margin: var(--ae-3) 0 0;
}
/* --------------------------------------------------------------------------
4.9 قائمة حسابي
-------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0 0 var(--ae-5);
display: flex;
flex-wrap: wrap;
gap: var(--ae-2);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block;
padding: var(--ae-2) var(--ae-4);
border-radius: var(--ae-r-pill);
background: var(--ae-pink-050);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-medium);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
background: var(--ae-plum);
color: var(--ae-on-dark);
}
/* ==========================================================================
HOVER — على الموبايل، :hover يعلق بعد اللمس ويبقى الزر بلونه الثاني.
لهذا كل تأثيرات الـ hover محصورة بأجهزة عندها ماوس حقيقي.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
.woocommerce-breadcrumb a:hover {
color: var(--ae-plum);
}
.woocommerce ul.products li.product:hover .product-loop-wrapper {
border-color: var(--ae-line-strong);
box-shadow: var(--ae-shadow);
transform: translateY(-2px);
}
.woocommerce ul.products li.product:hover .product-loop-image-wrapper img {
transform: scale(1.04);
}
.woocommerce-loop-product__category a:hover { color: var(--ae-pink-600); }
.woocommerce ul.products li.product .loop-add-to-cart-btn:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .product_type_variable:hover {
background: var(--ae-pink) !important;
color: #fff !important;
}
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:hover {
background: var(--ae-surface);
color: var(--ae-pink-600);
transform: scale(1.08);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--ae-plum);
border-bottom-color: var(--ae-pink);
}
.woocommerce a.remove:hover {
color: #fff;
background: var(--ae-danger);
}
.woocommerce form.login button[type="submit"]:hover {
background: var(--ae-pink) !important;
}
}
/* --------------------------------------------------------------------------
4.10 رابط "عرض السلة" بعد الإضافة
ووكومرس يضيف رابط جوة الكرت بعد الإضافة بالأجاكس.
بستايل الثيم كان يطلع مربع أبيض فاضي داخل الزر الوردي. نخليه رابط واضح
تحت الزر — أو نخفيه، لأن عدّاد السلة بالشريط يعلم الزبون أصلاً.
-------------------------------------------------------------------------- */
.woocommerce ul.products li.product .added_to_cart {
display: block;
width: 100%;
margin-top: var(--ae-2);
padding: 0;
min-height: 0;
background: none !important;
border: 0;
box-shadow: none;
font-size: var(--ae-fs-xs);
font-weight: var(--ae-fw-semi);
color: var(--ae-pink-600) !important;
text-align: center;
text-decoration: underline;
}
/* عنصر ".added" الفاضي حق الثيم */
.woocommerce ul.products li.product .added,
.woocommerce ul.products li.product .product-loop-meta .added {
display: none !important;
}
/* حالة التحميل: دائرة تدور، مو مربع */
.woocommerce ul.products li.product .button.loading::before,
.woocommerce ul.products li.product .button.loading::after {
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
4.11 نافذة المفضلة المنبثقة
-------------------------------------------------------------------------- */
.tinv-modal .tinv-modal-inner {
border-radius: var(--ae-r-lg);
padding: var(--ae-6) var(--ae-5);
max-width: 420px;
box-shadow: var(--ae-shadow-lg);
}
.tinv-modal .tinv-txt {
font-size: var(--ae-fs-base);
line-height: var(--ae-lh-snug);
color: var(--ae-ink);
}
.tinv-modal .tinvwl-buttons-group {
display: flex;
flex-direction: column;
gap: var(--ae-2);
margin-top: var(--ae-5);
}
.tinv-modal .tinvwl-buttons-group button,
.tinv-modal .tinvwl-buttons-group a.button {
width: 100%;
min-height: 46px;
border-radius: var(--ae-r-pill);
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-semi);
}
/* الزر الأول: أساسي بلون قوي */
.tinv-modal .tinvwl-buttons-group button:first-child,
.tinv-modal .tinvwl-buttons-group .tinvwl_button_view {
background: var(--ae-plum) !important;
color: var(--ae-on-dark) !important;
}
/* زر الإغلاق: ثانوي */
.tinv-modal .tinvwl-buttons-group button.tinvwl_button_close,
.tinv-modal .tinvwl-buttons-group button:last-child {
background: transparent !important;
color: var(--ae-plum) !important;
border: 1px solid var(--ae-line-strong) !important;
}
.tinv-modal .tinv-modal-icon svg,
.tinv-modal .tinvwl-icon svg {
fill: var(--ae-pink);
stroke: var(--ae-pink);
}
/* --------------------------------------------------------------------------
4.12 نموذج الشراء بصفحة المنتج
كان مرتّب بالموبايل بس (القواعد كانت كلها داخل media أقل من 768).
على الديسكتوب يبقى `display: block` مثل ما يجي من ووكومرس، فتطلع
الكمية بجهة والزر بجهة والمفضلة تاخذ سطر كامل لوحدها بعرض الكولَم.
هسه صف واحد بكل المقاسات: [الكمية] [أضف للسلة يتمدد] [♡ مربّع].
-------------------------------------------------------------------------- */
.single-product form.cart,
.single-product form.variations_form.cart .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--ae-3);
width: 100%;
}
/* الفورم الأب للمنتجات متعددة الخيارات يبقى block — جوّاه جدول الخيارات
وسطر الشراء، ولو صار flex ينكسر ترتيبهن. */
.single-product form.variations_form.cart {
display: block;
}
.single-product form.cart .quantity,
.single-product .woocommerce-variation-add-to-cart .quantity {
flex: 0 0 auto;
margin: 0;
}
.single-product form.cart .single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
flex: 1 1 160px;
justify-content: center;
margin: 0;
min-height: var(--ae-tap-lg, 52px);
}
/* المفضلة: كانت سطر كامل تحت الزر. صارت مربّع بنفس ارتفاعه جنبه.
لازم عرض صريح 52px — بـ`auto` الغلاف يتمدد لعرض الصف كله وينزل
لسطر لوحده، لأنه div عادي مو عنصر بحجم محتواه. */
.single-product .woocommerce-variation-add-to-cart .tinv-wraper,
.single-product form.cart .tinv-wraper {
flex: 0 0 52px;
width: 52px;
margin: 0;
display: flex;
align-items: stretch;
}
.single-product .tinv-wraper .tinvwl_add_to_wishlist_button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
min-height: var(--ae-tap-lg, 52px);
padding: 0;
margin: 0;
border: 1px solid var(--ae-line-strong);
border-radius: var(--ae-r-pill);
background: var(--ae-surface);
color: var(--ae-plum);
font-size: 18px;
}
@media (hover: hover) and (pointer: fine) {
.single-product .tinv-wraper .tinvwl_add_to_wishlist_button:hover {
background: var(--ae-pink-050);
border-color: var(--ae-pink-300);
color: var(--ae-pink-600);
}
}
/* الكمية والزر لازم يتطابقون بالارتفاع — كانوا 50 و52 فيبين الفرق */
.single-product form.cart .quantity,
.single-product .woocommerce-variation-add-to-cart .quantity {
min-height: var(--ae-tap-lg, 52px);
}
/* ⚠️ و`min-height` هذا خلّى محتوى الكبسولة ينحشر بأعلاها.
الكبسولة `border-box` وعليها حدّ 1px، يعني صندوقها الداخلي 50px،
والخلايا الثلاث (− والحقل و+) عندها `height: 44px` صريح. و`align-items:
stretch` **ما يمدّد عنصر عنده ارتفاع مصرّح** — يحطه ببداية المحور
العرضي، يعني فوگ. قِسناه (1533):
الكبسولة 142x52، صندوقها الداخلي y549..599 (50px) مركزه y=574
− / الحقل / + 44px، كلهن y549..593
→ فراغ فوگ = 0px، فراغ تحت = 6px ⚠ والرقم أعلى 3px من المركز
الحل: الخليتان الورديتان تتمددن لكل الارتفاع (و`overflow: hidden`
على الكبسولة يقصّهن على شكل الحبّة)، والحقل يتوسّط — خلفيته
`--ae-surface` نفس خلفية الكبسولة فصندوقه ما يبيّن، المهم مكان الرقم.
لا تصلّحها بـ`height: 50px` على الخلايا — هذا يثبّت حساب الحدّ بالمتن
وينكسر أول ما يتغيّر. */
.single-product form.cart .quantity .product-qty,
.single-product .woocommerce-variation-add-to-cart .quantity .product-qty {
height: auto;
align-self: stretch;
}
.single-product form.cart .quantity input.qty,
.single-product .woocommerce-variation-add-to-cart .quantity input.qty {
align-self: center;
}
/* --- رابط "إلغاء الاختيار" ---
كان يطلع بصندوق أبيض بحدود ونصف قطر تحت السواتشات، فيقرأ كأنه خيار
ثالث بالقائمة. وهو مو خيار، هو تراجع.
الحد يجيه من قاعدة أقوى (بلگن السواتشات يستهدفه بمحدد طويل)، فقواعدنا
العادية ما تغلبها — نستعمل !important على الثلاث خصائص البصرية بس. */
.woocommerce div.product form.cart a.reset_variations,
.single-product a.reset_variations {
display: inline-flex;
align-items: center;
gap: var(--ae-1);
padding: 0 !important;
border: 0 !important;
background: none !important;
border-radius: 0;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-medium);
color: var(--ae-ink-muted);
text-decoration: underline;
text-underline-offset: 3px;
line-height: 1.6;
}
/* أيقونة الإعادة كانت ملزوقة بالنص */
.single-product a.reset_variations .woostify-svg-icon {
display: inline-flex;
margin-inline-end: var(--ae-1);
}
.single-product a.reset_variations svg {
width: 14px;
height: 14px;
}
@media (hover: hover) and (pointer: fine) {
.single-product a.reset_variations:hover {
color: var(--ae-plum);
}
}
/* ووكومرس يخفيه بـ inline style لما ما أكو اختيار — نحترم ذلك */
.reset_variations[style*="visibility: hidden"],
.reset_variations[style*="display: none"] {
display: none !important;
}
/* --- المسافات ---
كانت فجوة ~67px بين رابط الإلغاء وسطر الشراء: هامش جدول الخيارات +
حشوة خليّته + هامش single_variation_wrap + بلوك السعر الفاضي. */
.single-product .single_variation_wrap {
margin-top: var(--ae-3);
}
.single-product table.variations {
margin-bottom: var(--ae-2);
}
.single-product table.variations td,
.single-product table.variations th {
padding: 0;
border: 0;
}
/* رابط الإلغاء كان يطير لليسار بينما السواتشات باليمين.
`text-align` ما نفع معه (جرّبناها — بقى بالطرف الغلط)، فنخليه صندوق
بعرض محتواه ونزيحه بالهوامش: `margin-inline-end: auto` يلزمه ببداية
السطر، يعني اليمين بالعربي واليسار لو انقلب الاتجاه. */
.single-product table.variations td.value {
text-align: start;
}
.woocommerce div.product form.cart a.reset_variations,
.single-product a.reset_variations {
/* السبب الحقيقي لوقوفه بالطرف الغلط: البلگن يعطيه `float: left`.
العنصر العائم ما تزيحه لا الهوامش التلقائية ولا `text-align` —
ضيّعنا محاولتين عليهن قبل ما نقيس `float`. نشيل العوم أول،
وبعدها `margin-left: auto` يلزمه باليمين.
و`flex` مو `inline-flex` حتى تشتغل الهوامش التلقائية أصلاً. */
float: none !important;
display: flex;
width: fit-content;
margin-right: 0;
margin-left: auto;
}
/* بلوك سعر الخيار المنتخب: السعر معروض فوق أصلاً، فلما يكون فاضي
(أو بس مسافات) ما نخليه ياخذ ارتفاع. */
.single-product .woocommerce-variation.single_variation {
margin: 0;
}
.single-product .woocommerce-variation.single_variation:empty {
display: none;
}
.single-product .woocommerce-variation-price:empty,
.single-product .woocommerce-variation-availability:empty,
.single-product .woocommerce-variation-description:empty {
display: none;
}
/* --- الموبايل ---
جرّبنا نخليهم صف واحد بتضييق المقاسات، بس اسم الزر بالعربي عرضه
الأدنى كبير فيبقى ينكسر — والنتيجة ثلاث سطور: كمية، وزر، ومفضلة،
كل واحد لوحده. هذا أسوأ من سطرين مقصودين.
فنحسمها بشبكة صريحة بدل ما نترك الالتفاف يقرر:
سطر 1: [الكمية] [♡]
سطر 2: [إضافة إلى السلة] بعرض كامل — أسهل ضغطة بالإبهام. */
/* المحددات هنا لازم تطابق قوة القواعد الأساسية فوق بالضبط.
أول محاولة كتبناها بمحدد أقصر (`.single-product .woocommerce-…`)
فما اشتغلت أبداً: الميديا **ما تزيد الأولوية**، والقاعدة الأساسية
محددها أقوى فبقت هي الفائزة رغم إن الشاشة صغيرة. */
@media (max-width: 767px) {
.single-product form.cart,
.single-product form.variations_form.cart .woocommerce-variation-add-to-cart {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: var(--ae-3);
}
.single-product form.cart .quantity,
.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity {
grid-area: 1 / 1;
flex: none;
width: 132px;
}
.single-product form.cart .tinv-wraper,
.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .tinv-wraper {
grid-area: 1 / 2;
flex: none;
width: 48px;
}
.single-product .tinv-wraper .tinvwl_add_to_wishlist_button {
width: 48px;
}
.single-product form.cart .single_add_to_cart_button,
.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
grid-area: 2 / 1 / 2 / -1;
flex: none;
width: 100%;
}
}
/* خيارات المنتج: مساحات لمس أكبر */
.woo-variation-swatches .variable-items-wrapper .variable-item {
min-width: 46px;
min-height: 46px;
margin: 0 0 var(--ae-2) var(--ae-2);
}
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item {
padding-inline: var(--ae-4);
}
/* الزر المعطّل قبل اختيار الخيارات: يبيّن إنه ناطر اختيار مو معطوب */
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
background: var(--ae-line) !important;
color: var(--ae-ink-muted) !important;
box-shadow: none;
}
/* التبويبات: جنب بعض مو فوق بعض */
.woocommerce div.product .woocommerce-tabs ul.tabs {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
flex: 0 0 auto;
width: auto;
display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
white-space: nowrap;
}
/* --------------------------------------------------------------------------
4.13 شريط الترتيب بصفحة المتجر — كان تائه بجهة الشاشة
-------------------------------------------------------------------------- */
.woocommerce .woocommerce-ordering {
margin: 0 0 var(--ae-5);
}
@media (max-width: 767px) {
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-ordering select {
width: 100%;
}
.woocommerce .woocommerce-result-count {
display: block;
text-align: center;
margin-bottom: var(--ae-3);
}
}
/* --------------------------------------------------------------------------
4.14 محدّد الكمية — الثيم يضيف زرّي + و − بكلاس .product-qty
(كنت أضيف زوج ثاني بالجافاسكربت فصاروا أربعة والرقم ينضغط ويختفي)
-------------------------------------------------------------------------- */
/* مهم: نحصرها بالنماذج اللي بيها input.qty — بالسلة الجانبية نفس الكلاس
مستخدم لنص "1 × السعر"، وستايل الكبسولة كان يكسره. */
.woocommerce form.cart .quantity,
.woocommerce-cart-form .quantity,
.woocommerce .cart_item .quantity,
.woocommerce-variation-add-to-cart .quantity {
display: inline-flex !important;
align-items: stretch;
border: 1px solid var(--ae-line-strong);
border-radius: var(--ae-r-pill);
overflow: hidden;
background: var(--ae-surface);
width: auto;
}
.woocommerce .quantity .product-qty {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
min-width: 42px;
height: 44px;
padding: 0;
border: 0;
background: var(--ae-pink-050);
color: var(--ae-plum);
font-size: 20px;
font-weight: var(--ae-fw-bold);
line-height: 1;
cursor: pointer;
user-select: none;
}
.woocommerce .quantity input.qty {
width: 56px !important;
min-width: 56px;
height: 44px;
min-height: 44px;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
text-align: center;
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-semi);
line-height: 44px;
color: var(--ae-ink);
background: var(--ae-surface);
box-shadow: none !important;
-moz-appearance: textfield;
appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* --------------------------------------------------------------------------
4.15 السلة الجانبية (drawer)
-------------------------------------------------------------------------- */
/* زر الحذف كان يطبع علامتين × فوق بعض: أيقونة الثيم + محتوى ووكومرس */
#shop-cart-sidebar a.remove,
.shop-cart-sidebar a.remove,
.cart-sidebar a.remove {
position: relative;
font-size: 0 !important;
width: 26px;
height: 26px;
min-width: 26px;
}
#shop-cart-sidebar a.remove::before,
.shop-cart-sidebar a.remove::before,
.cart-sidebar a.remove::before {
content: "×";
font-size: 18px;
line-height: 1;
display: block;
}
#shop-cart-sidebar a.remove .woostify-svg-icon,
#shop-cart-sidebar a.remove svg,
.cart-sidebar a.remove svg {
display: none !important;
}
/* الرقم داخل السلة الجانبية كان مقصوص من الأسفل */
#shop-cart-sidebar .quantity input.qty,
.cart-sidebar .quantity input.qty {
height: 40px;
min-height: 40px;
line-height: 40px;
width: 48px !important;
min-width: 48px;
}
#shop-cart-sidebar .quantity .product-qty,
.cart-sidebar .quantity .product-qty {
height: 40px;
width: 36px;
min-width: 36px;
}
/* أسفل الدرج كان يختفي وراء الشريط السفلي وزر الشراء الملتصق */
@media (max-width: 991px) {
#shop-cart-sidebar .cart-sidebar-foot,
#shop-cart-sidebar .widget_shopping_cart_content,
.cart-sidebar .cart-sidebar-foot {
padding-bottom: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px) + var(--ae-4));
}
}
/* --------------------------------------------------------------------------
4.16 صفحة المفضلة — كانت جدول مكسور بعمود واحد ضيق وعنوان مكرر
-------------------------------------------------------------------------- */
/* العنوان داخل الصفحة مكرر مع عنوان رأس الصفحة */
.tinv-wishlist h2:first-of-type,
.tinv-wishlist .tinvwl-title,
.tinv-wishlist-clear + h2 {
display: none;
}
.tinv-wishlist table.tinvwl-table {
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--ae-surface);
width: 100%;
}
.tinv-wishlist table.tinvwl-table th {
background: var(--ae-pink-050);
color: var(--ae-plum);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
padding: var(--ae-3);
text-align: start;
}
.tinv-wishlist table.tinvwl-table td {
padding: var(--ae-3);
border-top: 1px solid var(--ae-line);
vertical-align: middle;
}
.tinv-wishlist .product-thumbnail img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: var(--ae-r-sm);
}
.tinv-wishlist .product-name a {
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
}
/* الموبايل: صفوف كروت بدل جدول ينضغط بعمود واحد */
@media (max-width: 767px) {
.tinv-wishlist table.tinvwl-table,
.tinv-wishlist table.tinvwl-table tbody,
.tinv-wishlist table.tinvwl-table tr,
.tinv-wishlist table.tinvwl-table td {
display: block;
width: 100%;
}
.tinv-wishlist table.tinvwl-table thead {
display: none;
}
.tinv-wishlist table.tinvwl-table tbody tr {
position: relative;
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
grid-template-areas:
"thumb name"
"thumb price"
"cart cart";
gap: var(--ae-2) var(--ae-3);
align-items: center;
padding: var(--ae-3);
border-bottom: 1px solid var(--ae-line);
}
.tinv-wishlist table.tinvwl-table tbody td {
padding: 0;
border: 0;
}
.tinv-wishlist td.product-thumbnail { grid-area: thumb; }
.tinv-wishlist td.product-name { grid-area: name; }
.tinv-wishlist td.product-price { grid-area: price; font-weight: var(--ae-fw-bold); }
.tinv-wishlist td.product-action { grid-area: cart; }
/* أعمدة ما تنفع بالموبايل */
.tinv-wishlist td.product-cb,
.tinv-wishlist td.product-stock,
.tinv-wishlist td.product-date,
.tinv-wishlist th.product-cb {
display: none !important;
}
.tinv-wishlist td.product-remove {
position: absolute;
top: var(--ae-2);
inset-inline-start: var(--ae-2);
}
.tinv-wishlist td.product-action .button {
width: 100%;
}
/* شريط الإجراءات الجماعية: عناصر فوق بعض بعرض كامل */
.tinv-wishlist .tinvwl-buttons-group,
.tinv-wishlist .tinv-wishlist-clear + div {
display: flex;
flex-direction: column;
gap: var(--ae-2);
}
.tinv-wishlist select,
.tinv-wishlist .button {
width: 100%;
}
}
/* عنوان المفضلة داخل الصفحة مكرر مع عنوان رأس الصفحة */
.tinv-wishlist > h2,
.tinv-wishlist > .tinvwl-title,
.tinvwl-table + h2,
.tinv-wishlist .tinvwl-header h2 {
display: none !important;
}
/* --------------------------------------------------------------------------
4.17 السلة الجانبية ضيّقة (~280px) — العناصر لازم تكون مضغوطة
وإلا السعر والمجموع ينقصّون من الجهة.
-------------------------------------------------------------------------- */
#shop-cart-sidebar,
.cart-sidebar {
overflow-x: hidden;
}
#shop-cart-sidebar .quantity,
.cart-sidebar .quantity {
flex-shrink: 0;
}
#shop-cart-sidebar .quantity .product-qty,
.cart-sidebar .quantity .product-qty {
width: 30px;
min-width: 30px;
height: 34px;
font-size: 16px;
}
#shop-cart-sidebar .quantity input.qty,
.cart-sidebar .quantity input.qty {
width: 38px !important;
min-width: 38px;
height: 34px;
min-height: 34px;
line-height: 34px;
padding: 0 !important;
font-size: var(--ae-fs-sm);
}
/* صف المنتج: اسم + سعر + كمية بلا تجاوز */
#shop-cart-sidebar .cart-sidebar-content li,
#shop-cart-sidebar ul.cart_list li,
.cart-sidebar ul.cart_list li {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--ae-2) var(--ae-3);
align-items: center;
padding: var(--ae-3) 0;
}
#shop-cart-sidebar ul.cart_list li img,
.cart-sidebar ul.cart_list li img {
width: 56px !important;
height: 56px !important;
object-fit: cover;
border-radius: var(--ae-r-sm);
margin: 0 !important;
float: none !important;
}
#shop-cart-sidebar ul.cart_list li a,
.cart-sidebar ul.cart_list li a {
font-size: var(--ae-fs-sm);
line-height: 1.5;
word-break: break-word;
}
/* المجموع وأزرار الأسفل */
#shop-cart-sidebar .total,
#shop-cart-sidebar .cart-sidebar-foot .total,
.cart-sidebar .total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ae-2);
flex-wrap: wrap;
font-size: var(--ae-fs-base);
padding-inline: var(--ae-4);
}
#shop-cart-sidebar .total .amount,
.cart-sidebar .total .amount {
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
white-space: nowrap;
}
#shop-cart-sidebar .buttons,
.cart-sidebar .buttons {
display: flex;
flex-direction: column;
gap: var(--ae-2);
padding: var(--ae-3) var(--ae-4);
}
#shop-cart-sidebar .buttons .button,
.cart-sidebar .buttons .button {
width: 100%;
margin: 0;
}
/* --------------------------------------------------------------------------
حقل الدولة بالشيك أوت — مخفي مو محذوف
--------------------------------------------------------------------------
المتجر يوصّل داخل العراق بس. ما نشيل الحقل من الماركب لأن ووكومرس
يحتاج قيمته بالـPOST حتى يتحقق من المحافظة (المحافظات مربوطة بالدولة)
ويحسب الشحن — لو شلناه ينكسر تحقّق `billing_state`.
الكلاس ينضاف من `aerolit_checkout_field_order()` بـ`inc/woocommerce.php`.
-------------------------------------------------------------------------- */
.woocommerce .ae-field-hidden,
.woocommerce-checkout .ae-field-hidden {
display: none !important;
}
/* ==========================================================================
⚠️ الشيك أوت على الشاشات العريضة — كان ينتشر بعرض الشاشة كله
==========================================================================
قِسناه على شاشة 1900:
form.checkout 1870 @x15..1885 ← عرض الشاشة كله
#customer_details 1470
حقل إدخال الاسم 1433px ← حقل اسم بعرض ١٤٣٣ بكسل
#order_review 400
السبب من عدنا: قاعدة إلغاء السايدبار (4.1.1) تحط
`#primary { width: 100% !important; max-width: 100% !important }`.
شالت السايدبار — وشالت وياه أي حد على عرض المحتوى.
حقل نصي أعرض من ~450px صعب يُقرأ ويبيّن كأن النموذج مكسور. الإصلاح
بثلاث طبقات:
1. حد أقصى للنموذج وتوسيطه
2. عمودان بنسب معقولة (معلومات + ملخص لاصق)
3. الحقول القصيرة جنب بعض بدل ما كل واحد ياخذ سطر بعرض العمود
========================================================================== */
@media (min-width: 992px) {
.woocommerce-checkout form.checkout {
max-width: 1180px;
margin-inline: auto;
float: none !important;
/* بالعربي أول ابن بالـDOM (#customer_details) يروح لليمين تلقائياً،
فما نحتاج `row-reverse` — نفس ترتيب الـfloat القديم. */
display: flex;
align-items: flex-start;
gap: var(--ae-8);
}
.woocommerce-checkout form.checkout > #customer_details {
flex: 1 1 auto;
width: auto !important;
min-width: 0;
float: none !important;
}
.woocommerce-checkout form.checkout > #order_review,
.woocommerce-checkout form.checkout > #order_review_heading {
flex: 0 0 380px;
width: 380px !important;
float: none !important;
}
/* الملخص يتابعك وإنت تعبّي الحقول بدل ما يختفي فوق */
.woocommerce-checkout form.checkout > #order_review {
position: sticky;
top: var(--ae-4);
}
}
/* الحقول القصيرة جنب بعض. الطويلة (المحافظة والعنوان والملاحظات) تبقى
بعرض العمود. */
@media (min-width: 768px) {
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--ae-4);
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_state_field,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_address_1_field,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_address_2_field,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_country_field {
grid-column: 1 / -1;
}
}
/* --------------------------------------------------------------------------
شرط الفحص قبل الدفع — فوق زر "إرسال الطلب"
--------------------------------------------------------------------------
الماركب من `aerolit_terms_box()` بـ`inc/woocommerce.php`.
مربّع الاختيار مبني بعنصر خاص (`.ae-terms__box`) بدل المربّع الافتراضي:
الافتراضي مقاسه ١٣px وما ينضغط بالإبهام، وشكله يختلف بين المتصفحات.
المدخل الحقيقي باقي بالماركب (مخفي بصرياً) حتى يشتغل بلوحة المفاتيح
وقارئ الشاشة والإرسال.
-------------------------------------------------------------------------- */
.ae-terms {
margin: var(--ae-4) 0;
padding: var(--ae-4);
border: 1px solid var(--ae-pink-300);
border-radius: var(--ae-r);
background: var(--ae-pink-050);
}
.ae-terms__text {
margin: 0 0 var(--ae-3);
font-size: var(--ae-fs-sm);
line-height: var(--ae-lh-snug);
color: var(--ae-plum);
}
.ae-terms__agree {
display: flex;
align-items: center;
gap: var(--ae-3);
min-height: var(--ae-tap);
margin: 0;
cursor: pointer;
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
}
/* المدخل مخفي بصرياً بس باقي بشجرة الوصول */
.ae-terms__agree input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ae-terms__box {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: var(--ae-r-sm);
border: 2px solid var(--ae-line-strong);
background: var(--ae-surface);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--ae-t-fast), border-color var(--ae-t-fast);
}
/* ⚠️ علامة الصح بخصائص **فيزيائية** مو منطقية.
كانت `border-inline-start` — وبالعربي تنحل **يمين** مو يسار، فالضلعان
انقلبا وطلع الشكل `>` بدل `✓`.
علامة الصح شكلها مو اتجاهي: نفسها بالعربي وبالإنكليزي. الخصائص
المنطقية للتخطيط، مو للأشكال المرسومة. */
.ae-terms__box::after {
content: "";
width: 6px;
height: 11px;
border-right: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(45deg) translate(-1px, -2px);
opacity: 0;
transition: opacity var(--ae-t-fast);
}
.ae-terms__agree input:checked ~ .ae-terms__box {
background: var(--ae-success, #2e7d5b);
border-color: var(--ae-success, #2e7d5b);
}
.ae-terms__agree input:checked ~ .ae-terms__box::after { opacity: 1; }
.ae-terms__agree input:focus-visible ~ .ae-terms__box {
outline: 2px solid var(--ae-pink);
outline-offset: 2px;
}
/*
* الزر مقفل لحد ما يوافق — قفل بصري بس، الحاجز الحقيقي بالسيرفر
* (`aerolit_validate_terms` على `woocommerce_checkout_process`).
* ما نستعمل خاصية `disabled` حتى يبقى يستقبل الضغطة ونگدر نشرح السبب.
*
* ولا نستعمل `opacity` بعد: تحت 767px الزر **مثبّت** بأسفل الشاشة، والشفافية
* تخلي محتوى الصفحة يبيّن من وراه فيطلع كأنه شريط مكسور. نخفض التباين
* بألوان معتمة بدلها.
*/
#place_order[disabled],
#place_order.ae-is-locked {
background: var(--ae-pink-200);
color: var(--ae-ink-faint);
border-color: transparent;
box-shadow: none;
cursor: not-allowed;
}
/* وميض ينبّه على الشرط لما يضغط الزر بلا موافقة.
ضروري بالموبايل: الزر مثبّت بأسفل الشاشة والصندوق فوق بآلاف
البكسلات، فبدون الوميض والزحلگة الزبون ما يشوف سبب المنع. */
.ae-terms.is-flash {
animation: ae-terms-flash 1.1s ease;
}
@keyframes ae-terms-flash {
0%, 100% { border-color: var(--ae-pink-300); background: var(--ae-pink-050); }
25%, 75% { border-color: var(--ae-danger); background: var(--ae-danger-bg); }
}
@media (prefers-reduced-motion: reduce) {
.ae-terms.is-flash {
animation: none;
border-color: var(--ae-danger);
background: var(--ae-danger-bg);
}
}
/* ===== 5-rtl.css ===== */
/* ==========================================================================
5. RTL — إصلاحات الاتجاه
الموقع عربي بالكامل بس أجزاء منه مبنية LTR (سلايدرات، فلاتر، جداول،
أيقونات باتجاه غلط). هنا نضبطها كلها.
ملاحظة: نستخدم الخصائص المنطقية (inline-start/end) بدل left/right كل ما
نگدر، حتى ما نحتاج نسخة ثانية من الستايل.
========================================================================== */
html[dir="rtl"] body,
body.rtl {
direction: rtl;
text-align: right;
}
/* --- الأرقام والأسعار: تبقى LTR داخل النص العربي --- */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.price,
.amount,
.quantity input,
input[type="tel"],
input[type="number"],
.woocommerce-order-overview__order strong,
.woocommerce-info .amount {
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
}
/* السعر داخل الكرت يبقى محاذي لليمين مع بقاء الرقم LTR */
.rtl .woocommerce ul.products li.product .price,
.rtl .woocommerce div.product .summary .price {
text-align: right;
}
/* نطاق السعر "من — إلى" يبقى مرتب */
.rtl .price del,
.rtl .price ins {
direction: ltr;
unicode-bidi: isolate;
}
/* --- أرقام الهواتف والإيميل داخل الفورمات ---
⚠️ كانت `input#billing_phone` بالمعرّف، فما شملت `billing_phone2`
(الحقل الاحتياطي اللي يضيفه محرر حقول الشيك أوت). النتيجة قِسناها:
billing_phone → ta=right dir=ltr ✓ يمين
billing_phone2 → ta=start dir=ltr ⚠ يسار
السبب إن `direction: ltr` يجي من قاعدة `input[type="tel"]` فوق،
و`text-align: start` مع `ltr` معناها **يسار** مو يمين. فالحقل الواحد
ينمحاذي يمين والثاني يسار بنفس النموذج.
نستهدف النوع مو المعرّف — يشمل أي حقل هاتف ينضاف بعدين. */
.rtl input[type="tel"],
.rtl input[type="email"],
.rtl input[type="url"] {
direction: ltr;
text-align: right;
}
/* والـplaceholder يتبع نفس المحاذاة — بدونها النص التلميحي يبقى يسار
بينما اللي يكتبه الزبون يطلع يمين. */
.rtl input[type="tel"]::placeholder,
.rtl input[type="email"]::placeholder,
.rtl input[type="url"]::placeholder {
text-align: right;
direction: rtl;
}
/* --- الجداول --- */
.rtl .woocommerce table.shop_table th,
.rtl .woocommerce table.shop_table td {
text-align: right;
}
.rtl .woocommerce table.shop_table td.product-price,
.rtl .woocommerce table.shop_table td.product-subtotal,
.rtl .woocommerce table.shop_table .amount {
text-align: left;
}
/* --- التنبيهات: الأيقونة يمين النص --- */
.rtl .woocommerce-message,
.rtl .woocommerce-info,
.rtl .woocommerce-error {
padding-inline: var(--ae-5);
}
.rtl .woocommerce-message .button,
.rtl .woocommerce-info .button {
margin-inline-start: auto;
margin-inline-end: 0;
}
/* --- القوائم والحقول --- */
.rtl select,
.rtl .select2-container .select2-selection--single .select2-selection__rendered {
background-position: left var(--ae-3) center;
padding-inline: var(--ae-4) var(--ae-8);
text-align: right;
}
.rtl .select2-container .select2-selection--single .select2-selection__arrow {
right: auto;
left: var(--ae-2);
}
/* --- الشيك أوت: ترتيب الحقول والأعمدة --- */
.rtl .woocommerce form .form-row-first,
.rtl .woocommerce form .form-row-last {
float: none;
width: 100%;
}
@media (min-width: 768px) {
.rtl .woocommerce form .form-row-first,
.rtl .woocommerce form .form-row-last {
display: inline-block;
width: calc(50% - var(--ae-2));
vertical-align: top;
}
.rtl .woocommerce form .form-row-first { margin-inline-end: var(--ae-3); }
}
/* --- الشيكبوكس والراديو: المسافة على الجهة الصح --- */
.rtl input[type="checkbox"],
.rtl input[type="radio"] {
margin-inline-end: var(--ae-2);
margin-inline-start: 0;
}
.rtl .woocommerce-form__label-for-checkbox span,
.rtl .woocommerce-form__label-for-checkbox input {
vertical-align: middle;
}
/* --- الأسهم والأيقونات الاتجاهية تنقلب --- */
.rtl .slick-prev svg,
.rtl .slick-next svg,
.rtl .swiper-button-prev svg,
.rtl .swiper-button-next svg,
.rtl .woocommerce-breadcrumb .breadcrumb-separator,
.rtl .back-to-shop-icon svg,
.rtl .woostify-svg-icon.icon-arrow-right svg,
.rtl .woostify-svg-icon.icon-arrow-left svg {
transform: scaleX(-1);
}
/* أيقونة السلة والبحث ما تنقلب — هذي رموز مو أسهم */
.rtl .woostify-svg-icon.icon-shopping-cart-2 svg,
.rtl .woostify-svg-icon.icon-search svg,
.rtl .woostify-svg-icon.icon-user svg,
.rtl .woostify-svg-icon.icon-heart svg {
transform: none;
}
/* --- السلايدرات: swiper و slick باتجاه RTL --- */
.rtl .slick-slider {
direction: rtl;
}
.rtl .slick-track {
display: flex;
}
/* --- الترقيم (pagination) --- */
.rtl .woocommerce nav.woocommerce-pagination ul {
direction: rtl;
display: inline-flex;
gap: var(--ae-1);
border: 0;
}
.rtl .woocommerce nav.woocommerce-pagination ul li {
border: 0;
margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
min-width: var(--ae-tap);
min-height: var(--ae-tap);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ae-r-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
background: var(--ae-surface);
border: 1px solid var(--ae-line);
}
/* --- الويدجتات والفلاتر --- */
.rtl .widget ul {
padding-inline-start: 0;
}
.rtl .widget_price_filter .price_slider_amount {
text-align: right;
}
.rtl .widget_price_filter .price_slider_amount .button {
float: left;
}
/* --- شريط التقدم والعناصر المطلقة --- */
.rtl .woocommerce span.onsale {
right: auto;
left: var(--ae-3);
}
/* --- الفوتر والكوبي رايت --- */
.rtl .site-info,
.rtl .footer-widgets {
text-align: center;
}
/* --- علامات الترقيم داخل النص المختلط (عربي + إنكليزي) --- */
.rtl .woocommerce-loop-product__title,
.rtl .product_title,
.rtl .entry-content {
unicode-bidi: plaintext;
}
/* ==========================================================================
HOVER — على الموبايل، :hover يعلق بعد اللمس ويبقى الزر بلونه الثاني.
لهذا كل تأثيرات الـ hover محصورة بأجهزة عندها ماوس حقيقي.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--ae-plum);
color: var(--ae-on-dark);
border-color: var(--ae-plum);
}
}
/* --------------------------------------------------------------------------
الترقيم: أرقام صغيرة مرتبة بدل أزرار عريضة، وبلا أحرف كبيرة
-------------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
margin: var(--ae-6) 0 var(--ae-8);
text-align: center;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
text-transform: none !important;
font-size: var(--ae-fs-sm);
padding-inline: var(--ae-3);
}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
padding-inline: var(--ae-4);
font-weight: var(--ae-fw-semi);
}
@media (max-width: 575px) {
.woocommerce nav.woocommerce-pagination ul {
flex-wrap: wrap;
justify-content: center;
gap: var(--ae-1);
}
}
/* ===== 6-mobile.css ===== */
/* ==========================================================================
6. MOBILE — أغلب زبائن المتجر موبايل، فهذا الملف مو "تحسين إضافي"
========================================================================== */
@media (max-width: 991px) {
/*
* مساحة أسفل الصفحة حتى الشريط السفلي ما يغطي المحتوى.
*
* `!important` هنا مو ترف: إضافة القائمة الدائرية تحط
* circle-menu.css → body { margin: 0 !important; padding: 0 !important }
* وهذا اختصار يشمل `padding-bottom`، فكان يلغي القاعدة بصمت — الشريط
* ظل يغطي آخر ٥٨px من كل صفحة موبايل (قِسناها: padding = 0px).
* سلكتورنا أخص + `!important` فيفوز، وما نلمس ملف الإضافة.
*/
body.ae-has-bottom-bar {
padding-bottom: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px)) !important;
}
/* كل شي قابل للنقر يكون ٤٤ بكسل على الأقل */
.site-header a,
.woocommerce a.button,
.woocommerce button.button,
.menu-item > a {
min-height: var(--ae-tap);
display: flex;
align-items: center;
}
/*
* ⚠️ `display: flex` فوق ألغى `text-align: center` مال الأزرار.
*
* `text-align` يشتغل على النص جوّا صندوق الأسطر — وبالفليكس النص يصير
* عنصراً مرناً، فالمحاذاة الأفقية تصير من `justify-content`، وقيمتها
* الافتراضية `normal` = بداية المحور = **يمين بالـRTL**.
*
* النتيجة: كل زر متجر بالموبايل نصّه ملزوگ بالحافة. قِسنا «إرسال الطلب»:
* فراغ ٢٣٢px يسار مقابل ٢٢px يمين. ما انتبهنا له لأن الأزرار الضيّقة
* (مثل «عرض السلة») يبقى نصها شبه معبّي العرض فيبيّن متوازن.
*
* ما نضيفها لروابط الهيدر والقائمة — هذيك محاذاتها للبداية صحيحة.
*/
.woocommerce a.button,
.woocommerce button.button {
justify-content: center;
}
/* الهيدر ألصق وأصغر */
.site-header {
box-shadow: var(--ae-shadow-sm);
}
/* الشريط العلوي المتحرك: أصغر حتى ما ياكل الشاشة */
.woostify-topbar,
.topbar-slider {
font-size: var(--ae-fs-xs);
line-height: 1.7;
}
/* صفحة المنتج: الصورة أول شي وبعرض كامل */
.single-product div.product .woocommerce-product-gallery {
margin-bottom: var(--ae-4);
}
.single-product form.cart .single_add_to_cart_button {
flex: 1 1 100%;
}
/* السلة: نحوّل الجدول لكروت بدل التمرير الأفقي */
.woocommerce-cart table.shop_table thead {
display: none;
}
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table tbody,
.woocommerce-cart table.shop_table tr,
.woocommerce-cart table.shop_table td {
display: block;
width: 100%;
}
.woocommerce-cart table.shop_table tr.cart_item {
position: relative;
border: 1px solid var(--ae-line);
border-radius: var(--ae-r);
margin-bottom: var(--ae-3);
padding: var(--ae-3);
display: grid;
grid-template-columns: 72px 1fr;
grid-template-areas:
"thumb name"
"thumb price"
"qty subtotal";
gap: var(--ae-2);
align-items: center;
}
.woocommerce-cart table.shop_table tr.cart_item td {
border: 0;
padding: 0;
}
.woocommerce-cart td.product-thumbnail { grid-area: thumb; }
.woocommerce-cart td.product-name { grid-area: name; font-weight: var(--ae-fw-semi); }
.woocommerce-cart td.product-price { grid-area: price; color: var(--ae-ink-muted); }
.woocommerce-cart td.product-quantity { grid-area: qty; }
.woocommerce-cart td.product-subtotal { grid-area: subtotal; text-align: left; font-weight: var(--ae-fw-bold); }
.woocommerce-cart td.product-remove {
position: absolute;
top: var(--ae-2);
inset-inline-start: var(--ae-2);
}
/* الشيك أوت: بطاقة واحدة بعرض الشاشة */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
padding: var(--ae-4);
border-radius: var(--ae-r);
}
}
/* --------------------------------------------------------------------------
الشريط السفلي — يعوّض شريط Woostify اللي بيه عنصرين بس
-------------------------------------------------------------------------- */
/* نخفي شريط الثيم حتى ما يصير شريطين */
body.ae-has-bottom-bar .woostify-sticky-footer-bar {
display: none !important;
}
#ae-bottom-bar {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 999;
display: none;
align-items: stretch;
height: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--ae-surface);
border-top: 1px solid var(--ae-pink-300);
box-shadow: 0 -3px 16px rgba(90, 56, 73, 0.12);
}
@media (max-width: 991px) {
#ae-bottom-bar { display: flex; }
}
/*
* صفحة الدفع: الشريط يختفي ويترك المكان لزر «إرسال الطلب».
*
* Woostify عنده خاصية "زر طلب لاصق" تشتغل تحت 767px وتخلي `#place_order`
* ثابت بـ `bottom:0` و`z-index:500`. شريطنا ثابت بنفس المكان بـ 999 —
* يعني كان **يغطي زر الإرسال بالكامل** (قِسناه: تداخل 56px، والضغطة
* توصل لأيقونة الشريط مو للزر). الزبون يوصل لآخر الصفحة وما يلگى الزر.
*
* نخفي الشريط بدل ما نرفع الزر فوقه: شريطين لاصقين = 114px من شاشة 844،
* وبنص الدفع ما نريد روابط تنقل الزبون بعيد. نفس نطاق Woostify (767px)
* حتى بين 768–991 — حيث الزر يبقى بالتدفق الطبيعي — الشريط يظل موجود.
*
* `:not(.woocommerce-order-received)` ضروري: `is_checkout()` يشمل صفحة
* الشكر، وهناك ماكو زر إرسال أصلاً فنريد الشريط يرجع.
*/
@media (max-width: 767px) {
body.has-order-sticky-button:not(.woocommerce-order-received) #ae-bottom-bar {
display: none;
}
/* المساحة السفلية تتبع الزر (56px) بدل الشريط (58px). */
body.ae-has-bottom-bar.has-order-sticky-button:not(.woocommerce-order-received) {
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}
/* شريط الهوم على الآيفون ما يقص النص. */
body.has-order-sticky-button #place_order {
padding-bottom: calc(var(--ae-3) + env(safe-area-inset-bottom, 0px));
}
}
#ae-bottom-bar .ae-bb-item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: var(--ae-tap);
padding: var(--ae-1);
font-size: 13px; /* كان 11 — صغير ومتعب بالقراءة */
font-weight: var(--ae-fw-semi);
line-height: 1.4;
color: var(--ae-plum); /* كان رمادي باهت */
text-decoration: none;
position: relative;
transition: color var(--ae-t-fast);
}
#ae-bottom-bar .ae-bb-item svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#ae-bottom-bar .ae-bb-item.is-active::before {
content: "";
position: absolute;
top: 0;
inset-inline: 22%;
height: 3px;
border-radius: 0 0 var(--ae-r-pill) var(--ae-r-pill);
background: var(--ae-pink);
}
/* عدّاد السلة */
#ae-bottom-bar .ae-bb-count {
position: absolute;
top: 4px;
inset-inline-end: calc(50% - 20px);
min-width: 18px;
height: 18px;
padding: 0 4px;
display: none;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: var(--ae-fw-bold);
line-height: 1;
color: var(--ae-on-dark);
background: var(--ae-pink);
border-radius: var(--ae-r-pill);
direction: ltr;
}
#ae-bottom-bar .ae-bb-count.has-items {
display: inline-flex;
}
/* --------------------------------------------------------------------------
زر "أضف للسلة" ملتصق بصفحة المنتج على الموبايل
-------------------------------------------------------------------------- */
#ae-sticky-atc {
position: fixed;
inset-inline: 0;
bottom: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px));
z-index: 998;
display: none;
align-items: center;
gap: var(--ae-3);
padding: var(--ae-2) var(--ae-4);
background: var(--ae-surface);
border-top: 1px solid var(--ae-line);
box-shadow: 0 -2px 12px rgba(96, 61, 80, 0.08);
transform: translateY(120%);
transition: transform var(--ae-t);
}
#ae-sticky-atc.is-visible {
transform: translateY(0);
}
@media (max-width: 991px) {
.single-product #ae-sticky-atc { display: flex; }
}
#ae-sticky-atc .ae-satc-price {
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
white-space: nowrap;
}
#ae-sticky-atc .ae-satc-btn {
flex: 1 1 auto;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ae-r-pill);
background: var(--ae-plum);
color: var(--ae-on-dark);
font-weight: var(--ae-fw-semi);
border: 0;
cursor: pointer;
}
/* --------------------------------------------------------------------------
زر الشات وزر الصعود للأعلى — كانوا يغطون كروت المنتجات والشريط السفلي
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
#wp-chatbot-widget,
#wp-chat-button,
.wp-chat-button,
#wp-chatbot-container,
#scroll-to-top {
bottom: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px) + var(--ae-3)) !important;
}
/* لما يكون زر "أضف للسلة" الملتصق ظاهر، نرفعهم أكثر */
.single-product #wp-chatbot-widget,
.single-product #wp-chat-button,
.single-product #wp-chatbot-container,
.single-product #scroll-to-top {
bottom: calc(var(--ae-bottombar-h) + 62px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* --------------------------------------------------------------------------
شريط ملاحظة التوصيل — يبني الثقة ويقلل أسئلة "شكد التوصيل؟"
-------------------------------------------------------------------------- */
.ae-delivery-note {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ae-2);
flex-wrap: wrap;
padding: var(--ae-2) var(--ae-4);
margin: 0 0 var(--ae-4);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-medium);
color: var(--ae-plum);
background: var(--ae-pink-050);
border: 1px dashed var(--ae-line-strong);
border-radius: var(--ae-r);
text-align: center;
}
.ae-delivery-note strong { font-weight: var(--ae-fw-bold); }
/* ==========================================================================
HOVER — على الموبايل، :hover يعلق بعد اللمس ويبقى الزر بلونه الثاني.
لهذا كل تأثيرات الـ hover محصورة بأجهزة عندها ماوس حقيقي.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
#ae-bottom-bar .ae-bb-item:hover,
#ae-bottom-bar .ae-bb-item.is-active {
color: var(--ae-pink);
}
#ae-sticky-atc .ae-satc-btn:hover {
background: var(--ae-plum-700);
}
}
/* زر الشراء الملتصق وهو ناطر اختيار خيار */
#ae-sticky-atc .ae-satc-btn.is-disabled {
background: var(--ae-pink-200);
color: var(--ae-plum);
}
/* زر الشات: نرفعه أكثر حتى ما يلامس الشريط السفلي */
@media (max-width: 991px) {
#wp-chatbot-widget,
#wp-chat-button,
.wp-chat-button,
#wp-chatbot-container {
bottom: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px) + var(--ae-4)) !important;
z-index: 997 !important;
}
}
/* ==========================================================================
6.x درج الموبايل — الرأس والأقسام وكتلة المساعدة
==========================================================================
الدرج كان أربع روابط وبعدها فراغ وردي. قِسناه (390×844، مفتوح x39..390):
المستعمل 260px والفاضي **584px = ٦٩٪**. الماركب الجديد ينحقن من
`inc/layout.php` على هوك `woostify_toggle_sidebar` (12 للرأس، 45 للباقي).
⚠️ اللوگو هنا نسخة الاسم (`word`) مو الكاملة: خلفية الدرج
`--ae-pink-100` = #ffe5f2، وهو **نفس لون نجوم اللوگو** — النجوم تختفي
تماماً. نفس السبب اللي خلّى الهيدر والفوتر ورديين بدل أبيض.
========================================================================== */
.sidebar-menu {
/* كان `scroll` — يرسم مسار تمرير حتى بلا محتوى فايض */
overflow-y: auto !important;
overscroll-behavior: contain;
/* الشريط السفلي ثابت فوق الدرج، فنترك مساحة تحته */
padding-bottom: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px) + var(--ae-4)) !important;
}
/* ⚠️ زر إغلاق الثيم الأب ما ينفع — نخفيه ونحط زرنا برأس الدرج.
قِسناه: 44×44 عند x20..64 والدرج يبدي x39، يعني **متداخل ويّاه 25px**
ونصّه مخفي. والشريط الفاضي على الطبقة السوداء 39px بس — ما يسع 44px.
وفوگ هذا `color` عنده أبيض من قاعدة أقوى من قاعدتنا، وأيقونته
`fill`-based فطلعت بيضاء على خلفية بيضاء.
ما نشيله من الماركب: زرنا ينادي `click()` عليه حتى ياخذ تنظيف الثيم. */
#woostify-overlay .icon-close {
display: none !important;
}
/* خطوط روابط القائمة — علّتان:
1. لونها `#ececec` رمادي من الثيم الأب، بره لوحتنا وواضح جنب الوردي.
2. الخط محطوط على الرابط نفسه، والرابط عليه `border-radius: 999px`
(حق كبسولة تمييز الصفحة الحالية) — فأطراف الخط تنحني وتطلع الخطوط
كأنها تتلاشى بالطرفين، بينما خط الرأس وخطوط الكتل مستقيمة.
ننقل الخط للـ`li` (بلا نصف قطر) ونخلي الكبسولة تشتغل جوّاه. */
.sidebar-menu .site-navigation ul li > a {
border-bottom: 0 !important;
}
.sidebar-menu .site-navigation ul > li {
border-bottom: 1px solid var(--ae-line);
}
/* --- رأس الدرج --- */
.ae-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ae-3);
padding: var(--ae-2) var(--ae-5) var(--ae-4);
border-bottom: 1px solid var(--ae-line);
margin-bottom: var(--ae-2);
}
/* زر الإغلاق: بالطرف المقابل للوگو، هدف لمس كامل، ولونه من اللوحة */
.ae-drawer__close {
flex: 0 0 auto;
width: var(--ae-tap);
height: var(--ae-tap);
min-height: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ae-surface);
color: var(--ae-plum);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--ae-shadow-sm);
}
.ae-drawer__close svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.ae-drawer__logo {
display: inline-flex;
}
.ae-drawer__logo-img {
width: 112px;
height: auto;
display: block;
}
/* --- الكتل ---
⚠️ كل الخطوط الفاصلة بالدرج لازم تكون **نفس اللون ونفس الامتداد**.
قِسناها فطلعت ثلاث صيغ مختلفة بلوحة وحدة:
رأس الدرج x39..390 بادئة 0/0 #f3dce8 (لوحتنا)
روابط القائمة x39..390 بادئة 0/0 #ececec ← رمادي الثيم الأب
كتلة "تحتاج مساعدة" x57..373 بادئة 18/18 #f3dce8 ← منحشرة
وبين الحساب وأول كتلة ما كان كو خط أصلاً. التوحيد: لون `--ae-line`
وامتداد كامل لحافتي الدرج. المحتوى يبقى محشو — الخط بس يمتد، بهامش
سالب يساوي حشوة `.ae-drawer` وحشوة مقابلة ترجّع النص محله. */
.ae-drawer {
padding: 0 var(--ae-5);
}
.ae-drawer__block {
margin-inline: calc(var(--ae-5) * -1);
padding-inline: var(--ae-5);
}
.ae-drawer > .ae-drawer__block {
margin-top: var(--ae-5);
padding-top: var(--ae-5);
border-top: 1px solid var(--ae-line);
}
.ae-drawer__title {
margin: 0 0 var(--ae-3);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-bold);
color: var(--ae-ink-muted);
letter-spacing: 0.01em;
}
/* --- الأقسام: عمودان، كل واحد هدف لمس كامل --- */
.ae-drawer__cats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ae-2);
}
.ae-drawer__cats a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ae-2);
min-height: var(--ae-tap);
padding: 0 var(--ae-3);
border-radius: var(--ae-r);
background: var(--ae-surface);
border: 1px solid var(--ae-line);
color: var(--ae-plum);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
line-height: 1.3;
}
.ae-drawer__cat-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ae-drawer__cat-count {
flex: 0 0 auto;
font-size: var(--ae-fs-xs);
font-weight: var(--ae-fw-medium);
color: var(--ae-ink-faint);
}
/* --- واتساب --- */
.ae-drawer__wa {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ae-2);
min-height: var(--ae-tap);
padding: 0 var(--ae-4);
border-radius: var(--ae-r-pill);
background: var(--ae-plum);
color: var(--ae-on-dark) !important;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
}
.ae-drawer__wa svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
flex: 0 0 auto;
}
/* --- سطور الطمأنة --- */
.ae-drawer__facts {
list-style: none;
margin: var(--ae-3) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ae-2);
}
.ae-drawer__facts li {
display: flex;
align-items: center;
gap: var(--ae-2);
font-size: var(--ae-fs-xs);
color: var(--ae-ink-muted);
line-height: 1.5;
}
/* أيقونات بدل الإيموجي: الإيموجي يرسمه النظام بألوانه هو، فيختلف شكله
بين أندرويد وiOS ويكسر لوحة الألوان. الأيقونات ترث `currentColor`. */
.ae-drawer__facts svg {
flex: 0 0 auto;
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--ae-plum);
}
/* ===== 7-home.css ===== */
/* ==========================================================================
7. HOME — الصفحة الرئيسية الجديدة
========================================================================== */
/* ملاحظة: بلا width:100% مع padding — العنصر البلوكي ياخذ عرض أبوه لحاله،
وإضافة العرض تسبب تجاوز أفقي. */
.ae-container {
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--ae-4);
}
@media (min-width: 768px) {
.ae-container { padding-inline: var(--ae-6); }
}
.ae-home > section {
padding-block: var(--ae-8);
}
.ae-home > section:first-child {
padding-top: var(--ae-5);
}
@media (min-width: 992px) {
.ae-home > section { padding-block: var(--ae-12); }
}
/* --------------------------------------------------------------------------
عناوين الأقسام
-------------------------------------------------------------------------- */
.ae-section-head {
margin-bottom: var(--ae-6);
text-align: center;
}
.ae-section-head__title {
font-size: var(--ae-fs-xl);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum);
margin: 0 0 var(--ae-1);
}
.ae-section-head__sub {
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
margin: 0;
}
.ae-section-head--row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--ae-4);
text-align: start;
}
@media (min-width: 992px) {
.ae-section-head__title { font-size: var(--ae-fs-2xl); }
}
.ae-link-all {
display: inline-flex;
align-items: center;
gap: var(--ae-1);
flex: 0 0 auto;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
white-space: nowrap;
}
.ae-link-all svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--ae-t-fast);
}
/* --------------------------------------------------------------------------
الأزرار
-------------------------------------------------------------------------- */
.ae-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ae-2);
min-height: 48px;
padding: var(--ae-3) var(--ae-6);
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-semi);
border-radius: var(--ae-r-pill);
border: 1px solid transparent;
transition: background var(--ae-t-fast), color var(--ae-t-fast),
box-shadow var(--ae-t-fast), transform var(--ae-t-fast);
}
.ae-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--ae-t-fast);
}
.ae-btn--primary {
background: var(--ae-plum);
color: var(--ae-on-dark);
box-shadow: var(--ae-shadow);
}
.ae-btn--ghost {
background: transparent;
color: var(--ae-plum);
border-color: var(--ae-line-strong);
}
/* --------------------------------------------------------------------------
الهيرو
-------------------------------------------------------------------------- */
.ae-hero {
background:
radial-gradient(120% 90% at 85% 0%, var(--ae-pink-100) 0%, transparent 60%),
radial-gradient(90% 80% at 0% 100%, var(--ae-pink-050) 0%, transparent 55%),
var(--ae-bg);
border-radius: 0 0 var(--ae-r-xl) var(--ae-r-xl);
overflow: hidden;
}
.ae-hero__inner {
display: grid;
gap: var(--ae-6);
align-items: center;
}
@media (min-width: 992px) {
.ae-hero__inner {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--ae-10);
}
}
.ae-hero__eyebrow {
display: inline-block;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-pink-600);
background: var(--ae-surface);
padding: var(--ae-1) var(--ae-4);
border-radius: var(--ae-r-pill);
box-shadow: var(--ae-shadow-sm);
margin: 0 0 var(--ae-4);
}
.ae-hero__title {
font-size: clamp(2rem, 7vw, 3.25rem);
font-weight: var(--ae-fw-bold);
line-height: 1.25;
color: var(--ae-plum-900);
margin: 0 0 var(--ae-3);
}
.ae-hero__title span {
display: block;
color: var(--ae-pink);
}
.ae-hero__sub {
font-size: var(--ae-fs-base);
line-height: var(--ae-lh-snug);
color: var(--ae-ink-muted);
max-width: 46ch;
margin: 0 0 var(--ae-6);
}
.ae-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--ae-3);
margin-bottom: var(--ae-5);
}
.ae-hero__points {
display: flex;
flex-wrap: wrap;
gap: var(--ae-2) var(--ae-5);
list-style: none;
padding: 0;
margin: 0;
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
}
.ae-hero__points li {
display: flex;
align-items: center;
gap: var(--ae-2);
}
.ae-hero__points li::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ae-pink);
flex: 0 0 auto;
}
/* الصور */
.ae-hero__media { position: relative; }
.ae-hero__slides {
position: relative;
border-radius: var(--ae-r-xl);
overflow: hidden;
box-shadow: var(--ae-shadow-lg);
background: var(--ae-pink-050);
aspect-ratio: 16 / 9;
}
.ae-hero__slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
/* ⚠️ الشرائح غير النشطة شفافة بس باقية مكانها (position:absolute; inset:0).
لما كانت صور صامتة ما كانت مشكلة. هسه صار بيها روابط وأزرار، فبدون
pointer-events + visibility يضغط الزبون على "تسوّق الحقائب" وهو شايف
شريحة الخانات — الزر المخفي فوگ هو اللي يمسك الضغطة. */
.ae-hero__slide {
visibility: hidden;
pointer-events: none;
}
.ae-hero__slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ae-hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* الصورة كلها رابط — مساحة الضغط أكبر شي ممكن، والزر يوضّح إنها تنضغط */
.ae-hero__slide-link {
position: absolute;
inset: 0;
display: block;
color: var(--ae-on-dark);
}
.ae-hero__slide-caption {
position: absolute;
inset-inline: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ae-2);
padding: var(--ae-6) var(--ae-4) var(--ae-3);
/* تدرّج مو لون مصمت: النص يقرا فوق أي صورة بلا ما نخفي التشكيلة */
background: linear-gradient(to top, rgba(53, 34, 45, 0.82) 0%, rgba(53, 34, 45, 0.55) 55%, transparent 100%);
}
.ae-hero__slide-title {
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-bold);
line-height: 1.35;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ae-hero__slide-title small {
font-size: var(--ae-fs-xs);
font-weight: var(--ae-fw-regular);
opacity: 0.85;
}
.ae-hero__slide-cta {
display: inline-flex;
align-items: center;
gap: var(--ae-1);
min-height: 38px;
padding: 0 var(--ae-4);
border-radius: var(--ae-r-pill);
background: var(--ae-surface);
color: var(--ae-plum);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
white-space: nowrap;
box-shadow: var(--ae-shadow-sm);
transition: background var(--ae-t-fast), transform var(--ae-t-fast);
}
.ae-hero__slide-cta svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (min-width: 992px) {
.ae-hero__slide-caption {
padding: var(--ae-8) var(--ae-5) var(--ae-5);
}
.ae-hero__slide-title { font-size: var(--ae-fs-md); }
.ae-hero__slide-cta {
min-height: var(--ae-tap);
font-size: var(--ae-fs-base);
}
}
@media (hover: hover) {
.ae-hero__slide-link:hover .ae-hero__slide-cta {
background: var(--ae-pink-200);
transform: translateY(-1px);
}
}
.ae-hero__dots {
display: flex;
justify-content: center;
gap: var(--ae-2);
margin-top: var(--ae-4);
}
.ae-hero__dot {
width: 9px;
height: 9px;
min-height: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ae-line-strong);
cursor: pointer;
transition: width var(--ae-t-fast), background var(--ae-t-fast);
}
.ae-hero__dot.is-active {
width: 26px;
border-radius: var(--ae-r-pill);
background: var(--ae-pink);
}
/* --------------------------------------------------------------------------
شريط المزايا
-------------------------------------------------------------------------- */
.ae-features {
padding-block: var(--ae-6) !important;
}
.ae-features__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ae-3);
list-style: none;
margin: 0;
padding: var(--ae-4);
background: var(--ae-pink-050);
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
}
@media (min-width: 768px) {
.ae-features__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ae-5);
padding: var(--ae-5) var(--ae-6);
}
}
.ae-feature {
display: flex;
align-items: center;
gap: var(--ae-3);
}
.ae-feature__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--ae-surface);
box-shadow: var(--ae-shadow-sm);
}
.ae-feature__icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: var(--ae-pink);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ae-feature__body {
display: flex;
flex-direction: column;
line-height: 1.45;
}
.ae-feature__body strong {
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
}
.ae-feature__body span {
font-size: var(--ae-fs-xs);
color: var(--ae-ink-muted);
}
/* --------------------------------------------------------------------------
كروت الأقسام
-------------------------------------------------------------------------- */
.ae-cat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ae-3);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 576px) {
.ae-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ae-cat-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ae-4);
}
}
.ae-cat-card {
border-radius: var(--ae-r-lg);
background: var(--ae-cat-bg, var(--ae-pink-100));
transition: transform var(--ae-t), box-shadow var(--ae-t);
}
.ae-cat-card > a {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--ae-4);
color: var(--ae-plum);
}
.ae-cat-card__head {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: var(--ae-2);
}
.ae-cat-card__name {
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-bold);
line-height: 1.4;
}
.ae-cat-card__count {
font-size: var(--ae-fs-xs);
color: var(--ae-ink-muted);
}
.ae-cat-card__media {
display: grid;
place-items: center;
margin: auto 0 var(--ae-3);
padding-block: var(--ae-2);
aspect-ratio: 1 / 1;
}
/* الصور تنقص دائرة موحّدة.
السبب: صور بعض الأقسام مجهّزة كدوائر جاهزة، والأقسام اللي ما عندها صورة
تاخذ صورة أول منتج (مربعة). النتيجة كانت شبكة نصها دوائر ونصها مربعات. */
.ae-cat-card__media img {
width: 100%;
height: 100%;
max-width: 168px;
max-height: 168px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
background: var(--ae-surface);
transition: transform var(--ae-t);
}
.ae-cat-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ae-1);
min-height: 38px;
padding: 0 var(--ae-4);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
background: var(--ae-surface);
border-radius: var(--ae-r-pill);
box-shadow: var(--ae-shadow-sm);
}
.ae-cat-card__cta svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--ae-t-fast);
}
/* --------------------------------------------------------------------------
رفوف المنتجات
-------------------------------------------------------------------------- */
.ae-rail__grid {
margin-bottom: 0 !important;
}
/* بطاقة "شوف الكل" بنهاية الرف */
.woocommerce ul.products li.product.ae-rail__all {
background: var(--ae-pink-050);
border: 1px dashed var(--ae-line-strong);
border-radius: var(--ae-r-lg);
}
.ae-rail__all > a {
display: grid;
place-content: center;
justify-items: center;
gap: var(--ae-2);
height: 100%;
min-height: 220px;
padding: var(--ae-5);
text-align: center;
}
.ae-rail__all strong {
font-family: var(--ae-font-display);
font-size: var(--ae-fs-md);
font-weight: 700;
color: var(--ae-plum);
}
.ae-rail__all span {
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
}
.ae-rail__all-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 var(--ae-5);
border-radius: var(--ae-r-pill);
border: 1px solid var(--ae-line-strong);
background: var(--ae-surface);
color: var(--ae-plum) !important;
font-weight: var(--ae-fw-semi);
transition: background var(--ae-t-fast);
}
/* على الموبايل: تمرير أفقي بدل شبكة مزدحمة */
@media (max-width: 575px) {
.ae-rail__grid {
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: 62%;
grid-template-columns: none !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--ae-4);
padding-bottom: var(--ae-3);
margin-inline: calc(var(--ae-4) * -1);
padding-inline: var(--ae-4);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ae-rail__grid::-webkit-scrollbar { display: none; }
.ae-rail__grid > li.product { scroll-snap-align: start; }
}
/* --------------------------------------------------------------------------
دعوة أخيرة
-------------------------------------------------------------------------- */
.ae-cta__inner {
text-align: center;
background: linear-gradient(135deg, var(--ae-pink-100), var(--ae-pink-050));
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-xl);
padding: var(--ae-8) var(--ae-5);
}
.ae-cta__inner h2 {
font-size: var(--ae-fs-xl);
margin: 0 0 var(--ae-2);
}
.ae-cta__inner p {
color: var(--ae-ink-muted);
margin: 0 0 var(--ae-5);
}
/* --------------------------------------------------------------------------
الفوتر الغني
-------------------------------------------------------------------------- */
/* الفوتر لازم ياخذ العرض الكامل دائماً.
بصفحة السلة تخطيط الثيم يحط المحتوى بأعمدة، والفوتر كان ينسحب جوه عمود
ضيّق فتنضغط أعمدته لـ20px ويطلع النص حرف بكل سطر.
⚠️ الـ`!important`ات تحت **ما عادت ضرورية** — العلّة الجذرية انصلحت
بالماركب مو بالـCSS: الفوتر كان ينطبع جوّا حاوية المحتوى لأن أولوية
الهوك كانت 5 والأب يسكّر الحاوية بأولوية 10. صارت 20 فطلع بره الحاوية
وصار أخو `#content` مباشرة (شوف التعليق فوگ `add_action` بـ
`inc/layout.php`). تركناهن كحزام أمان لو انتغيّر ترتيب الهوكات —
بس لا تبني عليهن، ولا تحاول تصلّح انحشار الفوتر من هنا. */
.ae-footer {
/* pink-200 = #FFDBEE، وهو حرفياً مركز خلفية اللوگو. مهم: نجوم اللوگو
الفاتحة #FFE5F2 تختفي لو الفوتر أفتح منها، فنخليه على أرضيته الأصلية. */
background: var(--ae-pink-200);
border-top: 1px solid var(--ae-line);
padding-block: var(--ae-10) var(--ae-6);
width: 100% !important;
max-width: none !important;
flex: 1 1 100% !important;
grid-column: 1 / -1 !important;
float: none !important;
clear: both;
}
/* auto-fit مع حد أدنى 180px: الأعمدة تقل عددها بدل ما تنضغط */
.ae-footer__grid {
display: grid;
gap: var(--ae-6);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (max-width: 767px) {
.ae-footer__grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
}
.ae-footer__col h3 {
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum);
margin: 0 0 var(--ae-3);
}
.ae-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ae-2);
}
.ae-footer__col a,
.ae-footer__col li {
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
}
.ae-footer__about p {
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
max-width: 42ch;
margin: 0 0 var(--ae-3);
}
/* الفوتر ياخذ الرسم الكامل بنجومه — هنا المساحة تسمح، بعكس الهيدر. */
.ae-footer__logo img {
width: 158px;
height: auto;
margin-bottom: var(--ae-3);
}
.ae-footer__bottom {
margin-top: var(--ae-8);
padding-top: var(--ae-4);
border-top: 1px solid var(--ae-line-strong);
text-align: center;
font-size: var(--ae-fs-xs);
color: var(--ae-ink-muted);
}
/* ==========================================================================
HOVER — على الموبايل، :hover يعلق بعد اللمس ويبقى الزر بلونه الثاني.
لهذا كل تأثيرات الـ hover محصورة بأجهزة عندها ماوس حقيقي.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
.ae-link-all:hover svg { transform: translateX(-3px); }
.ae-btn:hover svg { transform: translateX(-3px); }
.ae-btn--primary:hover {
background: var(--ae-plum-700);
color: var(--ae-on-dark);
transform: translateY(-1px);
}
.ae-btn--ghost:hover {
background: var(--ae-pink-100);
color: var(--ae-plum-900);
}
.ae-cat-card:hover {
transform: translateY(-3px);
box-shadow: var(--ae-shadow);
}
.ae-cat-card:hover .ae-cat-card__media img {
transform: scale(1.06);
}
.ae-cat-card:hover .ae-cat-card__cta svg { transform: translateX(-3px); }
.ae-rail__all:hover .ae-rail__all-btn {
background: var(--ae-pink-100);
}
.ae-footer__col a:hover { color: var(--ae-plum); }
}
/* --------------------------------------------------------------------------
الفوتر على الموبايل — كان عمود واحد طويل ونصف الشاشة فاضي.
صار عمودين للروابط ومسافات أضيق.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.ae-footer {
padding-block: var(--ae-6) var(--ae-3);
}
.ae-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ae-5) var(--ae-4);
}
.ae-footer__about {
grid-column: 1 / -1;
}
.ae-footer__logo img {
width: 128px;
margin-bottom: var(--ae-2);
}
.ae-footer__about p {
font-size: var(--ae-fs-sm);
line-height: 1.7;
margin-bottom: 0;
}
.ae-footer__col h3 {
font-size: var(--ae-fs-sm);
margin-bottom: var(--ae-2);
}
.ae-footer__col ul {
gap: var(--ae-1);
}
.ae-footer__col a,
.ae-footer__col li {
font-size: var(--ae-fs-sm);
line-height: 2;
}
.ae-footer__bottom {
margin-top: var(--ae-5);
padding-top: var(--ae-3);
}
}
/* شريط حقوق النشر حق الثيم — عندنا فوتر خاص فيه نفس السطر.
بدونه كان يطبع "جميع الحقوق محفوظة" مرتين بنفس الصفحة. */
.site-info {
display: none !important;
}
/* ===== 8-header.css ===== */
/* ==========================================================================
8. HEADER — مطابقة المعاينة
الهيدر يبقى ماركب Woostify، بس شكله يتطابق مع المعاينة: لوگو، قائمة
بأربع روابط، وأيقونات دائرية على اليسار مع عدّاد وردي.
========================================================================== */
/* --- الشريط العلوي ---
كان بالوردي المشبّع `--ae-pink`. المشكلة: هذا اللون **مشتق** مو من
اللوگو، فيطلع أقوى لون بالصفحة كلها فوق هوية كل ألوانها ناعمة —
شريط إعلاني يسحب النظر أكثر من اللوگو نفسه.
صار بالبلَم، وهو لون اللوگو الأساسي: واضح، أنيق، ويوازن الهيدر
الفاتح تحته بدل ما يزاحمه. */
.topbar-slider,
.woostify-topbar {
background-color: var(--ae-plum) !important;
color: var(--ae-on-dark) !important;
font-size: var(--ae-fs-xs);
font-weight: var(--ae-fw-semi);
line-height: 1.9;
text-align: center;
}
/* عناصر السلايدر: وحدة ظاهرة والباقي مخفي لو الجافاسكربت ما اشتغل */
.topbar-slider .swiper-wrapper:not(.swiper-wrapper-initialized) > *:not(:first-child),
.topbar-slider > .topbar-slider-item:not(:first-child) {
display: none;
}
.topbar-slider .swiper-slide,
.topbar-slider .topbar-slider-item {
text-align: center;
}
.topbar-slider a,
.topbar-slider span,
.topbar-slider p,
.topbar-slider div,
.woostify-topbar a {
color: var(--ae-on-dark) !important;
}
/* --- الهيدر --- */
.site-header {
/* لا تستخدم backdrop-filter هنا: على كروم أندرويد، الضبابية على عنصر
ملتصق بحجم الهيدر تفشل عملية التركيب أحياناً فتطلع الصفحة بيضاء
بالكامل. خلفية صلبة أأمن وما تفرق بصرياً. */
/* أرضية وردية ناعمة — نفس مركز خلفية اللوگو. على الأبيض كانت نجوم
اللوگو تختفي تماماً، وهي جزء من شخصيته. */
background-color: var(--ae-pink-200);
border-bottom: 1px solid var(--ae-pink-300);
box-shadow: none;
}
/* الارتفاع مفصّل على اللوگو: 172×120 + هامش = 128، و124×86 + هامش = 96.
والخلفية: الثيم يرسم أبيض على `.site-header-inner` نفسه، فيغطي لون
`.site-header` — لازم نشيلها هنا مو نلوّن الأب بس. */
.site-header-inner {
min-height: 128px;
gap: var(--ae-4);
background: none !important;
}
@media (max-width: 991px) {
.site-header-inner {
min-height: 96px;
}
}
/* فراغ بين اللوگو وزر القائمة — كانوا ملاصقين بـ1px */
.site-header-inner .woostify-container {
display: flex;
align-items: center;
gap: var(--ae-4);
}
.site-branding {
min-width: 0;
}
/* --- القائمة --- */
.main-navigation .menu > li > a,
.main-navigation .primary-navigation > li > a {
padding: var(--ae-2) var(--ae-4);
border-radius: var(--ae-r-pill);
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
transition: background var(--ae-t-fast), color var(--ae-t-fast);
}
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a {
background: var(--ae-pink-100);
color: var(--ae-plum-900);
}
/* نشيل الخط السفلي المتحرك حق الثيم — صار عندنا خلفية بدله */
.main-navigation .menu > li > a::before,
.main-navigation .menu > li > a::after {
content: none !important;
}
/* --- الأيقونات: دوائر بحدود ناعمة ---
ملاحظة: ماركب Woostify يحط .tools-icon على غلاف حساب المستخدم وعلى
الرابط اللي جواه سوة. لو ستايلنا الاثنين تطلع دائرة داخل دائرة —
فنستهدف الروابط المباشرة بس. */
.site-tools {
display: flex;
align-items: center;
gap: var(--ae-2);
}
.site-tools > a.tools-icon,
.site-tools .my-account-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ae-tap);
height: var(--ae-tap);
border-radius: 50%;
background: var(--ae-surface);
border: 1px solid var(--ae-line);
color: var(--ae-plum);
position: relative;
transition: background var(--ae-t-fast), border-color var(--ae-t-fast);
}
/* الغلاف يبقى غلاف — بلا حدود ولا خلفية */
.site-tools > div.tools-icon {
display: inline-flex;
align-items: center;
position: relative;
width: auto;
height: auto;
border: 0;
background: none;
}
/* قائمة تسجيل الدخول المنسدلة تبقى نص عادي */
.site-tools .subbox a {
border: 0;
background: none;
width: auto;
height: auto;
border-radius: var(--ae-r-sm);
}
.site-tools .woostify-svg-icon svg {
width: 20px;
height: 20px;
}
.site-tools .woostify-svg-icon svg path {
fill: currentColor;
}
/* --- العدّادات: نقطة وردية صغيرة --- */
.shop-cart-count,
.wishlist-item-count {
position: absolute;
top: -3px;
inset-inline-end: -3px;
min-width: 19px;
height: 19px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ae-r-pill);
background: var(--ae-pink);
color: #fff;
font-size: 11px;
font-weight: var(--ae-fw-bold);
line-height: 1;
direction: ltr;
}
/* عدّاد الصفر ما يظهر — يضيف ضجيج بصري بلا فائدة */
.shop-cart-count.is-empty,
.wishlist-item-count.is-empty,
.ae-bb-count.is-empty {
display: none !important;
}
/* --- زر القائمة بالموبايل (☰) ---
بنية الثيم: .woostify-icon-bar غلاف 26×26، والخطوط الثلاثة كلها
جوّاه بـ (الخط الأوسط) و span::before / span::after.
تلوين الغلاف نفسه = مربع غامق مصمت. نلوّن الـ span بس، والخطين
يرثون اللون منه (background-color: inherit بستايل الثيم). */
.woostify-icon-bar {
background: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.woostify-icon-bar span {
background-color: var(--ae-plum);
border-radius: 2px;
}
/* منطقة لمس مريحة حول الزر */
.wrap-toggle-sidebar-menu > .toggle-sidebar-menu-btn {
min-width: var(--ae-tap);
min-height: var(--ae-tap);
cursor: pointer;
}
/* --- قائمة الحساب المنسدلة كانت تطلع 35px برة الشاشة --- */
.site-tools .my-account .subbox {
inset-inline-start: auto;
inset-inline-end: 0;
max-width: min(240px, calc(100vw - 24px));
}
.site-tools .my-account .subbox a {
white-space: nowrap;
}
/* --- اللوگو ---
الرسم الكامل بنجومه (نسبة 1.44)، مو نسخة الاسم لحاله — النجوم جزء من
شخصية اللوگو ومو زخرفة زايدة.
نحدّده بالعرض مو بالارتفاع: الملف مفرّغ ومقصوص على حدود الرسم، فتحديد
الارتفاع يصغّر الاسم بلا فايدة. 172px يعطي ارتفاع 120px، والهيدر
مفصّل عليه فوق.
وليش كبير لهالدرجة: بالمقاسات الصغيرة نجوم اللوگو تصير 15px وفرق
لونها عن الأرضية 10 درجات بس — فتختفي، ويطلع اللوگو مثل نص مجرّد. */
.site-branding .custom-logo-link img,
.site-header .site-logo img,
.site-branding .custom-mobile-logo {
width: 172px;
max-width: 46vw;
height: auto;
max-height: none;
}
@media (max-width: 991px) {
.site-branding .custom-logo-link img,
.site-header .site-logo img,
.site-branding .custom-mobile-logo {
width: 124px;
}
}
/* ==========================================================================
HOVER — على الموبايل، :hover يعلق بعد اللمس ويبقى الزر بلونه الثاني.
لهذا كل تأثيرات الـ hover محصورة بأجهزة عندها ماوس حقيقي.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
.main-navigation .menu > li > a:hover {
background: var(--ae-pink-050);
color: var(--ae-plum-900);
}
.site-tools > a.tools-icon:hover,
.site-tools .my-account-icon:hover {
background: var(--ae-pink-050);
border-color: var(--ae-line-strong);
}
}
/* --- شريط "المتجر قيد التنفيذ": نصه ورابط الإخفاء كانوا فوق بعض --- */
.woocommerce-store-notice,
p.demo_store {
display: block;
padding: var(--ae-3) var(--ae-5);
margin: 0;
font-size: var(--ae-fs-sm);
line-height: 1.6;
background: var(--ae-plum) !important;
color: #fff !important;
text-align: center;
}
.woocommerce-store-notice .woostify-svg-icon {
display: inline-flex;
vertical-align: middle;
margin-inline-end: var(--ae-2);
}
.woocommerce-store-notice .woostify-svg-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.woocommerce-store-notice a,
p.demo_store a {
display: inline-block;
margin-inline-start: var(--ae-3);
color: #fff !important;
text-decoration: underline;
padding: var(--ae-1) var(--ae-3);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--ae-r-pill);
text-decoration: none;
font-weight: var(--ae-fw-semi);
}
/* الشريط ما يغطي الشريط السفلي بالموبايل */
@media (max-width: 991px) {
.woocommerce-store-notice,
p.demo_store {
bottom: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* --------------------------------------------------------------------------
شريط "المتجر قيد التنفيذ" — نخفيه عن الزبون.
السبب: هذا الشريط يگول للزبون حرفياً "لن يتم استقبال أي طلبات حالياً"،
وهو مفعّل على الموقع الحي. أي زبون يشوفه يطلع من الموقع.
الإخفاء هنا وقائي فقط — التحذير موجود بلوحة التحكم، والإطفاء الصحيح
من: ووكومرس ← إعدادات ← عام ← إشعار المتجر.
-------------------------------------------------------------------------- */
.woocommerce-store-notice,
p.demo_store {
display: none !important;
}
/* ===== 10-fixes.css ===== */
/* ==========================================================================
10. إصلاحات نهائية — أشياء مصدرها إعدادات الثيم أو البلگنات
========================================================================== */
/* --------------------------------------------------------------------------
10.1 المربع الأبيض داخل زر السلة عند الهوفر
إعدادات الثيم تطبع بالـ inline CSS:
.product-loop-wrapper .button:hover .woostify-svg-icon { background-color:#FFF7FF }
يعني غلاف الأيقونة ياخذ خلفية بيضاء فوق الزر الملوّن = مربع أبيض واضح.
الأيقونة ما تحتاج خلفية أصلاً.
-------------------------------------------------------------------------- */
.product-loop-wrapper .button .woostify-svg-icon,
.product-loop-wrapper .button:hover .woostify-svg-icon,
.product-loop-meta .button .woostify-svg-icon,
.product-loop-meta .button:hover .woostify-svg-icon,
.woocommerce ul.products li.product .button .woostify-svg-icon,
.woocommerce ul.products li.product .button:hover .woostify-svg-icon {
background: none !important;
background-color: transparent !important;
color: inherit !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* --------------------------------------------------------------------------
10.2 توسيط قلب المفضلة
الأيقونة محرف من خط أيقونات (::before)، وارتفاع السطر الافتراضي
ينزّلها شوية تحت مركز الدائرة.
-------------------------------------------------------------------------- */
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button {
line-height: 0;
font-size: 17px;
}
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button::before,
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button i,
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button i::before {
display: block;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle;
}
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button svg {
display: block;
width: 17px;
height: 17px;
margin: 0;
}
/* --------------------------------------------------------------------------
10.3 محدّد الكمية بصفحة المنتج — كان يعرض علامة + بس
الثيم يحط زرّي + و − بـ position:absolute فوق الحقل (تصميمه الأصلي
يخليهم عالحواف). إحنا خليناه flex، وبما إن العناصر المطلقة ما تدخل
بتخطيط الـ flex، صار عرض الصندوق = عرض الحقل (58px) والأزرار تتراكب
فوقه. القياس أثبتها: .quantity=58x50 وزرّين 42x44 بموضع absolute.
-------------------------------------------------------------------------- */
.woocommerce .quantity .product-qty,
.woocommerce div.product form.cart .quantity .product-qty,
.woocommerce-cart .quantity .product-qty {
position: static !important;
inset: auto !important;
flex: 0 0 auto;
}
.woocommerce form.cart .quantity,
.woocommerce .cart_item .quantity,
.woocommerce div.product form.cart .quantity {
width: auto !important;
min-width: 140px;
}
/* --------------------------------------------------------------------------
10.4 الترقيم — كان أشكال بيضاوية طايرة بلا حدود
ستايل الثيم يفرض border-radius كبير وبلا حدود، فالأرقام تطلع مثل فقاعات
مبعثرة. نعيد بناءه: مربعات مدوّرة بحدود واضحة، والصفحة الحالية مملوءة.
-------------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
margin: var(--ae-8) 0 var(--ae-10);
padding: 0;
text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
display: inline-flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--ae-2) !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: visible !important;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 44px !important;
height: 44px !important;
padding: 0 var(--ae-3) !important;
margin: 0 !important;
border: 1px solid var(--ae-line-strong) !important;
border-radius: var(--ae-r) !important; /* 12px — مو دائرة */
background: var(--ae-surface) !important;
color: var(--ae-plum) !important;
font-size: var(--ae-fs-base) !important;
font-weight: var(--ae-fw-semi) !important;
line-height: 1 !important;
text-decoration: none;
transition: background var(--ae-t-fast), border-color var(--ae-t-fast);
}
/* الصفحة الحالية */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
background: var(--ae-plum) !important;
border-color: var(--ae-plum) !important;
color: var(--ae-on-dark) !important;
}
/* الفواصل "..." بلا إطار */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
border-color: transparent !important;
background: none !important;
color: var(--ae-ink-faint) !important;
min-width: 28px !important;
}
/* التالي / السابق: نص مع سهم */
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
padding: 0 var(--ae-5) !important;
background: var(--ae-pink-100) !important;
border-color: var(--ae-pink-300) !important;
}
@media (hover: hover) and (pointer: fine) {
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
background: var(--ae-pink-100) !important;
border-color: var(--ae-pink) !important;
}
}
/* --------------------------------------------------------------------------
10.5 تنبيه "الخيار مو متوفّر" — بديل نافذة المتصفح
-------------------------------------------------------------------------- */
.ae-variation-notice {
display: none;
margin: var(--ae-3) 0;
padding: var(--ae-3) var(--ae-4);
border: 1px solid var(--ae-warning);
border-radius: var(--ae-r);
background: var(--ae-warning-bg);
color: var(--ae-warning);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
line-height: 1.6;
}
.ae-variation-notice.is-visible {
display: block;
animation: ae-notice-in 0.2s ease;
}
@keyframes ae-notice-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ae-variation-notice.is-visible { animation: none; }
}
/* --------------------------------------------------------------------------
10.6 خيارات المنتج (السواتشات)
الأسماء الطويلة مثل "المحفظة + الميدالية" كانت تنقص أو تطلع بره الزر،
والتلميح الأسود يغطي الخيارات — وعلى الموبايل ما إله فايدة أصلاً.
-------------------------------------------------------------------------- */
.woo-variation-swatches .variable-items-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--ae-2);
margin: 0;
padding: 0;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item {
width: auto !important;
max-width: 100%;
height: auto !important;
min-height: 46px;
margin: 0 !important;
padding: var(--ae-2) var(--ae-4) !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ae-r) !important;
}
.woo-variation-swatches .variable-item .variable-item-span {
white-space: normal !important;
line-height: 1.45;
font-size: var(--ae-fs-sm);
text-align: center;
width: auto !important;
height: auto !important;
}
/* التلميح: مخفي باللمس (ما إله فايدة بلا ماوس).
⚠️ خطأ قاتل صار هنا سابقاً — لا تكرره:
كتبت `.wvs-tooltip { display: none }` ظناً إنه كلاس التلميح.
بس `wvs-tooltip` كلاس يحطه بلگن السواتشات على ** نفسه**
(شوف: ).
يعني القاعدة صارت `body { display:none }` على كل جهاز لمس →
الموقع كله صفحة بيضاء بالموبايل، بينما الديسكتوب سليم.
القاعدة لازم تستهدف عنصر التلميح داخل الخيارات، مو أي شي بالكلاس. */
@media (hover: none), (pointer: coarse) {
.woo-variation-swatches .variable-item .variable-item-span-tooltip,
.woo-variation-swatches .variable-item > .wvs-tooltip,
body.wvs-tooltip .variable-item::after,
body.wvs-tooltip .variable-item::before {
display: none !important;
opacity: 0 !important;
}
}
.woo-variation-swatches .variable-item .variable-item-span-tooltip,
.woo-variation-swatches .variable-item > .wvs-tooltip {
background: var(--ae-plum) !important;
color: var(--ae-on-dark) !important;
border-radius: var(--ae-r-sm) !important;
font-family: var(--ae-font) !important;
font-size: var(--ae-fs-xs) !important;
padding: var(--ae-1) var(--ae-3) !important;
}
/* --------------------------------------------------------------------------
10.7 صفحة 404
-------------------------------------------------------------------------- */
.ae-404 {
background: var(--ae-bg);
}
.ae-404__inner {
max-width: 640px;
padding-block: var(--ae-12) var(--ae-16);
text-align: center;
}
.ae-404__code {
font-family: var(--ae-font-display);
font-size: clamp(3.5rem, 18vw, 6rem);
font-weight: 700;
line-height: 1;
margin: 0 0 var(--ae-2);
color: var(--ae-pink-200);
letter-spacing: 0;
}
.ae-404__title {
font-size: var(--ae-fs-2xl);
color: var(--ae-plum);
margin: 0 0 var(--ae-3);
}
.ae-404__text {
font-size: var(--ae-fs-base);
color: var(--ae-ink-muted);
line-height: var(--ae-lh-base);
margin: 0 auto var(--ae-6);
max-width: 44ch;
}
.ae-404__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--ae-3);
margin-bottom: var(--ae-8);
}
.ae-404__actions .ae-btn svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.ae-404__cats-label {
display: block;
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
margin-bottom: var(--ae-3);
}
.ae-404__cats ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--ae-2);
list-style: none;
margin: 0;
padding: 0;
}
.ae-404__cats a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 var(--ae-4);
border-radius: var(--ae-r-pill);
background: var(--ae-pink-050);
border: 1px solid var(--ae-line);
color: var(--ae-plum);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-medium);
}
@media (hover: hover) and (pointer: fine) {
.ae-404__cats a:hover {
background: var(--ae-pink-100);
border-color: var(--ae-pink-300);
}
}
/* --------------------------------------------------------------------------
10.8 سهم الإرسال بالبوت يأشر لجهة الكتابة العربية
-------------------------------------------------------------------------- */
.ae-chat__send svg {
transform: scaleX(-1) !important;
}
/* ===== 11-cart.css ===== */
/* ==========================================================================
11. صفحة السلة — إعادة بناء صف المنتج
ووكومرس يعرضه كجدول. على الموبايل الثيم يحوّله لأسطر مع تسميات
(data-title) فيطلع مبعثر: الصورة صغيرة بالزاوية، والكمية مقصوصة.
هنا نبنيه كرت واضح.
========================================================================== */
@media (max-width: 767px) {
.woocommerce-cart table.shop_table.cart {
border: 0;
background: none;
}
.woocommerce-cart table.shop_table.cart tr.cart_item {
display: grid;
grid-template-columns: 76px minmax(0, 1fr) auto;
grid-template-areas:
"thumb name name"
"thumb qty subtotal";
align-items: center;
gap: var(--ae-3);
padding: var(--ae-4);
margin-bottom: var(--ae-3);
background: var(--ae-surface);
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
position: relative;
}
/* نلغي تسميات "السعر / الكمية" اللي يطبعها الثيم — التخطيط واضح بدونها */
.woocommerce-cart table.shop_table.cart td::before {
content: none !important;
}
.woocommerce-cart td.product-thumbnail {
grid-area: thumb;
}
.woocommerce-cart td.product-thumbnail img {
width: 76px !important;
height: 76px !important;
object-fit: cover;
border-radius: var(--ae-r);
display: block;
}
.woocommerce-cart td.product-name {
grid-area: name;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
line-height: 1.5;
padding-inline-end: var(--ae-6); /* مكان زر الحذف */
}
.woocommerce-cart td.product-name a {
color: var(--ae-plum);
}
/* سعر الوحدة مكرر مع المجموع الجزئي بمساحة ضيقة — نكتفي بالمجموع */
.woocommerce-cart td.product-price {
display: none;
}
.woocommerce-cart td.product-quantity {
grid-area: qty;
}
/* الستيبر ما يتمدد على عرض العمود — حجمه بقدر محتواه */
.woocommerce-cart td.product-quantity .quantity {
min-width: 0 !important;
width: auto !important;
}
.woocommerce-cart td.product-quantity .product-qty {
width: 36px;
min-width: 36px;
height: 40px;
}
.woocommerce-cart td.product-quantity input.qty {
width: 44px !important;
min-width: 44px;
height: 40px;
min-height: 40px;
line-height: 40px;
}
.woocommerce-cart td.product-subtotal {
grid-area: subtotal;
text-align: end;
font-size: var(--ae-fs-md);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
}
.woocommerce-cart td.product-remove {
position: absolute;
top: var(--ae-2);
inset-inline-end: var(--ae-2);
padding: 0;
}
/* صف الأزرار السفلي */
.woocommerce-cart table.shop_table.cart tr:last-child td.actions {
display: flex;
flex-direction: column;
gap: var(--ae-3);
padding: 0;
border: 0;
}
.woocommerce-cart .coupon {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--ae-2);
width: 100%;
}
.woocommerce-cart .coupon input,
.woocommerce-cart .coupon .button {
width: 100%;
margin: 0;
}
}
/* --------------------------------------------------------------------------
⚠️ كبسولة الكمية — `max-width` تغلب `width: auto !important`
--------------------------------------------------------------------------
الستيبر بصفحة السلة كان مكسور: زرّا + و − يترسمون **بره** الكبسولة
و`overflow: hidden` يقصّهم، فما تشوف غير شظية من الـ−. قِسناه (390):
الكبسولة 80x30 (صندوقها الداخلي 78×28)
الأبناء 36 + 44 + 36 = 116px عرضاً، وكلهم 40px عالياً
→ + عند x256..292 والكبسولة تنتهي بـ274 → 18px بره
→ − عند x176..212 والكبسولة تبدأ بـ194 → 18px بره
→ وعمودياً 12px مقصوص من تحت
وفوگ هذا حطّينا `width: auto !important` بقواعد الموبايل تحت وظنّينا
إنها ما اشتغلت. سألنا المتصفح أي قاعدة تنطبق فعلاً فطلع إنها **اشتغلت**،
بس الأب يحطّ:
@media (max-width: 991px) {
.woocommerce-cart-form__contents:not(.elementor-menu-cart__products)
.quantity { height: 30px; max-width: 80px }
}
و`max-width` تقصّ `width` مهما كان — `!important` على `width` ما ينفع،
لأنهن خاصيتان مختلفتان مو تعارض بنفس الخاصية. نفس الفخ اللي وگعنا بيه
بصورة الدرج (`max-width: 60px` من الأب تقصّ `width: 64px !important`).
وارتفاع `50px` بقاعدة `.quantity` العامة يضرب على الديسكتوب كذلك، فهاي
القاعدة **بره أي ميديا** حتى تغطي الموبايل والتابلت والديسكتوب سوة.
القاعدة تحت (0,3,1) وقاعدة الأب (0,3,0) — تغلبها بلا `!important`.
-------------------------------------------------------------------------- */
.woocommerce-cart td.product-quantity .quantity {
max-width: none;
height: auto;
}
/* --------------------------------------------------------------------------
زر "تفعيل الكوبون" — نص أبيض على وردي فاتح، ما ينقرا
--------------------------------------------------------------------------
قِسناه: نص `rgb(255,255,255)` على خلفية `rgb(255,213,234)` = تباين
**1.32:1** والحد المقبول 4.5:1. الكلمة شبه مختفية، والزر يقرأ كأنه
معطّل مع إنه شغّال (`disabled=false`).
الخلفية `#ffd5ea` أصلاً بره لوحتنا — قريبة من `--ae-pink-200` بس مو
هي. نرجّعه للتوكنز: خلفية الأزرار الثانوية ونص البرقوقي = 7.3:1.
-------------------------------------------------------------------------- */
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart .coupon .button {
background: var(--ae-pink-200) !important;
color: var(--ae-plum) !important;
border: 1px solid var(--ae-pink-300) !important;
}
/* --------------------------------------------------------------------------
زر "تحديث السلة" — كان كتلة رمادية بعرض الصفحة تشبه زر معطوب.
هو زر ثانوي، يظهر بشكله الحقيقي بس لما تتغيّر الكمية.
-------------------------------------------------------------------------- */
.woocommerce-cart button[name="update_cart"] {
width: auto;
min-width: 150px;
align-self: flex-start;
background: transparent !important;
color: var(--ae-plum) !important;
border: 1px solid var(--ae-line-strong) !important;
box-shadow: none;
font-size: var(--ae-fs-sm);
}
.woocommerce-cart button[name="update_cart"]:disabled {
opacity: 0.45;
cursor: default;
}
/* --------------------------------------------------------------------------
ملخّص الطلب
-------------------------------------------------------------------------- */
.woocommerce-cart .cart_totals table.shop_table {
border: 0;
}
.woocommerce-cart .cart_totals th {
background: none;
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
padding-inline: 0;
}
.woocommerce-cart .cart_totals td {
border-top: 0;
padding-inline: 0;
text-align: end;
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
border-top: 1px solid var(--ae-line);
padding-top: var(--ae-3);
font-size: var(--ae-fs-lg);
color: var(--ae-plum-900);
font-weight: var(--ae-fw-bold);
}
/* سطر التوصيل: واضح ومطمئن */
.woocommerce-cart .cart_totals tr.shipping th,
.woocommerce-cart .cart_totals tr.shipping td {
color: var(--ae-plum);
}
.woocommerce-cart .cart_totals tr.shipping ul#shipping_method {
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-cart .cart_totals tr.shipping ul#shipping_method li {
margin: 0;
}
/* "شحن إلى BG." — رمز محافظة خام، ما يفيد الزبون */
.woocommerce-cart .woocommerce-shipping-destination,
.woocommerce-checkout .woocommerce-shipping-destination {
display: none;
}
/* سعر الوحدة المكرر: قاعدة الثيم أقوى، فنحتاج !important */
@media (max-width: 767px) {
.woocommerce-cart td.product-price {
display: none !important;
}
}
/* ==========================================================================
⚠️ صفحة السلة على الشاشات العريضة — نفس علّة الشيك أوت
==========================================================================
قِسناها على شاشة 1900:
.woocommerce 1870 @x15..1885 ← عرض الشاشة كله
form.woocommerce-cart-form 1216
.cart-collaterals 615 ← صندوق مجاميع بعرض ٦١٥px
td.product-name 413
نفس السبب: قاعدة إلغاء السايدبار تحط `#primary { max-width: 100% !important }`
فما بقى أي سقف على المحتوى.
⚠️ **grid مو flex هنا** — بعكس الشيك أوت. حاوية `.woocommerce` بصفحة
السلة تضم كذلك الإشعارات وملاحظة التوصيل، ولو خلّيناها صف flex
ينحشرون بنفس الصف جنب الجدول. بالـgrid نعطي كل شي `1 / -1` (صف كامل)
ونستثني النموذج والملخص بس.
وبالعربي العمود الأول هو **اليمين**، فالجدول يمين والمجاميع يسار —
نفس ترتيب الـfloat القديم.
========================================================================== */
@media (min-width: 992px) {
.woocommerce-cart .woocommerce {
max-width: 1180px;
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: var(--ae-8);
align-items: start;
}
/* الافتراضي: أي عنصر ياخذ الصف كامل (إشعارات، ملاحظة التوصيل، رسائل) */
.woocommerce-cart .woocommerce > * {
grid-column: 1 / -1;
}
.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
grid-column: 1;
min-width: 0;
float: none !important;
width: auto !important;
}
.woocommerce-cart .woocommerce > .cart-collaterals {
grid-column: 2;
width: 380px !important;
float: none !important;
/* المجاميع تتابعك وإنت تعدّل الكميات */
position: sticky;
top: var(--ae-4);
}
.woocommerce-cart .cart-collaterals .cart_totals {
width: 100% !important;
float: none !important;
}
}
/* ===== 13-minicart.css ===== */
/* ==========================================================================
13. السلة الجانبية (mini cart)
==========================================================================
⚠️ الماركب انتغيّر: محتوى السلة صار يبنيه بلگن بمحددات `pa-woo-mc__`
مو ماركب ووكومرس القياسي. القواعد بأسفل الملف (13.2) هي الشغّالة.
القواعد بالأعلى تخص الماركب القديم — تركناها لأنها ما تضر (محدداتها
ما تطابق شي)، وتفيد لو رجع الماركب القياسي.
للتأكد من الماركب الحالي بأي وقت:
node tools/eval.mjs "https://staging.aerolit.store/?add-to-cart=" tools/qminicart.js 390 844 mobile
الماركب القديم (ووكومرس القياسي):
×
![]()
اسم المنتج ← الصورة والاسم بنفس الرابط
1 × 15,000 د.ع
خطأ سابق: ستايل كبسولة الكمية (+ و −) كان مكتوب على `.woocommerce .quantity`
وهذا الكلاس مستخدم هنا لنص، فانحشر النص بكبسولة والسعر انقطع لسطرين.
========================================================================== */
/* أي مكان ما بيه حقل إدخال: نلغي ستايل الكبسولة */
#shop-cart-sidebar .quantity,
.cart-sidebar .quantity,
.widget_shopping_cart .quantity,
.woocommerce-mini-cart-item .quantity,
.product_list_widget .quantity {
display: inline !important;
width: auto !important;
min-width: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
overflow: visible !important;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
صف المنتج
-------------------------------------------------------------------------- */
li.woocommerce-mini-cart-item {
position: relative;
display: block;
padding: var(--ae-3) 0;
margin: 0;
border-bottom: 1px solid var(--ae-line);
list-style: none;
}
/* رابط المنتج = صورة + اسم بصف واحد */
li.woocommerce-mini-cart-item > a:not(.remove) {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: center;
gap: var(--ae-3);
padding: 0;
padding-inline-end: 30px; /* مكان زر الحذف */
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
line-height: 1.5;
color: var(--ae-plum);
min-height: 0;
}
li.woocommerce-mini-cart-item > a:not(.remove) img {
width: 64px !important;
height: 64px !important;
object-fit: cover;
border-radius: var(--ae-r-sm);
margin: 0 !important;
float: none !important;
}
/* سطر الكمية والسعر.
الماركب: .mini-cart-product-infor > .mini-cart-quantity (− input +)
+ .mini-cart-product-price
الدرج ضيّق، فلو ما حصرنا العرض ينضغط السعر ويطلع حرف بكل سطر. */
li.woocommerce-mini-cart-item .mini-cart-product-infor {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--ae-2);
margin-top: var(--ae-2);
padding-inline-start: calc(64px + var(--ae-3));
}
/* ستيبر الكمية */
li.woocommerce-mini-cart-item .mini-cart-quantity {
display: inline-flex !important;
align-items: stretch;
flex: 0 0 auto;
border: 1px solid var(--ae-line-strong);
border-radius: var(--ae-r-pill);
overflow: hidden;
background: var(--ae-surface);
}
li.woocommerce-mini-cart-item .mini-cart-product-qty {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
min-width: 30px;
height: 32px;
background: var(--ae-pink-050);
color: var(--ae-plum);
cursor: pointer;
}
li.woocommerce-mini-cart-item .mini-cart-product-qty svg {
width: 11px;
height: 11px;
fill: currentColor;
stroke: currentColor;
}
li.woocommerce-mini-cart-item .mini-cart-quantity input.qty {
width: 38px !important;
min-width: 38px;
height: 32px;
min-height: 32px;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
text-align: center;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
line-height: 32px;
box-shadow: none !important;
-moz-appearance: textfield;
appearance: textfield;
}
li.woocommerce-mini-cart-item .mini-cart-quantity input.qty::-webkit-outer-spin-button,
li.woocommerce-mini-cart-item .mini-cart-quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* السعر — ما ينكسر أبداً */
li.woocommerce-mini-cart-item .mini-cart-product-price {
flex: 0 0 auto;
white-space: nowrap !important;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
}
li.woocommerce-mini-cart-item .mini-cart-product-price .woocommerce-Price-amount {
white-space: nowrap !important;
display: inline-block;
}
/* زر الحذف: الماركب يطبع "×" نصية + أيقونة SVG سوة = علامتين.
نخفي النص ونبقي الأيقونة بدائرة صغيرة. */
li.woocommerce-mini-cart-item > a.remove {
position: absolute;
top: var(--ae-3);
inset-inline-end: 0;
width: 26px;
height: 26px;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ae-danger-bg);
color: var(--ae-danger) !important;
font-size: 0 !important;
line-height: 1;
margin: 0;
}
li.woocommerce-mini-cart-item > a.remove .woostify-svg-icon {
display: inline-flex;
font-size: 0;
}
li.woocommerce-mini-cart-item > a.remove svg {
width: 12px;
height: 12px;
fill: currentColor;
stroke: currentColor;
}
/* --------------------------------------------------------------------------
رأس الدرج
-------------------------------------------------------------------------- */
#shop-cart-sidebar .cart-sidebar-head {
display: flex;
align-items: center;
gap: var(--ae-2);
padding: var(--ae-4);
border-bottom: 1px solid var(--ae-line);
}
#shop-cart-sidebar .cart-sidebar-title {
margin: 0;
font-size: var(--ae-fs-md);
color: var(--ae-plum);
}
#shop-cart-sidebar .cart-sidebar-head .shop-cart-count {
position: static;
transform: none;
}
#shop-cart-sidebar #close-cart-sidebar-btn {
margin-inline-start: auto;
width: 34px;
height: 34px;
min-height: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ae-pink-050);
color: var(--ae-plum);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* بنية الدرج: رأس ثابت، قائمة تتمدد وتتمرر، ومجموع وأزرار بالأسفل.
بدون هذا كان يطلع فراغ ضخم بالنص، والمجموع ينخفي تحت زر "إتمام الطلب". */
#shop-cart-sidebar {
display: flex;
flex-direction: column;
}
#shop-cart-sidebar .cart-sidebar-head {
flex: 0 0 auto;
}
#shop-cart-sidebar .cart-sidebar-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
padding-inline: var(--ae-4);
overflow: hidden;
}
#shop-cart-sidebar ul.woocommerce-mini-cart {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
}
/* المجموع والأزرار داخل .woocommerce-mini-cart__bottom — الثيم يثبّته
بـ position:absolute بأسفل الدرج، فيتراكب على المجموع ويخلي فراغ بالنص. */
#shop-cart-sidebar .woocommerce-mini-cart__bottom {
position: static !important;
inset: auto !important;
flex: 0 0 auto;
display: block;
width: auto;
margin: 0 calc(var(--ae-4) * -1);
padding: 0;
background: var(--ae-surface);
}
#shop-cart-sidebar .total,
#shop-cart-sidebar .buttons,
#shop-cart-sidebar .woocommerce-mini-cart__total,
#shop-cart-sidebar .woocommerce-mini-cart__buttons {
position: static !important;
inset: auto !important;
flex: 0 0 auto;
width: auto;
}
/* --------------------------------------------------------------------------
المجموع والأزرار
-------------------------------------------------------------------------- */
#shop-cart-sidebar .total,
.widget_shopping_cart .total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ae-2);
padding: var(--ae-4);
margin: 0;
border-top: 1px solid var(--ae-line);
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
}
#shop-cart-sidebar .total .amount,
.widget_shopping_cart .total .amount {
font-size: var(--ae-fs-lg);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
white-space: nowrap;
}
#shop-cart-sidebar .buttons,
.widget_shopping_cart .buttons {
display: flex;
flex-direction: column-reverse; /* "إتمام الطلب" فوق "عرض السلة" */
gap: var(--ae-2);
padding: 0 var(--ae-4) var(--ae-4);
margin: 0;
}
#shop-cart-sidebar .buttons .button,
.widget_shopping_cart .buttons .button {
width: 100%;
margin: 0;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ae-r-pill);
font-weight: var(--ae-fw-semi);
}
#shop-cart-sidebar .buttons .checkout,
.widget_shopping_cart .buttons .checkout {
background: var(--ae-plum) !important;
color: var(--ae-on-dark) !important;
box-shadow: var(--ae-shadow-sm);
}
#shop-cart-sidebar .buttons .button:not(.checkout),
.widget_shopping_cart .buttons .button:not(.checkout) {
background: transparent !important;
color: var(--ae-plum) !important;
border: 1px solid var(--ae-line-strong) !important;
}
/* الدرج الفاضي */
#shop-cart-sidebar .empty,
.widget_shopping_cart .empty {
padding: var(--ae-8) var(--ae-4);
text-align: center;
color: var(--ae-ink-muted);
}
/* على الموبايل: مساحة أسفل حتى الشريط السفلي ما يغطي الأزرار */
@media (max-width: 991px) {
#shop-cart-sidebar .buttons {
padding-bottom: calc(var(--ae-bottombar-h) + env(safe-area-inset-bottom, 0px) + var(--ae-3));
}
}
/* ==========================================================================
13.2 الماركب الفعلي — بلگن `pa-woo-mc`
==========================================================================
البنية:
.pa-woo-mc__items-wrapper
.pa-woo-mc__item-wrapper.cart_item
.pa-woo-mc__product-thumbnail > a > img
.pa-woo-mc__product-data
.pa-woo-mc__title-row > a.pa-woo-mc__title + span.pa-woo-mc__remove-item
.pa-woo-mc__price-row > .pa-woo-mc__item-qty (− input +) + .pa-woo-mc__item-price
.pa-woo-mc__item-notice
المشكلة اللي كانت: ما كو أي تخطيط عليها من طرفنا (ستايلنا كان يستهدف
محددات ووكومرس القياسية فما انطبق)، فالصف ينزل بتدفق عادي: الصورة
بجهة، والاسم ينكسر لثلاث سطور بعمود ضيّق، والكمية والسعر تحت — وثلثا
عرض الشريط يبقى فاضي.
========================================================================== */
.pa-woo-mc__items-wrapper {
display: flex;
flex-direction: column;
}
/* الصف: صورة ثابتة + عمود بيانات ياخذ الباقي */
.pa-woo-mc__item-wrapper {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: start;
gap: var(--ae-3);
padding: var(--ae-4) 0;
border-bottom: 1px solid var(--ae-line);
}
.pa-woo-mc__item-wrapper:last-child {
border-bottom: 0;
}
.pa-woo-mc__product-thumbnail {
grid-column: 1;
margin: 0;
}
.pa-woo-mc__product-thumbnail a {
display: block;
}
.pa-woo-mc__product-thumbnail img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--ae-r);
border: 1px solid var(--ae-line);
display: block;
}
.pa-woo-mc__product-data {
grid-column: 2;
display: flex;
flex-direction: column;
gap: var(--ae-2);
min-width: 0; /* بدونها الاسم الطويل يمدّد الشبكة ويكسر العرض */
}
/* سطر الاسم + زر الحذف */
.pa-woo-mc__title-row {
display: flex;
align-items: flex-start;
gap: var(--ae-2);
margin: 0;
}
.pa-woo-mc__title {
flex: 1 1 auto;
min-width: 0;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
line-height: var(--ae-lh-snug);
color: var(--ae-plum);
/* سطرين كحد أقصى — الأسماء عدنا طويلة وفيها إيموجي */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pa-woo-mc__remove-item {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
color: var(--ae-ink-faint);
transition: background var(--ae-t-fast), color var(--ae-t-fast);
}
.pa-woo-mc__remove-item svg {
width: 15px;
height: 15px;
display: block !important; /* البلگن يخفيها بستايل سطري */
}
.pa-woo-mc__remove-item svg path {
fill: currentColor;
}
@media (hover: hover) and (pointer: fine) {
.pa-woo-mc__remove-item:hover {
background: var(--ae-pink-050);
color: var(--ae-danger);
}
}
/* سطر الكمية + السعر */
.pa-woo-mc__price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ae-3);
margin: 0;
}
.pa-woo-mc__item-qty {
display: inline-flex;
align-items: center;
gap: 0;
height: 34px;
border: 1px solid var(--ae-line-strong);
border-radius: var(--ae-r-pill);
background: var(--ae-surface);
overflow: hidden;
}
.pa-woo-mc__item-qty svg {
width: 12px;
height: 12px;
cursor: pointer;
box-sizing: content-box;
padding: 0 var(--ae-3);
color: var(--ae-plum);
}
.pa-woo-mc__item-qty svg path {
fill: currentColor;
}
.pa-woo-mc__input {
width: 34px;
height: 100%;
padding: 0;
border: 0;
border-inline: 1px solid var(--ae-line);
border-radius: 0;
background: transparent;
text-align: center;
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum-900);
appearance: textfield;
-moz-appearance: textfield;
}
.pa-woo-mc__input::-webkit-outer-spin-button,
.pa-woo-mc__input::-webkit-inner-spin-button {
appearance: none;
-webkit-appearance: none;
margin: 0;
}
.pa-woo-mc__item-price {
flex: 0 0 auto;
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
white-space: nowrap;
}
.pa-woo-mc__item-price .woocommerce-Price-currencySymbol {
font-size: 0.85em;
font-weight: var(--ae-fw-medium);
margin-inline-end: 2px;
}
/* الملاحظة تحت الصف — تختفي لما تكون فاضية بدل ما تترك فراغ */
.pa-woo-mc__item-notice:empty {
display: none;
}
.pa-woo-mc__item-notice {
grid-column: 1 / -1;
font-size: var(--ae-fs-xs);
color: var(--ae-ink-muted);
}
/* حاوية المحتوى: القواعد القديمة تستهدف `ul.woocommerce-mini-cart` وهي
مو موجودة بالماركب الجديد، فالتمرير والتذييل ما كانوا ينضبطون. */
#shop-cart-sidebar .widget_shopping_cart_content,
.cart-sidebar .widget_shopping_cart_content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
#shop-cart-sidebar .pa-woo-mc__items-wrapper,
.cart-sidebar .pa-woo-mc__items-wrapper {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* ==========================================================================
13.3 إصلاح صف المنتج — الصف نفسه شبكة من الثيم
==========================================================================
قِسنا الصف فطلع `display: grid` بأعمدة `56px 165.5px` من الثيم، وقواعدنا
كانت مكتوبة على افتراض إنه بلوك عادي. النتيجة: الرابط (صورة + اسم)
انحشر بالعمود الثاني الضيّق، فالاسم انكسر لثلاث سطور بعرض ~90px،
و`.mini-cart-product-infor` بقى 75px فنزلت الكمية والسعر فوق بعض —
بينما ثلثا عرض الشريط فاضي.
الحل: نخلي الرابط ينتشر على عرض الصف كامل، وجوّاه شبكته الخاصة.
========================================================================== */
#shop-cart-sidebar li.woocommerce-mini-cart-item,
.cart-sidebar li.woocommerce-mini-cart-item {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: var(--ae-2);
align-items: start;
position: relative;
padding: var(--ae-4) 0;
}
/* الرابط ياخذ العرض كامل، وجوّاه: صورة ثابتة + اسم يتمدد */
#shop-cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove),
.cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove) {
grid-column: 1 / -1;
/* flex مو grid: اسم المنتج **نص مجرّد** جوّا الرابط مو داخل عنصر.
بالشبكة انحشر بعمود الصورة (قِسناه: 41px عرض و97 ارتفاع، يعني
حرف بكل سطر). flex يتعامل مع النص المجرّد بثبات ويعطيه الباقي. */
display: flex;
align-items: center;
gap: var(--ae-3);
padding-inline-end: 32px; /* مكان زر الحذف */
margin: 0;
}
#shop-cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove) img,
.cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove) img {
/* الثيم يحطها `position: absolute; top:10px; left:256px` — يعني خارج
التدفق تماماً: الرابط يبقى بارتفاع سطر النص (18px) والاسم يمر تحت
الصورة. لازم نرجّعها للتدفق قبل أي شي. */
position: static !important;
flex: 0 0 56px;
inset: auto;
}
#shop-cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove) img,
.cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove) img {
width: 56px !important;
height: 56px !important;
}
/* سطر الكمية والسعر ياخذ العرض كامل تحت الصورة */
#shop-cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-infor,
.cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-infor {
grid-column: 1 / -1;
width: 100%;
margin: 0;
padding-inline-start: calc(56px + var(--ae-3));
padding-inline-end: 0;
flex-wrap: nowrap;
}
/* زر الحذف: كان يركب على الصورة.
`inset-inline-end` طلع يتحسب باتجاه لاتيني (نفس فخ رابط إلغاء الاختيار
بصفحة المنتج)، فنستعمل `left` صريحة — الجهة المقابلة للصورة بالعربي. */
#shop-cart-sidebar li.woocommerce-mini-cart-item > a.remove,
.cart-sidebar li.woocommerce-mini-cart-item > a.remove {
/* قِسناه فطلع `position: relative` من الثيم — يعني كان يجلس كخليّة
بالشبكة فوق الصورة بدل ما ينسحب من التدفق. لازم absolute صريحة. */
position: absolute !important;
inset-inline-end: auto;
left: 0;
right: auto;
top: var(--ae-4);
z-index: 2;
}
/* ==========================================================================
13.5 الصف يقرأ مبعثر — ثلاث علل مقيسة بالدرج مفتوح
==========================================================================
القياس (1920×1080، `?add-to-cart=&aeopen=cart`، الدرج عند x0):
li 312x110 @x44..356
a.remove 26x26 @x44..70 op=0 ← مخفي
a (صورة + اسم) 312x56 @x44..356 fs=12.25px
span.mini-cart-product-infor 312x26 @x44..356 just=space-between
span.mini-cart-quantity 100x24 @x190..290
span.mini-cart-product-price 51x26 @x44..95
1. **زر الحذف مخفي على الديسكتوب.** الثيم الأب:
`.cart-sidebar-content .remove_from_cart_button { opacity: 0 }`
ويظهّره بـ`:hover` و`:focus-within` بس، ويرجّعه 1 تحت 991px. يعني
على الديسكتوب ما كو أي إشارة إنك تگدر تحذف — العنصر موجود وينضغط
(`elementFromPoint` يرجّعه) بس شفّاف. تحكّم أساسي مخبّى وراء هوفر.
محددنا (1,3,1) يغلب محددهم (0,2,0) بلا `!important` — بس `color`
لازم `!important` لأن قاعدتنا بالأعلى (سطر 172) حاطة `!important`.
2. **95px فراغ ميّت بسطر السعر.** `space-between` بعرض مفيد 245px:
الستيبر بأقصى البداية والسعر بأقصى النهاية، والسعر ما يتحاذى ويّا
أي شي فوقه — يقرأ كأنه طايح بره الصف. نضمّهم: `flex-start` + gap،
فيصير "[− ١ +] ٦٬٠٠٠ د.ع" كتلة وحدة تحت بداية الاسم.
3. **الصف نحيل.** الصورة 56px والاسم `--ae-fs-sm` = 12.25px (الجذر
14px مو 16px، فكل الـrem تنزل ١٢٫٥٪ عن المكتوب بالتعليقات). بدرج
عرضه 400px هذا يطلع خافت. نرفع الصورة 64px (نفس مقاس صور جدول
السلة) والاسم والسعر لـ`--ae-fs-base`.
========================================================================== */
/* 1. زر الحذف ظاهر ديماً — رمادي هادي، وأحمر بالهوفر */
#shop-cart-sidebar li.woocommerce-mini-cart-item > a.remove,
.cart-sidebar li.woocommerce-mini-cart-item > a.remove {
opacity: 1;
width: 28px;
height: 28px;
min-width: 28px;
background: transparent;
color: var(--ae-ink-faint) !important;
transition: background var(--ae-t-fast), color var(--ae-t-fast);
}
@media (hover: hover) and (pointer: fine) {
#shop-cart-sidebar li.woocommerce-mini-cart-item > a.remove:hover,
.cart-sidebar li.woocommerce-mini-cart-item > a.remove:hover {
background: var(--ae-danger-bg);
color: var(--ae-danger) !important;
}
}
/* 2. الكمية والسعر كتلة وحدة بدل ما ينشدّون للطرفين.
⚠️ بلا بادئة بالأساس. البادئة اللي تحاذي السطر ويّا بداية الاسم تاكل
من العرض المفيد، والدرج يضيق على الموبايل. قِسنا بعد ما ضمّيناهم:
vw=390 → sidebar 290, ul 232, avail 158, need 169 ⚠ يفيض 12px
vw=600 → sidebar 300, ul 212, avail 138, need 169 ⚠ يفيض 32px
vw=992 → sidebar 400, ul 312, avail 238, need 169 ✓ يسع
السطر `nowrap` (من 13.3 — الالتفاف ينزّل الكمية والسعر فوق بعض)، يعني
الضيق يطلع فيضان مو التفاف، والسعر يخرج بره الصف. فالبادئة تنضاف بس
لما الدرج يوسع (400px عند 992 وفوگ). */
#shop-cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-infor,
.cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-infor {
justify-content: flex-start;
gap: var(--ae-3);
padding-inline-start: 0;
}
@media (min-width: 992px) {
#shop-cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-infor,
.cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-infor {
padding-inline-start: calc(64px + var(--ae-3));
}
}
/* 3. صورة أكبر واسم وسعر أوضح.
`max-*` لازم تنكتب: الثيم الأب يحدّد 75px بالدرج و60px تحت 599px،
وهي تقصّ الـ`width` حتى لو `!important` — فبدونها الصورة تطلع 60
والبادئة بالأعلى محسوبة على 64. */
#shop-cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove) img,
.cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove) img {
width: 64px !important;
height: 64px !important;
max-width: 64px !important;
max-height: 64px !important;
flex: 0 0 64px;
border-radius: var(--ae-r);
border: 1px solid var(--ae-line);
}
#shop-cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove),
.cart-sidebar li.woocommerce-mini-cart-item > a:not(.remove) {
font-size: var(--ae-fs-base);
line-height: var(--ae-lh-snug);
}
#shop-cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-price,
.cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-price {
font-size: var(--ae-fs-base);
}
/* --------------------------------------------------------------------------
⚠️ صف المجموع — ارتفاع مثبّت من الثيم الأب، والنص يفيض تحته
--------------------------------------------------------------------------
الثيم الأب (woostify/style.css:9452):
.cart-sidebar-content .woocommerce-mini-cart__total { height: 40px }
@media (max-width: 599px) { ... { height: 30px } }
وحنا حاطين عليه `padding: var(--ae-4)` (14px فوق وتحت) والمبلغ
`--ae-fs-lg`. يعني المطلوب ≈60px والمتاح 40 أو 30 — والفرق ينزل بره
الصندوق، والزر اللي بعده يترسم فوگه ويغطّيه. قِسناه بالدرج مفتوح:
390 → صندوق y628..658، والمحتوى الفعلي y642..675 ⚠ يفيض 17px
1533 → صندوق y751..791، والمحتوى الفعلي y765..798 ⚠ يفيض 7px
`getBoundingClientRect` على الصندوق ما يبيّن العلّة (يرجّع 30 و40 بلا
تراكب) — لازم تقيس مدى المحتوى بـ`Range` حتى تشوفها.
علّة قديمة، مو من تغييرات 13.5 — التذييل ما لمسناه. */
#shop-cart-sidebar .total,
.cart-sidebar .total,
#shop-cart-sidebar .woocommerce-mini-cart__total,
.cart-sidebar .woocommerce-mini-cart__total {
height: auto;
}
/* ==========================================================================
13.6 ⚠️ ستيبر الكمية — نفس فخ الارتفاع المثبّت مرة ثانية
==========================================================================
الكبسولة ارتفاعها مثبّت من الثيم الأب (woostify/style.css:9694):
.mini-cart-product-infor .mini-cart-quantity {
height: 24px;
overflow: hidden;
}
وحنا حاطين على الأبناء الثلاثة (− والحقل و+) `height: 32px`. النتيجة:
الأبناء يطلعون 9px تحت الكبسولة و`overflow: hidden` يقصّهم، ومراكزهم
تنزل 5px عن مركزها. القياس (1533، الدرج مفتوح):
الكبسولة 100x24 y163..187 مركزها y=175
− / الحقل / + 32px عالي y164..196 مركزهم y=180 ⚠ مقصوصين 9px
هذا اللي يخلي الرقم و + و − يبيّنون مو بالنص — مو مشكلة محاذاة، الحقل
`text-align: center` و`line-height: 32px` وصحيح تماماً. المشكلة إن نص
الصندوق مقصوص. الإصلاح: الكبسولة تاخذ نفس ارتفاع أبنائها.
ملاحظة على القياس: `align-items: stretch` ما ينفع هنا — الأبناء عندهم
`height` صريح، والـstretch ما يغلب ارتفاع مصرّح.
ولا تكتب `height: 32px` حتى لو الأبناء 32 — الكبسولة `border-box`
وعليها حدّ 1px، يعني صندوقها الداخلي يصير 30 والأبناء يبقون فايضين
2px (قِسناه: بقى 1px مقصوص من تحت). `auto` تخلّيها تتبع أبناءها
ديماً وما تحتاج تحديث لو تغيّر مقاسهم.
========================================================================== */
#shop-cart-sidebar li.woocommerce-mini-cart-item .mini-cart-quantity,
.cart-sidebar li.woocommerce-mini-cart-item .mini-cart-quantity {
height: auto;
}
/* وفخ RTL بنفس المكوّن: الثيم الأب يحط `border-right` على − و`border-left`
على + على افتراض ترتيب لاتيني (− حقل +). بالعربي الترتيب ينقلب — − تصير
أقصى اليمين و + أقصى اليسار — فالحدّان ينزلون على حافتي الكبسولة
الخارجية بدل ما يصيرون فواصل داخلية، ولونهم `#ccc` بره لوحة الهوية
فتبيّن حافة الكبسولة رمادية. نلغيهن؛ الفصل أصلاً حاصل بخلفية
`--ae-pink-050` على الزرين مقابل الحقل الشفاف. */
#shop-cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-qty,
.cart-sidebar li.woocommerce-mini-cart-item .mini-cart-product-qty {
border-right: 0;
border-left: 0;
}
/* ===== 14-pages.css ===== */
/* ==========================================================================
14. صفحات ما بعد الشراء — الشكر، حسابي، نتائج البحث
الثلاثة كانت ووكومرس خام: جداول بحدود متقطعة وصناديق خضراء وحمراء
ما إلها علاقة بألوان المتجر.
========================================================================== */
/* --------------------------------------------------------------------------
14.1 صفحة ما بعد الطلب
-------------------------------------------------------------------------- */
.ae-thanks {
max-width: 680px;
margin-inline: auto;
padding-block: var(--ae-6) var(--ae-10);
}
.ae-thanks__head {
text-align: center;
padding: var(--ae-8) var(--ae-5);
background: var(--ae-pink-050);
border: 1px solid var(--ae-pink-300);
border-radius: var(--ae-r-xl);
}
.ae-thanks__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: var(--ae-4);
border-radius: 50%;
background: var(--ae-plum);
color: var(--ae-on-dark);
}
.ae-thanks__icon svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.ae-thanks__head--failed .ae-thanks__icon {
background: var(--ae-danger);
}
.ae-thanks__title {
font-family: var(--ae-font-display);
font-size: var(--ae-fs-2xl);
color: var(--ae-plum);
margin: 0 0 var(--ae-3);
line-height: var(--ae-lh-tight);
}
.ae-thanks__lead {
font-size: var(--ae-fs-base);
line-height: var(--ae-lh-base);
color: var(--ae-ink-muted);
margin: 0 auto;
max-width: 42ch;
}
/* رقم الطلب — الزبون يحتاجه لو راسلنا، فيلزم يكون أوضح شي بالصفحة */
.ae-thanks__order-no {
display: inline-flex;
align-items: center;
gap: var(--ae-3);
margin: var(--ae-5) 0 0;
padding: var(--ae-2) var(--ae-5);
border-radius: var(--ae-r-pill);
background: var(--ae-surface);
border: 1px solid var(--ae-line-strong);
}
.ae-thanks__order-no span {
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
}
.ae-thanks__order-no strong {
font-size: var(--ae-fs-lg);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
direction: ltr;
}
/* الحقائق — صفوف داخل كرت واحد.
جرّبناها شبكة أول، بس العدد يتغيّر حسب الطلب (رقم التواصل يظهر أو لا)
فيبقى كرت يتيم بآخر صف. الصفوف ما عندها هالمشكلة، وأسهل بالقراءة
لأن التسمية والقيمة على نفس السطر. */
.ae-thanks__facts {
list-style: none;
margin: var(--ae-6) 0 0;
padding: 0;
border: 1px solid var(--ae-line);
border-radius: var(--ae-r);
background: var(--ae-surface);
overflow: hidden;
}
.ae-thanks__facts li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ae-4);
padding: var(--ae-3) var(--ae-4);
border-bottom: 1px solid var(--ae-line);
}
.ae-thanks__facts li:last-child {
border-bottom: 0;
}
.ae-thanks__facts-label {
flex: 0 0 auto;
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
}
.ae-thanks__facts-value {
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-semi);
color: var(--ae-plum);
text-align: end;
overflow-wrap: anywhere;
}
/* خطوات ما بعد الطلب */
.ae-thanks__steps {
margin-top: var(--ae-8);
}
.ae-thanks__steps h2 {
font-size: var(--ae-fs-lg);
color: var(--ae-plum);
margin: 0 0 var(--ae-4);
}
.ae-thanks__steps ol {
counter-reset: ae-step;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ae-3);
}
/* الرقم عنصر بالتخطيط مو موضوع بـ absolute.
جرّبنا absolute مع حشوة تفتح إله مكان، فركب الرقم على العنوان.
بـ flex ما تصير هالمشكلة أصلاً: الرقم ياخذ مكانه والنص ينزاح لوحده. */
.ae-thanks__steps li {
counter-increment: ae-step;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-1) var(--ae-4);
padding: var(--ae-4);
border-radius: var(--ae-r);
background: var(--ae-pink-050);
border: 1px solid var(--ae-line);
}
.ae-thanks__steps li::before {
content: counter(ae-step);
flex: 0 0 auto;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ae-plum);
color: var(--ae-on-dark);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-bold);
}
.ae-thanks__steps strong {
flex: 1 1 auto;
min-width: 0;
font-size: var(--ae-fs-base);
color: var(--ae-plum);
}
/* الشرح ينزل سطر ثاني محاذي للعنوان مو للرقم */
.ae-thanks__steps span {
flex: 1 1 100%;
padding-inline-start: calc(32px + var(--ae-4));
}
.ae-thanks__steps span {
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
line-height: var(--ae-lh-snug);
}
.ae-thanks__actions {
display: flex;
flex-wrap: wrap;
gap: var(--ae-3);
margin-top: var(--ae-6);
}
.ae-thanks__actions .ae-btn {
flex: 1 1 190px;
justify-content: center;
}
.ae-btn--wa {
background: #25d366;
border-color: #25d366;
color: #fff;
gap: var(--ae-2);
}
.ae-btn--wa svg {
width: 19px;
height: 19px;
fill: currentColor;
}
@media (hover: hover) and (pointer: fine) {
.ae-btn--wa:hover {
background: #1eb457;
border-color: #1eb457;
color: #fff;
}
}
/* مخرجات البلگنات تحت الأزرار */
.ae-thanks__note {
margin-top: var(--ae-4);
padding: var(--ae-3) var(--ae-4);
border-radius: var(--ae-r);
background: var(--ae-pink-050);
border: 1px solid var(--ae-line);
font-size: var(--ae-fs-sm);
color: var(--ae-ink-muted);
line-height: var(--ae-lh-snug);
}
.ae-thanks__note p:last-child {
margin-bottom: 0;
}
/* جدول تفاصيل الطلب اللي يطبعه ووكومرس تحت */
.ae-thanks + .woocommerce-order-details,
.woocommerce-order-details,
.woocommerce-customer-details {
max-width: 680px;
margin-inline: auto;
margin-top: var(--ae-8);
}
.woocommerce-order-details__title,
.woocommerce-column__title {
font-size: var(--ae-fs-lg);
color: var(--ae-plum);
margin: 0 0 var(--ae-4);
}
.woocommerce table.woocommerce-table--order-details {
width: 100%;
border: 1px solid var(--ae-line);
border-radius: var(--ae-r);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--ae-surface);
}
.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.woocommerce-table--order-details td {
padding: var(--ae-3) var(--ae-4);
border: 0;
border-bottom: 1px solid var(--ae-line);
font-size: var(--ae-fs-sm);
text-align: start;
vertical-align: middle;
}
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child td {
border-bottom: 0;
font-size: var(--ae-fs-base);
font-weight: var(--ae-fw-bold);
color: var(--ae-plum-900);
background: var(--ae-pink-050);
}
.woocommerce table.woocommerce-table--order-details thead th {
background: var(--ae-pink-100);
color: var(--ae-plum);
font-weight: var(--ae-fw-semi);
}
/* العنوان كان مايل (وسم ) — بالعربي يطلع منظره مكسور */
.woocommerce-customer-details address {
font-style: normal;
padding: var(--ae-4);
border: 1px solid var(--ae-line);
border-radius: var(--ae-r);
background: var(--ae-surface);
line-height: var(--ae-lh-snug);
color: var(--ae-ink);
}
/* --------------------------------------------------------------------------
14.2 حسابي — الدخول والتسجيل
-------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
max-width: 960px;
margin-inline: auto;
}
.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce form.lost_reset_password {
border: 1px solid var(--ae-line) !important;
border-radius: var(--ae-r-lg) !important;
padding: var(--ae-6) !important;
margin: 0 !important;
background: var(--ae-surface);
box-shadow: var(--ae-shadow-sm);
}
.woocommerce-account .u-columns.col2-set {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--ae-5);
width: 100%;
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-account h2 {
font-size: var(--ae-fs-lg);
color: var(--ae-plum);
margin: 0 0 var(--ae-4);
}
/* لوحة الحساب بعد الدخول */
.woocommerce-MyAccount-navigation ul {
display: flex;
flex-wrap: wrap;
gap: var(--ae-2);
list-style: none;
margin: 0 0 var(--ae-6);
padding: 0;
}
.woocommerce-MyAccount-navigation li a {
display: inline-flex;
align-items: center;
min-height: var(--ae-tap);
padding: 0 var(--ae-4);
border-radius: var(--ae-r-pill);
border: 1px solid var(--ae-line);
background: var(--ae-surface);
color: var(--ae-plum);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-medium);
}
.woocommerce-MyAccount-navigation li.is-active a {
background: var(--ae-plum);
border-color: var(--ae-plum);
color: var(--ae-on-dark);
}
.woocommerce-MyAccount-content {
border: 1px solid var(--ae-line);
border-radius: var(--ae-r-lg);
padding: var(--ae-5);
background: var(--ae-surface);
}
.woocommerce-MyAccount-content p {
line-height: var(--ae-lh-base);
}
@media (min-width: 768px) {
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 100%;
float: none;
}
.woocommerce-account .woocommerce-MyAccount-content {
width: 100%;
float: none;
}
}
/* جدول الطلبات */
.woocommerce table.woocommerce-orders-table,
.woocommerce table.my_account_orders {
border: 1px solid var(--ae-line);
border-radius: var(--ae-r);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.woocommerce table.woocommerce-orders-table th,
.woocommerce table.woocommerce-orders-table td {
border: 0;
border-bottom: 1px solid var(--ae-line);
padding: var(--ae-3);
font-size: var(--ae-fs-sm);
}
/* --------------------------------------------------------------------------
14.3 نتائج البحث
-------------------------------------------------------------------------- */
.ae-search-summary {
margin-bottom: var(--ae-5);
padding: var(--ae-4) var(--ae-5);
border-radius: var(--ae-r);
background: var(--ae-pink-050);
border: 1px solid var(--ae-line);
font-size: var(--ae-fs-base);
color: var(--ae-ink-muted);
}
.ae-search-summary strong {
color: var(--ae-plum);
}
/* لا نتائج */
.ae-noresults {
max-width: 560px;
margin-inline: auto;
padding-block: var(--ae-8) var(--ae-10);
text-align: center;
}
.ae-noresults__title {
font-size: var(--ae-fs-xl);
color: var(--ae-plum);
margin: 0 0 var(--ae-3);
}
.ae-noresults__text {
font-size: var(--ae-fs-base);
color: var(--ae-ink-muted);
line-height: var(--ae-lh-base);
margin: 0 0 var(--ae-6);
}
.ae-noresults__cats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--ae-2);
list-style: none;
margin: var(--ae-3) 0 0;
padding: 0;
}
.ae-noresults__cats a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 var(--ae-4);
border-radius: var(--ae-r-pill);
background: var(--ae-pink-050);
border: 1px solid var(--ae-line);
color: var(--ae-plum);
font-size: var(--ae-fs-sm);
font-weight: var(--ae-fw-medium);
}
@media (hover: hover) and (pointer: fine) {
.ae-noresults__cats a:hover {
background: var(--ae-pink-100);
border-color: var(--ae-pink-300);
}
}