/* WC Perfume Decant — front-end styles
   The layout bug: many themes lay out WooCommerce's `.cart` form as `display:flex` with NO
   wrap, so every direct child (this block, the quantity input, the Add to Cart button) is
   forced onto one line no matter how wide any single child is told to be. Setting this block
   to 100% width does nothing on its own — the *container* also has to be allowed to wrap.
   Both rules below are required together; removing either one reintroduces the bug. */

form.cart {
	flex-wrap: wrap !important;
}

form.cart .wcd-decant-option {
	display: block !important;
	width: 100% !important;
	flex: 0 0 100% !important;
	order: -1;
}

.wcd-decant-option,
.wcd-decant-option *,
.wcd-decant-option *::before,
.wcd-decant-option *::after {
	box-sizing: border-box;
}

.wcd-decant-option {
	--wcd-accent: #1a1a1a;
	--wcd-border: #e4e4e4;
	--wcd-text: #1a1a1a;
	--wcd-muted: #8a8a8a;

	margin: 18px 0 22px;
	padding: 16px 20px;
	border: 1px solid var(--wcd-border);
	border-radius: 12px;
	background: #fafafa;
	font-family: inherit;
	color: var(--wcd-text);
}

.wcd-decant-option.is-active {
	background: #fff;
	border-color: var(--wcd-accent);
}

/* ---------- Toggle row ---------- */

.wcd-decant-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

.wcd-decant-toggle-text {
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
}

.wcd-decant-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 40px;
	height: 24px;
}

.wcd-decant-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 2;
}

.wcd-decant-switch-track {
	position: absolute;
	inset: 0;
	background: #d5d5d5;
	border-radius: 999px;
	transition: background .18s ease;
}

.wcd-decant-switch-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .18s ease;
}

.wcd-decant-switch input:checked ~ .wcd-decant-switch-track {
	background: var(--wcd-accent);
}

.wcd-decant-switch input:checked ~ .wcd-decant-switch-track .wcd-decant-switch-thumb {
	transform: translateX(16px);
}

/* ---------- Size dropdown ---------- */

.wcd-decant-size-row {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wcd-border);
}

.wcd-decant-size-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wcd-muted);
	margin-bottom: 8px;
}

.wcd-decant-select-wrap {
	position: relative;
	max-width: 320px;
}

.wcd-decant-select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--wcd-muted);
	border-bottom: 2px solid var(--wcd-muted);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

.wcd-decant-option select#wcd_decant_size {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding: 11px 40px 11px 14px;
	border: 1.5px solid var(--wcd-border);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: var(--wcd-text);
	cursor: pointer;
	transition: border-color .15s ease;
}

.wcd-decant-option select#wcd_decant_size:hover {
	border-color: #bbb;
}

.wcd-decant-option select#wcd_decant_size:focus {
	outline: none;
	border-color: var(--wcd-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

@media (max-width: 480px) {
	.wcd-decant-option {
		padding: 14px 16px;
	}
	.wcd-decant-select-wrap {
		max-width: 100%;
	}
}