/* woocommerce.css — تنسيق صفحات WooCommerce الحقيقية (Shop/Product/Cart/
   Checkout/My Account) لتطابق هوية التصميم الجديد. هاد CSS فقط — الحقول
   والمنطق (Checkout للبنان، إلخ) تبقى متل ما هي من mirelia-lb-core. */

.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; padding: 0; margin: 0 0 40px; }
/* !important ضروري هون: ستايل Storefront الخاص بـWooCommerce (storefront-woocommerce-style)
   بيتحمّل بعد ستايلاتنا بترتيب معيّن، وعندو نفس مستوى التخصيص (specificity)
   تمامًا لقاعدة ul.products.columns-4 li.product{width:22.05%;float:left}
   من عهد التصميم القديم (float-based) — يلي كان عم يتعارض مع نظام
   CSS Grid الحقيقي يلي WooCommerce نفسه صار يستخدمه، وناتجو بطاقات
   ضيّقة جدًا (عرض العنصر % محسوب من عمود الـgrid الضيق مش من عرض
   الصف الكامل) — هيك كانت مشكلة "الصور الصغيرة والفراغات الكبيرة". */
.woocommerce ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* !important — بگ إضافي لقيناه أثناء اختبار الموبايل (2026-09-17): Storefront
   بيضيف "clearfix" قديم على كل ul.products عبر ::before/::after (content:"";
   display:table) — هاد أسلوب شائع من عهد float layout. بس بما إنو صرنا
   display:grid، أي pseudo-element عندو content فعلي (ولو فاضي "") بيصير
   "عنصر شبكة" حقيقي جوا الـgrid (خلية كاملة!) — يعني أول خانة بالصف الأول
   كانت عم تُحجز لعنصر ::before فاضي وغير مرئي، فينزاح كل منتج خانة وحدة،
   وناتجو صف أول فيه منتج واحد بس وخانة فاضية جنبه (فراغ كبير)، وباقي
   المنتجات تتوزع صفين-صفين بشكل مقلوب. الحل: نلغي content تمامًا عن هاي
   الـpseudo-elements فوق أي ul.products (شبكة الهوم/الأكثر مبيعاً/أحدث
   المنتجات كمان، مو بس صفحة Shop). */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.mlb-product-grid::before,
.mlb-product-grid::after {
	content: none !important;
	display: none !important;
}
/* نفس ملاحظة margin-bottom الكبيرة (4.24em) يلي Storefront بيحطها على كل
   li.product من عهد float layout — ملغيّة هون لأنو Grid gap عم يتكفل
   بالمسافة بين البطاقات أصلًا. */
.woocommerce ul.products li.product,
.mlb-product-grid li.product {
	margin-bottom: 0 !important;
}

.woocommerce span.onsale {
	background: var(--mlb-error);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 2px;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 5px 9px;
	top: 10px;
	inset-inline-end: 10px;
	inset-inline-start: auto;
	left: auto;
	right: auto;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--mlb-ink); font-size: 20px; }
.woocommerce div.product p.price del,
.woocommerce span.price del { color: var(--mlb-text-muted-3); }
.woocommerce div.product p.price ins,
.woocommerce span.price ins { color: var(--mlb-sale); text-decoration: none; }

.woocommerce div.product .stock { font-weight: 600; }
.woocommerce div.product .stock.in-stock { color: var(--mlb-success); }
.woocommerce div.product .stock.out-of-stock { color: var(--mlb-error); }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--mlb-ink);
	color: var(--mlb-text-light);
	border-radius: var(--mlb-radius-sm);
	font-weight: 600;
	padding: 13px 26px;
	border: none;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--mlb-ink-2);
	color: #fff;
}
.woocommerce a.added_to_cart { color: var(--mlb-gold); }

/* ---------- صفحة المنتج المفرد ---------- */
.woocommerce div.product div.images { border-radius: var(--mlb-radius-md); overflow: hidden; }
.woocommerce div.product .product_title { font-family: var(--mlb-font-display); font-size: 30px; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--mlb-text-muted); }
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .quantity input.qty {
	padding: 10px 12px;
	border: 1px solid var(--mlb-border);
	border-radius: var(--mlb-radius-sm);
}
.woocommerce div.product .woocommerce-product-rating,
.woocommerce div.product p.sku_wrapper,
.woocommerce div.product p.posted_in {
	color: var(--mlb-text-muted-2);
	font-size: 13px;
}
.woocommerce div.product .related.products > h2 {
	font-family: var(--mlb-font-display);
	text-align: center;
	font-size: 26px;
}

/* ---------- السلة ---------- */
.woocommerce table.shop_table { border-radius: var(--mlb-radius-md); border-color: var(--mlb-border); }
.woocommerce table.shop_table th { background: var(--mlb-bg-soft); }
.woocommerce-cart .cart_totals h2 { font-family: var(--mlb-font-display); }
.woocommerce-cart table.cart td.product-remove a { color: var(--mlb-error); }

/* ---------- الدفع (Checkout) — الحقول اللبنانية متل ما هي، شكل بصري فقط ---------- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	background: var(--mlb-white-warm);
	border: 1px solid var(--mlb-border);
	border-radius: var(--mlb-radius-md);
	padding: 24px;
}
.woocommerce form .form-row label { font-size: 12.5px; color: var(--mlb-text-muted); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	padding: 11px;
	border: 1px solid var(--mlb-border);
	border-radius: var(--mlb-radius-sm);
	font-size: 14px;
}
.woocommerce-checkout-review-order-table { background: transparent; }
.woocommerce-checkout #payment { background: var(--mlb-bg-soft); border-radius: var(--mlb-radius-sm); }
.woocommerce-checkout #payment div.payment_box { background: var(--mlb-bg-soft); }

/* ---------- My Account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border: 1px solid var(--mlb-border); border-radius: var(--mlb-radius-md); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--mlb-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; color: var(--mlb-text-brown); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--mlb-ink); color: var(--mlb-text-light); }

/* ---------- رسائل النظام (نجاح/خطأ) ---------- */
.woocommerce-message, .woocommerce-info { border-top-color: var(--mlb-gold); }
.woocommerce-error { border-top-color: var(--mlb-error); }

/* =====================================================================
   موبايل — Shop/Product/Cart/Checkout/My Account (طلب صريح 2026-09-17):
   نفس المنطق ونفس الحقول 100%، بس أحجام/مسافات مضبوطة للمس على الموبايل
   ولا شي يطلع براتصميم الشاشة. ما في أي تغيير Desktop (الكل جوا media). */
@media (max-width: 600px) {

	/* صفحة المنتج المفرد: عنوان أصغر شوي (كان 30px كبير نسبيًا عالموبايل)
	   وصورة المعرض بدون radius كبير يقص الحواف عالعرض الضيق. */
	.woocommerce div.product .product_title { font-size: 22px; line-height: 1.3; }
	.woocommerce div.product p.price,
	.woocommerce span.price { font-size: 18px; }

	/* أزرار Add to cart / Select options وحقل الكمية: نتأكد الحجم كافي
	   للمس (٤٤px فأكثر ارتفاعًا)، وما تضل ملزوقة ببعض. */
	.woocommerce div.product form.cart .quantity input.qty { min-height: 46px; width: 64px; font-size: 15px; }
	.woocommerce div.product form.cart .variations select { min-height: 46px; width: 100%; }
	.woocommerce #respond input#submit,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button { min-height: 46px; padding: 12px 22px; }
	.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; }

	/* السلة: جدول WooCommerce الافتراضي (shop_table_responsive) بيتحوّل
	   تلقائيًا لبطاقات-صف على الشاشات الصغيرة (ميزة WooCommerce نفسها) —
	   هون بس نزبط المسافات/الخط حتى يصير مريح للمس، بدون نلمس أي منطق. */
	.woocommerce table.shop_table td,
	.woocommerce table.shop_table th { padding: 10px 8px; font-size: 13.5px; }
	.woocommerce table.cart td.actions .button,
	.woocommerce table.cart td.product-remove a { min-height: 40px; min-width: 40px; }
	.woocommerce-cart table.cart td.product-thumbnail img { width: 64px; height: auto; }

	/* الدفع (Checkout): padding أخف عالصناديق حتى ما تاكل مساحة العرض
	   الضيقة، والحقول توصل ٤٤px ارتفاع كافي للمس. */
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { padding: 16px; }
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce form .form-row textarea { padding: 12px; font-size: 16px; min-height: 46px; }
	/* font-size:16px هون تحديدًا يمنع Safari/iOS من عمل auto-zoom عند
	   الضغط على أي حقل — تفصيل صغير بس بيحسّن تجربة الكتابة كثير. */

	/* My Account: قائمة التنقل تاخد كامل العرض وتصير أوضح للمس. */
	.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 14px 16px; font-size: 14.5px; }
	.woocommerce-account .woocommerce-MyAccount-content { margin-top: 20px; }
}