/* ==========================================================================
   VoxQ WooCommerce — product cards, grids, price, badges, rating
   ========================================================================== */

/* ---------- Grid ---------- */
.voxq-grid {
	display: grid;
	gap: var(--vxq-spacing-lg) var(--vxq-spacing-md);
}

.voxq-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.voxq-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.voxq-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.voxq-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }

ul.products.voxq-grid {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ---------- Product card ---------- */
.voxq-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--vxq-color-surface);
	border-radius: var(--vxq-radius-md);
	overflow: hidden;
	transition: box-shadow var(--vxq-duration) var(--vxq-ease), transform var(--vxq-duration) var(--vxq-ease);
}

.voxq-product-card:hover {
	box-shadow: var(--vxq-shadow-md);
}

.voxq-product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--vxq-color-surface-muted);
}

.voxq-product-card__link {
	display: block;
	width: 100%;
	height: 100%;
}

.voxq-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--vxq-duration-slow) var(--vxq-ease), transform 0.6s var(--vxq-ease);
}

.voxq-product-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.voxq-product-card__link:hover .voxq-product-card__img--hover {
	opacity: 1;
}

.voxq-product-card__link:hover .voxq-product-card__img:not(.voxq-product-card__img--hover) {
	opacity: 0;
}

.voxq-product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--vxq-color-faint);
	font-size: var(--vxq-font-size-sm);
}

/* Badges */
.voxq-product-card__badges {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	z-index: 2;
}

.voxq-badge--sale { background: var(--vxq-color-sale); color: #fff; }
.voxq-badge--new { background: var(--vxq-color-new); color: #fff; }
.voxq-badge--soldout { background: var(--vxq-color-soldout); color: #fff; }
.voxq-badge--featured { background: var(--vxq-color-primary); color: #fff; }

.voxq-product-card__badges .voxq-badge {
	padding: 0.3125rem 0.5rem;
	border-radius: var(--vxq-radius-sm);
	font-size: 0.6875rem;
	letter-spacing: var(--vxq-letter-spacing-meta);
	text-transform: uppercase;
}

/* Action icons */
.voxq-product-card__actions {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	z-index: 3;
}

.voxq-product-card__actions .voxq-icon-btn {
	background: var(--vxq-color-surface-alpha);
	backdrop-filter: blur(4px);
	box-shadow: var(--vxq-shadow-sm);
	opacity: 0;
	transform: translateX(6px);
	transition: opacity var(--vxq-duration) var(--vxq-ease), transform var(--vxq-duration) var(--vxq-ease), background var(--vxq-duration) var(--vxq-ease);
}

.voxq-product-card:hover .voxq-product-card__actions .voxq-icon-btn,
.voxq-product-card:focus-within .voxq-product-card__actions .voxq-icon-btn {
	opacity: 1;
	transform: translateX(0);
}

.voxq-product-card__actions .voxq-icon-btn:nth-child(2) { transition-delay: 0.03s; }
.voxq-product-card__actions .voxq-icon-btn:nth-child(3) { transition-delay: 0.06s; }

.voxq-product-card__actions .voxq-icon-btn.is-active {
	color: var(--vxq-color-sale);
}

.voxq-product-card__actions .voxq-icon-btn.is-active svg {
	fill: currentColor;
}

/* Quick add */
.voxq-product-card__quick-add {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem;
	z-index: 3;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--vxq-duration) var(--vxq-ease), transform var(--vxq-duration) var(--vxq-ease);
}

.voxq-product-card:hover .voxq-product-card__quick-add,
.voxq-product-card:focus-within .voxq-product-card__quick-add {
	opacity: 1;
	transform: translateY(0);
}

/* Body */
.voxq-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--vxq-spacing-md);
	flex: 1;
}

.voxq-product-card__category {
	margin: 0;
	font-size: 0.6875rem;
}

.voxq-product-card__title {
	font-family: var(--vxq-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.voxq-product-card__title a {
	color: var(--vxq-color-text);
}

.voxq-product-card__title a:hover {
	color: var(--vxq-color-accent-text);
}

.voxq-product-card__price {
	font-weight: 600;
	margin-top: 0.125rem;
}

.voxq-product-card__price del {
	color: var(--vxq-color-faint);
	font-weight: 400;
	margin-right: 0.375rem;
}

.voxq-product-card__price ins {
	text-decoration: none;
}

/* Rating */
.voxq-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	color: var(--vxq-color-accent);
}

.voxq-rating__count {
	margin-left: 0.375rem;
	font-size: var(--vxq-font-size-xs);
	color: var(--vxq-color-muted);
}

.voxq-star--empty {
	color: var(--vxq-color-border-strong);
}

.voxq-star svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

/* Swatches inside card */
.voxq-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.5rem;
}

.voxq-swatch {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--vxq-radius-full);
	border: 1px solid var(--vxq-color-border-strong);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	font-weight: 700;
	background: var(--vxq-color-surface);
	padding: 0;
	transition: border-color var(--vxq-duration) var(--vxq-ease), transform var(--vxq-duration) var(--vxq-ease);
}

.voxq-swatch:hover {
	border-color: var(--vxq-color-primary);
	transform: scale(1.08);
}

.voxq-swatch.is-selected {
	border-color: var(--vxq-color-primary);
	box-shadow: 0 0 0 2px var(--vxq-color-surface), 0 0 0 3px var(--vxq-color-primary);
}

.voxq-swatch.is-disabled {
	opacity: 0.35;
	text-decoration: line-through;
	pointer-events: none;
}

.voxq-swatch--label {
	width: auto;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border-radius: var(--vxq-radius-sm);
	border: 1px solid var(--vxq-color-border-strong);
}

.voxq-swatch--label.is-selected {
	background: var(--vxq-color-primary);
	color: #fff;
	border-color: var(--vxq-color-primary);
}

/* Price styles (single + card) */
.voxq-price {
	font-weight: 600;
}

.voxq-price del {
	color: var(--vxq-color-faint);
	font-weight: 400;
}

/* Pagination */
.woocommerce-pagination {
	margin-top: var(--vxq-spacing-xl);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--vxq-color-border-strong);
	border-radius: var(--vxq-radius-sm);
	font-weight: 600;
}

.woocommerce-pagination .page-numbers.current {
	background: var(--vxq-color-primary);
	color: #fff;
	border-color: var(--vxq-color-primary);
}

/* ---------- WooCommerce theme guardrails ----------
   These rules are deliberately scoped to the VoxQ body class. They keep
   native WooCommerce output, extension output and notices in the same warm
   palette without changing the product-card or single-product language. */
body.voxq .woocommerce,
body.voxq .woocommerce-page {
	color: var(--vxq-color-text);
}

body.voxq .woocommerce h1,
body.voxq .woocommerce h2,
body.voxq .woocommerce h3,
body.voxq .woocommerce h4,
body.voxq .woocommerce h5,
body.voxq .woocommerce h6 {
	color: var(--vxq-color-text);
}

body.voxq .woocommerce a:not(.voxq-btn):not(.button):not(.remove) {
	color: var(--vxq-color-text);
}

body.voxq .woocommerce a:not(.voxq-btn):not(.button):not(.remove):hover {
	color: var(--vxq-color-accent-text);
}

body.voxq .woocommerce a.button,
body.voxq .woocommerce button.button,
body.voxq .woocommerce input.button,
body.voxq .woocommerce #respond input#submit {
	border: 1px solid var(--vxq-color-primary);
	border-radius: var(--vxq-radius-sm);
	background: var(--vxq-color-primary);
	color: var(--vxq-color-on-primary);
	font-family: var(--vxq-font-body);
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none;
}

body.voxq .woocommerce a.button:hover,
body.voxq .woocommerce button.button:hover,
body.voxq .woocommerce input.button:hover,
body.voxq .woocommerce #respond input#submit:hover {
	border-color: var(--vxq-color-primary-hover);
	background: var(--vxq-color-primary-hover);
	color: var(--vxq-color-on-primary);
}

body.voxq .woocommerce .woocommerce-breadcrumb,
body.voxq .voxq-breadcrumb {
	margin: 0 0 var(--vxq-spacing-md);
	color: var(--vxq-color-muted);
	font-size: var(--vxq-font-size-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.voxq .voxq-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.voxq .woocommerce .woocommerce-breadcrumb a,
body.voxq .voxq-breadcrumb a {
	color: var(--vxq-color-muted);
}

body.voxq .woocommerce .woocommerce-breadcrumb a:hover,
body.voxq .voxq-breadcrumb a:hover {
	color: var(--vxq-color-accent-text);
}

body.voxq .voxq-breadcrumb__sep {
	color: var(--vxq-color-faint);
}

body.voxq .woocommerce-message,
body.voxq .woocommerce-info,
body.voxq .woocommerce-error {
	margin: 0 0 var(--vxq-spacing-md);
	padding: 0.875rem 1rem;
	border: 1px solid var(--vxq-color-border);
	border-left: 3px solid var(--vxq-color-accent);
	border-radius: var(--vxq-radius-sm);
	background: var(--vxq-color-accent-soft);
	color: var(--vxq-color-text);
	font-size: var(--vxq-font-size-sm);
	list-style: none;
}

body.voxq .woocommerce-message {
	border-left-color: var(--vxq-color-success);
	background: #eaf4ee;
}

body.voxq .woocommerce-error {
	border-left-color: var(--vxq-color-danger);
	background: #fbeae7;
	color: var(--vxq-color-danger);
}

body.voxq .woocommerce-message a:not(.button),
body.voxq .woocommerce-info a:not(.button),
body.voxq .woocommerce-error a:not(.button) {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

body.voxq .woocommerce form .form-row label {
	color: var(--vxq-color-text);
}

body.voxq .woocommerce form .form-row .required {
	color: var(--vxq-color-danger);
}

body.voxq .woocommerce .star-rating,
body.voxq .woocommerce p.stars a,
body.voxq .woocommerce .star-rating span {
	color: var(--vxq-color-accent);
}

body.voxq .woocommerce .select2-container--default .select2-selection--single {
	min-height: 2.875rem;
	border: 1px solid var(--vxq-color-border-strong);
	border-radius: var(--vxq-radius-sm);
	background: var(--vxq-color-surface);
}

body.voxq .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0.65rem 0.875rem;
	color: var(--vxq-color-text);
	line-height: 1.5;
}

body.voxq .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0.5rem;
	right: 0.5rem;
}

body.voxq .woocommerce .select2-dropdown {
	border-color: var(--vxq-color-border-strong);
	background: var(--vxq-color-surface);
}

body.voxq .woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected],
body.voxq .woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
	background: var(--vxq-color-primary);
	color: var(--vxq-color-on-primary);
}

/* Responsive grid */
@media (max-width: 1023px) {
	.voxq-grid--cols-4, .voxq-grid--cols-5 { grid-template-columns: repeat(3, 1fr); }
	.voxq-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.voxq-grid--cols-4, .voxq-grid--cols-5, .voxq-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
	.voxq-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.voxq-product-card__actions .voxq-icon-btn {
		opacity: 1;
		transform: none;
	}
	.voxq-product-card__quick-add {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 420px) {
	.voxq-grid--cols-4, .voxq-grid--cols-5, .voxq-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}