/* Seamless Hold Discovery - Single Product presentation.
   Scoped to the single product template. Design tokens follow the
   Seamless Hold system: #A24522 primary, #4E341B secondary, #1C1106 text,
   #846447 accent, #F3EDE5 cream, #E5DCD2 soft border.

   Card selectors are written as .variations_form .shd-size-cards .shd-size-card
   so they outrank the Elementor kit button rule (.elementor-kit-6 button)
   without resorting to !important. */

/* ---------- Size cards ---------- */

/* Hidden by default so the native WooCommerce controls remain the
   no-JavaScript experience. Revealed only once scripting is confirmed. */
.shd-size-cards {
	display: none;
}

.variations_form.shd-cards-active .shd-size-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0 0 18px;
}

/* Suppress the redundant Single Product selectors only while the card
   selector is active. Nothing is removed from the DOM: the native select
   still holds and submits the variation value. */
.variations_form.shd-cards-active .variations {
	display: none !important;
}

/* WooCommerce ships `background: initial` on the variation select at a higher
   specificity than the template's own rule, which left the no-JavaScript
   fallback control transparent instead of the intended branded white. This
   restores it by matching that specificity exactly - no !important needed,
   because this stylesheet loads after woocommerce.css. */
.woocommerce div.product form.cart .variations select {
	background-color: #FFFFFF;
}

/* The selected price is carried on the Add to Cart control instead. */
.variations_form.shd-cards-ready .woocommerce-variation-price {
	display: none;
}

.variations_form .shd-size-cards .shd-size-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 92px;
	width: 100%;
	margin: 0;
	padding: 16px 8px;
	text-align: center;
	background-color: #FFFFFF;
	background-image: none;
	color: #1C1106;
	border: 1px solid #E5DCD2;
	border-radius: 3px;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.variations_form .shd-size-cards .shd-size-card .shd-size-card__size {
	font-family: 'Cormorant Garamond', serif;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: .6px;
	line-height: 1.1;
	color: #1C1106;
	/* the Elementor kit button rule uppercases button text; the reference
	   renders the unit as "30 mL". */
	text-transform: none;
}

.variations_form .shd-size-cards .shd-size-card .shd-size-card__price,
.variations_form .shd-size-cards .shd-size-card .shd-size-card__price .amount,
.variations_form .shd-size-cards .shd-size-card .shd-size-card__price bdi,
.variations_form .shd-size-cards .shd-size-card .shd-size-card__price span {
	font-family: Manrope, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #4E341B;
	background: none;
	text-decoration: none;
}

.variations_form .shd-size-cards .shd-size-card .shd-size-card__price del {
	opacity: .55;
	margin-right: 4px;
	text-decoration: line-through;
}

.variations_form .shd-size-cards .shd-size-card .shd-size-card__state {
	font-family: Manrope, sans-serif;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	line-height: 1.2;
	color: #846447;
}

.variations_form .shd-size-cards .shd-size-card:hover {
	background-color: #FBF7F2;
	border-color: #A24522;
	color: #1C1106;
}

.variations_form .shd-size-cards .shd-size-card.is-selected {
	background-color: #FFFFFF;
	border-color: #A24522;
	box-shadow: inset 0 0 0 1px #A24522, 0 4px 14px rgba(162, 69, 34, .14);
}

.variations_form .shd-size-cards .shd-size-card.is-selected .shd-size-card__size {
	color: #A24522;
}

.variations_form .shd-size-cards .shd-size-card:focus-visible {
	outline: 2px solid #A24522;
	outline-offset: 2px;
}

.variations_form .shd-size-cards .shd-size-card.is-unavailable,
.variations_form .shd-size-cards .shd-size-card[disabled] {
	cursor: not-allowed;
	opacity: .5;
}

.variations_form .shd-size-cards .shd-size-card.is-unavailable:hover,
.variations_form .shd-size-cards .shd-size-card[disabled]:hover {
	background-color: #FFFFFF;
	border-color: #E5DCD2;
}

/* ---------- Note taxonomy presentation ---------- */

/* Three across matches the reference rhythm and stays inside the narrow
   note columns of the scent-profile band. Extra notes wrap to a new row. */
.shd-notes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.shd-notes li.shd-note {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shd-note__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

a.shd-note__link:hover .shd-note__media {
	border-color: #A24522;
}

a.shd-note__link:hover .shd-note__name {
	color: #A24522;
}

a.shd-note__link:focus-visible {
	outline: 2px solid #A24522;
	outline-offset: 3px;
	border-radius: 3px;
}

/* Reserved slot for future approved note imagery. Intentionally empty and
   dashed so it reads as an unfinished placeholder, never as final artwork. */
.shd-note__media {
	display: block;
	width: 52px;
	height: 52px;
	border: 1px dashed #D8CCBE;
	border-radius: 50%;
	background: #F3EDE5;
	transition: border-color .15s ease;
}

.shd-note__name {
	display: block;
	font-family: Manrope, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	color: #1C1106;
	transition: color .15s ease;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.variations_form.shd-cards-active .shd-size-cards {
		gap: 10px;
	}

	.variations_form .shd-size-cards .shd-size-card {
		min-height: 86px;
		padding: 14px 6px;
	}

	.variations_form .shd-size-cards .shd-size-card .shd-size-card__size {
		font-size: 19px;
	}

	.shd-notes {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
		gap: 18px 12px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.variations_form.shd-cards-active .shd-size-cards {
		gap: 8px;
	}

	.variations_form .shd-size-cards .shd-size-card {
		min-height: 80px;
		padding: 12px 4px;
		gap: 4px;
	}

	.variations_form .shd-size-cards .shd-size-card .shd-size-card__size {
		font-size: 18px;
	}

	.variations_form .shd-size-cards .shd-size-card .shd-size-card__price,
	.variations_form .shd-size-cards .shd-size-card .shd-size-card__price .amount,
	.variations_form .shd-size-cards .shd-size-card .shd-size-card__price bdi,
	.variations_form .shd-size-cards .shd-size-card .shd-size-card__price span {
		font-size: 14px;
	}

	.shd-notes {
		grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
		gap: 16px 10px;
	}

	.shd-note__media {
		width: 46px;
		height: 46px;
	}
}