/*
 * VIPAutopro Auto — product cards (global: home, archives, related products) and list pages
 * (category, shop, search, 404). Uses only skin-base.css tokens. No shadows, no motion.
 */

/* ---------- Product card, shared ---------- */
/* .vap-pcard: product-grid block. .vap-accessory: accessories block (home, related). Same look. */
.vap-pcard,
.vap-accessory {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--vap-surface);
	border: 1px solid var(--vap-line);
	border-radius: var(--vap-radius);
	box-shadow: none;
	overflow: hidden;
	transform: none;
	transition: border-color 150ms ease;
}

.vap-pcard:hover,
.vap-pcard:focus-within,
.vap-accessory:hover,
.vap-accessory:focus-within {
	border-color: var(--vap-primary);
	transform: none;
}

.vap-pcard:focus-within {
	outline: 2px solid var(--vap-primary);
	outline-offset: 2px;
}

/* Square image on white, whole picture visible. */
.vap-pcard__media,
.vap-accessory > img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	padding: 8px;
	background: var(--vap-surface);
	overflow: hidden;
}

.vap-pcard .vap-pcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vap-accessory > img {
	object-fit: contain;
}

.vap-pcard__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 8px;
	text-align: center;
	background: var(--vap-bg);
	color: var(--vap-text-2);
	font-size: var(--vap-fs-xs);
}

/* Text block: category, name (2 lines, fixed height), price, then the button at the bottom. */
.vap-pcard__body,
.vap-accessory > div {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 12px;
}

.vap-pcard__cat,
.vap-accessory > div > small {
	display: block;
	min-height: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	line-height: 15px;
	font-weight: 600;
	color: var(--vap-text-2);
}

.vap-pcard__title,
.vap-accessory > div > h3 {
	/* Two lines always, so every name in a row takes the same height. */
	height: 2.8em;
	margin: 0 0 auto;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vap-text);
}

.vap-pcard__link {
	color: var(--vap-text);
	text-decoration: none;
}

.vap-pcard__link:hover {
	color: var(--vap-primary);
}

.vap-pcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vap-pcard__link:focus-visible {
	outline: none;
}

/* Price (or "Liên hệ") pinned to the bottom of the text block. */
.vap-pcard__price,
.vap-accessory__price {
	margin: 0;
	padding-top: 8px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--vap-primary);
}

.vap-pcard__price--ask {
	font-weight: 800;
}

/* Price HTML from WooCommerce (sale/regular) keeps its own inner markup; it only inherits colour and size. */
.vap-accessory__price .woocommerce-Price-amount,
.vap-accessory__price ins,
.vap-accessory__price del {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Button: full width, 36px, outline → fill on hover, pinned to the card bottom. */
.vap-accessory > div > a,
.vap-pcard .vap-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 36px;
	margin-top: 8px;
	padding: 0 12px;
	border: 1px solid var(--vap-primary);
	border-radius: var(--vap-radius-sm);
	background: var(--vap-surface);
	color: var(--vap-primary);
	font-size: var(--vap-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.vap-accessory > div > a:hover,
.vap-pcard .vap-btn:hover {
	background: var(--vap-primary);
	color: var(--vap-surface);
}

.vap-accessory > div > a:focus-visible,
.vap-pcard .vap-btn:focus-visible {
	outline: 2px solid var(--vap-primary);
	outline-offset: 2px;
}

/* Gold badge: small, real data only. */
.vap-auto-badge {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 2px;
	background: var(--vap-accent);
	color: var(--vap-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

/* Grids of cards. */
.vap-product-grid,
.vap-accessories-grid {
	gap: var(--vap-gap);
}

.vap-product-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- WooCommerce block product list (product search results, shop blocks): same card ---------- */
ul.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* beats the columns-N class */
	gap: var(--vap-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.wc-block-product-template > li.wc-block-product {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--vap-surface);
	border: 1px solid var(--vap-line);
	border-radius: var(--vap-radius);
	overflow: hidden;
	text-align: left;
}

ul.wc-block-product-template > li.wc-block-product:hover,
ul.wc-block-product-template > li.wc-block-product:focus-within {
	border-color: var(--vap-primary);
}

ul.wc-block-product-template .wc-block-grid__product-image {
	box-sizing: border-box;
	margin: 0 !important;
	padding: 8px;
	aspect-ratio: 1 / 1;
	background: var(--vap-surface);
	overflow: hidden;
}

ul.wc-block-product-template .wc-block-grid__product-image a,
ul.wc-block-product-template .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: 100%;
}

ul.wc-block-product-template .wc-block-grid__product-image img {
	object-fit: contain !important;
}

ul.wc-block-product-template > li.wc-block-product > h2 {
	box-sizing: border-box;
	height: 2.8em;
	margin: 12px 12px auto;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	text-align: left !important;
	color: var(--vap-text);
}

ul.wc-block-product-template > li.wc-block-product > h2 a {
	color: inherit;
	text-decoration: none;
}

ul.wc-block-product-template > li.wc-block-product > h2 a:hover {
	color: var(--vap-primary);
}

ul.wc-block-product-template .wp-block-woocommerce-product-price {
	box-sizing: border-box;
	margin: 0 !important;
	padding: 8px 12px 0;
	text-align: left !important;
}

ul.wc-block-product-template .wc-block-components-product-price {
	font-size: 16px !important;
	font-weight: 800;
	line-height: 1.3;
	color: var(--vap-primary);
	text-align: left !important;
}

ul.wc-block-product-template .wc-block-components-product-price .woocommerce-Price-amount,
ul.wc-block-product-template .wc-block-components-product-price ins {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

ul.wc-block-product-template .wc-block-components-product-price del,
ul.wc-block-product-template .wc-block-components-product-price .screen-reader-text {
	display: none;
}

ul.wc-block-product-template .wp-block-woocommerce-product-button {
	box-sizing: border-box;
	margin: 8px 0 0 !important;
	padding: 0 12px 12px;
}

ul.wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link,
ul.wc-block-product-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 36px;
	margin: 0 !important;
	padding: 0 12px;
	border: 1px solid var(--vap-primary);
	border-radius: var(--vap-radius-sm);
	background: var(--vap-surface);
	color: var(--vap-primary);
	font-size: var(--vap-fs-sm) !important;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

ul.wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link:hover,
ul.wc-block-product-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button:hover {
	background: var(--vap-primary);
	color: var(--vap-surface);
}

ul.wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link:focus-visible,
ul.wc-block-product-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button:focus-visible {
	outline: 2px solid var(--vap-primary);
	outline-offset: 2px;
}

/* ---------- List pages: category, shop, search, blog index ---------- */
/* Breadcrumb */
.post-type-archive-product .vap-breadcrumb,
.tax-product_cat .vap-breadcrumb,
.search .vap-breadcrumb,
.archive .vap-breadcrumb,
.blog .vap-breadcrumb,
.error404 .vap-breadcrumb {
	padding-block: 12px;
	font-size: var(--vap-fs-xs);
}

/* Header panel: white box, category title (h1) and its short description. */
.post-type-archive-product .vap-archive-head,
.tax-product_cat .vap-archive-head,
.search .vap-archive-head,
.archive .vap-archive-head,
.blog .vap-archive-head {
	box-sizing: border-box;
	margin-block: 0 var(--vap-gap);
	padding: 16px 20px;
	background: var(--vap-surface);
	border: 1px solid var(--vap-line);
	border-radius: var(--vap-radius);
}

.post-type-archive-product .vap-archive-head h1,
.tax-product_cat .vap-archive-head h1,
.search .vap-archive-head h1,
.archive .vap-archive-head h1,
.blog .vap-archive-head h1 {
	margin: 0;
	font-size: var(--vap-fs-lg);
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--vap-primary);
	letter-spacing: 0;
}

.post-type-archive-product .vap-archive-head__intro,
.tax-product_cat .vap-archive-head__intro,
.search .vap-archive-head__intro,
.archive .vap-archive-head__intro,
.blog .vap-archive-head__intro {
	margin: 8px 0 0;
	max-width: none;
	font-size: var(--vap-fs-sm);
	line-height: 1.6;
	color: var(--vap-text-2);
}

/* Category chips: flat rectangles, same height as a button. */
.vap-archive-head .vap-chips {
	gap: 8px;
	margin-top: 12px;
}

.vap-archive-head .vap-chip {
	min-height: 36px;
	padding: 0 12px;
	border-radius: var(--vap-radius-sm);
	font-size: var(--vap-fs-sm);
}

.vap-archive-head .vap-chip.is-active {
	background: var(--vap-primary);
	border-color: var(--vap-primary);
	color: var(--vap-surface);
	font-weight: 600;
}

.vap-archive-head .vap-chip.is-active:hover {
	background: var(--vap-primary-dark);
	border-color: var(--vap-primary-dark);
	color: var(--vap-surface);
}

/* Grid section below the header. */
.post-type-archive-product .vap-products,
.tax-product_cat .vap-products,
.search .vap-products {
	padding-block: 0 48px;
}

.post-type-archive-product .vap-products__heading,
.tax-product_cat .vap-products__heading,
.search .vap-products__heading {
	margin: 0 0 var(--vap-gap);
	font-size: var(--vap-fs-md);
	font-weight: 800;
	color: var(--vap-text);
}

/* Pagination: flat squares. */
.vap-products .navigation {
	margin-top: 24px;
}

.vap-products .navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.vap-products .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 36px;
	min-height: 36px;
	padding: 0 10px;
	border: 1px solid var(--vap-line);
	border-radius: var(--vap-radius-sm);
	background: var(--vap-surface);
	color: var(--vap-text);
	font-size: var(--vap-fs-sm);
	text-decoration: none;
}

.vap-products .page-numbers:hover {
	border-color: var(--vap-primary);
	color: var(--vap-primary);
}

.vap-products .page-numbers.current {
	border-color: var(--vap-primary);
	background: var(--vap-primary);
	color: var(--vap-surface);
	font-weight: 600;
}

/* Empty category note. */
.vap-empty {
	padding-block: 32px 48px;
}

/* ---------- 404 ---------- */
.vap-auto-404 {
	padding-block: 40px 64px;
	text-align: center;
}

.vap-auto-404__code {
	margin: 0;
	font-size: var(--vap-fs-sm);
	font-weight: 800;
	color: var(--vap-primary);
}

.vap-auto-404 h1 {
	margin: 8px 0 12px;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--vap-text);
}

.vap-auto-404 > p {
	margin: 0;
	color: var(--vap-text-2);
}

.vap-auto-404 .wp-block-search {
	max-width: 560px;
	margin: 20px auto 0;
}

.vap-auto-404 .wp-block-search__inside-wrapper {
	display: flex;
	border: 1px solid var(--vap-line);
	border-radius: var(--vap-radius-sm);
	background: var(--vap-surface);
	overflow: hidden;
}

.vap-auto-404 .wp-block-search__input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	color: var(--vap-text);
	font-size: var(--vap-fs-base);
}

.vap-auto-404 .wp-block-search__button {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background: var(--vap-primary);
	color: var(--vap-surface);
	font-size: var(--vap-fs-sm);
	font-weight: 600;
}

.vap-auto-404 .wp-block-search__button:hover {
	background: var(--vap-primary-dark);
}

.vap-auto-404__cats-title {
	margin: 32px 0 12px;
	padding-bottom: 0;
	font-size: var(--vap-fs-md);
	font-weight: 800;
	color: var(--vap-text);
	text-align: center;
	border: 0;
	text-transform: none;
}

.vap-auto-404__cats-title::after {
	display: none;
}

.vap-auto-404__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vap-auto-404__cats a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--vap-primary);
	border-radius: var(--vap-radius-sm);
	background: var(--vap-surface);
	color: var(--vap-primary);
	font-size: var(--vap-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.vap-auto-404__cats a:hover {
	background: var(--vap-primary);
	color: var(--vap-surface);
}

.vap-auto-404__cats a:focus-visible {
	outline: 2px solid var(--vap-primary);
	outline-offset: 2px;
}

/* Round 2 Cavaha-inspired catalog and product-card refinement. */
.vap-pcard,
.vap-accessory,
ul.wc-block-product-template > li.wc-block-product {
	border-radius: var(--vap-radius-sm);
}

.vap-pcard__cat,
.vap-accessory > div > small {
	display: none;
}

.vap-pcard__title,
.vap-accessory > div > h3,
ul.wc-block-product-template > li.wc-block-product > h2 {
	box-sizing: border-box;
	height: 2.8em;
	margin-top: 12px;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 1.4 !important;
	color: var(--vap-dark);
}

.vap-pcard__price,
.vap-accessory__price,
ul.wc-block-product-template .wc-block-components-product-price {
	font-size: 16px !important;
	font-weight: 700;
	color: var(--vap-primary);
}

.vap-accessory__price del,
ul.wc-block-product-template .wc-block-components-product-price del {
	margin-right: 6px;
	color: var(--vap-text-2);
	font-size: 14px;
	font-weight: 400;
}

.vap-accessory__price ins,
ul.wc-block-product-template .wc-block-components-product-price ins {
	color: var(--vap-primary);
	text-decoration: none;
}

/* Reference cards have no call-to-action button; the product itself is linked. */
.vap-accessory > div > a,
.vap-pcard .vap-btn,
ul.wc-block-product-template .wp-block-woocommerce-product-button {
	display: none !important;
}

.vap-products {
	padding-block: 8px 48px;
}

.vap-products .vap-product-grid,
ul.wc-block-product-template {
	align-items: stretch;
}

.vap-pcard__body,
.vap-accessory > div {
	gap: 4px;
	padding: 10px 12px 14px;
}

/* Keep WooCommerce's real sale price pair visible and readable. */
.vap-pcard__price del {
	margin-right: 6px;
	color: var(--vap-text-2);
	font-size: 14px;
	font-weight: 400;
}

.vap-pcard__price ins {
	color: var(--vap-primary);
	text-decoration: none;
}

/* ---------- Category archive layout ---------- */
.tax-product_cat .vap-archive-tiles,
.tax-product_cat .vap-archive-head,
.tax-product_cat .vap-archive-sort,
.tax-product_cat .vap-products {
	box-sizing: border-box;
	width: min(var(--vap-container), calc(100% - 30px));
	margin-right: auto;
	margin-left: auto;
}

.tax-product_cat .vap-archive-tiles {
	box-sizing: border-box;
	padding-top: 16px;
	padding-bottom: 52px;
	border-bottom: 1px solid var(--vap-line);
}

.vap-archive-tiles__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 12px;
}

.vap-archive-tile {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 151px;
	width: 151px;
	height: 151px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--vap-line);
	border-radius: 10px;
	background: var(--vap-surface);
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
	color: var(--vap-dark);
	text-align: center;
	text-decoration: none;
}

.vap-archive-tile img {
	display: block;
	width: 100%;
	height: 96px;
	object-fit: contain;
}

.vap-archive-tile strong {
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.vap-archive-tile:hover {
	border-color: var(--vap-primary);
	color: var(--vap-primary);
}

.tax-product_cat .vap-archive-head {
	margin: 0 auto;
	padding: 48px 0 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.tax-product_cat .vap-archive-head h1 {
	font-family: var(--vap-font-head);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	color: var(--vap-dark);
}

.tax-product_cat .vap-archive-sort {
	box-sizing: border-box;
	display: flex;
	min-height: 50px;
	align-items: center;
	gap: 18px;
	padding: 8px 12px;
	background: var(--vap-bg-2);
}

.vap-archive-sort > span {
	flex: 0 0 auto;
	font-size: var(--vap-fs-sm);
	font-weight: 400;
}

.vap-archive-sort__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.vap-sort-chip {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: var(--vap-radius-sm);
	background: var(--vap-surface);
	color: var(--vap-text);
	font-size: var(--vap-fs-sm);
	text-decoration: none;
	white-space: nowrap;
}

.vap-sort-chip:hover,
.vap-sort-chip.is-active {
	background: var(--vap-primary);
	color: var(--vap-surface);
}

.tax-product_cat .vap-product-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tax-product_cat .vap-products {
	padding-top: 12px;
}

/* ---------- Phone: 2 columns, 44px touch targets ---------- */
@media (max-width: 1023px) {
	.tax-product_cat .vap-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vap-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.tax-product_cat .vap-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tax-product_cat .vap-archive-sort {
		flex-direction: column;
		justify-content: center;
		gap: 8px;
		text-align: center;
	}

	.vap-archive-sort__links {
		justify-content: center;
	}

	.vap-product-grid,
	.vap-accessories-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vap-gap);
	}

	.vap-pcard__body,
	.vap-accessory > div {
		padding: 10px;
	}

	ul.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	ul.wc-block-product-template > li.wc-block-product > h2 {
		font-size: 14px !important;
		margin: 10px 10px auto;
	}

	ul.wc-block-product-template .wc-block-components-product-price {
		font-size: 15px !important;
	}

	ul.wc-block-product-template .wp-block-woocommerce-product-button {
		padding: 0 10px 10px;
	}

	ul.wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link,
	ul.wc-block-product-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
		min-height: 44px;
	}

	.vap-pcard__title,
	.vap-accessory > div > h3 {
		font-size: 14px;
	}

	.vap-pcard__price,
	.vap-accessory__price {
		font-size: 15px;
	}

	.vap-accessory > div > a,
	.vap-pcard .vap-btn {
		min-height: 44px;
	}

	.post-type-archive-product .vap-archive-head,
	.tax-product_cat .vap-archive-head,
	.search .vap-archive-head,
	.archive .vap-archive-head,
	.blog .vap-archive-head {
		padding: 12px 14px;
	}

	.tax-product_cat .vap-archive-head {
		padding-right: 0;
		padding-left: 0;
	}

	.tax-product_cat .vap-archive-head h1 {
		font-size: 28px;
	}

	.vap-archive-head .vap-chip {
		min-height: 44px;
	}

	.vap-products .page-numbers {
		min-width: 44px;
		min-height: 44px;
	}

	.vap-auto-404 {
		padding-block: 28px 48px;
	}

	.vap-auto-404 .wp-block-search__input,
	.vap-auto-404 .wp-block-search__button,
	.vap-auto-404__cats a {
		min-height: 44px;
	}
}

/* Breadcrumb on the same content edge as the page (container 1160, 15px gutter on phones). */
.vap-breadcrumb.vap-wrap {
	box-sizing: border-box;
	width: min(var(--vap-container), calc(100% - 2 * var(--vap-gutter)));
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
	padding-left: 0;
}