/* VelsenZA WooCommerce Colour Swatches */
.vzcs-swatch-field,
.vzcs-swatch-field * {
	box-sizing: border-box;
}

.vzcs-swatch-field {
	width: 100%;
	margin: 0;
}

/*
 * Clean up template-kit styling around enhanced variation rows. The class is
 * added by the plugin only when a real swatch field is present, leaving size
 * and other ordinary variation dropdowns untouched.
 */
table.variations.vzcs-has-swatches,
table.variations.vzcs-has-swatches > tbody,
table.variations.vzcs-has-swatches > tbody > tr.vzcs-swatch-row,
table.variations.vzcs-has-swatches > tbody > tr.vzcs-swatch-row > th,
table.variations.vzcs-has-swatches > tbody > tr.vzcs-swatch-row > td {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

table.variations.vzcs-has-swatches {
	border: 0 !important;
}

table.variations.vzcs-has-swatches > tbody > tr.vzcs-swatch-row > th.label {
	display: none !important;
}

table.variations.vzcs-has-swatches > tbody > tr.vzcs-swatch-row > td.value {
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Keep the normal WooCommerce select usable until JavaScript has initialized. */
.vzcs-swatches,
.vzcs-selected-name {
	display: none;
}

.vzcs-swatch-field.vzcs-ready .vzcs-native-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.vzcs-swatch-field.vzcs-ready .vzcs-swatches {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: var(--vzcs-gap, 10px) !important;
	width: auto !important;
}

.vzcs-swatch-field.vzcs-ready .vzcs-selected-name {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	margin: 0 0 10px !important;
	font-size: 0.875rem;
	line-height: 1.45;
}

.vzcs-selected-name__attribute {
	font-weight: 600;
}

.vzcs-selected-name__value {
	opacity: 0.7;
}

/*
 * The intentionally specific selector and important declarations below prevent
 * Elementor kits and themes from turning every form button into a full-width CTA.
 */
.variations .vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch,
.vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch {
	position: relative;
	display: inline-flex !important;
	flex: 0 0 var(--vzcs-size, 40px) !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: var(--vzcs-size, 40px) !important;
	max-width: var(--vzcs-size, 40px) !important;
	width: var(--vzcs-size, 40px) !important;
	min-height: var(--vzcs-size, 40px) !important;
	max-height: var(--vzcs-size, 40px) !important;
	height: var(--vzcs-size, 40px) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: var(--vzcs-border-width, 1px) solid var(--vzcs-border-colour, #d8dce3) !important;
	border-radius: var(--vzcs-radius, 50%) !important;
	background-color: var(--vzcs-colour, #fff) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.vzcs-swatch__image,
.vzcs-quick-add__swatch-image {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	border-radius: inherit;
	object-fit: var(--vzcs-image-fit, cover);
	pointer-events: none;
}

.vzcs-swatch:hover:not(:disabled) {
	transform: translateY(-1px);
}

.vzcs-swatch:focus-visible {
	outline: 2px solid var(--vzcs-selected-colour, #0b1b3d);
	outline-offset: 3px;
}

.variations .vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch.is-selected,
.vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch.is-selected {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 calc(var(--vzcs-selected-width, 2px) + 2px) var(--vzcs-selected-colour, #0b1b3d) !important;
}

.vzcs-swatch:disabled,
.vzcs-swatch.is-unavailable {
	opacity: 0.35;
	cursor: not-allowed;
	filter: saturate(0.55);
}

.vzcs-swatch:disabled::before,
.vzcs-swatch.is-unavailable::before {
	content: "";
	position: absolute;
	left: 5%;
	top: 50%;
	width: 90%;
	height: 1px;
	background: #8c929b;
	transform: rotate(-45deg);
	transform-origin: center;
	z-index: 2;
}

.variations .vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch--text,
.vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch--text {
	flex-basis: auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: var(--vzcs-size, 40px) !important;
	padding: 0 13px !important;
	background-color: #fff !important;
	color: inherit !important;
}

.vzcs-swatch__text {
	font: inherit;
	font-size: 0.8rem !important;
	line-height: 1;
	white-space: nowrap;
}

.vzcs-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 9px);
	z-index: 50;
	max-width: 180px;
	padding: 6px 8px;
	border-radius: 3px;
	background: #0b1b3d;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 3px);
	transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.vzcs-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	border: 4px solid transparent;
	border-top-color: #0b1b3d;
	transform: translateX(-50%);
}

.vzcs-swatch:hover .vzcs-tooltip,
.vzcs-swatch:focus-visible .vzcs-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Avoid excessive table spacing in common WooCommerce and Elementor product widgets. */
.variations td.value .vzcs-swatch-field,
.variations .value .vzcs-swatch-field {
	padding-top: 2px;
}

@media (max-width: 1024px) {
	.variations .vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch,
	.vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch {
		flex-basis: var(--vzcs-size-tablet, 38px) !important;
		width: var(--vzcs-size-tablet, 38px) !important;
		height: var(--vzcs-size-tablet, 38px) !important;
		min-width: var(--vzcs-size-tablet, 38px) !important;
		max-width: var(--vzcs-size-tablet, 38px) !important;
		min-height: var(--vzcs-size-tablet, 38px) !important;
		max-height: var(--vzcs-size-tablet, 38px) !important;
	}

	.variations .vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch--text,
	.vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch--text {
		flex-basis: auto !important;
		width: auto !important;
		max-width: none !important;
	}
}

@media (max-width: 767px) {
	.variations .vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch,
	.vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch {
		flex-basis: var(--vzcs-size-mobile, 36px) !important;
		width: var(--vzcs-size-mobile, 36px) !important;
		height: var(--vzcs-size-mobile, 36px) !important;
		min-width: var(--vzcs-size-mobile, 36px) !important;
		max-width: var(--vzcs-size-mobile, 36px) !important;
		min-height: var(--vzcs-size-mobile, 36px) !important;
		max-height: var(--vzcs-size-mobile, 36px) !important;
	}

	.variations .vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch--text,
	.vzcs-swatch-field .vzcs-swatches > button.vzcs-swatch--text {
		flex-basis: auto !important;
		width: auto !important;
		max-width: none !important;
		padding-right: 11px !important;
		padding-left: 11px !important;
	}

	.vzcs-tooltip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vzcs-swatch,
	.vzcs-tooltip {
		transition: none;
	}
}

/* Archive and Elementor Loop Grid quick add-to-cart control. */
.vzcs-quick-add,
.vzcs-quick-add * {
	box-sizing: border-box;
}

.vzcs-quick-add {
	width: 100%;
	font-family: inherit;
}

.vzcs-quick-add__selection {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	margin: 0 0 10px;
	font-size: 0.82rem;
	line-height: 1.45;
}

.vzcs-quick-add__label {
	font-weight: 600;
}

.vzcs-quick-add__selected-name {
	opacity: 0.68;
}

.vzcs-quick-add__attributes {
	display: grid;
	gap: var(--vzcs-qa-attribute-gap, 16px);
	width: 100%;
	margin: 0 0 18px;
}

.vzcs-quick-add__attribute {
	min-width: 0;
}

.vzcs-quick-add__swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--vzcs-qa-gap, var(--vzcs-gap, 10px));
	margin: 0;
}

.vzcs-quick-add button.vzcs-quick-add__swatch {
	position: relative;
	display: inline-flex !important;
	flex: 0 0 var(--vzcs-qa-size, var(--vzcs-size, 40px)) !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--vzcs-qa-size, var(--vzcs-size, 40px)) !important;
	min-width: var(--vzcs-qa-size, var(--vzcs-size, 40px)) !important;
	max-width: var(--vzcs-qa-size, var(--vzcs-size, 40px)) !important;
	height: var(--vzcs-qa-size, var(--vzcs-size, 40px)) !important;
	min-height: var(--vzcs-qa-size, var(--vzcs-size, 40px)) !important;
	max-height: var(--vzcs-qa-size, var(--vzcs-size, 40px)) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: var(--vzcs-qa-border-width, var(--vzcs-border-width, 1px)) solid var(--vzcs-qa-border-colour, var(--vzcs-border-colour, #d8dce3)) !important;
	border-radius: var(--vzcs-qa-radius, var(--vzcs-radius, 50%)) !important;
	background: var(--vzcs-qa-colour, var(--vzcs-qa-background, #fff)) !important;
	box-shadow: none !important;
	color: inherit !important;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.vzcs-quick-add__swatch-image {
	object-fit: var(--vzcs-qa-image-fit, var(--vzcs-image-fit, cover));
}

.vzcs-quick-add button.vzcs-quick-add__swatch--image {
	flex-basis: var(--vzcs-qa-image-width, var(--vzcs-qa-size, var(--vzcs-size, 40px))) !important;
	width: var(--vzcs-qa-image-width, var(--vzcs-qa-size, var(--vzcs-size, 40px))) !important;
	min-width: var(--vzcs-qa-image-width, var(--vzcs-qa-size, var(--vzcs-size, 40px))) !important;
	max-width: var(--vzcs-qa-image-width, var(--vzcs-qa-size, var(--vzcs-size, 40px))) !important;
	height: var(--vzcs-qa-image-height, var(--vzcs-qa-size, var(--vzcs-size, 40px))) !important;
	min-height: var(--vzcs-qa-image-height, var(--vzcs-qa-size, var(--vzcs-size, 40px))) !important;
	max-height: var(--vzcs-qa-image-height, var(--vzcs-qa-size, var(--vzcs-size, 40px))) !important;
}

.vzcs-quick-add button.vzcs-quick-add__swatch--text {
	flex-basis: auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 12px !important;
	background: #fff !important;
}

.vzcs-quick-add__swatch-text {
	font: inherit;
	font-size: 0.75rem !important;
	line-height: 1.1;
	white-space: nowrap;
}

.vzcs-quick-add button.vzcs-quick-add__swatch:hover:not(:disabled) {
	transform: translateY(-1px);
}

.vzcs-quick-add button.vzcs-quick-add__swatch:focus-visible {
	outline: 2px solid var(--vzcs-qa-selected-colour, var(--vzcs-selected-colour, #0b1b3d));
	outline-offset: 3px;
}

.vzcs-quick-add button.vzcs-quick-add__swatch.is-selected {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 calc(var(--vzcs-selected-width, 2px) + 2px) var(--vzcs-qa-selected-colour, var(--vzcs-selected-colour, #0b1b3d)) !important;
}

.vzcs-quick-add button.vzcs-quick-add__swatch:disabled,
.vzcs-quick-add button.vzcs-quick-add__swatch.is-unavailable {
	opacity: 0.32;
	filter: saturate(0.55);
	cursor: not-allowed !important;
}

.vzcs-quick-add button.vzcs-quick-add__swatch:disabled::before,
.vzcs-quick-add button.vzcs-quick-add__swatch.is-unavailable::before {
	content: "";
	position: absolute;
	left: 6%;
	top: 50%;
	width: 88%;
	height: 1px;
	background: #8c929b;
	transform: rotate(-45deg);
	transform-origin: center;
	z-index: 2;
}

.vzcs-quick-add__tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 9px);
	z-index: 50;
	max-width: 180px;
	padding: 6px 8px;
	border-radius: 3px;
	background: #0b1b3d;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 3px);
	transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.vzcs-quick-add__tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	border: 4px solid transparent;
	border-top-color: #0b1b3d;
	transform: translateX(-50%);
}

.vzcs-quick-add__swatch:hover .vzcs-quick-add__tooltip,
.vzcs-quick-add__swatch:focus-visible .vzcs-quick-add__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.vzcs-quick-add__actions {
	display: flex;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}

/*
 * WooCommerce inserts a "View basket" link beside the button after its
 * standard added_to_cart event. The Elementor cart drawer already provides
 * that route, so keep it out of this quick-add control without affecting any
 * links inside the drawer itself.
 */
.vzcs-quick-add a.added_to_cart.wc-forward {
	display: none !important;
}

.vzcs-quick-add__quantity-label {
	display: block;
	flex: 0 0 auto;
	margin: 0;
}

.vzcs-quick-add input.vzcs-quick-add__quantity {
	width: 66px;
	height: 100%;
	min-height: 44px;
	padding: 8px 6px;
	border: 1px solid #d8dce3;
	border-radius: 2px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: center;
}

.vzcs-quick-add .vzcs-quick-add__button,
.vzcs-quick-add a.vzcs-quick-add__button {
	display: inline-flex !important;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 12px 20px !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: #0b1b3d !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.13em;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.vzcs-quick-add .vzcs-quick-add__button:hover,
.vzcs-quick-add .vzcs-quick-add__button:focus-visible {
	background: #142a52 !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.vzcs-quick-add .vzcs-quick-add__button:disabled {
	opacity: 0.48;
	cursor: not-allowed;
	transform: none;
}

.vzcs-quick-add .vzcs-quick-add__button.is-loading {
	opacity: 0.72;
	cursor: wait;
}

.vzcs-quick-add__status {
	min-height: 1.35em;
	margin-top: 8px;
	font-size: 0.75rem;
	line-height: 1.35;
}

.vzcs-quick-add__status:empty {
	min-height: 0;
	margin-top: 0;
}

.vzcs-quick-add__status.is-success {
	color: #55745d;
}

.vzcs-quick-add__status.is-error {
	color: #a33d3d;
}

.vzcs-quick-add__editor-note {
	padding: 12px;
	border: 1px dashed #b8c0ce;
	color: #646970;
	font-size: 12px;
	line-height: 1.45;
}

@media (max-width: 767px) {
	.vzcs-quick-add__tooltip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vzcs-quick-add__swatch,
	.vzcs-quick-add__tooltip,
	.vzcs-quick-add__button {
		transition: none !important;
	}
}