/* =========================================================================
   VOLTIC — CSS cho trang WooCommerce MẶC ĐỊNH
   (shop · danh mục · sản phẩm TẮT công tắc "Dùng bố cục Voltic đầy đủ").

   Chỉ nạp trên trang Woo mặc định (xem inc/enqueue.php). Sản phẩm BẬT bố cục
   Voltic dùng product.css riêng, KHÔNG nạp file này.

   Mục tiêu: cho trang Woo mặc định có khung + phông + nút hợp tông thương hiệu,
   không tràn viền. Bố cục chi tiết (gallery, tab…) để CSS gốc WooCommerce lo.
   ====================================================================== */

/* Khung dọc — .wrap (main.css) đã lo bề ngang + lề. */
.voltic-woo {
  padding: clamp(30px, 5vw, 60px) 0;
}

/* Phông chữ khớp theme */
.woocommerce, .woocommerce-page {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: var(--text-primary, #0B1F35);
}
.woocommerce .product_title,
.woocommerce .products h2,
.woocommerce h1, .woocommerce h2 {
  font-family: var(--font-heading, 'Plus Jakarta Sans', system-ui, sans-serif);
  color: var(--text-primary, #0B1F35);
}

/* Nút theo tông thương hiệu (đỏ) — gồm cả nút "Liên hệ báo giá" ở loop */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.product-loop-quote {
  background: var(--red-accent, #D21F25);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  padding: 12px 22px;
  transition: background-color .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.product-loop-quote:hover {
  background: #B4171C;
  color: #fff;
}

/* Lưới sản phẩm ở shop/danh mục — khoảng cách thoáng, thẻ bo góc nhẹ */
.woocommerce ul.products li.product {
  text-align: center;
}
.woocommerce ul.products li.product img {
  border-radius: 10px;
  margin-bottom: 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #0B1F35);
}

/* Ảnh sản phẩm không tràn */
.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: 12px;
}

/* Tiêu đề tab mô tả */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--blue-accent, #1B4E8F);
}