/**
 * Outline Media Variations - front end.
 *
 * The variation form reads top to bottom: a small uppercase caption per
 * attribute with a hairline above it, then the control. Value attributes use
 * square-cornered image thumbnails; label attributes use wide bordered
 * buttons with a cream fill for the current choice. The image ladder below
 * keeps the thumbnail sizes the site shipped with before the swap.
 */

/* Variation panel ------------------------------------------------------- */

/* The panel used to be painted green by a WPCode CSS snippet. The controls
   carry the design now, so the field stays neutral behind them. */

.variations {
	background-color: transparent !important;
}

/* Variation form layout: caption above its control, one column --------- */

.variations,
.variations tbody,
.variations tr {
	display: block;
	width: 100%;
}

.variations tr {
	border: 0;
}

.variations tr > th.label,
.variations tr > td.value {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none;
	border: 0;
	text-align: left;
}

.variations tr > th.label {
	margin: 0;
	padding: 14px 0 0 !important;
	border-top: 1px solid rgba(43, 23, 4, 0.14) !important;
	color: #8a8177;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.2 !important;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: normal;
}

.variations tr > td.value {
	padding: 10px 0 18px !important;
}

.omv-attr {
	position: relative;
}

/* WooCommerce still needs the select; it just should not be seen. */
.omv-attr > select,
.omv-attr > .select2,
.omv-attr > .select2-container {
	display: none !important;
}

.omv-swatches {
	--omv-img: 50px;
	--omv-accent: #3f2103;
	--omv-accent-hover: rgba(63, 33, 3, 0.45);
	--omv-ring: #e2ddd5;
	--omv-radius: 6px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.omv-swatch {
	box-sizing: content-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0;
	padding: 2px;
	border: 2px solid var(--omv-ring);
	border-radius: var(--omv-radius);
	background: transparent;
	color: #2b1704;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color 150ms ease, opacity 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.omv-swatch:hover,
.omv-swatch:focus-visible {
	border-color: var(--omv-accent-hover);
}

.omv-swatch.omv--selected,
.omv-swatch.omv--selected:hover {
	border-color: var(--omv-accent);
}

.omv-swatch:focus-visible {
	outline: 2px solid var(--omv-accent);
	outline-offset: 3px;
}

/* Image swatches ------------------------------------------------------- */

/* The thumbnail carries the border; the button stays transparent so a
   selected thumbnail reads as one clean outline rather than a double ring. */

.omv-swatch--image {
	padding: 0;
	border-color: transparent;
}

.omv-swatch--image.omv--selected,
.omv-swatch--image.omv--selected:hover {
	border-color: transparent;
}

.omv-swatch--image img {
	display: block;
	box-sizing: border-box;
	width: var(--omv-img);
	height: var(--omv-img);
	border: 1px solid var(--omv-ring);
	border-radius: var(--omv-radius);
	background: #ffffff;
	object-fit: cover;
	transition: border-color 150ms ease;
}

.omv-swatch--image:hover img {
	border-color: var(--omv-accent-hover);
}

.omv-swatch--image.omv--selected img,
.omv-swatch--image.omv--selected:hover img {
	border-color: var(--omv-accent);
}

/* Colour swatches ------------------------------------------------------ */

.omv-swatch--color .omv-swatch__color {
	display: block;
	box-sizing: border-box;
	width: var(--omv-img);
	height: var(--omv-img);
	border: 1px solid var(--omv-ring);
	border-radius: var(--omv-radius);
}

/* Label swatches ------------------------------------------------------- */

/* Wide bordered buttons: plain white until chosen, then a cream fill with a
   two-pixel brown outline. Matches the approved look for the label
   attributes (size, roast, frequency and the like). */

.omv-swatches--label,
.omv-swatches--text {
	gap: 12px;
}

.omv-swatch--label,
.omv-swatch--text {
	box-sizing: border-box;
	min-width: 150px;
	min-height: 50px;
	padding: 14px 26px;
	border: 1px solid var(--omv-ring);
	border-radius: var(--omv-radius);
	background: #ffffff;
	color: #2b1704;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.omv-swatch--label:hover,
.omv-swatch--text:hover,
.omv-swatch--label:focus-visible,
.omv-swatch--text:focus-visible {
	border-color: var(--omv-accent);
	background: #ffffff;
}

.omv-swatch--label.omv--selected,
.omv-swatch--text.omv--selected,
.omv-swatch--label.omv--selected:hover,
.omv-swatch--text.omv--selected:hover {
	/* One pixel less padding so the heavier outline does not resize it. */
	padding: 13px 25px;
	border: 2px solid var(--omv-accent);
	background: #f4efe6;
	color: #2b1704;
}

.omv-swatch--label .omv-swatch__label,
.omv-swatch--text .omv-swatch__label {
	display: block;
	white-space: nowrap;
}

/* A colour or image attribute can fall back to text chips term by term (for
   example a size name saved as the swatch value). Give those rows the same
   rhythm as a label row so mixed rows line up. */
.omv-swatches--color:has(.omv-swatch--text),
.omv-swatches--image:has(.omv-swatch--text) {
	gap: 12px;
}

@media (max-width: 520px) {
	.omv-swatch--label,
	.omv-swatch--text {
		flex: 1 1 40%;
		min-width: 0;
		padding: 13px 16px;
		font-size: 15px;
	}

	.omv-swatch--label.omv--selected,
	.omv-swatch--text.omv--selected {
		padding: 12px 15px;
	}
}

/* States --------------------------------------------------------------- */

.omv-swatch.omv--unavailable {
	cursor: not-allowed;
}

.omv-swatch.omv--unavailable img,
.omv-swatch.omv--unavailable .omv-swatch__color,
.omv-swatch.omv--unavailable .omv-swatch__label {
	opacity: 0.3;
}

/* Tooltip -------------------------------------------------------------- */

.omv-swatch__tip {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 99;
	box-sizing: border-box;
	width: max-content;
	max-width: 140px;
	margin-left: 0;
	padding: 6px;
	border-radius: 3px;
	background: var(--omv-accent);
	color: #ffffff;
	font-size: 12px;
	line-height: 14px;
	text-align: center;
	white-space: normal;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(-4px);
	transition: opacity 200ms ease, transform 200ms ease;
}

.omv-swatch:hover .omv-swatch__tip,
.omv-swatch:focus-visible .omv-swatch__tip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* The responsive ladder matches the sizes the old markup was given. */
@media (min-width: 340px) {
	.omv-swatch--image img {
		width: 77px;
		height: 77px;
	}
}

@media (min-width: 360px) {
	.omv-swatch--image img {
		width: 85px;
		height: 85px;
	}
}

@media (min-width: 380px) {
	.omv-swatch--image img {
		width: 57px;
		height: 57px;
	}
}

@media (min-width: 410px) {
	.omv-swatch--image img {
		width: 64px;
		height: 64px;
	}
}

@media (min-width: 430px) {
	.omv-swatch--image img {
		width: 70px;
		height: 70px;
	}
}

@media (min-width: 450px) {
	.omv-swatch--image img {
		width: 80px;
		height: 80px;
	}
}

@media (min-width: 765px) {
	.omv-swatch--image img {
		width: 55px;
		height: 55px;
	}
}

@media (min-width: 820px) {
	.omv-swatch--image img {
		width: 66px;
		height: 66px;
	}
}

@media (min-width: 910px) {
	.omv-swatch--image img {
		width: 80px;
		height: 80px;
	}
}

@media (min-width: 1024px) {
	.omv-swatch--image img {
		width: 100px;
		height: 100px;
	}
}

@media (min-width: 1100px) {
	.omv-swatch--image img {
		width: 90px;
		height: 90px;
	}
}