/* CSS riêng cho từng loại trang (WooCommerce, blog…). Chỉ dùng biến từ tokens.css. */

/* ---------- WooCommerce: lưới sản phẩm ---------- */
.woocommerce ul.products, ul.products { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--vt-s-5) var(--vt-s-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vt-gutter); list-style: none; margin: 0; padding: 0; scrollbar-width: none; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product { scroll-snap-align: start; margin: 0 !important; width: auto !important; float: none !important; }
@media (min-width: 600px) { .woocommerce ul.products, ul.products { grid-auto-columns: 42%; } }
@media (min-width: 1200px) { .woocommerce ul.products, ul.products { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
ul.products li.product a { text-decoration: none; color: inherit; }
ul.products li.product .vt-loop-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; margin: 0 0 var(--vt-s-3); background: var(--vt-cream); }
ul.products li.product img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--vt-cream); margin: 0 0 var(--vt-s-3); }
ul.products li.product .vt-loop-media img { position: absolute; inset: 0; height: 100%; margin: 0; transition: opacity 500ms var(--vt-ease-out), transform 700ms var(--vt-ease-out); }
/* Ảnh thứ 2 (gallery) hiện khi rê chuột — kiểu Nike/Gymshark */
ul.products li.product .vt-loop-media .vt-loop-alt { opacity: 0; }
ul.products li.product:hover .vt-loop-media .vt-loop-alt { opacity: 1; }
ul.products li.product:hover .vt-loop-media img { transform: scale(1.03); }
ul.products li.product .vt-card__meta { display: block; font-size: var(--vt-fs-small); color: var(--vt-muted); }
ul.products li.product .woocommerce-loop-product__title { margin: 0 0 var(--vt-s-1); font-size: var(--vt-fs-body); font-weight: 700; text-transform: none; letter-spacing: 0; font-stretch: 100%; }
ul.products li.product:hover .woocommerce-loop-product__title { text-decoration: underline; text-underline-offset: .2em; }
.woocommerce-result-count, .woocommerce-ordering { font-size: var(--vt-fs-small); color: var(--vt-muted); margin-bottom: var(--vt-s-5); }
.woocommerce-breadcrumb { font-size: var(--vt-fs-small); color: var(--vt-muted); margin-bottom: var(--vt-s-5); }
.woocommerce-breadcrumb a { color: inherit; }
.onsale { display: none; } /* B2B: không có sale */

/* ---------- WooCommerce: single product ---------- */
.vt-product div.product { display: grid; gap: var(--vt-s-7); }
@media (min-width: 900px) {
	.vt-product div.product { grid-template-columns: 7fr 5fr; align-items: start; }
	.vt-product .summary { position: sticky; top: calc(var(--vt-header-h) + 24px); }
	.vt-product .woocommerce-tabs, .vt-product .related, .vt-product .upsells { grid-column: 1 / -1; }
}
.vt-product .woocommerce-product-gallery { position: relative; }
.vt-product .woocommerce-product-gallery__wrapper { display: grid; gap: var(--vt-s-2); margin: 0; }
@media (min-width: 900px) { .vt-product .woocommerce-product-gallery__wrapper { grid-template-columns: 1fr 1fr; } .vt-product .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; } }
.vt-product .woocommerce-product-gallery img { width: 100%; height: auto; }
.vt-product .flex-control-thumbs { display: none; }
.vt-product .product_title { font-size: var(--vt-fs-h1); }
.vt-specs { width: 100%; border-collapse: collapse; margin: var(--vt-s-5) 0; font-size: var(--vt-fs-small); }
.vt-specs th, .vt-specs td { padding: var(--vt-s-3) 0; border-bottom: 1px solid var(--vt-line); text-align: left; vertical-align: top; }
.vt-specs th { width: 40%; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vt-product-cta { margin-top: var(--vt-s-5); }
.vt-product-cta .vt-btn { flex: 1 1 220px; }
.vt-product .vt-btn--outline { color: var(--vt-ink); }
.vt-product .vt-btn--outline:hover { background: var(--vt-ink); color: var(--vt-white); border-color: var(--vt-ink); }
.vt-product .woocommerce-tabs ul.tabs { display: flex; gap: var(--vt-s-5); list-style: none; padding: 0; margin: 0 0 var(--vt-s-5); border-bottom: 1px solid var(--vt-line); }
.vt-product .woocommerce-tabs ul.tabs li a { display: block; padding: var(--vt-s-3) 0; font-weight: 700; text-transform: uppercase; font-size: var(--vt-fs-small); text-decoration: none; }
.vt-product .woocommerce-tabs ul.tabs li.active a { border-bottom: 2px solid var(--vt-gold); }

/* ---------- Pagination ---------- */
.nav-links { display: flex; gap: var(--vt-s-2); flex-wrap: wrap; }
.page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--vt-s-3); border: 1px solid var(--vt-line); text-decoration: none; font-weight: 700; }
.page-numbers.current { background: var(--vt-black); color: var(--vt-white); border-color: var(--vt-black); }

/* ---------- Lead form notices ---------- */
.vt-notice { padding: var(--vt-s-4) var(--vt-s-5); margin-bottom: var(--vt-s-5); border-left: 4px solid var(--vt-gold); background: var(--vt-cream); color: var(--vt-ink); }
.vt-notice--error { border-color: #B42318; }

/* ---------- Map facade ---------- */
.vt-map { position: relative; aspect-ratio: 16 / 9; background: var(--vt-cream); display: grid; place-items: center; }
.vt-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-map button { position: relative; }

/* ---------- Blog archive ---------- */
.vt-card h2.vt-card__title { font-size: var(--vt-fs-h3); }
.vt-card__excerpt {
	margin: var(--vt-s-2) 0 0;
	font-size: var(--vt-fs-small);
	color: var(--vt-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.45;
}