/* ══════════════════════════════
   Al Rased — WooCommerce Styles
══════════════════════════════ */

/* متغيرات مستقلة (نسخة احتياطية من style.css) + تصحيح لون
   WooCommerce الافتراضي (--woocommerce: #720eec في نسخ حديثة) */
:root {
  --woocommerce: #b8962e;
  --wc-primary: #b8962e;
  --wc-primary-text: #ffffff;
  --gold: #b8962e;
  --gold-pale: #e8d48a;
  --dark: #1a1a1a;
  --text: #2d2d2d;
  --gray: #6b6b6b;
  --light: #f9f6f0;
  --border: #e8e0d0;
  --r: 10px;
  --r-sm: 6px;
  --tr: all .3s ease;
  --fh: 'Cairo', sans-serif;
  --fb: 'Tajawal', sans-serif;
}

/* ══════════════════════════════════════════════════════════
   شبكة المنتجات الموحّدة — المصدر الوحيد لهذه القواعد في الثيم
   (تغطي: صفحة المتجر، أرشيف التصنيفات، ومنتجات ذات صلة معاً)
══════════════════════════════════════════════════════════ */
.woocommerce ul.products,
.woocommerce ul.products.woocommerce ul.products,
.woocommerce.woocommerce ul.products,
.woocommerce ul.products[class*="columns-"],
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
[class*="woocommerce"] ul.products.columns-1,
[class*="woocommerce"] ul.products.columns-2,
[class*="woocommerce"] ul.products.columns-3,
[class*="woocommerce"] ul.products.columns-4 {
  display: grid !important;
  direction: rtl !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* ══════════════════════════════════════════════════════════
   السبب الجذري الحقيقي المكتشف: WooCommerce (woocommerce-layout-rtl.css)
   يُضيف clearfix كلاسيكي عبر ::before/::after بـ display:table على
   نفس عنصر ul.products المستخدَم كحاوية Grid. بما أن Grid يتعامل مع
   كل الأبناء المباشرين — بما فيهم pseudo-elements — كعناصر شبكة
   فعلية، فإن ::before و::after كانا يحتلان أول خليتين وهميتين في
   الشبكة، مما يُزيح كل المنتجات الحقيقية بمقدار عنصرين. إلغاء
   المحتوى والعرض هنا يمنع تولّد هذين العنصرين الوهميين تماماً.
══════════════════════════════════════════════════════════ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce ul.products.columns-4::before,
.woocommerce ul.products.columns-4::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.product,
.woocommerce.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
[class*="woocommerce"] ul.products.columns-1 li.product,
[class*="woocommerce"] ul.products.columns-2 li.product,
[class*="woocommerce"] ul.products.columns-3 li.product,
[class*="woocommerce"] ul.products.columns-4 li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  text-align: center;
  transition: var(--tr);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 48px rgba(0,0,0,.18);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
}
.woocommerce ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fh) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  padding: 14px 12px 4px !important;
  margin: 0 !important;
  line-height: 1.4;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  display: block;
  color: var(--gold) !important;
  font-weight: 700;
  font-family: var(--fh);
}
.woocommerce ul.products li.product .price { padding: 0 12px 14px !important; font-size: .9rem !important; }
.woocommerce div.product p.price { font-size: 1.5rem !important; }

.woocommerce ul.products li.product .button,
.woocommerce span.onsale {
  font-family: var(--fh) !important;
  font-weight: 700 !important;
}
.woocommerce ul.products li.product .button {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 14px !important;
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 12px !important;
  font-size: .82rem !important;
  text-align: center;
  white-space: nowrap;
  transition: var(--tr) !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--dark) !important; }

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--gold) !important;
  border-radius: var(--r-sm) !important;
  min-height: auto !important;
  line-height: 1.6 !important;
  padding: 3px 10px !important;
  font-size: .78rem !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
}

@media(max-width: 1100px) {
  .woocommerce ul.products,
  .woocommerce ul.products.columns-4,
  [class*="woocommerce"] ul.products.columns-4 { direction: rtl !important; grid-template-columns: repeat(3, 1fr) !important; }
  .woocommerce ul.products.columns-4 li.product,
  [class*="woocommerce"] ul.products.columns-4 li.product { width: auto !important; }
}
@media(max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce ul.products.columns-4,
  [class*="woocommerce"] ul.products.columns-4 { direction: rtl !important; grid-template-columns: repeat(2, 1fr) !important; }
  .woocommerce ul.products.columns-4 li.product,
  [class*="woocommerce"] ul.products.columns-4 li.product { width: auto !important; }
}
@media(max-width: 480px)  { .woocommerce ul.products { direction: rtl !important; grid-template-columns: 1fr !important; } }

/* ══════════════════════════════════════════════════════════
   نماذج مشتركة (تواصل معنا / انشر معنا)
══════════════════════════════════════════════════════════ */
.ar-form-field label {
  display: block;
  font-family: var(--fh);
  font-size: .85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 5px;
}
.ar-form-field input,
.ar-form-field select,
.ar-form-field textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-family: var(--fb);
  font-size: .9rem;
  color: var(--dark);
  background: #fff;
  transition: border-color .2s;
  box-sizing: border-box;
}
.ar-form-field input:focus,
.ar-form-field select:focus,
.ar-form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,150,46,.1);
}
.ar-form-field textarea { resize: vertical; }

/* ══════════════════════════════════════════════════════════
   حساب المستخدم / السلة / الدفع
══════════════════════════════════════════════════════════ */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px !important; }
.woocommerce-MyAccount-navigation li a {
  display: inline-block;
  padding: 8px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--fh);
  font-size: .86rem; font-weight: 600;
  color: var(--dark); transition: all .2s;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--gold); color: #fff; border-color: var(--gold);
}

.woocommerce-cart table.cart td.actions .coupon { float: right; }
.woocommerce-cart .cart-collaterals { float: none !important; width: auto !important; max-width: 480px; margin-right: auto; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none !important; width: auto !important; }
.woocommerce-order-received .woocommerce-order { text-align: center; padding: 40px; }
.woocommerce-order-received .woocommerce-notice { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; }

.woocommerce table.shop_table th { font-family: var(--fh); color: var(--dark); background: var(--light); }
.woocommerce #payment #place_order,
.woocommerce-message { border-top-color: var(--gold) !important; }
.woocommerce #payment #place_order { background: var(--gold) !important; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--fh); border-color: var(--border) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gold) !important; color: #fff !important;
}

.star-rating span::before { color: var(--gold) !important; }

/* ══════════════════════════════════════════════════════════
   نموذج الإضافة إلى السلة (Quantity + Add to Cart)
══════════════════════════════════════════════════════════ */
.woocommerce div.product form.cart {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
  float: none !important;
  width: auto !important;
}
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 8px; }
.woocommerce div.product form.cart div.quantity { margin: 0 !important; }

.woocommerce .quantity .qty,
.woocommerce input.qty {
  width: 90px !important;
  height: 48px !important;
  border: 1.5px solid var(--border, #e8e0d0) !important;
  border-radius: var(--r-sm, 6px) !important;
  text-align: center !important;
  font-family: var(--fh) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--dark, #1a1a1a) !important;
  padding: 0 10px !important;
  margin-bottom: 10px;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .2s !important;
  -moz-appearance: textfield;
}
.woocommerce .quantity .qty:focus,
.woocommerce input.qty:focus {
  outline: none !important;
  border-color: var(--gold, #b8962e) !important;
}
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
  opacity: 1;
  margin-right: 4px;
}

/* زر "إضافة إلى السلة" — يغطي كل السياقات: صفحة المنتج المفرد،
   شبكة المتجر (.woocommerce ul.products li.product .button أعلاه
   يغطيها)، صفحة السلة (.cart .button)، وكلاسات WooCommerce Blocks
   الحديثة (wp-element-button, wc-block-components-button) */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button[type="submit"],
.woocommerce div.product form.cart input[type="submit"],
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce .cart button.button,
.woocommerce .cart a.button,
.woocommerce a.button.wp-element-button,
.woocommerce button.wp-element-button,
.woocommerce input.wp-element-button,
.woocommerce .wc-block-components-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px !important;
  background: var(--gold, #b8962e) !important;
  background-color: var(--gold, #b8962e) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm, 6px) !important;
  font-family: var(--fh) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none !important;
  float: none !important;
  transition: all .3s ease !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce .cart .button:hover,
.woocommerce .cart input.button:hover,
.woocommerce a.button.wp-element-button:hover,
.woocommerce button.wp-element-button:hover {
  background: var(--dark, #1a1a1a) !important;
  background-color: var(--dark, #1a1a1a) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.woocommerce .button.disabled,
.woocommerce input.button.disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

.woocommerce div.product p.stock.out-of-stock {
  background: #fdecea; color: #c0392b;
  border-radius: var(--r-sm); padding: 8px 14px;
  font-size: .85rem; font-weight: 700;
  display: inline-block; margin-bottom: 16px;
}
.woocommerce div.product p.stock.in-stock {
  color: #2e7d32; font-size: .85rem; font-weight: 700; margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════
   تبويبات المنتج (الوصف / المراجعات / معلومات إضافية)
══════════════════════════════════════════════════════════ */
.woocommerce div.product .woocommerce-tabs {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: 6px;
  border-bottom: 2px solid var(--border);
  padding: 0; margin: 0 0 28px;
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 !important; padding: 0 !important;
  border: none !important; background: none !important; border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 10px 22px;
  font-family: var(--fh);
  font-size: .92rem; font-weight: 700;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: var(--tr);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gold); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--gold); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-color: var(--border); border-bottom-color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel {
  border: none !important; padding: 0 !important;
  font-size: .93rem; line-height: 1.85; color: var(--text);
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--fh); font-size: 1.15rem; font-weight: 800;
  color: var(--dark); margin-bottom: 16px;
}
.woocommerce div.product .product_title { font-family: var(--fh); font-size: 1.8rem; color: var(--dark); }

.woocommerce table.shop_attributes {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  border-collapse: collapse;
  width: 100%;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  padding: 10px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: .87rem;
}
.woocommerce table.shop_attributes th {
  background: var(--light); font-family: var(--fh); font-weight: 700;
  color: var(--dark); width: 160px;
}
.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td { border-bottom: none !important; }

/* ══════════════════════════════════════════════════════════
   قسم المراجعات (Reviews)
   ملاحظة: comment_form() في قالب reviews.php الرسمي لووكومرس
   يُخرج الحقول مباشرة داخل #review_form بدون غلاف #respond.
══════════════════════════════════════════════════════════ */
#reviews.woocommerce-Reviews { max-width: 760px; }
#reviews h2.woocommerce-Reviews-title {
  font-family: var(--fh); font-size: 1.15rem; font-weight: 800;
  color: var(--dark); margin-bottom: 20px;
}
#reviews h2.woocommerce-Reviews-title small { font-size: .75rem; font-weight: 500; color: var(--gray); margin-right: 6px; }
#reviews h2.woocommerce-Reviews-title small a { color: var(--gold); }

.woocommerce-noreviews {
  background: var(--light); border-radius: var(--r-sm);
  padding: 14px 18px; font-size: .88rem; color: var(--gray); margin-bottom: 24px;
}

.woocommerce-Reviews ol.commentlist { list-style: none; padding: 0; margin: 0 0 28px; }
.woocommerce-Reviews .comment {
  display: flex; gap: 14px; padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.woocommerce-Reviews .comment_container img.avatar { border-radius: 50%; width: 48px; height: 48px; }
.woocommerce-Reviews .comment-text { flex: 1; border: none !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-Reviews .comment-text .star-rating { margin-bottom: 6px; float: none; }
.woocommerce-Reviews .comment-text p.meta { font-family: var(--fh); font-size: .85rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.woocommerce-Reviews .comment-text p.meta time { font-weight: 400; color: var(--gray); font-size: .78rem; margin-right: 8px; }
.woocommerce-Reviews .comment-text .description p { font-size: .87rem; color: var(--text); line-height: 1.75; margin: 0; }

#review_form_wrapper { }
#review_form {
  background: var(--light);
  border-radius: var(--r);
  padding: 24px;
  float: none !important;
  position: static !important;
  width: auto !important;
}
#review_form .comment-reply-title {
  font-family: var(--fh); font-size: 1.05rem; font-weight: 800;
  color: var(--dark); display: block; margin-bottom: 6px;
}
#review_form .comment-reply-title small { display: block; margin-top: 4px; }
#review_form .comment-notes { font-size: .84rem; color: var(--gray); margin-bottom: 16px; }

#review_form .comment-form-rating {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  float: none !important; width: auto !important;
}
#review_form .comment-form-rating label {
  font-family: var(--fh); font-size: .85rem; font-weight: 700; color: var(--dark); margin: 0;
}
#review_form p.stars a { color: var(--gold-pale); }
#review_form p.stars a::before { font-family: 'WooCommerce' !important; }
#review_form p.stars a.active::before,
#review_form p.stars:hover a::before { color: var(--gold) !important; }

#review_form .comment-form-comment,
#review_form .comment-form-author,
#review_form .comment-form-email {
  float: none !important; width: 100% !important; margin-bottom: 14px;
}
#review_form .comment-form-comment label,
#review_form .comment-form-author label,
#review_form .comment-form-email label {
  display: block; font-family: var(--fh); font-size: .84rem;
  font-weight: 700; color: var(--dark); margin-bottom: 6px;
}
#review_form .comment-form-author input,
#review_form .comment-form-email input {
  width: 100% !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  font-family: var(--fb) !important;
  font-size: .9rem !important;
  box-sizing: border-box !important;
  float: none !important;
}
#review_form .comment-form-author input:focus,
#review_form .comment-form-email input:focus,
#review_form textarea#comment:focus {
  outline: none;
  border-color: var(--gold) !important;
}
#review_form textarea#comment {
  width: 100% !important;
  min-height: 120px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--fb);
  font-size: .9rem;
  resize: vertical;
  box-sizing: border-box;
  float: none !important;
}
#review_form .form-submit {
  margin-top: 14px;
  float: none !important;
  clear: both;
  width: auto !important;
}
#review_form .form-submit input#submit,
#review_form .form-submit .submit {
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 26px !important;
  font-family: var(--fh) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  cursor: pointer;
  float: none !important;
  position: static !important;
  display: inline-block !important;
  transition: var(--tr) !important;
}
#review_form .form-submit input#submit:hover { background: var(--dark) !important; }
/* توافق احتياطي مع إصدارات/ثيمات تُخرج الحقول داخل #respond فعلياً */
#review_form #respond { background: transparent; float: none !important; width: auto !important; }

/* ══════════════════════════════════════════════════════════
   منتجات ذات صلة (Related Products)
   التنسيق العام يأتي من ".woocommerce ul.products" أعلى الملف؛
   هنا فقط الفروقات الخاصة (المسافات، العنوان، حماية float).
   direction:rtl مطبّق صراحة لضمان محاذاة العنصر المنفرد في أي
   صف أخير غير مكتمل من جهة اليمين (بداية RTL) بدل اليسار.
══════════════════════════════════════════════════════════ */
.related.products {
  border-top: 1px solid var(--border);
  padding-top: 36px;
  margin-top: 40px;
  clear: both;
  display: flow-root;
}
.related.products > h2 {
  font-family: var(--fh); font-size: 1.2rem; font-weight: 800;
  color: var(--dark); text-align: center; margin-bottom: 28px;
}
.related.products ul.products {
  direction: rtl !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
@media(max-width: 900px) {
  .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media(max-width: 480px) {
  .related.products ul.products { grid-template-columns: 1fr !important; }
  .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
  .woocommerce .quantity .qty { width: 100% !important; }
}