/* Mamutek – konfigurator zaproszenia na karcie produktu */

form.cart:has(.mamutek-pers) {
	display: block !important;
}
form.cart:has(.mamutek-pers) .quantity {
	display: none !important;
}

.mamutek-pers {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0 0 24px;
	padding-top: 22px;
	border-top: var(--wp--custom--przeszycie-jasne, 1.5px dashed #c9a88c);
	color: var(--wp--preset--color--czekolada);
	font-size: 16px;
}
.mamutek-pers fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.mamutek-pers legend,
.mamutek-pers__legenda {
	display: block;
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: 12px;
	font-weight: 700;
}
.mamutek-pers legend + * {
	clear: both;
}
.mamutek-pers__papier-nazwa {
	font-weight: 400;
}
.mamutek-pers .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 1. Wzór – kafelki */
.mamutek-pers__wzory {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: 10px;
}
.mamutek-pers__wzor input,
.mamutek-pers__papier input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.mamutek-pers__wzor span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 16px;
	border: 1.5px dashed var(--wp--preset--color--nitka);
	background: var(--wp--preset--color--krem);
	text-align: center;
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
}
.mamutek-pers__wzor input:checked + span {
	border: 2.5px solid var(--wp--preset--color--czekolada);
}
.mamutek-pers__wzor input:focus-visible + span,
.mamutek-pers__papier input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--butelka);
	outline-offset: 2px;
}

/* 2. Papier – kółka */
.mamutek-pers__papiery {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.mamutek-pers__papier > span {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--kolor);
	border: 1.5px solid var(--wp--preset--color--nitka);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--krem);
	box-sizing: border-box;
	cursor: pointer;
}
.mamutek-pers__papier input:checked + span {
	border: 2.5px solid var(--wp--preset--color--czekolada);
}

/* 3. Treść */
.mamutek-pers__pola {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 12px;
}
.mamutek-pers__pole {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	color: var(--wp--preset--color--kakao);
}
.mamutek-pers__pole abbr {
	text-decoration: none;
	color: var(--wp--preset--color--karmel);
}
.mamutek-pers input[type="text"],
.mamutek-pers select {
	min-height: 48px;
	box-sizing: border-box;
	width: 100%;
	padding: 0 16px;
	border-radius: 14px;
	border: 1.5px solid var(--wp--preset--color--karmel);
	background: var(--wp--preset--color--krem);
	color: var(--wp--preset--color--czekolada);
	font: inherit;
	font-size: 16px;
}
.mamutek-pers input[type="text"]::placeholder {
	color: var(--wp--preset--color--nitka);
}
.mamutek-pers select {
	max-width: 240px;
}
.mamutek-pers__notka {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--wp--preset--color--kakao);
}

/* 4. Dodatki */
.mamutek-pers__dodatki {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mamutek-pers__dodatek {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	cursor: pointer;
}
.mamutek-pers__dodatek input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--wp--preset--color--czekolada);
}
.mamutek-pers__dodatek-nazwa {
	flex: 1;
}
.mamutek-pers__dodatek-cena {
	color: var(--wp--preset--color--kakao);
	font-size: 15px;
}

/* Podsumowanie */
.mamutek-pers__podsumowanie {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border: 2px dashed var(--wp--preset--color--karmel);
	border-radius: 24px;
}
.mamutek-pers__suma-wiersz {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0;
}
.mamutek-pers__suma {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 22px;
	white-space: nowrap;
}
.mamutek-pers__podsumowanie .single_add_to_cart_button {
	width: 100%;
	min-height: 52px;
	margin: 0 !important;
	float: none !important;
}
.mamutek-pers__wlasny {
	text-align: center;
	font-weight: 700;
	text-underline-offset: 4px;
	padding: 6px 0;
	color: var(--wp--preset--color--czekolada);
}