/*
 * VoltNiq — WooCommerce styles. Enqueued only on store pages (see enqueue.php).
 * Consumes tokens.css. Covers: shop archive + filters, product cards, the
 * single product layout, key-spec strip, compatibility block, spec datasheet,
 * trust block, why-voltniq band, sticky add-to-cart, cart/checkout/account.
 */

/* =====================================================================
 * STORE WRAPPER
 * ================================================================== */
.wc-wrapper {
	padding-block: var(--sp-7);
}
.woocommerce-notices-wrapper:empty {
	display: none;
}

/* =====================================================================
 * SHOP ARCHIVE + FILTERS
 * ================================================================== */
.shop-header {
	margin-bottom: var(--sp-6);
}
.shop-header__title {
	font-size: var(--fs-2xl);
}
.shop-header .term-description,
.shop-header__text p {
	color: var(--c-text-dim);
	max-width: var(--w-prose);
	margin-top: var(--sp-2);
}
/* Category archive with a banner image. */
.shop-header--has-image {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	isolation: isolate;
	min-height: 220px;
	display: flex;
	align-items: flex-end;
	border: 1px solid var(--c-line);
}
.shop-header__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.shop-header__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shop-header--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(11, 15, 20, 0.92) 10%, rgba(11, 15, 20, 0.45) 100%);
}
.shop-header--has-image .shop-header__text {
	padding: var(--sp-6);
}

.shop-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--sp-7);
	align-items: start;
}

.shop-filters__toggle {
	display: none;
	width: 100%;
	margin-bottom: var(--sp-3);
}

.shop-filters__group {
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
	margin-bottom: var(--sp-4);
	background: var(--c-surface);
}
.shop-filters__legend {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	padding-inline: var(--sp-2);
	color: var(--c-text);
}
.shop-filters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}
.shop-filters__option {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-weight: var(--fw-regular);
	color: var(--c-text);
	cursor: pointer;
}
.shop-filters__option input {
	width: auto;
	accent-color: var(--c-volt);
}
.shop-filters__actions {
	display: grid;
	gap: var(--sp-2);
}

.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
	flex-wrap: wrap;
}
.woocommerce-result-count {
	color: var(--c-text-dim);
	font-size: var(--fs-sm);
	margin: 0;
}

/* =====================================================================
 * PRODUCT GRID + CARD
 * ================================================================== */
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sp-5);
}
/* Neutralise WooCommerce's default float-grid widths so our grid is even and
   cards share a consistent height per row (align-items: stretch is the grid
   default). Without this, woocommerce.css sets li.product { width: 30.75%;
   float: left } and the grid collapses to ragged columns. */
ul.products li.product,
ul.products li.product-card {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}
.product-card {
	height: 100%;
}
.product-card {
	position: relative;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.product-card:hover {
	border-color: color-mix(in srgb, var(--c-volt) 40%, var(--c-line));
	transform: translateY(-2px);
}
/* WooCommerce's product link spans thumbnail -> price; lay it out as a column. */
.product-card a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	color: inherit;
}
.product-card a.woocommerce-LoopProduct-link img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: var(--sp-3);
}
.product-card .wc-sale-flash {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 2;
}
.product-card .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	margin: 0;
	padding: 0 var(--sp-4);
	color: var(--c-text);
}
.product-card .price {
	color: var(--c-volt);
	font-weight: var(--fw-bold);
	font-size: var(--fs-md);
	padding: 0 var(--sp-4);
}
.product-card .price del { color: var(--c-text-dim); font-weight: var(--fw-regular); }
.product-card .price ins { text-decoration: none; }
.product-card .star-rating {
	color: var(--c-volt);
	font-size: var(--fs-sm);
	margin: 0 var(--sp-4);
}

.product-card__specs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding: 0 var(--sp-4);
}

.product-card .button,
.product-card .added_to_cart {
	margin: var(--sp-4);
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-surface-2);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-weight: var(--fw-semibold);
}
.product-card .button:hover {
	border-color: var(--c-volt);
	color: var(--c-volt);
}

/* =====================================================================
 * SINGLE PRODUCT — above-the-fold layout
 * ================================================================== */
/* Outer wrapper is a block; the two columns live in .single-product__top so the
   details below (spec table, trust, tabs, related) span the full width. */
.single-product__layout {
	display: block;
}
.single-product__top {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--sp-7);
	align-items: start;
}
/* Reset WooCommerce default float/width on the columns (belt-and-braces with
   dequeuing woocommerce-layout.css). */
.single-product__top .single-product__gallery,
.single-product__top .single-product__summary {
	width: auto;
	float: none;
	margin: 0;
}
.single-product__gallery {
	position: relative;
}
.single-product__gallery .woocommerce-product-gallery {
	width: 100%;
	margin: 0;
}
.single-product__details {
	margin-top: var(--sp-8);
}

/* Certification ribbon overlay (SAFETY, first fixation) */
.cert-ribbon {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 3;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
}
.cert-ribbon .badge {
	background: color-mix(in srgb, var(--c-bg) 80%, transparent);
	backdrop-filter: blur(4px);
}

.single-product__summary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}
.single-product__summary .product_title {
	font-size: var(--fs-2xl);
	margin: 0;
}
.single-product__summary .price {
	color: var(--c-volt);
	font-weight: var(--fw-bold);
	font-size: var(--fs-xl);
}
.single-product__summary .price del { color: var(--c-text-dim); font-weight: var(--fw-regular); font-size: var(--fs-md); }
.single-product__summary .price ins { text-decoration: none; }
.single-product__summary .stock {
	font-weight: var(--fw-semibold);
}
.single-product__summary .stock.in-stock { color: var(--c-ok); }
.single-product__summary .stock.out-of-stock { color: var(--c-danger); }
.single-product__summary .woocommerce-product-rating { color: var(--c-volt); }

/* Key-spec strip — instrument readouts */
.key-specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--sp-2);
}
.key-specs__item {
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	padding: var(--sp-3);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.key-specs__item--compatibility {
	border-color: color-mix(in srgb, var(--c-volt) 35%, var(--c-line));
}
.key-specs__label {
	font-size: var(--fs-xs);
	color: var(--c-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.key-specs__value {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-md);
	color: var(--c-volt);
}

/* Add-to-cart */
.single-product__summary form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
	margin: 0;
}
.single-product__summary .quantity input.qty {
	width: 84px;
	text-align: center;
}
.single-product__summary .single_add_to_cart_button {
	flex: 1 1 auto;
	background: var(--c-volt);
	color: var(--c-on-volt);
	border: 0;
	border-radius: var(--r-md);
	padding: var(--sp-4) var(--sp-5);
	font-weight: var(--fw-bold);
	font-size: var(--fs-base);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.single-product__summary .single_add_to_cart_button:hover {
	background: var(--c-volt-deep);
}
.single-product__summary .variations td { padding-block: var(--sp-2); }
.single-product__summary .reset_variations { color: var(--c-text-dim); }

/* Compatibility block */
.compat {
	border: 1px solid color-mix(in srgb, var(--c-volt) 30%, var(--c-line));
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	background: var(--c-surface);
}
.compat__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.compat__lead { color: var(--c-text); }
.compat__lead strong { color: var(--c-volt); }
.compat__finder { margin-top: var(--sp-4); }
.compat__finder-label { display: block; }
.compat__result {
	margin-top: var(--sp-3);
	padding: var(--sp-3);
	border-radius: var(--r-md);
	font-weight: var(--fw-semibold);
}
.compat__result.is-ok {
	background: color-mix(in srgb, var(--c-volt) 14%, transparent);
	color: var(--c-volt);
	border: 1px solid color-mix(in srgb, var(--c-volt) 40%, transparent);
}
.compat__result.is-caution {
	background: color-mix(in srgb, var(--c-amber) 12%, transparent);
	color: var(--c-amber);
	border: 1px solid color-mix(in srgb, var(--c-amber) 40%, transparent);
}
.compat__check { margin-top: var(--sp-4); }
.compat__check-summary {
	cursor: pointer;
	color: var(--c-text-dim);
	font-weight: var(--fw-semibold);
}
.compat__check-body { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); }
.compat__check-image { border-radius: var(--r-md); border: 1px solid var(--c-line); }
.compat__check-text { color: var(--c-text-dim); font-size: var(--fs-sm); }

/* Trust micro-row */
.trust-microrow {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: 0;
	padding: var(--sp-3) 0 0;
	border-top: 1px solid var(--c-line);
}
.trust-microrow__item {
	position: relative;
	padding-left: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-text-dim);
}
.trust-microrow__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translateY(-50%);
	background: var(--c-volt);
	border-radius: var(--r-pill);
}

/* =====================================================================
 * SINGLE PRODUCT — below the fold
 * ================================================================== */

/* Spec datasheet — light-surface "printed datasheet" inversion */
.spec-sheet {
	margin-top: var(--sp-8);
}
.spec-sheet__title { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.spec-sheet__table {
	width: 100%;
	border-collapse: collapse;
	background: #F4F7FA;
	color: #0B0F14;
	border-radius: var(--r-md);
	overflow: hidden;
}
.spec-sheet__table th,
.spec-sheet__table td {
	text-align: left;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid #D8E0E8;
}
.spec-sheet__table tr:last-child th,
.spec-sheet__table tr:last-child td { border-bottom: 0; }
.spec-sheet__table th {
	width: 40%;
	background: #E9EEF3;
	font-weight: var(--fw-semibold);
}

/* Trust block */
.trust-block { margin-top: var(--sp-8); }
.trust-block__title { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.trust-block__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-4);
}
.trust-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
}
.trust-card__title { font-size: var(--fs-base); margin-bottom: var(--sp-2); color: var(--c-volt); }
.trust-card__text { color: var(--c-text-dim); font-size: var(--fs-sm); }
.trust-card__link { display: inline-block; margin-top: var(--sp-3); font-weight: var(--fw-semibold); }
.trust-block__pay {
	list-style: none;
	display: flex;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding: 0;
}

/* Why-VoltNiq band */
.why-voltniq {
	position: relative;
	margin-top: var(--sp-8);
	border-radius: var(--r-lg);
	overflow: hidden;
	isolation: isolate;
}
.why-voltniq__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.why-voltniq::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg,
		rgba(11, 15, 20, 0.94) 35%,
		rgba(11, 15, 20, 0.7) 100%);
	z-index: -1;
}
.why-voltniq__inner { padding: var(--sp-8) var(--sp-6); }
.why-voltniq__title { font-size: var(--fs-xl); margin-bottom: var(--sp-5); }
.why-voltniq__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-5);
}
.why-voltniq__item h3 { font-size: var(--fs-base); color: var(--c-volt); margin-bottom: var(--sp-2); }
.why-voltniq__item p { color: var(--c-text-dim); font-size: var(--fs-sm); }

/* Tabs + reviews */
.woocommerce-tabs { margin-top: var(--sp-8); }
.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	padding: 0;
	margin: 0 0 var(--sp-5);
	border-bottom: 1px solid var(--c-line);
}
.woocommerce-tabs ul.tabs li {
	margin: 0;
}
.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--sp-3) var(--sp-4);
	color: var(--c-text-dim);
	font-weight: var(--fw-semibold);
	border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--c-volt);
	border-bottom-color: var(--c-volt);
}
.woocommerce-Reviews .comment-form-rating .stars a { color: var(--c-volt); }
#reviews .commentlist { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
#reviews .comment_container {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
}
.related.products,
.upsells.products { margin-top: var(--sp-8); }
.related.products > h2,
.upsells.products > h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }

/* =====================================================================
 * STICKY ADD-TO-CART
 * ================================================================== */
.sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-sticky);
	background: color-mix(in srgb, var(--c-surface) 96%, transparent);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--c-line);
	transform: translateY(110%);
	transition: transform var(--dur-base) var(--ease);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}
.sticky-atc.is-visible {
	transform: translateY(0);
}
.sticky-atc__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-block: var(--sp-3);
}
.sticky-atc__media img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--r-sm);
}
.sticky-atc__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}
.sticky-atc__title {
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sticky-atc__readout {
	font-size: var(--fs-xs);
	color: var(--c-volt);
}
.sticky-atc__price {
	color: var(--c-volt);
	font-weight: var(--fw-bold);
	white-space: nowrap;
}
.sticky-atc__button {
	flex: 0 0 auto;
}

/* =====================================================================
 * CART / CHECKOUT / ACCOUNT — styled via classes + our hooks
 * ================================================================== */
.checkout-trust,
.cart-reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: center;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	margin-bottom: var(--sp-5);
	color: var(--c-text-dim);
	font-size: var(--fs-sm);
}
.checkout-trust__item { position: relative; padding-left: var(--sp-4); }
.checkout-trust__item::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 8px; height: 8px;
	transform: translateY(-50%);
	background: var(--c-volt);
	border-radius: var(--r-pill);
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--c-line);
	text-align: left;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce form .form-row {
	margin-bottom: var(--sp-4);
}
.woocommerce #payment,
.woocommerce .woocommerce-checkout-review-order {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--sp-1);
}
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-sm);
	color: var(--c-text);
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--c-surface-2);
	color: var(--c-volt);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-volt);
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	list-style: none;
}
.woocommerce-error { border-left-color: var(--c-danger); }

/* =====================================================================
 * RESPONSIVE
 * ================================================================== */
@media (max-width: 980px) {
	/* Collapse the gallery + summary to a single column. Targets
	   .single-product__top (the actual grid); .single-product__layout is now a
	   plain block wrapper. */
	.single-product__top {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
}

@media (max-width: 860px) {
	.shop-layout {
		grid-template-columns: 1fr;
	}
	.shop-filters__toggle { display: inline-flex; }
	.shop-layout__filters-inner {
		display: none;
	}
	.shop-layout__filters.is-open .shop-layout__filters-inner {
		display: block;
	}
}

@media (max-width: 600px) {
	.sticky-atc__media,
	.sticky-atc__info { display: none; }
	.sticky-atc__inner { justify-content: space-between; }
	.sticky-atc__button { flex: 1 1 auto; }

	/* --- Single product mobile refinements --- */
	/* Smaller, non-overflowing title and section rhythm on phones. */
	.single-product__summary .product_title { font-size: var(--fs-xl); }
	.single-product__summary .price { font-size: var(--fs-lg); }
	.single-product__details { margin-top: var(--sp-7); }
	.spec-sheet,
	.trust-block,
	.why-voltniq,
	.woocommerce-tabs,
	.related.products,
	.upsells.products { margin-top: var(--sp-7); }

	/* Add-to-cart: quantity on its own line, full-width buy button. */
	.single-product__summary form.cart { gap: var(--sp-2); }
	.single-product__summary .quantity { flex: 0 0 auto; }
	.single-product__summary .single_add_to_cart_button { flex: 1 0 100%; }

	/* Tighter cards and a touch-friendly variation select. */
	.compat { padding: var(--sp-4); }
	.trust-card { padding: var(--sp-4); }
	.why-voltniq__inner { padding: var(--sp-6) var(--sp-4); }
	.single-product__summary .variations select { min-height: 44px; }

	/* Keep page content clear of the fixed sticky add-to-cart bar. */
	.single-product__layout { padding-bottom: calc(var(--sp-8) + 56px); }

	/* Spec datasheet stays readable: never let long values overflow. */
	.spec-sheet__table th { width: 45%; }
	.spec-sheet__table th,
	.spec-sheet__table td { padding: var(--sp-2) var(--sp-3); word-break: break-word; }
}