/* ============================================================
   WooCommerce brand layer — Ali Al-Masrdi
   طبقة تنسيق للهوية فوق قوالب WooCommerce القياسية.
   لا تُعدّل أي وظيفة — CSS فقط. تُحمّل على صفحات المتجر فقط.
   تعتمد رموز التصميم من design-system.css (--brand, --teal-*, ...).
   ============================================================ */

/* الخط العام على صفحات المتجر */
.woocommerce, .woocommerce-page { font-family: var(--font-sans); }
.woocommerce h1, .woocommerce h2, .woocommerce h3 { font-family: var(--font-display); letter-spacing: var(--ls-tight); color: var(--text-strong); }

/* ---------- شريط علوي: عدّاد النتائج + الترتيب ---------- */
.woocommerce .woocommerce-result-count { color: var(--text-muted); font-size: var(--fs-body-sm); }
.woocommerce .woocommerce-ordering select {
  font-family: var(--font-sans); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 8px 12px; color: var(--text-body); background: #fff;
}

/* ---------- شبكة المنتجات ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  padding: 0 0 var(--sp-5); transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  text-align: start;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.woocommerce ul.products li.product a img { margin: 0 0 var(--sp-4); border-radius: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-strong);
  padding: 0 var(--sp-5); line-height: 1.5;
}
.woocommerce ul.products li.product .price {
  color: var(--brand-active) !important; font-weight: var(--fw-black); font-size: var(--fs-body-lg);
  padding: 0 var(--sp-5); display: block; margin-top: var(--sp-2);
}
.woocommerce ul.products li.product .price del { color: var(--text-faint) !important; font-weight: var(--fw-regular); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { margin: var(--sp-2) var(--sp-5); color: var(--brand); }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: var(--sp-4) var(--sp-5) 0; display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce span.onsale {
  background: var(--brand); color: #fff; border-radius: var(--radius-pill);
  font-weight: var(--fw-bold); font-size: var(--fs-caption); min-height: auto; min-width: auto; padding: 4px 12px; line-height: 1.4;
}

/* ---------- الأزرار (كل المتجر) ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce .single_add_to_cart_button {
  background: var(--brand) !important; color: #fff !important; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-weight: var(--fw-bold); border: none; padding: 12px 22px;
  transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--brand-hover) !important; box-shadow: var(--shadow-brand);
}
.woocommerce a.button.outline, .woocommerce .button.wc-backward {
  background: transparent !important; color: var(--brand) !important; border: 1px solid var(--brand);
}

/* ---------- صفحة المنتج المفرد ---------- */
.woocommerce div.product .product_title { font-size: clamp(24px,4vw,38px); font-weight: var(--fw-black); }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--brand-active); font-weight: var(--fw-black); font-size: var(--fs-h4);
}
.woocommerce div.product .woocommerce-product-rating .star-rating { color: var(--brand); }
.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px; font-family: var(--font-sans);
}
.woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; padding: 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--border-subtle); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--surface-card); border-bottom-color: var(--surface-card);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--text-body); font-weight: var(--fw-bold); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brand); }
/* خيارات المتغيّرات (الأسعار/الأنواع) */
.woocommerce div.product form.cart .variations td.label label { font-weight: var(--fw-bold); color: var(--text-strong); }
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px; font-family: var(--font-sans);
}

/* ---------- الحقول (السلة/الدفع/الحساب) ---------- */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text, .woocommerce .select2-container .select2-selection,
.woocommerce table.cart td.actions .coupon .input-text {
  border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 11px 14px; font-family: var(--font-sans);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); outline: none;
}

/* ---------- جداول السلة والطلبات ---------- */
.woocommerce table.shop_table {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--surface-sunken); color: var(--text-strong); font-weight: var(--fw-bold); }
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { color: var(--text-strong); }
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
  border-top-color: var(--brand); border-radius: var(--radius-md);
}
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--brand); }

/* ---------- لوحة الحساب ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--brand); border-color: var(--brand); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; color: var(--text-body); font-weight: var(--fw-medium); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #fff; font-weight: var(--fw-bold); }

/* ---------- الفتات (breadcrumb) ---------- */
.woocommerce .woocommerce-breadcrumb { color: var(--text-muted); font-size: var(--fs-body-sm); }
.woocommerce .woocommerce-breadcrumb a { color: var(--brand); }

/* ---------- ترقيم الصفحات ---------- */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: inline-flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-body); padding: 8px 14px;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ============================================================
   ENHANCEMENTS — store hero, account dashboard, product polish
   ============================================================ */

/* Branded store hero (output via amx_store_hero on shop/product/account) */
body.amx-body .amx-store-hero { background:linear-gradient(160deg,var(--teal-900),var(--teal-950)); color:#fff; padding-block:var(--sp-12); margin-bottom:var(--sp-10); }
body.amx-body .amx-store-hero .amx-eyebrow { color:var(--teal-200); }
body.amx-body .amx-store-hero h1 { color:#fff; font-size:clamp(28px,4vw,var(--fs-h1)); font-weight:var(--fw-black); margin-top:6px; }
body.amx-body .amx-store-hero p { color:var(--teal-100); margin-top:8px; max-width:60ch; }

/* Product single: gallery + summary polish */
.woocommerce div.product div.images img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--radius-lg); }
.woocommerce div.product div.summary { padding-inline-start: var(--sp-4); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-muted); line-height: var(--lh-relaxed); font-size: var(--fs-body-lg); margin-bottom: var(--sp-4); }
.woocommerce div.product form.cart { margin-top: var(--sp-6); }
.woocommerce div.product .single_add_to_cart_button { padding: 14px 28px !important; font-size: var(--fs-body-lg); }

/* Tamara / Tabby installment widgets — give them a framed, on-brand box */
.woocommerce div.product .tamara-product-widget,
.woocommerce div.product .tabby-promo-snippet,
.woocommerce div.product [id*="tamara"], .woocommerce div.product [class*="tabby"] {
  margin: var(--sp-4) 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4); background: var(--surface-parchment);
}

/* Related / upsell heading */
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .products > h2 {
  font-size: var(--fs-h3); font-weight: var(--fw-extrabold); margin-bottom: var(--sp-6);
  padding-top: var(--sp-4); border-top: var(--bw-rule) solid var(--brand); display: inline-block;
}

/* ---------- Account dashboard: sidebar + content layout ---------- */
@media (min-width:900px){
  .woocommerce-account .woocommerce {
    display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-8); align-items: start;
  }
}
.woocommerce-account .woocommerce-MyAccount-navigation { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--brand); }
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-8); box-shadow: var(--shadow-sm);
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--text-strong); margin-bottom: var(--sp-4); }
.woocommerce-account .woocommerce-MyAccount-content p { line-height: var(--lh-relaxed); margin-bottom: var(--sp-4); }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--brand-active); font-weight: var(--fw-bold); }
.woocommerce-account .woocommerce-MyAccount-content mark { background: var(--brand-subtle); color: var(--brand-active); padding: 1px 6px; border-radius: var(--radius-xs); }

/* Login / register forms centered card */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce-account:not(.logged-in) .woocommerce { display: block; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: 100%; }
.woocommerce form.login, .woocommerce form.register {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--sp-8); box-shadow: var(--shadow-sm); background: var(--surface-card);
}

/* Standalone store wrapper spacing (replaces parent-theme page padding) */
body.amx-body .amx-woo { padding-block: 0 var(--sp-20); }
body.amx-body.woocommerce-cart .amx-woo,
body.amx-body.woocommerce-checkout .amx-woo,
body.amx-body.woocommerce-account .amx-woo { padding-top: var(--sp-12); }