/**
 * lhl-editorial - WooCommerce (shop / cart / checkout) on-brand styling
 * Dùng token stone+amber từ tokens.css -> tự động theo dark mode.
 * Mục tiêu: shop/cart/checkout hiện đại, gọn, cùng tone site.
 */

/* ============ Chung ============ */
.woocommerce, .wc-block-components-form, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
  font-family: var(--font-sans);
  color: var(--text-primary);
}
.woocommerce .page-title, .wc-block-components-title {
  font-family: var(--font-serif);
}

/* Nút chung: đen bo tròn, hover nhấc nhẹ */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.wc-block-components-button, .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout-place-order-button {
  background: var(--btn-solid-bg) !important;
  color: var(--btn-solid-text) !important;
  border: 0 !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  padding: 12px 26px !important;
  box-shadow: none !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.wc-block-components-button:hover, .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout-place-order-button:hover {
  background: var(--btn-solid-bg-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
}
/* Nút đặt hàng chính = gradient thương hiệu */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-place-order-button {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  box-shadow: var(--shadow-cta) !important;
}

/* ============ Shop (grid sản phẩm) ============ */
.woocommerce ul.products {
  gap: 28px;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 0 !important;
}
.woocommerce ul.products li.product {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 !important;
  padding: 0 0 8px !important;
  width: auto !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  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 {
  font-family: var(--font-serif);
  font-size: 1.12rem; font-weight: 700;
  color: var(--text-primary) !important;
  padding: 0 18px !important; margin: 0 0 6px !important;
}
.woocommerce ul.products li.product .price {
  color: var(--brand-strong) !important;
  font-weight: 700; font-size: 1.05rem;
  padding: 0 18px 14px !important; display: block;
}
.woocommerce ul.products li.product .price del { color: var(--text-faint) !important; font-weight: 400; }
.woocommerce ul.products li.product .button { margin: auto 18px 6px !important; text-align: center; }

/* Breadcrumb + sorting */
.woocommerce .woocommerce-breadcrumb { color: var(--text-muted); font-size: .9rem; }
.woocommerce .woocommerce-ordering select, .orderby {
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 8px 16px; background: var(--surface-0); color: var(--text-primary);
}
.woocommerce-result-count { color: var(--text-muted); }

/* ============ Single product ============ */
.woocommerce div.product .product_title { font-family: var(--font-serif); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--brand-strong); }

/* ============ Cart + Checkout (Blocks) — card/surface tone ============ */
.wc-block-components-sidebar, .wc-block-cart__totals-title,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-totals-wrapper {
  background: var(--surface-cream);
}
.wp-block-woocommerce-checkout-order-summary-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 20px;
}
.wc-block-cart-items, .wc-block-cart-items__header {
  color: var(--text-primary);
}
.wc-block-cart-items__row { border-color: var(--border) !important; }
.wc-block-components-product-name { color: var(--text-primary) !important; font-weight: 600; }
.wc-block-components-product-price, .wc-block-formatted-money-amount,
.wc-block-components-totals-item__value { color: var(--text-primary); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--brand-strong); font-weight: 700; }

/* Ô nhập liệu (Blocks + classic) */
.wc-block-components-text-input input, .wc-block-components-text-input input.is-active,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.wc-block-components-select .wc-block-components-select__container {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-0) !important;
  color: var(--text-primary) !important;
}
.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-soft) !important;
  outline: none !important;
}
.wc-block-components-text-input label, .wc-block-components-checkout-step__title { color: var(--text-secondary); }
.wc-block-checkout__form .wc-block-components-checkout-step {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.wc-block-components-checkout-step__title-content { color: var(--brand-strong); }

/* Notices */
.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info {
  border-radius: var(--radius-md);
  border-left-color: var(--brand) !important;
}

/* ============ Simple checkout: ẩn field địa chỉ (chỉ giữ tên/email/SĐT) ============ */
/* Blocks checkout */
.wc-block-components-address-form__company,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__city,
.wc-block-components-address-form__postcode,
.wc-block-components-address-form__state,
.wc-block-components-address-form__country,
#shipping-fields, .wc-block-checkout__shipping-fields,
.wp-block-woocommerce-checkout-shipping-address-block,
.wp-block-woocommerce-checkout-shipping-method-block {
  display: none !important;
}
/* Classic checkout parity */
#billing_company_field, #billing_address_1_field, #billing_address_2_field,
#billing_city_field, #billing_postcode_field, #billing_state_field,
#billing_country_field { display: none !important; }

/* ============ SePay: hộp thanh toán LUÔN sáng, đọc rõ cả dark mode ============ */
/* Plugin SePay style theo nền sáng -> ở site dark mode chữ mờ gần như mất.
   Ép hộp .sepay-box thành card trắng chữ đậm ở mọi theme (QR vốn cần nền trắng). */
.sepay-box {
  background: #FFFFFF !important;
  color: #1C1917 !important;
  border: 1px solid #E7E5E4 !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-md);
}
.sepay-box *:not(.button-qr):not(.download-qr):not(.force-download):not(svg):not(path):not(img) {
  color: #1C1917 !important;
  border-color: #E7E5E4 !important;
}
.sepay-box .box-title, .sepay-box .qr-title, .sepay-box .manual-title { color: #1C1917 !important; font-weight: 700; }
.sepay-box .subtle, .sepay-box .note, .sepay-box .countdown { color: #57534E !important; }
.sepay-box .bank-info-table, .sepay-box .qr-box, .sepay-box .manual-box,
.sepay-box .bank-info { background: #FAFAF9 !important; }
.sepay-box .qr-element, .sepay-box .qr-image, .sepay-box .qr-content { background: #FFFFFF !important; }
.sepay-box .note { background: #FEF3C7 !important; border-radius: var(--radius-md); }
/* nút tải QR: giữ xanh SePay, chữ trắng */
.sepay-box .button-qr, .sepay-box .download-qr { color: #FFFFFF !important; }
/* khối trạng thái/QR trên trang order-received cũng nằm trong .woocommerce-sepay-bank-details */
.woocommerce-sepay-bank-details { color: var(--text-primary); }