/* st-skin / woo-pages.css — sơn các trang Woo native (cart, checkout, account, shop)
 * theo TOKEN thương hiệu của skin, để không lệch hẳn với trang chủ đã clone.
 * Chỉ nạp trên trang Woo (xem functions.php) — KHÔNG ảnh hưởng trang skin.
 * Đường tiền giữ nguyên cấu trúc Woo: chỉ đổi màu/typography/khoảng cách. */

@font-face {
  font-family: "PPSupply";
  src: url("assets/fonts/PPSupply-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "InterSt";
  src: url("assets/fonts/Inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "InterSt";
  src: url("assets/fonts/Inter-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --st-paper: #fafafa;
  --st-ink: #171717;
  --st-blood: #9f0000;
  --st-hairline: rgba(23, 23, 23, .12);
  --st-faint: rgba(23, 23, 23, .55);
  --st-head: "PPSupply", ui-monospace, monospace;
  --st-body: "InterSt", Inter, system-ui, sans-serif;
}

/* ---------- nền + chữ ---------- */
body.st-brand {
  background: var(--st-paper);
  color: var(--st-ink);
  font-family: var(--st-body);
}

body.st-brand h1, body.st-brand h2,
body.st-brand h3, body.st-brand .wc-block-components-title,
body.st-brand .wc-block-components-checkout-step__title,
body.st-brand .wc-block-components-checkout-order-summary__title-text,
body.st-brand .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--st-head);
  text-transform: uppercase;
  letter-spacing: -.03em;
  color: var(--st-ink);
  font-weight: 400;
}

/* tiêu đề trang (Checkout/Cart): thu nhỏ, canh trái, bớt khoảng trống thừa */
body.st-brand .entry-title {
  font-size: 22px;
  text-align: left;
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--st-hairline);
}
body.st-brand .entry-header { margin-bottom: 0 !important; }
body.st-brand.woocommerce-checkout .site-content,
body.st-brand.woocommerce-cart .site-content { padding-top: 28px; }
/* bỏ khoảng trống thừa trên form (block checkout + express payment rỗng) */
body.st-brand .wp-block-woocommerce-checkout { padding-top: 0 !important; }
body.st-brand .wp-block-woocommerce-checkout-express-payment-block:empty,
body.st-brand .wc-block-checkout__express-payment:empty { display: none !important; }

/* ---------- header gọn như checkout gốc: chỉ còn thương hiệu ---------- */
body.st-brand.woocommerce-checkout .site-header .site-search,
body.st-brand.woocommerce-checkout .site-header .main-navigation,
body.st-brand.woocommerce-checkout .site-header .site-header-cart,
body.st-brand.woocommerce-checkout .storefront-breadcrumb,
body.st-brand.woocommerce-checkout .site-description {
  display: none !important;
}
body.st-brand.woocommerce-checkout .site-header {
  background: var(--st-paper);
  border-bottom: 1px solid var(--st-hairline);
  padding-top: 22px; padding-bottom: 18px;
  text-align: center;
}
body.st-brand.woocommerce-checkout .site-branding,
body.st-brand.woocommerce-checkout .site-header .site-title { float: none; width: auto; text-align: center; }
body.st-brand.woocommerce-checkout .site-title a {
  font-family: var(--st-head);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 20px;
  color: var(--st-ink) !important;
  text-decoration: none;
}
/* 5 sao vàng dưới logo (như bản gốc) */
body.st-brand.woocommerce-checkout .site-branding::after {
  content: "★★★★★";
  display: block; margin-top: 6px;
  color: #e8b33c; font-size: 12px; letter-spacing: .22em;
}

/* ---------- ô nhập ---------- */
body.st-brand .wc-block-components-text-input input,
body.st-brand .wc-block-components-select__container,
body.st-brand input[type="text"], body.st-brand input[type="email"],
body.st-brand input[type="tel"], body.st-brand select {
  border: 1px solid var(--st-hairline);
  border-radius: 6px;
  background: #fff;
  font-family: var(--st-body);
  color: var(--st-ink);
}
body.st-brand .wc-block-components-text-input input:focus,
body.st-brand input:focus, body.st-brand select:focus {
  border-color: var(--st-blood);
  box-shadow: 0 0 0 1px var(--st-blood);
  outline: none;
}
body.st-brand .wc-block-components-text-input label { color: var(--st-faint); }

/* ---------- nút chính = đỏ thương hiệu ---------- */
body.st-brand .wc-block-components-checkout-place-order-button,
body.st-brand a.wc-block-cart__submit-button,
body.st-brand .wc-block-cart__submit-button,
body.st-brand .wc-block-components-button.contained,
body.st-brand button.wc-block-components-button:not(.wc-block-components-button--secondary),
body.st-brand .button.alt, body.st-brand .checkout-button,
body.st-brand a.button.wc-forward, body.st-brand button[type="submit"].button {
  background: var(--st-blood) !important;
  color: #fff !important;
  border: 0; border-radius: 6px;
  font-family: var(--st-head);
  text-transform: uppercase;
  letter-spacing: -.01em;
  padding: 16px 22px;
  transition: background .18s ease;
}
body.st-brand .wc-block-components-checkout-place-order-button:hover,
body.st-brand .button.alt:hover, body.st-brand .checkout-button:hover {
  background: #7d0000 !important;
}

/* ---------- bảng tóm tắt đơn (cột phải) ---------- */
body.st-brand .wp-block-woocommerce-checkout-order-summary-block,
body.st-brand .wc-block-components-sidebar .wc-block-components-panel,
body.st-brand .cart_totals, body.st-brand .cart-collaterals .cart_totals {
  background: #fff;
  border: 1px solid var(--st-hairline);
  border-radius: 10px;
  padding: 20px;
}
body.st-brand .wc-block-components-totals-item__value,
body.st-brand .wc-block-components-product-price {
  font-family: var(--st-head);
  color: var(--st-ink);
}
body.st-brand .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 22px;
}

/* ---------- link + footer ---------- */
body.st-brand a { color: var(--st-blood); }
/* logo site: mono hoa như thương hiệu, KHÔNG để rule link ở trên nhuộm đỏ */
body.st-brand .site-title a {
  font-family: var(--st-head) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 20px;
  color: var(--st-ink) !important;
  text-decoration: none;
}
body.st-brand .site-footer {
  background: var(--st-paper);
  color: var(--st-faint);
  border-top: 1px solid var(--st-hairline);
}
body.st-brand .site-footer a { color: var(--st-blood); text-decoration: underline; }

/* ---------- gọn trên mobile ---------- */
@media (max-width: 768px) {
  body.st-brand.woocommerce-checkout .site-title a { font-size: 17px; }
  body.st-brand .wp-block-woocommerce-checkout-order-summary-block { padding: 16px; }
}