/* Camu Swatches — base layout plus the "button design" profile camu.fi was configured with.
   Theme rules (style.css, header.php, Customizer CSS) build on these same class names. */

/* The original <select> stays in the DOM for WooCommerce, out of sight. */
.vi-wpvs-select-attribute { display: none !important; visibility: hidden; }

.vi-wpvs-variation-wrap-wrap { max-width: 100%; padding-left: 8px; }
.vi-wpvs-variation-wrap { max-width: 100%; display: inline-flex; flex-wrap: wrap; text-align: center; justify-content: flex-start; }

.vi-wpvs-variation-wrap .vi-wpvs-option-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 5px 12px 8px 0;
	cursor: pointer;
	transition: all 30ms ease-in-out;
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap:last-child { margin-right: 0; }
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-loop .vi-wpvs-option-wrap { margin: 0 8px 8px 0; }
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-button .vi-wpvs-option-wrap { padding: 0 5px; }

.vi-wpvs-variation-wrap .vi-wpvs-option-wrap .vi-wpvs-option {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	overflow: hidden;
	line-height: normal;
	transform: translateZ(0);
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap .vi-wpvs-option.vi-wpvs-option-image { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0 !important; }

/* Rows on the product page: one attribute per row, label above the chips. */
.vi-wpvs-variation-style { display: grid !important; width: 100%; max-width: 100%; height: auto !important; margin-bottom: 10px; border: unset !important; background: none !important; grid-auto-columns: auto; grid-auto-rows: auto; }
.vi-wpvs-variation-style.vi-wpvs-variation-style-vertical { grid-template-columns: auto; grid-gap: 0; }
.woocommerce .variations_form.vi_wpvs_variation_form .vi-wpvs-variation-style td,
.woocommerce-page .variations_form.vi_wpvs_variation_form .vi-wpvs-variation-style td { width: 100%; border: unset; }
.vi-wpvs-variation-style .vi-wpvs-variation-style-content:not(.vi_variation_container) { margin: unset !important; background: transparent; }
.vi-wpvs-variation-style .vi-wpvs-variation-wrap-wrap { padding-left: unset; }
.vi_wpvs_variation_form:not(.vi_wpvs_loop_variation_form) .vi-wpvs-variation-wrap-wrap,
.vi_wpvs_variation_form:not(.vi_wpvs_loop_variation_form) .vi-wpvs-variation-wrap-wrap .vi-wpvs-variation-wrap { justify-content: flex-start; text-align: left; }
.vi-wpvs-label-selected { margin-left: 10px; }

/* Button design: grey outline, dark fill when hovered or selected. */
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap { padding: 10px 20px; font-size: 13px; }
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap .vi-wpvs-option { border-radius: inherit; }
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-default { box-shadow: 0 0 0 1px #cccccc inset; color: #212121; background: #ffffff; }
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-default .vi-wpvs-option { color: #212121; }
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-hover,
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected { box-shadow: 0 0 0 1px #212121 inset; color: #ffffff; background: #212121; }
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-hover .vi-wpvs-option,
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected .vi-wpvs-option { color: #ffffff; }
/* The theme drops the fill of the selected button and, on product pages only (.single), turns its text black; the
   quick-view popup on category pages needs the same, or the selected size is white on white. */
#yith-quick-view-content .vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected .vi-wpvs-option { color: #000000; }

/* Colour chips show the variation image in a square tile. */
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-variation_img.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap { width: 48px; height: 48px; }
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-variation_img.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap .vi-wpvs-option { width: 46px; height: 46px; }

/* Catalog cards: smaller chips. */
.vi-wpvs-variation-wrap-loop.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap { font-size: 8px; }
.vi-wpvs-variation-wrap-loop.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-variation_img.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap { width: 31.2px !important; height: 31.2px !important; }
.vi-wpvs-variation-wrap-loop.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-variation_img.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap .vi-wpvs-option { width: 29.2px; height: 29.2px; }

@media screen and (max-width: 600px) {
	.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap { font-size: 11px; }
	.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-variation_img.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap { width: 40.8px; height: 40.8px; }
	.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-variation_img.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap .vi-wpvs-option { width: 32.68px; height: 32.68px; }
}

/* Unavailable values ("blur + icon"): faded chip crossed by two thin red lines. */
.vi-wpvs-option-out-of-stock-attribute-icon { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-out-of-stock,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-out-of-stock-attribute,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-disable { border-color: rgba(192, 185, 200, 0.26); }
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-disable { cursor: not-allowed; }
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-out-of-stock .vi-wpvs-option-out-of-stock-attribute-icon,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-out-of-stock-attribute .vi-wpvs-option-out-of-stock-attribute-icon,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-disable .vi-wpvs-option-out-of-stock-attribute-icon { display: block; }
.vi-wpvs-option-out-of-stock-attribute-icon::before,
.vi-wpvs-option-out-of-stock-attribute-icon::after { content: ''; display: none; position: absolute; top: calc(50% - 1px); left: 0; z-index: 2; width: 100%; height: 1px; background: #ff3136; }
.vi-wpvs-option-out-of-stock-attribute-icon::before { transform: rotate(-45deg); }
.vi-wpvs-option-out-of-stock-attribute-icon::after { transform: rotate(45deg); }
.vi-wpvs-variation-wrap[data-out_of_stock="blur_icon"] .vi-wpvs-option-wrap:is(.vi-wpvs-option-wrap-out-of-stock, .vi-wpvs-option-wrap-out-of-stock-attribute, .vi-wpvs-option-wrap-disable) .vi-wpvs-option-out-of-stock-attribute-icon::before,
.vi-wpvs-variation-wrap[data-out_of_stock="blur_icon"] .vi-wpvs-option-wrap:is(.vi-wpvs-option-wrap-out-of-stock, .vi-wpvs-option-wrap-out-of-stock-attribute, .vi-wpvs-option-wrap-disable) .vi-wpvs-option-out-of-stock-attribute-icon::after { display: block; }
.vi-wpvs-variation-wrap[data-out_of_stock="blur_icon"] .vi-wpvs-option-wrap:is(.vi-wpvs-option-wrap-out-of-stock, .vi-wpvs-option-wrap-out-of-stock-attribute, .vi-wpvs-option-wrap-disable) .vi-wpvs-option { opacity: .5; }

/* Catalog-card form. */
.vi_wpvs_loop_variation_form { position: relative; display: flex; clear: both; margin: 0; padding: 0; }
.vi_wpvs_loop_variation_form table { margin: 7px 0 0 0; border: none; }
.vi_wpvs_loop_variation_form td,
.vi_wpvs_loop_variation_form .vi_variation_container { padding: 0; border: unset; background: inherit !important; }
.vi_wpvs_loop_variation_form .vi-wpvs-variation-wrap-wrap { padding: 0; }
.vi_variation_container { display: flex; align-items: center; margin: unset; }
.vi_variation_container .vi-wpvs-variation-wrap-loop.vi-wpvs-variation-wrap { padding-left: 0; }
.vi_wpvs_loop_action,
.vi_wpvs_loop_variation_form,
.vi_wpvs_loop_variation_form .vi-wpvs-variation-style,
.vi_wpvs_loop_variation_form .vi_variation_container,
.vi_wpvs_loop_variation_form .vi_variation_container .vi-wpvs-variation-wrap-wrap,
.vi_wpvs_loop_variation_form .vi_variation_container .vi-wpvs-variation-wrap-loop.vi-wpvs-variation-wrap { justify-content: center; text-align: center; }
.vi_wpvs_loop_variation_hidden { display: none !important; visibility: hidden !important; }