/* WG Clean Variations — supplemental styles. */

.wg-cv { width: 100%; }
.wg-cv-config { display: none !important; }

/* Header weight */
.wg-cv-weight {
	font-family: "Cormorant Garamond", "Georgia", serif;
	font-size: 22px;
	font-weight: 400;
	margin: 14px 0 18px;
	min-height: 30px;
}
.wg-cv-weight b { font-weight: 700; }

/* Label suffix (наприклад "Колір металу: біле золото") */
.wg-cv-attr-selected {
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: 14px;
	color: #6b7280;
	margin-left: 6px;
	font-weight: 400;
}

/* Прихована опція */
.wg-cv-opt.is-hidden,
.vi-wpvs-option-wrap.is-hidden,
.wd-swatch.is-hidden {
	display: none !important;
}

/* === КНОПКА СЕРТИФІКАТА === */
.wg-cv-cert-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	height: 50px;
	padding: 0 26px;
	border: 1.5px solid #1a1a1a;
	border-radius: 4px;
	background: #fff;
	color: #1a1a1a;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	/* Типографія за вимогою */
	font-family: "Inter Tight", system-ui, sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 16px !important;
	line-height: 150% !important;
	letter-spacing: -0.01em !important;
}
.wg-cv-cert-btn:hover {
	background: #1a1a1a;
	color: #fff;
}

/* === ACTIONS row === */
.wg-cv-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 18px;
}

.wg-cv-reset {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid #d1d5db;
	border-radius: 24px;
	background: #fff;
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: 14px;
	color: #1a1a1a;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color .15s ease;
}
.wg-cv-reset:hover { border-color: #1a1a1a; }
.wg-cv-reset::before { content: "×"; font-size: 18px; line-height: 1; }

/* === ADD TO CART — стилі як на оригінальній сторінці (з YellowPencil + Elementor) === */
button.wg-cv-add-to-cart {
	box-sizing: border-box !important;
	display: inline-block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	flex: 0 0 auto !important;
	padding: 1rem !important;
	background-color: #1f3f3e !important;
	color: #ffffff !important;
	font-family: "Inter Tight", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	text-align: center !important;
	text-transform: none !important;
	border: 0 !important;
	border-radius: 2px !important;
	margin: 0 0 1.875rem 0 !important;
	cursor: pointer !important;
	letter-spacing: normal !important;
	transition: background .15s ease, opacity .15s ease !important;
}
button.wg-cv-add-to-cart:hover:not([disabled]) {
	background-color: #173030 !important;
}
button.wg-cv-add-to-cart[disabled] {
	opacity: .55 !important;
	cursor: not-allowed !important;
}
/* Іконка кошика — завжди справа біля тексту. На hover текст зникає. */
button.wg-cv-add-to-cart { position: relative !important; overflow: hidden !important; }

button.wg-cv-add-to-cart .wg-cv-cta-text {
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	white-space: nowrap;
	max-width: 300px;
	margin-right: 10px;
	transition: opacity .25s ease, max-width .3s ease, margin-right .3s ease;
}

button.wg-cv-add-to-cart::after {
	content: "" !important;
	display: inline-block !important;
	width: 18px !important;
	height: 20px !important;
	vertical-align: middle !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 18px 20px !important;
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2220%22%20viewBox%3D%220%200%2018%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.34199%204.30846C5.47373%203.70768%205.78078%203.00435%206.26524%202.40657C6.87959%201.64853%207.74354%201.1%208.85505%201.1C9.57897%201.1%2010.4613%201.27156%2011.1828%201.80118C11.8067%202.25926%2012.3615%203.02203%2012.5673%204.30846H5.34199ZM4.22208%204.30846C4.36068%203.47474%204.76263%202.51358%205.41066%201.71398C6.18159%200.762718%207.33687%200%208.85505%200C9.72769%200%2010.8646%200.203082%2011.8336%200.914463C12.7486%201.58611%2013.4572%202.66968%2013.6791%204.30846H16.1814H16.6931L16.73%204.81891L17.7631%2019.149L17.8055%2019.7385H17.2145H0.591074H0L0.042504%2019.149L1.07559%204.81891L1.1124%204.30846H1.62417H4.22208ZM1.18216%2018.6385L2.13595%205.40846H4.62953H13.0821H15.6696L16.6234%2018.6385H1.18216Z%22%20fill%3D%22%23FFFFFF%22/%3E%3C/svg%3E") !important;
	transition: transform .2s ease !important;
}

/* Hover: ховаємо текст (max-width → 0) → іконка природно зміщується у центр */
button.wg-cv-add-to-cart:hover .wg-cv-cta-text {
	opacity: 0;
	max-width: 0;
	margin-right: 0;
}

/* Скидаємо ::before щоб нічого зайвого не накладалось */
button.wg-cv-add-to-cart::before {
	content: none !important;
	display: none !important;
}

/* Селект ховаємо повністю — він лише для submit (якщо колись повернеться) */
.wg-cv-select,
.wg-btn-select-hidden {
	display: none !important;
}

/* === DROPDOWN (Розмір) — елегантний стиль "luxury" === */
.wg-cv-dropdown-wrap {
	display: inline-block;
	position: relative;
	max-width: 260px;
	width: 100%;
}

.wg-cv-dropdown-wrap::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 10px;
	height: 6px;
	transform: translateY(-50%);
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a1a1a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform .2s ease;
}

.wg-cv-dropdown-wrap:hover::after,
.wg-cv-dropdown-wrap:focus-within::after {
	transform: translateY(-50%) translateY(1px);
}

select.wg-cv-dropdown {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	height: 50px !important;
	padding: 0 44px 0 20px !important;
	margin: 0 !important;
	background-color: #fff !important;
	background-image: none !important;
	color: #1a1a1a !important;
	border: 1px solid #d1d5db !important;
	border-radius: 4px !important;
	font-family: "Inter Tight", system-ui, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 50px !important;
	letter-spacing: -0.01em !important;
	cursor: pointer !important;
	outline: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Safari / WebKit мав свою стрілку через ::-webkit-* — ховаємо */
select.wg-cv-dropdown::-ms-expand { display: none !important; }

select.wg-cv-dropdown:hover {
	border-color: #1a1a1a;
}

select.wg-cv-dropdown:focus {
	border-color: #1f3f3e;
	box-shadow: 0 0 0 3px rgba(31, 63, 62, 0.08);
}

/* Опції — стиль дропдауну (обмежено браузером, але хоч шрифт виставимо) */
select.wg-cv-dropdown option {
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: 15px;
	color: #1a1a1a;
	padding: 8px 12px;
}