.dynamic-select {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	position: relative;
	width: 100%;
	user-select: none;
}
.dynamic-select .dynamic-select-header {
	border: 1px solid #dee2e6;
	padding: 7px 30px 7px 12px;
}
.dynamic-select .dynamic-select-header::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
	height: 12px;
	width: 12px;
}
.dynamic-select .dynamic-select-header.dynamic-select-header-active {
	border-color: #c1c9d0;
}
.dynamic-select .dynamic-select-header.dynamic-select-header-active::after {
	transform: translateY(-50%) rotate(180deg);
}
.dynamic-select
	.dynamic-select-header.dynamic-select-header-active
	+ .dynamic-select-options {
	display: flex;
}
.dynamic-select .dynamic-select-header .dynamic-select-header-placeholder {
	color: #65727e;
}
.dynamic-select .dynamic-select-options {
	display: none;
	box-sizing: border-box;
	flex-flow: wrap;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 999;
	margin-top: 5px;
	padding: 5px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}
.dynamic-select .dynamic-select-options::-webkit-scrollbar {
	width: 5px;
}
.dynamic-select .dynamic-select-options::-webkit-scrollbar-track {
	background: #f0f1f3;
}
.dynamic-select .dynamic-select-options::-webkit-scrollbar-thumb {
	background: #cdcfd1;
}
.dynamic-select .dynamic-select-options::-webkit-scrollbar-thumb:hover {
	background: #b2b6b9;
}
.dynamic-select .dynamic-select-options .dynamic-select-option {
	padding: 7px 12px;
}
.dynamic-select .dynamic-select-options .dynamic-select-option:hover,
.dynamic-select .dynamic-select-options .dynamic-select-option:active {
	background-color: #f3f4f7;
}
.dynamic-select .dynamic-select-header,
.dynamic-select .dynamic-select-option {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	width: 100%;
	height: 45px;
	font-size: 16px;
	color: #212529;
}
.dynamic-select .dynamic-select-header img,
.dynamic-select .dynamic-select-option img {
	object-fit: contain;
	max-height: 100%;
	max-width: 100%;
}
.dynamic-select .dynamic-select-header img.dynamic-size,
.dynamic-select .dynamic-select-option img.dynamic-size {
	object-fit: fill;
	max-height: none;
	max-width: none;
	border: 1px solid black;
}
.dynamic-select .dynamic-select-header img,
.dynamic-select .dynamic-select-header svg,
.dynamic-select .dynamic-select-header i,
.dynamic-select .dynamic-select-header span,
.dynamic-select .dynamic-select-option img,
.dynamic-select .dynamic-select-option svg,
.dynamic-select .dynamic-select-option i,
.dynamic-select .dynamic-select-option span {
	box-sizing: border-box;
	margin-right: 10px;
}
.dynamic-select .dynamic-select-header.dynamic-select-no-text,
.dynamic-select .dynamic-select-option.dynamic-select-no-text {
	justify-content: center;
}
.dynamic-select .dynamic-select-header.dynamic-select-no-text img,
.dynamic-select .dynamic-select-header.dynamic-select-no-text svg,
.dynamic-select .dynamic-select-header.dynamic-select-no-text i,
.dynamic-select .dynamic-select-header.dynamic-select-no-text span,
.dynamic-select .dynamic-select-option.dynamic-select-no-text img,
.dynamic-select .dynamic-select-option.dynamic-select-no-text svg,
.dynamic-select .dynamic-select-option.dynamic-select-no-text i,
.dynamic-select .dynamic-select-option.dynamic-select-no-text span {
	margin-right: 0;
}
.dynamic-select .dynamic-select-header .dynamic-select-option-text,
.dynamic-select .dynamic-select-option .dynamic-select-option-text {
	box-sizing: border-box;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	font-size: inherit;
}

.dynamic-select-header {
	width: 100% !important;
}

input:invalid {
	/* background-color: blue; */
	border: none;
	outline: 2px solid red;
	border-radius: 5px;
}

input ::after :invalid {
	content: "propriété invalide";
}

.dynamic-select-option {
	height: 100% !important;
}

#cimg-container {
	/* background-image: url("https://wordpress.envoys.fr/wp-content/uploads/2025/02/samoa-600x271.png"); */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	height: 98%;
	width: 100%;
	position: absolute;
	background-blend-mode: hard-light;
	background-color: #7e6e5e;
	top: 0;
	left: 0;
	float: left;
}

.woocommerce-product-gallery__wrapper {
	position: relative;
}

.st-image-container {
	/* height: 150%; */
	display: flow-root;
	/* background-color: red; */
	/* position: absolute; */
	/* z-index: 0; */
}

.woocommerce-product-gallery {
	position: sticky !important;
	top: 4em;
	/* background-color: #e6ebef; */
	padding: 2em !important;
	/* border: 1px solid #0671b8; */
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	margin: 2em 0 0 0;
	height: 50em;
	min-height: 40em;
	/* height: fit-content; */
}

.dynamic-select-option.dynamic-select-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
	display: none;
}

@font-face {
	font-family: mine;
	src: url(/wp-content/themes/astra/assets/css/test.ttf);
}

.myfont {
	font-family: mine;
}

.form-label {
	width: fit-content;
	text-wrap: nowrap;
	display: flex;
	flex-flow: column;
}

.forme-container {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	border: none
}

.spaced-form {
	padding-bottom: 100%;
}

.accesible {
	position: relative;
}

@media (max-width: 544px) {
	.woocommerce-product-gallery {
	position: static !important;
	}

	.st-image-container {
	position: static;
	height: 100%;
	}
}

.separator {
	margin: 1em auto;
	width: 100%;
	height: 1px;
	background-color: var(--ast-border-color);
}

/* reuse the CSS from above, but hide/show via a data attribute too */
.info--js .info__tip{ /* hidden by default */ }
.info--js[data-open="true"] .info__tip{
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

:root{
	--tip-bg: #111;
	--tip-fg: #fff;
	--tip-radius: 8px;
	--tip-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.info{
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: .4rem;
	outline: none;
	justify-self: right;

}

.info__icon{
	display: inline-grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
	padding: 0;
	font: 600 0.8rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	border: 1px solid #999;
	border-radius: 50%;
	color: white;
	background: #0170b9;
	cursor: default;
	font-size: 1rem;
	text-transform: none;
}

.info__tip{
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);       /* show above the icon */
	transform: translateX(-50%) translateY(6px);
	min-width: 220px;
	max-width: 320px;
	padding: .55rem .7rem;
	background: var(--tip-bg);
	color: var(--tip-fg);
	border-radius: var(--tip-radius);
	box-shadow: var(--tip-shadow);
	font-size: .875rem;
	line-height: 1.25rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 10;
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	white-space: normal;
}

/* little arrow */
.info__tip::after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 10px; height: 10px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--tip-bg);
}

/* show on hover or keyboard focus */
.info:hover .info__tip,
.info:focus-within .info__tip{
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}


.info-btn {
	border-radius: 50%;
	padding: 0;
	width: 1.5em;
	height: 1.5em;
	font-weight: 600;
	/* margin-left: 0.4em; */
	margin-top: 10px;
	justify-self: right;
}

.related > h2,
.description-st {
	font-size: 2.5em;
	color: orange;
	margin: 0.5em 0;
}

.related .product-type-simple {
	border-radius: 10px;
	border: 1px solid orange !important;
	padding: 1em !important;
}

.related {
	margin: 0 0 3em 0
}

.spaced {
	margin-bottom: 1em !important;
}