/* Gloom Habit 2.9.96 — compact mobile options and corrected PayPal gap. */

.single-product .gh-variation-swatch--color {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	min-width: 44px !important;
	height: 44px;
	padding: 4px !important;
	flex: 0 0 44px;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
	color: #171717;
}

.single-product .gh-variation-swatch--color:hover,
.single-product .gh-variation-swatch--color:focus-visible,
.single-product .gh-variation-swatch--color.is-active {
	border-color: #171717;
	background: #fff;
	color: #171717;
	box-shadow: inset 0 0 0 1px #171717;
}

.single-product .gh-color-dot {
	display: inline-block;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(17, 17, 17, 0.22);
	border-radius: 50%;
	background: var(--gh-color-value, #b7b7b7);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.single-product .gh-variation-swatch--color.gh-color-unmapped .gh-color-dot {
	background: #b7b7b7;
}

.single-product .gh-variation-swatch--color > span:not(.gh-color-dot) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.single-product .gh-selected-option {
	color: #5f5f5f;
	font-weight: 500;
}

@media (max-width: 820px) {
	/* Compact purchase-box rhythm. This stylesheet loads
	 * after the parent theme and is the final authority for mobile spacing. */
	body.single-product div.product .summary > p.price,
	body.single-product div.product .summary > span.price {
		margin-bottom: 10px !important;
	}

	body.single-product div.product .summary form.cart,
	body.single-product div.product .summary form.variations_form.cart {
		margin: 0 !important;
		padding: 14px 0 0 !important;
		border-top: 0 !important;
	}

	body.single-product form.variations_form table.variations {
		margin: 0 !important;
		padding: 0 !important;
	}

	body.single-product form.variations_form table.variations tr.gh-single-option-row,
	body.single-product form.variations_form table.variations tr.gh-color-option-row,
	body.single-product form.variations_form table.variations tr.gh-size-option-row {
		display: block !important;
		margin: 0 0 16px !important;
	}

	body.single-product form.variations_form table.variations tr.gh-size-option-row,
	body.single-product form.variations_form table.variations tr:last-child {
		margin-bottom: 0 !important;
	}

	body.single-product form.variations_form table.variations tr.gh-single-option-row th,
	body.single-product form.variations_form table.variations tr.gh-single-option-row td,
	body.single-product form.variations_form table.variations tr.gh-color-option-row th,
	body.single-product form.variations_form table.variations tr.gh-color-option-row td,
	body.single-product form.variations_form table.variations tr.gh-size-option-row th,
	body.single-product form.variations_form table.variations tr.gh-size-option-row td {
		display: block !important;
		width: 100% !important;
	}

	body.single-product form.variations_form table.variations tr.gh-single-option-row th label,
	body.single-product form.variations_form table.variations tr.gh-color-option-row th label,
	body.single-product form.variations_form table.variations tr.gh-size-option-row th label {
		margin: 0 0 6px !important;
	}

	body.single-product .gh-size-option-row .gh-variation-swatches {
		justify-content: flex-start;
		gap: 6px !important;
	}

	body.single-product .gh-color-option-row .gh-variation-swatches {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 6px !important;
		max-width: 100%;
	}

	body.single-product .gh-size-option-row .gh-variation-swatches {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
	}

	body.single-product .gh-color-option-row .gh-variation-swatch,
	body.single-product .gh-size-option-row .gh-variation-swatch,
	body.single-product tr.gh-single-option-row .gh-variation-swatch {
		height: 40px !important;
		min-height: 40px !important;
		border-radius: 9px !important;
		font-size: 13px !important;
	}

	body.single-product .gh-color-option-row .gh-variation-swatch,
	body.single-product tr.gh-single-option-row .gh-variation-swatch--color {
		justify-content: center;
		width: 40px !important;
		min-width: 40px !important;
		flex: 0 0 40px;
		padding: 4px !important;
		border-radius: 12px !important;
	}

	body.single-product .gh-color-dot {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
	}

	body.single-product .gh-size-option-row .gh-variation-swatch {
		width: 100% !important;
		min-width: 46px !important;
		padding: 0 6px !important;
	}

	body.single-product .summary .single_variation_wrap,
	body.single-product .summary .woocommerce-variation,
	body.single-product .summary .woocommerce-variation-add-to-cart {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}

	body.single-product .summary .woocommerce-variation-add-to-cart {
		grid-template-columns: 90px minmax(0, 1fr) !important;
		gap: 8px !important;
		margin-top: 18px !important;
	}

	body.single-product .summary .woocommerce-variation-add-to-cart .quantity {
		display: flex !important;
		width: 90px !important;
		height: 50px !important;
		min-height: 50px !important;
		border-radius: 9px !important;
	}

	body.single-product .summary .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		height: 50px !important;
		min-height: 50px !important;
		border-radius: 9px !important;
	}

	body.single-product .summary .ppc-button-wrapper,
	body.single-product .summary .ppcp-button-wrapper {
		/* PayPal adds roughly 24px after the variation form on iOS. The negative
		 * margin offsets that provider-owned space, leaving an 8–10px visual gap. */
		margin-top: -14px !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
	}

	body.single-product .summary > [id^="ppc-button"],
	body.single-product .summary > [id*="ppcp"][class*="button"] {
		margin-top: 8px !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
	}

	body.single-product .summary .ppc-button-wrapper [id^="ppc-button"],
	body.single-product .summary .ppcp-button-wrapper [id^="ppc-button"],
	body.single-product .summary .ppc-button-wrapper [id*="ppcp"][class*="button"],
	body.single-product .summary .ppcp-button-wrapper [id*="ppcp"][class*="button"] {
		margin: 0 !important;
	}

	body.single-product .gh-paypal-option-guard {
		margin: 8px 0 0 !important;
	}

	body.single-product .summary .ppc-button-wrapper + .gh-product-assurance,
	body.single-product .summary .ppcp-button-wrapper + .gh-product-assurance,
	body.single-product .summary .gh-product-assurance {
		margin-top: 22px !important;
	}
}