/* =========================================
   BASE
========================================= */

.po-variations-wrap{display: flex; flex-wrap: wrap; gap: 20px; margin-bottom:20px}

table.variations{width: 100%}

a.reset_variations{display: none!important}






/* =========================================
   SELECT
========================================= */

/* =========================================
   PO VARIATIONS ONLY
========================================= */

.po-variations-wrap .variations th.label{display: none!important}

.po-type-select {
	display: flex;
	flex-wrap: wrap;
}

.po-type-select .po-variation-label {
	margin-bottom: 10px;
}

.po-type-select select {
	width: 100%;
	border: var(--po-select-border-width) solid var(--po-select-border-colour);
	border-radius: var(--po-select-border-radius);
	padding: 10px 14px;
	-webkit-appearance: none !important;
	box-sizing: border-box;
}



.po-variations-wrapper {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	width: 100%
}

.po-variation-group,
.po-variation-label {
	width: 100%;
}

.po-variation-group {
	display: flex;
	flex-wrap: wrap;
}

.po-variation-options {
	width: 100%;
}

.po-variation-option {
	box-sizing: border-box;
}


/* =========================================
   LABEL ALIGNMENT
========================================= */

.po-variation-label{margin-bottom:10px}

.po-variation-label.tal { text-align: left; }
.po-variation-label.tac { text-align: center; }
.po-variation-label.tar { text-align: right; }


/* =========================================
   RADIO
========================================= */

.po-type-radio {
	display: flex;
	flex-wrap: wrap;
	gap: var(--po-gap);
}

.po-type-radio .po-variation-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--po-gap);
	width: 100%;
}

/* Layout modes */
.po-type-radio.justify-left .po-variation-options { justify-content: flex-start; }
.po-type-radio.center .po-variation-options { justify-content: center; }
.po-type-radio.evenly .po-variation-options { justify-content: space-between; }

/* Position left = auto width */
.po-type-radio.position-left .po-variation-option {
	flex: 0 0 auto;
}

/* Buttons */
.po-type-radio .po-variation-option {
	padding: 10px 14px;
	border: none;
	background: var(--po-radio-bg);
	color: var(--po-radio-text);
	cursor: pointer;
	display: inline-block;
}

.po-type-radio .po-variation-option.active {
	background: var(--po-radio-bg-active);
	color: var(--po-radio-text-active);
}

/* Holder */
.po-type-radio .po-variation-options.has-holder-border {
	border: var(--po-radio-holder-border-width) solid var(--po-radio-holder-border-colour);
	padding: 4px;
}

/* Styles */
.po-radio-style-rounded .po-variation-options button {
	border-radius: var(--po-radio-radius);
}

.po-radio-style-pill .po-variation-options button {
	border-radius: 50px;
}

.po-radio-style-pill .po-variation-options.has-holder-border {
	border-radius: 50px;
}

.po-radio-style-rounded .po-variation-options.has-holder-border {
	border-radius: calc(var(--po-radio-radius) + 4px + var(--po-radio-holder-border-width));
}

/* Position-left override */
.po-variation-group.position-left .po-variation-options.has-holder-border {
	border: none !important;
	padding: 0;
}

.po-variation-group.position-left .po-variation-options button.po-variation-option {
	width: auto !important;
	flex: none;
	padding-left: 20px;
	padding-right: 20px;
}

.po-variation-group.position-left .po-variation-options.has-holder-border button.po-variation-option {
	border: var(--po-radio-holder-border-width) solid var(--po-radio-holder-border-colour);
}


/* =========================================
   RADIO ITEMS PER ROW
========================================= */

.po-type-radio.po-items-1 .po-variation-option { flex: 0 0 100%; }
.po-type-radio.po-items-2 .po-variation-option { flex: 0 0 calc((100% - var(--po-gap)) / 2); }
.po-type-radio.po-items-3 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 2)) / 3); }
.po-type-radio.po-items-4 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 3)) / 4); }
.po-type-radio.po-items-5 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 4)) / 5); }
.po-type-radio.po-items-6 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 5)) / 6); }
.po-type-radio.po-items-7 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 6)) / 7); }
.po-type-radio.po-items-8 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 7)) / 8); }
.po-type-radio.po-items-9 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 8)) / 9); }
.po-type-radio.po-items-10 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 9)) / 10); }

@media (max-width: 768px) {
	.po-type-radio.po-mobile-items-1 .po-variation-option { flex: 0 0 100%; }
	.po-type-radio.po-mobile-items-2 .po-variation-option { flex: 0 0 calc((100% - var(--po-gap)) / 2); }
	.po-type-radio.po-mobile-items-3 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 2)) / 3); }
	.po-type-radio.po-mobile-items-4 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 3)) / 4); }
	.po-type-radio.po-mobile-items-5 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 4)) / 5); }
	.po-type-radio.po-mobile-items-6 .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 5)) / 6); }
}


/* =========================================
   IMAGE
========================================= */

.po-type-image .po-variation-option {
	display: block;
	border: var(--po-image-border-width) solid var(--po-image-border-colour);
	border-radius: var(--po-image-radius);
	overflow: hidden;
	position: relative;
	background: transparent;
}

.po-type-image .po-variation-option img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--po-image-radius) - var(--po-image-border-width) - 4px);
}

.po-type-image .po-variation-option span {
	display: block;
	padding: 8px;
}

.po-type-image .po-variation-option.has-radius {
	padding: 4px !important;
}

.po-type-image .po-variation-option:hover,
.po-type-image .po-variation-option.active {
	border-color: var(--po-image-border-active);
}


/* =========================================
   IMAGE LAYOUT
========================================= */

.po-type-image:not(.po-carousel) .po-variation-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--po-gap);
}

/* Layout modes */
.po-type-image.justify-left .po-variation-options { justify-content: flex-start; }
.po-type-image.center .po-variation-options { justify-content: center; }
.po-type-image.evenly .po-variation-options { justify-content: space-between; }

.po-type-image.position-left .po-variation-option {
	flex: 0 0 auto;
}

/* Items per row */
.po-type-image.po-items-1:not(.po-carousel) .po-variation-option { flex: 0 0 100%; }
.po-type-image.po-items-2:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - var(--po-gap)) / 2); }
.po-type-image.po-items-3:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 2)) / 3); }
.po-type-image.po-items-4:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 3)) / 4); }
.po-type-image.po-items-5:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 4)) / 5); }
.po-type-image.po-items-6:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 5)) / 6); }
.po-type-image.po-items-7:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 6)) / 7); }
.po-type-image.po-items-8:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 7)) / 8); }
.po-type-image.po-items-9:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 8)) / 9); }
.po-type-image.po-items-10:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 9)) / 10); }

@media (max-width: 768px) {
	.po-type-image.po-mobile-items-1:not(.po-carousel) .po-variation-option { flex: 0 0 100%; }
	.po-type-image.po-mobile-items-2:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - var(--po-gap)) / 2); }
	.po-type-image.po-mobile-items-3:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 2)) / 3); }
	.po-type-image.po-mobile-items-4:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 3)) / 4); }
	.po-type-image.po-mobile-items-5:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 4)) / 5); }
	.po-type-image.po-mobile-items-6:not(.po-carousel) .po-variation-option { flex: 0 0 calc((100% - (var(--po-gap) * 5)) / 6); }
}

/* Carousel safety */
.po-type-image.po-carousel .po-variation-option {
	width: 100%;
}


/* =========================================
   DISABLED
========================================= */

.po-variation-option.disabled {
	opacity: 0.3;
	pointer-events: none;
	cursor: not-allowed;
}

.po-type-image .po-variation-option.disabled {
	border-color: #ccc !important;
}


/* =========================================
   OWL CAROUSEL BUTTONS
========================================= */

.po-carousel .owl-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

.po-carousel .owl-nav button {
	pointer-events: all;
	position: absolute;
	border: none;
	padding: 10px;
	cursor: pointer;
	background: transparent; /* 👈 important */
}

/* ICON COLOUR */
.po-carousel .owl-nav button i {
	color: var(--po-carousel-icon);
	transition: 0.2s; font-size: 24px
}

.po-carousel .owl-nav button:hover i {
	color: var(--po-carousel-icon-hover);
}

.po-carousel .owl-nav button.disabled{opacity: 0.5}

/* =========================================
   POSITIONS
========================================= */

.po-carousel-sides .owl-prev { left: -40px; }
.po-carousel-sides .owl-next { right: -40px; }

.po-carousel-sides2 .owl-prev { left: 0px; }
.po-carousel-sides2 .owl-next { right: 0px; }

.po-carousel-sides2 .po-variation-options{padding-left:30px; padding-right:30px}

.po-carousel-bottom .owl-nav {
	position: relative;
	top: auto;
	transform: none;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.po-carousel-bottom .owl-nav button {
	position: relative;
	left: auto;
	right: auto;
}


.owl-dots{margin-top:20px; display: flex; justify-content: center; gap: 10px}

.owl-dots button.owl-dot span{width: 12px; height: 12px; background-color: var(--po-carousel-icon); display: inline-block; border-radius: 100%}

.owl-dots button.owl-dot.active span{background-color: var(--po-carousel-icon-hover)}