/* ==========================================================================
   MEPHO Việt Nam — WooCommerce (khớp giao diện theme)
   Nạp sau main.css nên dùng lại các biến :root (--brand, --navy-900, --line...)
   ========================================================================== */

.woocommerce, .woocommerce-page { font-family: var(--font); }
.woocommerce .woocommerce-products-header__title,
.woocommerce-products-header { text-align: center; }

/* ------- Nút chung ------- */
.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 {
  background: var(--brand); color: #fff; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; line-height: 1; padding: 13px 26px;
  transition: var(--transition); text-transform: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--brand-700, #7a441a); color: #fff; }

/* ------- Lưới cửa hàng ------- */
.woocommerce ul.products li.product {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; padding: 0 0 16px !important; margin-bottom: 26px !important;
  transition: var(--transition); text-align: left;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--brand); }
.woocommerce ul.products li.product a img { margin: 0 0 14px; border-radius: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0 16px; font-size: 16.5px; font-weight: 700; color: var(--navy-900); line-height: 1.3;
}
.woocommerce ul.products li.product .price { padding: 0 16px; color: var(--brand); font-weight: 800; font-size: 17px; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 500; }
.woocommerce ul.products li.product .mepho-contact-price,
.woocommerce div.product .mepho-contact-price { color: var(--brand); font-weight: 700; font-size: 15px; }
.woocommerce ul.products li.product .button { margin: 12px 16px 0; display: inline-block; }
.woocommerce ul.products li.product .star-rating { margin: 0 16px 8px; }

/* ------- Nhãn khuyến mãi ------- */
.woocommerce span.onsale {
  background: var(--brand); color: #fff; border-radius: 999px; font-weight: 700;
  min-height: auto; min-width: auto; padding: 6px 14px; line-height: 1;
}

/* ------- Trang chi tiết sản phẩm ------- */
.woocommerce div.product .product_title { color: var(--navy-900); font-weight: 800; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--brand); font-weight: 800; font-size: 28px;
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--body); line-height: 1.7; }
.woocommerce div.product form.cart div.quantity input.qty { border: 1px solid var(--line); border-radius: 10px; height: 46px; }
.woocommerce .woocommerce-tabs ul.tabs li.active { border-color: var(--brand); }
.woocommerce .woocommerce-tabs ul.tabs li.active a { color: var(--brand); }

/* ------- Nút Đặt hàng qua Zalo + Hotline ------- */
.mepho-buy-extra { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.mepho-buy-extra .button { margin: 0 !important; }
.woocommerce a.button.mepho-zalo { background: #0068ff; }
.woocommerce a.button.mepho-zalo:hover { background: #0055d4; }
.woocommerce a.button.mepho-call {
  background: #fff; color: var(--brand); border: 2px solid var(--brand); padding: 11px 24px;
}
.woocommerce a.button.mepho-call:hover { background: var(--brand); color: #fff; }

/* ------- Thông báo, giỏ hàng ------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--brand); border-radius: 10px; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--brand); }
.woocommerce .cart .button, .woocommerce #respond input#submit.alt,
.woocommerce a.button.alt, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background: var(--brand); }

/* ------- Breadcrumb WooCommerce ------- */
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--brand); }

@media (max-width: 680px) {
  .mepho-buy-extra .button { flex: 1 1 100%; text-align: center; }
}