/**
 * Size selector — product page.
 *
 * See includes/size-selector.php and docs/product-page-size-selector.md.
 *
 * Loaded only on `is_product()`, last in the cascade, so it can override both
 * WooCommerce's own stylesheet and the 400 KB of Divi 3.0 CSS this theme
 * absorbed. The `!important`s below are all aimed at inherited rules that
 * carry `!important` themselves — divi-base.css sets the table cell padding
 * that way, and it cannot be outranked politely.
 */

/* ---------------------------------------------------------------------------
 * Undo the variations table
 * ---------------------------------------------------------------------------
 *
 * WooCommerce renders the attribute inside `<table class="variations">` with
 * the label in a `<th>` and the control in a `<td>`. The selector supplies its
 * own heading, so the table is flattened to blocks and the `<th>` removed.
 *
 * The `<th>` is hidden rather than emptied: its `<label for>` pointed at the
 * select, which is now hidden from assistive technology anyway. The button
 * group carries `aria-labelledby` instead, so nothing is lost.
 */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: auto;
	max-width: none !important;
	margin: 0;
	padding: 0 !important;
	border: 0;
}

.woocommerce div.product form.cart table.variations th.label {
	display: none;
}

/* ---------------------------------------------------------------------------
 * The block
 * --------------------------------------------------------------------------- */

.exadry-size {
	margin: 0 0 22px;
	text-align: left;
}

.exadry-size__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
}

.exadry-size__label {
	color: #33393f;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* The ⓘ from the reference, drawn in CSS.
 *
 * Deliberately not an icon font: the four glyphs this site still needs cost
 * ~6 KB of self-hosted Font Awesome masks (css/icons.css) and pulling in a
 * fifth for one character would not have been worth it. A circle and the
 * letter i render identically everywhere and cost nothing. */
.exadry-size__guide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: #b8c0c7;
	color: #fff !important;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.exadry-size__guide:hover,
.exadry-size__guide:focus {
	background-color: #2ea3f2;
}

/* ---------------------------------------------------------------------------
 * The boxes
 * --------------------------------------------------------------------------- */

.exadry-size__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.exadry-size__option {
	position: relative;
	/* Centred with flex and given a fixed height on purpose, rather than a
	 * line-height inside a min-height. The selected box carries a 2px border
	 * where the others carry 1px, and with `line-height` the content box wins:
	 * 44px of text plus two 2px borders measured 48px against its neighbours'
	 * 46px, so the whole row nudged down by a pixel as the selection moved.
	 * Measured in the browser, not guessed — `box-sizing: border-box` looks
	 * like it should have prevented it, and does not, because a min-height is
	 * a floor and the line box pushed straight through it. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	/* 46px is a comfortable touch target without reaching the 48px that would
	 * make seven of them wrap awkwardly on a 360px screen. */
	height: 46px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #d5dbe0;
	border-radius: 2px;
	background: #fff;
	box-shadow: none;
	color: #33393f;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.exadry-size__option:hover {
	border-color: #9aa5ad;
}

.exadry-size__option:focus-visible {
	outline: 2px solid #2ea3f2;
	outline-offset: 2px;
}

/* The site's accent, not the maroon of the reference image this design came
 * from. Two pixels of border rather than a fill, so the selected box reads as
 * chosen without competing with the `Adaugă în coș` button below it.
 *
 * The extra border pixel changes nothing about the box: the height is fixed
 * and the padding is horizontal, so `box-sizing: border-box` absorbs it and
 * the row does not move as the selection travels along it. */
.exadry-size__option.is-selected {
	border-width: 2px;
	border-color: #2ea3f2;
	color: #2ea3f2;
}

/* ---------------------------------------------------------------------------
 * Out of stock
 * ---------------------------------------------------------------------------
 *
 * Faded and struck through, but still clickable — see the comment on
 * `aria-disabled` in includes/size-selector.php. On the femei and BUMBAC pages
 * this is six boxes out of seven, so it has to look deliberate rather than
 * broken: the border and text stay legible, and the diagonal is what carries
 * the meaning.
 */
.exadry-size__option.is-oos {
	border-color: #e4e8eb;
	background: #fafbfc;
	color: #a8b1b8;
	cursor: pointer;
}

.exadry-size__option.is-oos:hover {
	border-color: #cfd6db;
}

.exadry-size__option.is-oos::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Corner to corner. A percentage band rather than a rotated pseudo-element
	 * so the line lands the same way whatever the box ends up measuring once
	 * the label inside it is `XS` or `3XL`. */
	background-image: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		#c3ccd3 calc(50% - 1px),
		#c3ccd3 calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	pointer-events: none;
}

.exadry-size__option.is-oos.is-selected {
	border-color: #b8c0c7;
	color: #8b959d;
}

/* ---------------------------------------------------------------------------
 * The real control
 * ---------------------------------------------------------------------------
 *
 * WooCommerce's `<select>`, kept in the DOM and hidden. NOT `display: none`:
 * it must stay a submittable, scriptable form control, because it is what
 * `add-to-cart-variation.js` reads and what the form POSTs. The standard
 * visually-hidden recipe, so nothing about its behaviour changes.
 */
.exadry-size__native {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Narrow screens
 * --------------------------------------------------------------------------- */

@media (max-width: 479px) {
	.exadry-size__option {
		/* Four across, then three — rather than a seven-column scroll.
		 *
		 * `flex-grow: 0`, deliberately. With grow enabled the three boxes on
		 * the second row expand to fill the row and come out 95px against the
		 * first row's 69px (measured at 375px), which reads as two different
		 * controls. A size grid should be a grid. */
		flex: 0 0 calc(25% - 6px);
		min-width: 0;
		padding: 0 6px;
	}
}