/* Plugin68 Variation Cards: storefront. Every rule is scoped to p68vc classes so themes stay untouched. */

.p68vc,
.p68vc-box,
.p68vc-notice,
.p68vc-compare {
	--p68vc-accent: #e11d48;
	--p68vc-on-accent: #fff;
	--p68vc-radius: 8px;
	--p68vc-line: rgba(127, 127, 127, .28);
	--p68vc-surface: rgba(127, 127, 127, .06);
	--p68vc-muted: rgba(127, 127, 127, 1);
	box-sizing: border-box;
}

.p68vc-tone-auto {
	--p68vc-line: color-mix(in srgb, currentColor 18%, transparent);
	--p68vc-surface: color-mix(in srgb, currentColor 4%, transparent);
	--p68vc-muted: color-mix(in srgb, currentColor 68%, transparent);
}

.p68vc-tone-light {
	--p68vc-line: #e4e4e7;
	--p68vc-surface: #ffffff;
	--p68vc-muted: #52525b;
}

.p68vc-tone-dark {
	--p68vc-line: #2c2f3b;
	--p68vc-surface: #161821;
	--p68vc-muted: #a1a1aa;
}

/* A forced tone colours only parts with their own background; headings stay in the theme's text colour. */
.p68vc-tone-light .p68vc-card,
.p68vc-tone-light .p68vc-chip,
.p68vc-box.p68vc-tone-light,
.p68vc-notice.p68vc-tone-light {
	color: #18181b;
}

.p68vc-tone-dark .p68vc-card,
.p68vc-tone-dark .p68vc-chip,
.p68vc-box.p68vc-tone-dark,
.p68vc-notice.p68vc-tone-dark {
	color: #f4f4f5;
}

.p68vc-notice.p68vc-tone-light {
	background: color-mix(in srgb, var(--p68vc-tone) 8%, #ffffff);
}

.p68vc-notice.p68vc-tone-dark {
	background: color-mix(in srgb, var(--p68vc-tone) 14%, #161821);
}

.p68vc-compare.p68vc-tone-light {
	background: #ffffff;
	color: #18181b;
}

.p68vc-compare.p68vc-tone-dark {
	background: #161821;
	color: #f4f4f5;
}

.p68vc *,
.p68vc *::before,
.p68vc *::after,
.p68vc-box *,
.p68vc-notice *,
.p68vc-compare * {
	box-sizing: border-box;
}

/* Woo's select stays in the form for its scripts and for other plugins, just out of sight. */
.p68vc-native {
	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;
}

/* The attribute table becomes a stack of full-width rows. */
table.variations.p68vc-table,
table.variations:has(.p68vc) {
	display: block !important;
	width: 100% !important;
	margin: 0 0 16px !important;
	border: 0 !important;
	background: none !important;
	table-layout: auto !important;
}

table.variations.p68vc-table > tbody,
table.variations.p68vc-table > tbody > tr,
table.variations.p68vc-table > tbody > tr > th,
table.variations.p68vc-table > tbody > tr > td,
table.variations:has(.p68vc) > tbody,
table.variations:has(.p68vc) > tbody > tr,
table.variations:has(.p68vc) > tbody > tr > th,
table.variations:has(.p68vc) > tbody > tr > td {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
	line-height: inherit;
}

table.variations.p68vc-table > tbody > tr,
table.variations:has(.p68vc) > tbody > tr {
	position: relative;
	margin: 0 0 16px !important;
}

table.variations.p68vc-table > tbody > tr:last-child,
table.variations:has(.p68vc) > tbody > tr:last-child {
	margin-bottom: 0 !important;
}

table.variations.p68vc-table > tbody > tr > th,
table.variations:has(.p68vc) > tbody > tr > th {
	margin: 0 0 8px !important;
	font-weight: 600;
}

table.variations > tbody > tr.p68vc-row-cards > th,
table.variations > tbody > tr:has(.p68vc--cards) > th {
	display: none !important;
}

table.variations.p68vc-table > tbody > tr > td::before,
table.variations.p68vc-table > tbody > tr > td::after,
table.variations:has(.p68vc) > tbody > tr > td.value::before,
table.variations:has(.p68vc) > tbody > tr > td.value::after {
	display: none !important;
}

table.variations.p68vc-table .reset_variations,
table.variations:has(.p68vc) .reset_variations {
	display: inline-block;
	margin: 10px 0 0;
	font-size: .875em;
}

table.variations > tbody > tr.p68vc-row-cards:only-child .reset_variations,
table.variations > tbody > tr:only-child:has(.p68vc--cards) .reset_variations {
	display: none !important;
}

.p68vc {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: min(1em, 16px);
	text-align: left;
	container-type: inline-size;
}

.p68vc-box,
.p68vc-notice,
.p68vc-compare {
	font-size: min(1em, 16px);
}

.p68vc__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
}

.p68vc__label {
	font-size: 1.08em;
	font-weight: 700;
	line-height: 1.3;
}

.p68vc .p68vc__compare {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: inherit;
	opacity: .78;
	font-size: .875em;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	border: 0;
	background: none;
}

.p68vc .p68vc__compare:hover {
	opacity: 1;
	color: var(--p68vc-accent);
}

.p68vc-chevron {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

.p68vc__grid {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.p68vc--cols-1 .p68vc__grid { grid-template-columns: minmax(0, 1fr); }
.p68vc--cols-2 .p68vc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p68vc--cols-3 .p68vc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p68vc--cols-4 .p68vc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.p68vc-card {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	min-height: 112px;
	margin: 0;
	padding: 12px 14px 14px;
	overflow: hidden;
	border: 1px solid var(--p68vc-line);
	border-radius: var(--p68vc-radius);
	background: var(--p68vc-surface);
	color: inherit;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.p68vc--size-compact .p68vc-card {
	min-height: 0;
	padding: 10px 12px;
}

.p68vc--size-large .p68vc-card {
	min-height: 156px;
	padding: 14px 16px 16px;
}

.p68vc-card:hover {
	border-color: color-mix(in srgb, var(--p68vc-accent) 55%, var(--p68vc-line));
}

.p68vc-card:focus {
	outline: none;
}

.p68vc-card:focus-visible,
.p68vc-chip:focus-visible {
	outline: 2px solid var(--p68vc-accent);
	outline-offset: 2px;
}

.p68vc-card.is-selected {
	border-color: var(--p68vc-accent);
	box-shadow: 0 0 0 1px var(--p68vc-accent), 0 0 22px -6px color-mix(in srgb, var(--p68vc-accent) 70%, transparent);
}

.p68vc-card.has-image {
	color: #fff;
	background: #0b0c10;
	border-color: rgba(255, 255, 255, .14);
}

.p68vc-card.has-image.is-selected {
	border-color: var(--p68vc-accent);
}

.p68vc .p68vc-card .p68vc-card__img {
	position: absolute !important;
	inset: 0 !important;
	z-index: -2;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover !important;
	opacity: 1 !important;
	transform: none;
}

.p68vc-card__shade {
	--p68vc-o: .55;
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8, 9, 12, calc(var(--p68vc-o) * .45)) 0%, rgba(8, 9, 12, var(--p68vc-o)) 62%, rgba(8, 9, 12, calc(var(--p68vc-o) + .1)) 100%);
	pointer-events: none;
}

.p68vc-card.is-selected .p68vc-card__shade {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--p68vc-accent) 30%, transparent) 0%, transparent 70%),
		linear-gradient(180deg, rgba(8, 9, 12, calc(var(--p68vc-o) * .45)) 0%, rgba(8, 9, 12, var(--p68vc-o)) 62%, rgba(8, 9, 12, calc(var(--p68vc-o) + .1)) 100%);
}

.p68vc-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	min-height: 22px;
	margin: 0;
	padding: 0 0 6px;
}

.p68vc-card__top:not(:has(.p68vc-card__badge)) {
	position: absolute;
	z-index: 1;
	top: 12px;
	right: 12px;
	min-height: 0;
	padding: 0;
}

.p68vc-card:not(:has(.p68vc-card__badge)) .p68vc-card__title {
	padding-right: 30px;
}

.p68vc--no-check .p68vc-card .p68vc-card__title {
	padding-right: 0;
}

.p68vc-card__badge {
	display: inline-block;
	max-width: 100%;
	padding: 3px 8px;
	overflow: hidden;
	border-radius: max(2px, calc(var(--p68vc-radius) * .5));
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.p68vc-card__check {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	margin-left: auto;
	border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 50%;
	transition: background-color .15s ease, border-color .15s ease;
}

.p68vc--no-check .p68vc-card__check {
	display: none;
}

.p68vc-card.is-selected .p68vc-card__check {
	border-color: var(--p68vc-accent);
	background: var(--p68vc-accent);
	box-shadow: 0 0 10px color-mix(in srgb, var(--p68vc-accent) 60%, transparent);
}

.p68vc-card.is-selected .p68vc-card__check::after {
	content: "";
	position: absolute;
	left: 6.5px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid var(--p68vc-on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.p68vc-card__title {
	display: block;
	margin: auto 0 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.p68vc--size-large .p68vc-card__title {
	font-size: 1.18em;
}

.p68vc-card__sub {
	display: block;
	color: var(--p68vc-muted);
	font-size: .86em;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.p68vc-card.has-image .p68vc-card__sub {
	color: rgba(255, 255, 255, .8);
}

.p68vc-card__price {
	display: block;
	margin-top: 4px;
	color: var(--p68vc-accent);
	font-weight: 700;
	line-height: 1.3;
}

.p68vc-card.has-image .p68vc-card__price {
	color: #fff;
}

.p68vc .p68vc-card__price *,
.p68vc-compare .p68vc-compare__table td * {
	color: inherit !important;
	background: none !important;
	font-size: inherit;
	font-weight: inherit;
}

.p68vc-card__price del {
	margin-right: 4px;
	color: inherit;
	opacity: .6;
	font-size: .85em;
	font-weight: 400;
}

.p68vc-card__price ins {
	color: inherit;
	background: none;
	text-decoration: none;
}

.p68vc-card__price .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.p68vc-card__stock {
	display: none;
	align-self: flex-start;
	margin-top: 4px;
	padding: 1px 6px;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	opacity: .85;
}

.p68vc-card.is-out .p68vc-card__stock {
	display: inline-block;
}

.p68vc-card.is-out .p68vc-card__title,
.p68vc-card.is-out .p68vc-card__sub,
.p68vc-card.is-out .p68vc-card__price,
.p68vc-card.is-out .p68vc-card__img {
	opacity: .55 !important;
}

.p68vc-card.is-unavailable,
.p68vc-chip.is-unavailable {
	opacity: .45;
	border-style: dashed;
}

/* Chips for the remaining attributes. */
.p68vc--chips .p68vc__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.p68vc-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 40px;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--p68vc-line);
	border-radius: max(4px, calc(var(--p68vc-radius) * .75));
	background: var(--p68vc-surface);
	color: inherit;
	font-size: .95em;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.p68vc-chip:hover {
	border-color: color-mix(in srgb, var(--p68vc-accent) 55%, var(--p68vc-line));
}

.p68vc-chip.is-selected {
	border-color: var(--p68vc-accent);
	box-shadow: 0 0 0 1px var(--p68vc-accent);
	font-weight: 600;
}

.p68vc-chip.is-out {
	text-decoration: line-through;
	opacity: .55;
}

/* Highlights of the selected card. */
.p68vc-box {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--p68vc-line);
	border-radius: var(--p68vc-radius);
	background: var(--p68vc-surface);
}

.p68vc-box[hidden],
.p68vc-notice[hidden],
.p68vc-notice__link[hidden] {
	display: none !important;
}

.p68vc-box .p68vc-box__list {
	display: grid;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.p68vc-box .p68vc-box__list > li {
	position: relative;
	margin: 0 !important;
	padding: 0 0 0 22px !important;
	line-height: 1.45;
	list-style: none !important;
	background: none !important;
}

.p68vc-box .p68vc-box__list > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--p68vc-accent);
	box-shadow: 0 0 8px color-mix(in srgb, var(--p68vc-accent) 55%, transparent);
}

.p68vc-box .p68vc-box__list > li::marker {
	content: none;
}

/* Notice under the add to cart button. */
.p68vc-notice {
	--p68vc-tone: #16a34a;
	display: flex;
	align-items: center;
	gap: 14px;
	clear: both;
	width: 100%;
	margin: 16px 0;
	padding: 12px 14px 12px 16px;
	border: 1px solid color-mix(in srgb, var(--p68vc-tone) 38%, transparent);
	border-radius: var(--p68vc-radius);
	background: color-mix(in srgb, var(--p68vc-tone) 9%, transparent);
	line-height: 1.4;
}

.p68vc-notice--warning {
	--p68vc-tone: #d97706;
}

.p68vc-notice--neutral {
	--p68vc-tone: #71717a;
}

.p68vc-notice__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--p68vc-tone);
	color: #fff;
}

.p68vc-notice__icon svg {
	display: block;
}

.p68vc-notice__text {
	flex: 1;
	min-width: 0;
	padding-left: 14px;
	border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-weight: 500;
}

.p68vc-notice .p68vc-notice__link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	padding: 6px 10px 6px 12px;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: max(4px, calc(var(--p68vc-radius) * .75));
	color: inherit;
	font-size: .875em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
}

.p68vc-notice .p68vc-notice__link:hover {
	border-color: currentColor;
}

/* Comparison dialog. */
.p68vc-compare {
	width: min(880px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 48px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--p68vc-line);
	border-radius: var(--p68vc-radius);
	background: #fff;
	color: #18181b;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.p68vc-compare[open] {
	display: flex;
	flex-direction: column;
}

.p68vc-compare::backdrop {
	background: rgba(0, 0, 0, .55);
}

.p68vc-compare__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--p68vc-line);
	font-size: 1.05em;
}

.p68vc-compare__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
}

.p68vc-compare__close:hover,
.p68vc-compare__close:focus-visible {
	opacity: 1;
	background: var(--p68vc-surface);
	outline: none;
}

.p68vc-compare__scroll {
	overflow: auto;
}

.p68vc-compare .p68vc-compare__table {
	width: 100%;
	min-width: 480px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: .95em;
}

.p68vc-compare .p68vc-compare__table th,
.p68vc-compare .p68vc-compare__table td {
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--p68vc-line);
	background: none;
	color: inherit;
	text-align: center;
	vertical-align: middle;
	line-height: 1.4;
}

.p68vc-compare .p68vc-compare__table tbody th {
	font-weight: 500;
	text-align: left;
}

.p68vc-compare .p68vc-compare__table thead th {
	vertical-align: bottom;
}

.p68vc-compare .p68vc-compare__table tr:last-child > * {
	border-bottom: 0;
}

.p68vc-compare .p68vc-compare__table .is-current {
	background: color-mix(in srgb, var(--p68vc-accent) 9%, transparent);
}

.p68vc-compare__name {
	display: block;
	font-weight: 700;
}

.p68vc-compare__sub {
	display: block;
	margin-top: 2px;
	color: var(--p68vc-muted);
	font-size: .82em;
	font-weight: 400;
}

.p68vc-compare .p68vc-compare__yes {
	display: inline-block;
	color: var(--p68vc-accent) !important;
	stroke: currentColor;
	vertical-align: middle;
}

.p68vc-compare .p68vc-compare__table ins {
	text-decoration: none;
}

.p68vc-compare__no {
	opacity: .45;
}

.p68vc-compare .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Variation price shown in the main price instead. */
.p68vc-swapped .woocommerce-variation-price {
	display: none !important;
}

@container (max-width: 420px) {
	.p68vc--cards.p68vc--rich.p68vc--cols-3.p68vc-mobile-stack .p68vc__grid,
	.p68vc--cards.p68vc--rich.p68vc--cols-4.p68vc-mobile-stack .p68vc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

@container (max-width: 300px) {
	.p68vc--cards.p68vc--cols-3.p68vc-mobile-stack .p68vc__grid,
	.p68vc--cards.p68vc--cols-4.p68vc-mobile-stack .p68vc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

@container (max-width: 520px) {
	.p68vc--cards.p68vc--cols-4.p68vc-mobile-stack .p68vc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 300px) {
	.p68vc--cards.p68vc--cols-2.p68vc-mobile-stack .p68vc__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container (max-width: 420px) {
	.p68vc--cards.p68vc-mobile-stack .p68vc-card {
		min-height: 0;
	}

	.p68vc--cards:not(.p68vc--rich) .p68vc-card {
		padding: 10px 12px;
	}

	.p68vc--cards.p68vc-mobile-stack .p68vc-card.has-image {
		min-height: 96px;
	}

	.p68vc--cards.p68vc-mobile-scroll .p68vc__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 72%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding: 2px 2px 8px;
		scrollbar-width: thin;
	}

	.p68vc--cards.p68vc-mobile-scroll .p68vc-card {
		scroll-snap-align: start;
	}
}

/* The chosen phone columns follow the screen, not the column: a narrow summary on desktop is not a phone. */
@media (max-width: 600px) {
	.p68vc-phone-1 .p68vc__grid { grid-template-columns: minmax(0, 1fr) !important; }
	.p68vc-phone-2 .p68vc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.p68vc-phone-3 .p68vc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 480px) {
	.p68vc-notice {
		flex-wrap: wrap;
	}

	.p68vc-notice__text {
		flex-basis: calc(100% - 42px);
	}

	.p68vc-notice .p68vc-notice__link {
		margin-left: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.p68vc-card,
	.p68vc-chip,
	.p68vc-card__check {
		transition: none;
	}
}