/**
 * Size cards — the giclée print sizes and the tapestry sizes, one picker.
 * Behaviour and where the sizes come from: js/size-cards.js, inc/size-cards.php.
 */

/* The select the cards drive. Off-screen rather than display:none — it stays a
   real form control, and the class is only ever added by the script. */
.mg-variations-enhanced .variations select {
	position: absolute !important;
	left: -9999px;
}

/* WooCommerce lays the picker out as a two-column table, which strands the
   label in a narrow column beside the cards. None of this is tabular. */
.mg-variations-enhanced .variations,
.mg-variations-enhanced .variations tbody,
.mg-variations-enhanced .variations tr,
.mg-variations-enhanced .variations th,
.mg-variations-enhanced .variations td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
}

.mg-variations-enhanced .variations td.value {
	position: relative;
}

/* The picker's own heading line, carrying the unit toggle at the far end. */
.mg-size-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .55rem;
}

.mg-size-heading {
	font-family: var(--mg-serif);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--mg-ink);
}

/* Replaced by .mg-size-head, which says the same thing and holds the toggle. */
.mg-variations-enhanced .variations th.label {
	display: none;
}

/* ---- cm / in ---------------------------------------------------------- */

.mg-units {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	line-height: 1;
}

.mg-units__label {
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-grey-text);
	transition: color .2s ease;
}

.mg-units:not(.is-in) .mg-units__label--cm,
.mg-units.is-in .mg-units__label--in {
	color: var(--mg-ink);
}

.mg-units__track {
	display: block;
	position: relative;
	width: 2.3rem;
	height: 1.2rem;
	border-radius: 1rem;
	background: var(--mg-field);
	transition: background .2s ease;
}

.mg-units.is-in .mg-units__track {
	background: var(--mg-ink);
}

.mg-units__knob {
	position: absolute;
	top: .15rem;
	left: .15rem;
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background: var(--mg-paper);
	transition: transform .2s ease;
}

.mg-units.is-in .mg-units__knob {
	transform: translateX(1.1rem);
}

/* Replaced by the cross on the chosen card. */
.mg-variations-enhanced .reset_variations {
	display: none !important;
}

/* The card already says the size; this is WooCommerce repeating it. */
.mg-variations-enhanced .woocommerce-variation-description {
	display: none;
}

/* Empty until a size is chosen, but its margins hold a gap open. */
.mg-variations-enhanced .woocommerce-variation:empty {
	display: none;
}

.mg-variations-enhanced .woocommerce-variation-price {
	display: block;
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--mg-ink);
}

/* One card per row. Three sizes, three rows — the columns made every card a
   tall box padded out with air. */
.mg-size-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem;
	margin: 0 0 1.2rem;
}

.mg-size-cell {
	position: relative;
}

.mg-size {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .2rem .7rem;
	width: 100%;
	border: 1px solid var(--mg-line);
	background: var(--mg-paper);
	padding: .8rem 2.2rem .8rem 1rem;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--mg-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.mg-size:hover {
	border-color: var(--mg-ink);
}

.mg-size-cell.is-active .mg-size {
	border-color: var(--mg-ink);
	box-shadow: inset 0 0 0 1px var(--mg-ink);
}

.mg-size__name {
	font-family: var(--mg-serif);
	font-size: 1.25rem;
	line-height: 1.2;
	min-width: 2.6rem;
}

/* In inches, "A4" is a name for a measurement the card is already showing. */
.mg-size-grid--series.is-in .mg-size__name {
	display: none;
}

.mg-size-grid--series.is-in .mg-size__measure {
	/* Takes the hidden name's place at the head of the row, and its weight. */
	order: -1;
	font-family: var(--mg-serif);
	font-size: 1.25rem;
	color: var(--mg-ink);
}

.mg-size__note,
.mg-size__measure {
	font-size: .9rem;
	color: var(--mg-ink-soft);
}

.mg-size__price {
	margin-left: auto;
	font-size: .95rem;
	color: var(--mg-ink);
}

/* Only on the chosen card, where it clears the choice. */
.mg-size__clear {
	display: none;
	position: absolute;
	top: 50%;
	right: .5rem;
	margin-top: -.7rem;
	width: 1.4rem;
	height: 1.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mg-black);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease;
}

.mg-size-cell.is-active .mg-size__clear {
	display: block;
}

.mg-size__clear:hover,
.mg-size__clear:focus {
	opacity: 1;
}