/*!
 * InterDiamant Variation Cards v0.1.6
 * Designed and built by Delta 3 B.V. — https://delta3.nl
 * Copyright 2026 Delta 3 B.V.
 */

/* ---------------------------------------------------------------
   Hidden select: stays in the DOM as the source of truth for
   WooCommerce, but out of sight and out of the tab order.
   --------------------------------------------------------------- */
.ivc-hidden-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ivc-hidden-select select {
	display: none !important;
}

/* ---------------------------------------------------------------
   Theme chevron reset.
   The theme draws its dropdown arrow as a CSS triangle (::after with
   border-width + border-top-color, absolutely positioned right:10px)
   on elements inside the variation cell. Our spans inherit it, which
   produced one stray arrow per text line. Neutralised here.
   --------------------------------------------------------------- */
.ivc-group::before,
.ivc-group::after,
.ivc-group *::before,
.ivc-group *::after {
	content: none !important;
	border: 0 !important;
	background-image: none !important;
}

/* ---------------------------------------------------------------
   Groups
   --------------------------------------------------------------- */
.ivc-group {
	--ivc-accent: #E9530D;
	--ivc-bg: #1c1c1c;
	--ivc-border: #3a3a3a;
	--ivc-text: #ffffff;
	--ivc-muted: #a8a8a8;
	--ivc-cols: 7;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 6px;
}

.ivc-group.ivc-mode-pills {
	display: grid;
	grid-template-columns: repeat(var(--ivc-cols), minmax(0, 1fr));
	gap: 10px;
	justify-items: stretch;
}

.ivc-group.ivc-mode-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

/* ---------------------------------------------------------------
   Options
   --------------------------------------------------------------- */
.ivc-option {
	background: var(--ivc-bg);
	border: 1px solid var(--ivc-border);
	border-radius: 0;
	color: var(--ivc-text);
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: border-color 0.15s ease;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.ivc-mode-pills .ivc-option {
	font-size: 14px;
	line-height: 1.2;
	padding: 11px 8px;
	text-align: center;
}

.ivc-mode-cards .ivc-option {
	display: block;
	padding: 14px 16px;
}

.ivc-option:hover:not(.is-unavailable) {
	border-color: var(--ivc-accent);
	background: var(--ivc-bg);
	color: var(--ivc-text);
}

.ivc-option:focus-visible {
	outline: 2px solid var(--ivc-accent);
	outline-offset: 2px;
}

.ivc-option.is-selected {
	border: 2px solid var(--ivc-accent);
	color: var(--ivc-accent);
	font-weight: 600;
}

.ivc-mode-pills .ivc-option.is-selected {
	padding: 10px 7px;
}

.ivc-mode-cards .ivc-option.is-selected {
	padding: 13px 15px;
}

.ivc-option.is-unavailable {
	opacity: 0.4;
	cursor: default;
}

.ivc-label {
	display: block;
	font-size: 15px;
	font-weight: 600;
}

.ivc-mode-cards .ivc-option.is-selected .ivc-label {
	color: var(--ivc-accent);
}

.ivc-desc {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ivc-muted);
}

/* ---------------------------------------------------------------
   Stacked layout: labels above the options.
   The table keeps its markup; only the display roles change, so the
   th/td relationship and WooCommerce's own scripts are unaffected.
   --------------------------------------------------------------- */
.ivc-labels-above .variations,
.ivc-labels-above .variations tbody,
.ivc-labels-above .variations tr,
.ivc-labels-above .variations th.label,
.ivc-labels-above .variations td.value {
	display: block;
	width: auto;
	max-width: none;
}

.ivc-labels-above .variations tr {
	margin-bottom: 22px;
}

.ivc-labels-above .variations th.label {
	padding: 0 0 8px;
	text-align: left;
}

.ivc-labels-above .variations th.label label {
	margin: 0;
}

.ivc-labels-above .variations td.value {
	padding: 0;
}

/* ---------------------------------------------------------------
   Clear link.
   WooCommerce floats this to the right, where it drifts away from the
   options it belongs to. Anchored under the last group instead, and
   optionally mirrored next to the price (added by ivc.js).
   --------------------------------------------------------------- */
.ivc-active .reset_variations,
.ivc-active .ivc-clear-mirror {
	display: inline-block;
	float: none !important;
	margin-top: 10px;
	padding: 4px 10px;
	border: 1px solid var(--ivc-border, #3a3a3a);
	color: var(--ivc-accent, #E9530D);
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.ivc-active .reset_variations:hover,
.ivc-active .ivc-clear-mirror:hover {
	border-color: var(--ivc-accent, #E9530D);
	text-decoration: none;
}

.ivc-active .ivc-clear-mirror {
	margin: 0 0 12px;
}

/* Placement: hide whichever copy the setting does not call for. */
.ivc-clear-summary .reset_variations {
	display: none !important;
}

.ivc-clear-options .ivc-clear-mirror {
	display: none !important;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 980px) {
	.ivc-group.ivc-mode-pills {
		grid-template-columns: repeat(min(var(--ivc-cols), 5), minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.ivc-group.ivc-mode-pills {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.ivc-group.ivc-mode-cards {
		grid-template-columns: 1fr 1fr;
	}
	.ivc-mode-cards .ivc-option:not(.is-selected) .ivc-desc {
		display: none;
	}
}

@media (max-width: 480px) {
	.ivc-group.ivc-mode-pills {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ivc-group.ivc-mode-cards {
		grid-template-columns: 1fr;
	}
}