/* ============================================================
   QS Tech — Product (archive, single, quote modal)
   ============================================================ */

/* ============ ARCHIVE HERO ============ */
.product-archive-hero {
  padding: calc(var(--pad-section) + 4rem) var(--pad-x) var(--pad-section);
  border-bottom: 1px solid var(--c-line);
}
.product-archive-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 880px) {
  .product-archive-hero .container {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: 4rem;
  }
}
.product-archive-hero h1 {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1.5rem + 4vw, 5rem);
  line-height: 1;
  margin: 1rem 0 0;
  font-weight: 500;
}
.product-archive-hero h1 em {
  font-style: italic;
  color: var(--c-accent-deep);
}
.product-archive-hero .desc {
  color: var(--c-ink-soft);
  margin-top: 1.5rem;
  max-width: 48ch;
  font-size: 1.02rem;
}

/* ============ FILTER PILLS ============ */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2rem;
}
.cat-filter a {
  padding: 0.55rem 1rem;
  border: 1px solid var(--c-line);
  font-size: 0.85rem;
  color: var(--c-ink-soft);
  transition: border-color var(--d-normal) var(--ease), color var(--d-normal) var(--ease), background var(--d-normal) var(--ease);
}
.cat-filter a:hover {
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.cat-filter a.is-active {
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}
.cat-filter .count {
  opacity: 0.5;
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* ============ PRODUCT GRID ============ */
.product-archive {
  padding: var(--pad-section) 0;
}
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============ PRODUCT CARD ============ */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: transform var(--d-slow) var(--ease), box-shadow var(--d-normal) var(--ease);
  min-height: 460px;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px oklch(0% 0 0 / 0.06);
}
.product-card a.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-card-visual {
  aspect-ratio: 5/4;
  position: relative;
  overflow: hidden;
  background: var(--c-line);
}
.product-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-accent, linear-gradient(135deg, oklch(85% 0 0), oklch(75% 0 0)));
  transition: transform var(--d-slow) var(--ease);
}
.product-card:hover .product-card-visual::before {
  transform: scale(1.05);
}
.product-card-visual .sku-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: oklch(98% 0 0 / 0.9);
  color: oklch(18% 0 0);
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.product-card-visual .flagship-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  background: var(--c-ink);
  color: var(--c-accent);
  padding: 0.35rem 0.7rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
}
.product-card-body {
  padding: 1.6rem 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.product-card-cat {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-mute);
  font-weight: 500;
}
.product-card-name {
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 500;
  color: var(--c-ink);
}
.product-card-name a {
  position: relative;
  z-index: 2;
}
.product-card-short {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.5;
}
.product-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.85rem;
}
.product-card-price {
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--c-ink);
  font-weight: 600;
}
.product-card-quote {
  color: var(--c-accent-deep);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  z-index: 2;
}
.product-card-quote::after {
  content: "→";
  transition: transform var(--d-normal) var(--ease);
}
.product-card:hover .product-card-quote::after { transform: translateX(4px); }

/* ============ SINGLE PRODUCT ============ */
.single-product .woo-main {
  padding: calc(var(--pad-section) + 4rem) var(--pad-x) var(--pad-section);
}
.single-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 980px) {
  .single-product-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 5rem;
    align-items: start;
  }
}

.single-product-visual {
  aspect-ratio: 4/5;
  background: var(--card-accent, linear-gradient(135deg, oklch(85% 0 0), oklch(70% 0 0)));
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.single-product-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, oklch(100% 0 0 / 0.3), transparent 60%);
  pointer-events: none;
}
.single-product-visual .can {
  width: 50%;
  aspect-ratio: 3/4;
  background: linear-gradient(90deg, oklch(96% 0 0), oklch(88% 0 0), oklch(96% 0 0));
  position: relative;
  z-index: 1;
  box-shadow: 0 30px 80px oklch(0% 0 0 / 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-product-visual .can-sku {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: oklch(20% 0.05 250);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.single-product-visual .flagship-mark {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  background: oklch(18% 0.05 250);
  color: var(--c-accent);
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}

.single-product-info .sp-cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-mute);
  font-weight: 500;
}
.single-product-info h1 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.4rem);
  line-height: 1.1;
  margin: 0.8rem 0 1.5rem;
  font-weight: 500;
}
.single-product-info .sp-short {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.45;
  color: var(--c-ink-soft);
  font-style: italic;
  margin: 0 0 2rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--c-accent-deep);
}
.single-product-info .sp-long {
  color: var(--c-ink-soft);
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.sp-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--c-line);
  margin-bottom: 2.5rem;
}
.sp-specs .row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.95rem;
}
.sp-specs .row dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-mute);
  font-weight: 500;
  padding-top: 2px;
}
.sp-specs .row dd {
  margin: 0;
  color: var(--c-ink);
}

.sp-price {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.5rem + 1vw, 2.6rem);
  color: var(--c-ink);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.sp-price .unit {
  font-size: 0.9rem;
  color: var(--c-mute);
  margin-left: 0.5rem;
  font-family: var(--f-sans);
  font-weight: 400;
}
.sp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============ RELATED ============ */
.sp-related {
  padding: var(--pad-section) 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
}
.sp-related h2 {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  margin: 1rem 0 2.5rem;
  font-weight: 500;
}

/* ============ EMPTY / NO PRODUCTS ============ */
.no-products {
  padding: 6rem 0;
  text-align: center;
  color: var(--c-mute);
}
.no-products h2 {
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--c-ink);
  margin: 0 0 1rem;
  font-weight: 500;
}

/* ============ QUOTE MODAL ============ */
.quote-modal {
  position: fixed;
  inset: 0;
  background: oklch(15% 0.02 250 / 0.65);
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-normal) var(--ease);
}
.quote-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.quote-modal-dialog {
  background: var(--c-bg);
  width: 100%;
  max-width: 520px;
  padding: 2.5rem;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform var(--d-slow) var(--ease);
}
.quote-modal[aria-hidden="false"] .quote-modal-dialog {
  transform: translateY(0);
}
.quote-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.quote-modal-head h2 {
  font-family: var(--f-display);
  font-size: 1.8rem;
  margin: 0.5rem 0 0;
  font-weight: 500;
  line-height: 1.15;
}
.quote-modal-head .product-ref {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-mute);
  font-weight: 500;
}
.quote-modal-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  transition: background var(--d-normal) var(--ease);
  flex-shrink: 0;
}
.quote-modal-close:hover {
  background: var(--c-line);
}
.quote-modal-close::before {
  content: "✕";
  font-size: 1rem;
  color: var(--c-ink);
}
.quote-form {
  display: grid;
  gap: 1rem;
}
.quote-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--c-ink-soft);
}
.quote-form input,
.quote-form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  font: inherit;
  color: var(--c-ink);
  transition: border-color var(--d-normal) var(--ease);
}
.quote-form input:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--c-ink);
}
.quote-form textarea {
  min-height: 100px;
  resize: vertical;
}
.quote-honeypot {
  position: absolute;
  left: -9999px;
}
.quote-status {
  font-size: 0.9rem;
  padding: 0.8rem 1rem;
  margin-top: 0.5rem;
}
.quote-status.is-success {
  background: oklch(95% 0.06 145);
  color: oklch(35% 0.10 145);
  border-left: 3px solid oklch(60% 0.14 145);
}
.quote-status.is-error {
  background: oklch(96% 0.08 25);
  color: oklch(40% 0.15 25);
  border-left: 3px solid oklch(58% 0.20 25);
}

/* ============ BREADCRUMB ============ */
.qstech-breadcrumb {
  font-size: 0.82rem;
  color: var(--c-mute);
  margin-bottom: 1.5rem;
}
.qstech-breadcrumb a:hover { color: var(--c-ink); }
.qstech-breadcrumb .sep { margin: 0 0.5rem; opacity: 0.4; }


/* ===== REAL PRODUCT PHOTO MODE (loop card) — added ===== */
.product-card-visual.has-photo {
  background: linear-gradient(168deg, oklch(99% 0.003 95), oklch(94.5% 0.012 88));
}
.product-card-visual.has-photo::before {
  background: radial-gradient(120% 85% at 50% 120%, oklch(0% 0 0 / 0.10), transparent 62%);
}
.pc-photo {
  grid-row: 2;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0.5rem 0.6rem 0.7rem;
}
.pc-photo img {
  width: auto;
  max-width: 80%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px oklch(0% 0 0 / 0.16));
  transition: transform var(--d-slow) var(--ease);
}
.product-card:hover .pc-photo img { transform: translateY(-5px) scale(1.035); }
.product-card-visual.has-photo .pc-finish {
  background: oklch(100% 0 0 / 0.82);
  color: oklch(32% 0.02 250);
  border-color: oklch(86% 0.01 250);
  opacity: 1;
  backdrop-filter: blur(4px);
}
/* single hero fallback (harmless if already present) */
.sp-swatch.has-photo { background: linear-gradient(168deg, oklch(99% 0.003 95), oklch(93% 0.014 86)); }
.sp-swatch.has-photo::before { background: radial-gradient(100% 70% at 50% 122%, oklch(0% 0 0 / 0.10), transparent 64%); }
.sp-photo { grid-row: 2; position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; padding: 1.4rem 1.4rem 0.6rem; }
.sp-photo img { width: auto; max-width: 84%; height: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 22px 34px oklch(0% 0 0 / 0.20)); }
.sp-swatch.has-photo .sp-swatch-finish { background: oklch(100% 0 0 / 0.84); color: oklch(30% 0.02 250); border-color: oklch(85% 0.01 250); opacity: 1; backdrop-filter: blur(4px); }
.sp-swatch.has-photo .sp-fandeck-cap { color: oklch(46% 0.02 250); }
@media (prefers-reduced-motion: reduce) { .product-card:hover .pc-photo img { transform: none; } }


/* ============ SHOP TOOLBAR — lọc bề mặt hoàn thiện + sắp xếp ============ */
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-line-soft); }
.shop-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.shop-filter-label, .shop-sort-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-ink-soft); margin-right: 0.35rem; }
.shop-pill { padding: 0.5rem 0.95rem; border: 1px solid var(--c-line); border-radius: 100px; background: transparent; font: inherit; font-size: 0.85rem; color: var(--c-ink-soft); cursor: pointer; transition: border-color var(--d-normal) var(--ease), color var(--d-normal) var(--ease), background var(--d-normal) var(--ease); }
.shop-pill:hover { border-color: var(--c-ink); color: var(--c-ink); }
.shop-pill:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }
.shop-pill.is-active { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.shop-pill-count { margin-left: 0.4rem; opacity: 0.55; font-variant-numeric: tabular-nums; }
.shop-sort { display: inline-flex; align-items: center; gap: 0.5rem; }
.shop-sort select { padding: 0.5rem 2.1rem 0.5rem 0.9rem; border: 1px solid var(--c-line); border-radius: 100px; background-color: transparent; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b6b78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>"); background-repeat: no-repeat; background-position: right 0.75rem center; font: inherit; font-size: 0.85rem; color: var(--c-ink); cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color var(--d-normal) var(--ease); }
.shop-sort select:hover { border-color: var(--c-ink); }
.shop-sort select:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }
.product-card[hidden] { display: none !important; }
.shop-no-match { grid-column: 1 / -1; text-align: center; color: var(--c-ink-soft); padding: 2.5rem 0; font-size: 0.95rem; }
@media (max-width: 560px) { .shop-toolbar { flex-direction: column; align-items: flex-start; } }

/* ============================================================
 * PAGE.PHP — nội dung trang chung (gồm trang WooCommerce)
 * ============================================================ */
.page-body-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.page-content { max-width: 1100px; margin: 0 auto; color: var(--c-ink); }
.page-content > h2, .page-content > h3 { font-family: var(--f-display); color: var(--c-brand-deep); letter-spacing: -0.01em; }
.page-content p { line-height: 1.7; }
.page-content a:not(.button):not(.btn) { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
 * WOOCOMMERCE — giỏ hàng · thanh toán · tài khoản
 * (product.css nạp SAU css lõi Woo → override cùng cấp là thắng)
 * ============================================================ */

/* --- Nút --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce form.checkout #place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--c-accent); color: oklch(15% 0 0);
  font-family: inherit; font-weight: 600; font-size: 0.9rem; line-height: 1.2;
  padding: 0.75rem 1.4rem; border: none; border-radius: var(--radius-sm);
  text-transform: none; text-decoration: none; cursor: pointer;
  transition: transform var(--d-normal) var(--ease), background var(--d-normal) var(--ease), box-shadow var(--d-normal) var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce form.checkout #place_order:hover {
  background: var(--c-accent-deep); color: oklch(98% 0 0);
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}
/* Nút chính (alt) — chuyển sang tông đậm để nổi bật hành động chốt */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--c-brand-deep); color: var(--c-bg); width: 100%;
  padding: 0.95rem 1.6rem; font-size: 0.98rem;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover { background: oklch(12% 0.06 250); color: var(--c-bg); }
.woocommerce .button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #place_order:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }
.woocommerce a.button.wc-backward { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink); }
.woocommerce a.button.wc-backward:hover { border-color: var(--c-ink); background: transparent; color: var(--c-ink); }

/* --- Bảng (giỏ hàng + review đơn) --- */
.woocommerce table.shop_table {
  border: 1px solid var(--c-line); border-radius: var(--radius); border-collapse: separate;
  border-spacing: 0; overflow: hidden; background: var(--c-bg);
}
.woocommerce table.shop_table th {
  background: var(--c-paper); color: var(--c-brand-deep);
  font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.9rem 1rem; border-top: none;
}
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--c-line-soft); vertical-align: middle; }
.woocommerce table.shop_table .product-thumbnail img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.woocommerce a.remove {
  color: var(--c-accent-deep) !important; border: 1px solid var(--c-line);
  width: 22px; height: 22px; line-height: 20px; border-radius: 50%; font-weight: 700;
}
.woocommerce a.remove:hover { background: var(--c-accent-deep) !important; color: #fff !important; }

/* --- Ô số lượng --- */
.woocommerce .quantity .qty {
  width: 68px; padding: 0.55rem 0.5rem; text-align: center;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: var(--c-bg); color: var(--c-ink); font-size: 0.95rem;
}
.woocommerce .quantity .qty:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 1px; }

/* --- Cart totals + coupon --- */
.woocommerce .cart_totals h2, .woocommerce-checkout h3 {
  font-family: var(--f-display); color: var(--c-brand-deep); letter-spacing: -0.01em;
}
.woocommerce .cart-collaterals .cart_totals {
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
}
.woocommerce .cart_totals table.shop_table { border: none; background: transparent; }
.woocommerce .coupon .input-text { max-width: 200px; }

/* --- Form (checkout + tài khoản) --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input.input-text,
.woocommerce .select2-container .select2-selection {
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-ink);
  font-size: 0.95rem; font-family: inherit; line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--c-accent-deep); outline-offset: 1px; border-color: var(--c-accent-deep);
}
.woocommerce form .form-row label { font-weight: 600; font-size: 0.85rem; color: var(--c-ink-soft); margin-bottom: 0.3rem; display: inline-block; }
.woocommerce form .form-row .required { color: var(--c-accent-deep); border: none; }

/* --- Thông báo (info / message / error) --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  border-radius: var(--radius); border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-accent); background: var(--c-paper);
  padding: 1rem 1.2rem; color: var(--c-ink); font-size: 0.92rem;
}
.woocommerce-message { border-top-color: oklch(62% 0.14 150); }
.woocommerce-error { border-top-color: oklch(58% 0.20 25); list-style: none; }
.woocommerce-message .button, .woocommerce-info .button { padding: 0.5rem 1rem; font-size: 0.82rem; }

/* --- Giá --- */
.woocommerce .woocommerce-Price-amount { color: var(--c-brand-deep); font-weight: 700; }

/* --- Tài khoản --- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: inline-block; padding: 0.55rem 1rem; border: 1px solid var(--c-line);
  border-radius: 100px; color: var(--c-ink); font-weight: 600; font-size: 0.88rem; text-decoration: none;
  transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { border-color: var(--c-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--c-brand-deep); color: var(--c-bg); border-color: var(--c-brand-deep); }
.woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register,
.woocommerce-account .col-1, .woocommerce-account .col-2 {
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.4rem 1.6rem;
}

@media (max-width: 640px) {
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { width: 100%; }
  .woocommerce table.shop_table td { padding: 0.75rem 0.6rem; }
}

/* ============================================================
 * WOOCOMMERCE BLOCKS — Cart/Checkout dạng block (Gutenberg)
 * Class .wc-block-* khác classic; scope trong .page-content (page.php).
 * ============================================================ */
.page-content .wc-block-components-button.wp-element-button {
  background: var(--c-accent) !important; color: oklch(15% 0 0) !important;
  border-radius: var(--radius-sm); font-weight: 600; box-shadow: none;
  transition: transform var(--d-normal) var(--ease), background var(--d-normal) var(--ease), box-shadow var(--d-normal) var(--ease);
}
.page-content .wc-block-components-button.wp-element-button:hover {
  background: var(--c-accent-deep) !important; color: oklch(98% 0 0) !important;
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.page-content a.wc-block-components-button.is-link,
.page-content .wc-block-components-button.wc-block-components-button--outlined { background: transparent !important; }
.page-content a.wc-block-components-button.is-link { color: var(--c-accent-deep) !important; }
.page-content .wc-block-components-button.wp-element-button:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }
.page-content .wc-block-components-button.wc-block-components-button--outlined,
.page-content a.wc-block-components-button.is-link { background: transparent; color: var(--c-accent-deep); }

/* Inputs block */
.page-content .wc-block-components-text-input input,
.page-content .wc-block-components-text-input textarea,
.page-content .wc-block-components-select__container select,
.page-content .wc-block-components-quantity-selector input {
  border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-ink);
}
.page-content .wc-block-components-text-input input:focus,
.page-content .wc-block-components-select__container select:focus {
  outline: 2px solid var(--c-accent-deep); outline-offset: 1px; box-shadow: none;
}
.page-content .wc-block-components-text-input.is-active label { color: var(--c-accent-deep); }

/* Tổng tiền / panel block */
.page-content .wc-block-components-totals-item__value,
.page-content .wc-block-components-order-summary .wc-block-components-product-metadata,
.page-content .wc-block-formatted-money-amount { color: var(--c-brand-deep); }
.page-content .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.page-content .wc-block-checkout__sidebar .wc-block-components-totals-wrapper { border-radius: var(--radius); }
.page-content .wc-block-components-panel__button { color: var(--c-accent-deep); }
.page-content a { color: var(--c-accent-deep); }