/* ==========================================================================
   HP Variation Cards — v1.2
   Cards render as <button> elements, so every theme's button styling tries
   to claim them. Everything visual is therefore reset explicitly and marked
   !important. Widths are held stable by keeping a 2px border in all states.
   ========================================================================== */
.hp-vc {
	--hp-ink: #0f0e2e;
	--hp-ink-dim: #4a4960;
	--hp-ink-muted: #8b8aa0;
	--hp-surface: #f5f5f8;
	--hp-surface-2: #ebebf0;
	--hp-line: #e6e5ec;
	--hp-white: #fff;

	--hp-display: "Syne", system-ui, sans-serif;
	--hp-body: "Space Grotesk", system-ui, sans-serif;
	--hp-mono: "Space Mono", ui-monospace, monospace;

	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Keep the native table in the DOM but out of sight. */
.hp-vc-cards .variations {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hp-vc__label {
	font-family: var(--hp-mono) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--hp-ink-muted) !important;
	margin: 0 0 12px !important;
}

/* --------------------------------------------------------------- card ---
   Full reset. Theme button rules commonly set background, colour, radius,
   text-transform, letter-spacing, min-height, box-shadow and transform.     */
.hp-vc .hp-vc__card,
.hp-vc button.hp-vc__card,
.woocommerce .hp-vc button.hp-vc__card,
.woocommerce div.product .hp-vc button.hp-vc__card {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;

	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 12px !important;
	box-sizing: border-box !important;

	background: var(--hp-white) !important;
	background-image: none !important;
	background-color: var(--hp-white) !important;
	color: var(--hp-ink) !important;

	/* 2px in every state so selection never shifts the box */
	border: 2px solid var(--hp-line) !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;

	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
	font-family: var(--hp-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;

	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.hp-vc .hp-vc__card:hover:not([disabled]),
.woocommerce .hp-vc button.hp-vc__card:hover:not([disabled]) {
	background-color: var(--hp-white) !important;
	border-color: rgba(15, 14, 46, 0.25) !important;
	color: var(--hp-ink) !important;
}

.hp-vc .hp-vc__card[aria-checked="true"],
.woocommerce .hp-vc button.hp-vc__card[aria-checked="true"],
.woocommerce div.product .hp-vc button.hp-vc__card[aria-checked="true"] {
	background-color: var(--hp-white) !important;
	border-color: var(--hp-ink) !important;
	color: var(--hp-ink) !important;
}

.hp-vc .hp-vc__card:focus,
.hp-vc .hp-vc__card:active {
	background-color: var(--hp-white) !important;
	color: var(--hp-ink) !important;
	box-shadow: none !important;
	transform: none !important;
}

.hp-vc .hp-vc__card:focus-visible {
	outline: 2px solid #7c3aed !important;
	outline-offset: -4px !important; /* inset, so it cannot widen the card */
}

.hp-vc .hp-vc__card[disabled] {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

/* -------------------------------------------------------------- badge --- */
.hp-vc .hp-vc__badge {
	flex: 0 0 auto !important;
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border-radius: 12px !important;
	background: var(--hp-surface-2) !important;
	color: var(--hp-ink-muted) !important;
	font-family: var(--hp-display) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	font-variant-numeric: tabular-nums !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.hp-vc .hp-vc__card[aria-checked="true"] .hp-vc__badge {
	background: var(--hp-ink) !important;
	color: var(--hp-white) !important;
}

/* --------------------------------------------------------------- body --- */
.hp-vc .hp-vc__body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	text-align: left !important;
}

.hp-vc .hp-vc__name {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	font-family: var(--hp-display) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	color: var(--hp-ink) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.hp-vc .hp-vc__flag {
	display: inline-block !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	background: var(--hp-ink) !important;
	color: var(--hp-white) !important;
	font-family: var(--hp-body) !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
}

.hp-vc .hp-vc__save {
	display: block !important;
	margin-top: 2px !important;
	font-family: var(--hp-body) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var(--hp-ink-dim) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* ------------------------------------------------------------ pricing --- */
.hp-vc .hp-vc__pricing {
	flex: 0 0 auto !important;
	text-align: right !important;
}

.hp-vc .hp-vc__price {
	display: block !important;
	font-family: var(--hp-display) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	color: var(--hp-ink) !important;
	font-variant-numeric: tabular-nums !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.hp-vc .hp-vc__unit {
	display: block !important;
	margin-top: 1px !important;
	font-family: var(--hp-mono) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--hp-ink-muted) !important;
	font-variant-numeric: tabular-nums !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* -------------------------------------------------------------- small --- */
@media (max-width: 420px) {
	.hp-vc .hp-vc__card {
		gap: 10px !important;
		padding: 10px !important;
	}

	.hp-vc .hp-vc__badge {
		width: 38px !important;
		height: 38px !important;
		font-size: 14px !important;
	}

	.hp-vc .hp-vc__name,
	.hp-vc .hp-vc__price {
		font-size: 15px !important;
	}

	.hp-vc .hp-vc__unit {
		font-size: 10px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-vc .hp-vc__card,
	.hp-vc .hp-vc__badge {
		transition: none !important;
	}
}

/* ==========================================================================
   BUY BOX — quantity stepper, large total, full-width CTA
   ========================================================================== */

/* Stack the variation add-to-cart area vertically. */
.hp-vc-buy-active,
.hp-vc-active {
	--hp-ink: #0f0e2e;
	--hp-ink-dim: #4a4960;
	--hp-ink-muted: #8b8aa0;
	--hp-line: #e6e5ec;
	--hp-accent: #7c3aed;
	--hp-accent-dark: #6d28d9;
	--hp-display: "Syne", system-ui, sans-serif;
	--hp-body: "Space Grotesk", system-ui, sans-serif;
	--hp-mono: "Space Mono", ui-monospace, monospace;
}

.hp-vc-buy-active {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
}

/* Woo's own bits we replace. */
.hp-vc-buy-active .quantity,
.hp-vc-active .woocommerce-variation-price,
.hp-vc-active .woocommerce-variation-availability,
.hp-vc-active .single_variation .price {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hp-vc-buy {
	--hp-ink: #0f0e2e;
	--hp-ink-muted: #8b8aa0;
	--hp-line: #e6e5ec;
	--hp-accent: #7c3aed;
	--hp-display: "Syne", system-ui, sans-serif;
	--hp-body: "Space Grotesk", system-ui, sans-serif;
	--hp-mono: "Space Mono", ui-monospace, monospace;

	display: block !important;
	width: 100% !important;
	margin: 0 0 20px !important;
}

.hp-vc-buy__label {
	font-family: var(--hp-mono) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--hp-ink-muted) !important;
	margin: 0 0 10px !important;
}

/* ----------------------------------------------------------- stepper --- */
.hp-vc-qty {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 12px !important;
	margin: 0 0 20px !important;
}

.hp-vc-buy .hp-vc-qty__btn,
.woocommerce .hp-vc-buy button.hp-vc-qty__btn {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	background: transparent !important;
	background-image: none !important;
	color: #4a4960 !important;
	border: 1px solid var(--hp-line) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color 0.15s ease, color 0.15s ease !important;
}

.hp-vc-buy .hp-vc-qty__btn svg {
	width: 15px !important;
	height: 15px !important;
	display: block !important;
}

.hp-vc-buy .hp-vc-qty__btn:hover:not([disabled]) {
	border-color: rgba(15, 14, 46, 0.3) !important;
	color: var(--hp-ink) !important;
	background: transparent !important;
}

.hp-vc-buy .hp-vc-qty__btn[disabled] {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
}

.hp-vc-qty__val {
	flex: 0 0 auto !important;
	min-width: 36px !important;
	text-align: center !important;
	font-family: var(--hp-mono) !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	color: var(--hp-ink) !important;
	font-variant-numeric: tabular-nums !important;
}

/* ------------------------------------------------------------- price --- */
.hp-vc-price {
	font-family: var(--hp-display) !important;
	font-weight: 700 !important;
	font-size: 36px !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	color: var(--hp-ink) !important;
	font-variant-numeric: tabular-nums !important;
	margin: 0 !important;
}

/* --------------------------------------------------------------- CTA --- */
.hp-vc-buy-active .hp-vc-cta,
.woocommerce .hp-vc-buy-active button.hp-vc-cta,
.woocommerce div.product .hp-vc-buy-active button.hp-vc-cta {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;

	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 20px 24px !important;
	box-sizing: border-box !important;
	float: none !important;

	background: #7c3aed !important;
	background-image: none !important;
	background-color: #7c3aed !important;
	color: #ffffff !important;

	border: 0 !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 24px -8px rgba(124, 58, 237, 0.45) !important;
	text-shadow: none !important;
	transform: none !important;

	font-family: "Space Grotesk", system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;

	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.hp-vc-buy-active .hp-vc-cta:hover:not([disabled]) {
	background-color: #6d28d9 !important;
	color: #ffffff !important;
}

.hp-vc-buy-active .hp-vc-cta:active:not([disabled]) {
	transform: translateY(1px) !important;
}

.hp-vc-buy-active .hp-vc-cta[disabled],
.hp-vc-buy-active .hp-vc-cta.disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

.hp-vc-cta__icon {
	width: 19px !important;
	height: 19px !important;
	flex: none !important;
	display: block !important;
}

.hp-vc-cta__label {
	font: inherit !important;
	color: #ffffff !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.hp-vc-buy-active .hp-vc-cta .hp-vc-cta__icon {
	color: #ffffff !important;
	stroke: #ffffff !important;
	opacity: 1 !important;
}

.hp-vc-buy-active .hp-vc-cta:hover .hp-vc-cta__label,
.hp-vc-buy-active .hp-vc-cta:hover .hp-vc-cta__icon {
	color: #ffffff !important;
	stroke: #ffffff !important;
}

@media (max-width: 420px) {
	.hp-vc-price {
		font-size: 30px !important;
	}

	.hp-vc-buy-active .hp-vc-cta {
		padding: 17px 20px !important;
		font-size: 16px !important;
	}
}

/* ==========================================================================
   EXTRA OPTIONS (add-ons)
   ========================================================================== */
.hp-vc-addons {
	--hp-ink: #0f0e2e;
	--hp-ink-dim: #4a4960;
	--hp-ink-muted: #8b8aa0;
	--hp-line: #e6e5ec;
	--hp-surface: #f5f5f8;
	--hp-accent: #7c3aed;
	--hp-body: "Space Grotesk", system-ui, sans-serif;
	--hp-mono: "Space Mono", ui-monospace, monospace;

	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 24px 0 0 !important;
	padding: 16px !important;
	border: 1px solid var(--hp-line) !important;
	border-radius: 16px !important;
	background: #fff !important;
	clear: both !important;
}

.hp-vc-addons__label {
	font-family: var(--hp-mono) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--hp-ink-muted) !important;
	margin: 0 0 12px !important;
}

.hp-vc-addons__list {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.hp-vc-addon {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	box-sizing: border-box !important;
	padding: 10px !important;
	background: #fff !important;
	border: 2px solid var(--hp-line) !important;
	border-radius: 12px !important;
	transition: border-color 0.15s ease !important;
}

.hp-vc-addon.is-on {
	border-color: rgba(124, 58, 237, 0.45) !important;
}

.hp-vc-addon__thumb {
	flex: 0 0 36px !important;
	width: 36px !important;
	height: 36px !important;
	display: grid !important;
	place-items: center !important;
	overflow: hidden !important;
	border-radius: 10px !important;
	background: var(--hp-surface) !important;
}

.hp-vc-addon__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
}

.hp-vc-addon__body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.hp-vc-addon__name {
	display: block !important;
	font-family: var(--hp-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var(--hp-ink) !important;
}

.hp-vc-addon__meta {
	display: block !important;
	margin-top: 1px !important;
	font-family: var(--hp-body) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	color: var(--hp-ink-dim) !important;
}

/* ---- checkbox ---- */
.hp-vc-addons .hp-vc-addon__check,
.woocommerce .hp-vc-addons button.hp-vc-addon__check {
	flex: 0 0 22px !important;
	display: grid !important;
	place-items: center !important;
	width: 22px !important;
	height: 22px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	background: #fff !important;
	background-image: none !important;
	border: 2px solid rgba(15, 14, 46, 0.2) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	transform: none !important;
	color: transparent !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.hp-vc-addons .hp-vc-addon__check svg {
	width: 12px !important;
	height: 12px !important;
	display: block !important;
}

.hp-vc-addons .hp-vc-addon__check[aria-checked="true"] {
	background: var(--hp-accent) !important;
	background-color: var(--hp-accent) !important;
	border-color: var(--hp-accent) !important;
	color: #fff !important;
}

/* ---- stepper ---- */
.hp-vc-addon__step {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.hp-vc-addons .hp-vc-addon__btn,
.woocommerce .hp-vc-addons button.hp-vc-addon__btn {
	flex: 0 0 28px !important;
	display: grid !important;
	place-items: center !important;
	width: 28px !important;
	height: 28px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	background: #fff !important;
	background-image: none !important;
	color: var(--hp-ink-dim) !important;
	border: 1px solid rgba(15, 14, 46, 0.1) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.hp-vc-addons .hp-vc-addon__btn svg {
	width: 12px !important;
	height: 12px !important;
	display: block !important;
}

.hp-vc-addons .hp-vc-addon__btn:hover:not([disabled]) {
	border-color: rgba(15, 14, 46, 0.3) !important;
	color: var(--hp-ink) !important;
	background: #fff !important;
}

.hp-vc-addons .hp-vc-addon__btn[disabled] {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
}

.hp-vc-addon__val {
	min-width: 20px !important;
	text-align: center !important;
	font-family: var(--hp-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hp-ink) !important;
	font-variant-numeric: tabular-nums !important;
}

@media (max-width: 420px) {
	.hp-vc-addons {
		padding: 12px !important;
	}

	.hp-vc-addon__name {
		font-size: 13px !important;
	}
}

/* ==========================================================================
   SIMPLE PRODUCTS
   form.cart is a horizontal row in most themes; force a single column so the
   stepper, price, CTA and Extra Options stack the same way they do on
   variable products.
   ========================================================================== */
form.cart.hp-vc-active,
form.cart.hp-vc-buy-active,
.woocommerce div.product form.cart.hp-vc-active {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	width: 100% !important;
}

form.cart.hp-vc-active::before,
form.cart.hp-vc-active::after {
	display: none !important;
	content: none !important;
}

/* Extra Options must never share a row with the button. */
.hp-vc-addons {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	align-self: stretch !important;
	order: 99 !important;
}

/* The add-on row itself: name and controls on one line, never stacked. */
.hp-vc-addon__body {
	display: block !important;
}

.hp-vc-addon__name {
	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

/* Keep the CTA and stepper ahead of the add-ons in the column. */
.hp-vc-buy {
	order: 1 !important;
}

form.cart.hp-vc-active .single_add_to_cart_button,
.hp-vc-buy-active .single_add_to_cart_button {
	order: 2 !important;
}

/* ==========================================================================
   CATALOG CARD
   ========================================================================== */
ul.products li.product.hp-card,
.woocommerce ul.products li.product.hp-card {
	--hp-ink: #0f0e2e;
	--hp-ink-dim: #4a4960;
	--hp-ink-muted: #8b8aa0;
	--hp-surface: #f5f5f8;
	--hp-line: #e6e5ec;
	--hp-accent: #7c3aed;
	--hp-display: "Syne", system-ui, sans-serif;
	--hp-body: "Space Grotesk", system-ui, sans-serif;
	--hp-mono: "Space Mono", ui-monospace, monospace;

	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid var(--hp-line) !important;
	border-radius: 16px !important;
	text-align: left !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.woocommerce ul.products li.product.hp-card:hover {
	box-shadow: 0 8px 28px rgba(15, 14, 46, 0.08) !important;
	transform: translateY(-2px) !important;
}

.woocommerce ul.products li.product.hp-card::before,
.woocommerce ul.products li.product.hp-card::after {
	display: none !important;
	content: none !important;
}

/* The whole card is one link. */
.hp-card > a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	text-decoration: none !important;
	color: inherit !important;
}

/* ------------------------------------------------------------- media --- */
.hp-card .hp-card__media {
	position: relative !important;
	display: grid !important;
	place-items: center !important;
	aspect-ratio: 1 / 1 !important;
	padding: 28px !important;
	background: var(--hp-surface) !important;
	overflow: hidden !important;
}

.hp-card .hp-card__media img,
.woocommerce ul.products li.product.hp-card img {
	width: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	height: auto !important;
	margin: 0 !important;
	object-fit: contain !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	mix-blend-mode: multiply !important;
}

.hp-card .hp-card__flag {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	z-index: 2 !important;
	padding: 4px 9px !important;
	border-radius: 999px !important;
	background: var(--hp-ink) !important;
	color: #fff !important;
	font-family: var(--hp-mono) !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
}

.hp-card--out .hp-card__media img {
	opacity: 0.45 !important;
}

/* -------------------------------------------------------------- body --- */
.hp-card .hp-card__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	padding: 16px !important;
}

.hp-card .hp-card__cat {
	display: inline-block !important;
	align-self: flex-start !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	background: var(--hp-surface) !important;
	color: var(--hp-ink-dim) !important;
	font-family: var(--hp-body) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}

.woocommerce ul.products li.product.hp-card .hp-card__name {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	font-family: var(--hp-display) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--hp-ink) !important;
	overflow-wrap: anywhere !important;
}

/* ------------------------------------------------------------- chips --- */
.hp-card .hp-card__chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
	margin-top: 8px !important;
}

.hp-card .hp-card__chip {
	display: inline-block !important;
	padding: 3px 6px !important;
	border-radius: 5px !important;
	background: var(--hp-surface) !important;
	color: var(--hp-ink-muted) !important;
	font-family: var(--hp-mono) !important;
	font-size: 9px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}

/* -------------------------------------------------------------- foot --- */
.hp-card .hp-card__foot {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin-top: auto !important;
	padding-top: 12px !important;
}

.woocommerce ul.products li.product.hp-card .hp-card__price,
.woocommerce ul.products li.product.hp-card .price {
	display: flex !important;
	align-items: baseline !important;
	gap: 5px !important;
	margin: 0 !important;
	font-family: var(--hp-display) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--hp-ink) !important;
}

.hp-card .hp-card__from {
	font-family: var(--hp-body) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: var(--hp-ink-muted) !important;
}

.woocommerce ul.products li.product.hp-card .price del,
.woocommerce ul.products li.product.hp-card .price ins {
	font-size: inherit !important;
	text-decoration: none !important;
	background: none !important;
}

.woocommerce ul.products li.product.hp-card .price del {
	opacity: 0.45 !important;
	text-decoration: line-through !important;
	font-weight: 400 !important;
	font-size: 13px !important;
}

.hp-card .hp-card__view {
	flex: none !important;
	font-family: var(--hp-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--hp-accent) !important;
	line-height: 1.3 !important;
}

.hp-card:hover .hp-card__view {
	text-decoration: underline !important;
}

/* Kill Woo's default loop button entirely. */
.woocommerce ul.products li.product.hp-card .button,
.woocommerce ul.products li.product.hp-card .added_to_cart {
	display: none !important;
}

@media (max-width: 480px) {
	.hp-card .hp-card__media {
		padding: 20px !important;
	}

	.hp-card .hp-card__body {
		padding: 12px !important;
	}

	.woocommerce ul.products li.product.hp-card .hp-card__name {
		font-size: 14px !important;
	}
}

/* ==========================================================================
   "FREE 3ml BAC Water" line on each dose card
   Plain text, styled exactly like the Save line above it.
   ========================================================================== */
.hp-vc .hp-vc__free {
	display: block !important;
	margin-top: 2px !important;
	font-family: "Space Grotesk", system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	color: #4a4960 !important;
	text-transform: none !important;
}

@media (max-width: 420px) {
	.hp-vc .hp-vc__free {
		font-size: 11px !important;
	}
}