/* ============================================================
   WooCommerce بهوية نادي الوطن
   ============================================================ */

.woocommerce, .woocommerce-page { color: var(--als-ink); }

/* عناوين المتجر */
.woocommerce-products-header__title,
.wc-block-store-notices + .wp-block-post-title,
.woocommerce h1, .woocommerce h2 { color: var(--als-navy); font-weight: 800; }

/* شبكة المنتجات */
ul.products,
.wc-block-grid__products,
.wp-block-woocommerce-product-template {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  list-style: none;
  margin: 2rem 0 !important;
  padding: 0;
}
ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template > li,
.wc-block-product {
  background: #fff;
  border: 1px solid var(--als-line);
  border-radius: 8px;
  overflow: hidden;
  text-align: start;
  transition: transform .18s ease, box-shadow .18s ease;
  margin: 0 !important;
  width: auto !important;
  padding-bottom: 0.4rem;
}
ul.products li.product:hover,
.wp-block-woocommerce-product-template > li:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(10,36,64,.28); }
ul.products li.product a img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-template .wc-block-components-product-image img {
  border-radius: 0; margin: 0; aspect-ratio: 1/1; object-fit: cover; width: 100%; display: block;
}
.wp-block-woocommerce-product-template .wc-block-components-product-image { margin: 0 !important; }
.wp-block-woocommerce-product-template .wp-block-post-title { text-align: start !important; padding: 0.9rem 1rem 0.2rem; font-weight: 700; }
.wp-block-woocommerce-product-template .wp-block-post-title a { color: var(--als-ink); }
.wp-block-woocommerce-product-template .wc-block-components-product-price { text-align: start !important; padding: 0 1rem; color: var(--als-blue); font-weight: 800; }
.wp-block-woocommerce-product-template .wp-block-button,
.wp-block-woocommerce-product-template .wc-block-components-product-button { text-align: start !important; padding: 0 1rem; margin-top: 0.6rem; }
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--als-ink);
  padding: 0.9rem 1rem 0.2rem !important;
  line-height: 1.5;
}
ul.products li.product .price,
.wc-block-grid__product-price {
  display: block;
  padding: 0 1rem 0.9rem;
  color: var(--als-blue) !important;
  font-weight: 800;
  font-size: 1.05rem;
}
ul.products li.product .price del { color: var(--als-muted); font-weight: 600; }
ul.products li.product .button,
ul.products li.product .added_to_cart {
  margin: 0 1rem 1rem !important;
  display: inline-block;
}

/* أزرار WooCommerce */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.wc-block-components-button {
  background: var(--als-blue) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  border: 0 !important;
  border-radius: 3px !important;
  padding: 0.7rem 1.6rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.wc-block-components-button:hover { background: var(--als-blue-deep) !important; }
.woocommerce .button.added::after { display: none; }

/* صفحة المنتج المفردة */
.woocommerce div.product .product_title { font-size: 1.9rem; color: var(--als-navy); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--als-blue); font-weight: 800; font-size: 1.5rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--als-blue); }
.woocommerce .quantity .qty { border: 1px solid var(--als-line); border-radius: 3px; padding: 0.5rem; }
.woocommerce span.onsale {
  background: var(--als-gold); color: var(--als-navy);
  font-weight: 800; border-radius: 3px; min-width: auto; min-height: auto;
  padding: 0.3rem 0.7rem; top: 10px; right: 10px; left: auto;
}

/* السلة والدفع */
.woocommerce table.shop_table { border: 1px solid var(--als-line); border-radius: 6px; }
.woocommerce table.shop_table th { background: var(--als-surface); color: var(--als-slate); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.wc-block-components-sidebar {
  background: var(--als-surface);
  border: 1px solid var(--als-line);
  border-radius: 8px;
  padding: 1.25rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input {
  border: 1px solid var(--als-line) !important;
  border-radius: 4px !important;
  padding: 0.7rem 0.9rem;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--als-blue);
  border-radius: 4px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--als-blue); }

/* حاويات صفحات المتجر داخل القالب — ملاحظة: لا تستهدف .woocommerce أو
   .woocommerce-page هنا، فووردبريس يضيفهما لكلاس <body> نفسه في صفحات
   المتجر، وأي max-width عليهما يضيّق الصفحة كاملة (كل الحاويات أصلاً
   مقيّدة بعرض 1180px عبر layout الكتل في قوالب archive-product/single-product). */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  max-width: 1180px;
  margin-inline: auto;
}

/* أيقونة السلة في الترويسة */
.als-cart-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--als-ink) !important;
  text-decoration: none !important;
}
.als-cart-link .als-cart-count {
  background: var(--als-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  min-width: 1.1rem;
  text-align: center;
}

@media (max-width: 781px) {
  ul.products, .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
