/**
 * The expiry chooser.
 *
 * A table rather than a row of pills: four dates, each with a discount and a
 * price, line up into columns that can be read down. Pills made the shopper
 * compare three numbers scattered across each one.
 */

.wcd-swatches {
	margin: 0 0 14px;
}

/* Themes flatten tables inside the variation cell to make the stock dropdown sit
   where they want it. Ours says out loud that it is a table. */
.wcd-swatches table.wcd-choice {
	display: table;
	width: 100%;
	margin: 0;
	border: 1px solid #d8dcd0;
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	font-size: 15px;
	line-height: 1.3;
}

.wcd-swatches table.wcd-choice > tbody {
	display: table-row-group;
}

.wcd-swatches table.wcd-choice tbody tr.wcd-choice__row {
	display: table-row;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.wcd-swatches table.wcd-choice tbody tr.wcd-choice__row + tr.wcd-choice__row td {
	border-top: 1px solid #eceee7;
}

.wcd-swatches table.wcd-choice td {
	display: table-cell;
	padding: 11px 12px;
	border: 0;
	background: none;
	vertical-align: middle;
	color: #1e2419;
}

.wcd-swatches tr.wcd-choice__row:hover td {
	background: #f6f8ef;
}

.wcd-swatches tr.wcd-choice__row:focus {
	outline: none;
}

/* The ring goes on the row. Put on the cells it drew a box around each one, and
   the row came apart into four outlined boxes. */
.wcd-swatches tr.wcd-choice__row:focus-visible {
	outline: 2px solid #5f7728;
	outline-offset: -2px;
}

.wcd-swatches tr.wcd-choice__row:focus-visible td {
	background: #f0f4e4;
}

/* --- The chosen row ------------------------------------------------------ */

.wcd-swatches tr.wcd-choice__row.is-active td {
	background: #f0f4e4;
}

.wcd-swatches tr.wcd-choice__row.is-active .wcd-choice__month {
	font-weight: 700;
}

/* --- The radio mark ------------------------------------------------------ */

/* These four carry the table's own td selector so they outrank the padding and
   sizing set on every cell above. */
.wcd-swatches table.wcd-choice td.wcd-choice__pick {
	width: 1px;
	padding-right: 0;
}

/* The filled centre is an inset shadow rather than a pseudo-element, so the dot
   needs no ::after of its own — which lets the shield at the foot of this file
   clear pseudo-elements off our spans without taking the mark with them. */
.wcd-swatches .wcd-choice__dot {
	display: block;
	width: 17px;
	height: 17px;
	border: 2px solid #c3c9b8;
	border-radius: 50%;
	background: #fff;
}

.wcd-swatches tr.wcd-choice__row:hover .wcd-choice__dot {
	border-color: #8ba93d;
}

.wcd-swatches tr.wcd-choice__row.is-active .wcd-choice__dot {
	border-color: #5f7728;
}

.wcd-swatches tr.wcd-choice__row.is-active .wcd-choice__dot {
	box-shadow: inset 0 0 0 4px #5f7728;
}

/* --- The columns --------------------------------------------------------- */

.wcd-swatches table.wcd-choice td.wcd-choice__month {
	font-weight: 600;
}

.wcd-swatches table.wcd-choice td.wcd-choice__off {
	width: 1px;
	white-space: nowrap;
	font-size: 0.8em;
	font-weight: 700;
	color: #46591d;
}

/* Beside the price of the chosen option, in the same green the list uses for
   what an option gives — so the eye that read it below recognises it above. */
.wcd-offer {
	display: inline-block;
	margin-left: 0.6em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: #eef3e0;
	color: #46591d;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: middle;
	white-space: nowrap;
}

.wcd-swatches table.wcd-choice td.wcd-choice__price {
	width: 1px;
	white-space: nowrap;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wcd-swatches .wcd-choice__price del {
	display: none;
}

.wcd-swatches .wcd-choice__price ins {
	text-decoration: none;
}

/* A combination WooCommerce has ruled out should look spent, not merely
   unselected. */
.wcd-swatches tr.wcd-choice__row.is-unavailable {
	cursor: not-allowed;
}

.wcd-swatches tr.wcd-choice__row.is-unavailable td {
	opacity: 0.4;
	text-decoration: line-through;
}

/* --- The dropdown it drives ---------------------------------------------- */

/* Out of sight but still in the page: WooCommerce's variation script reads and
 * writes it, and taking it out would take the price, the stock line and the
 * add-to-cart button with it.
 *
 * Hiding the select where it stood meant out-styling whatever the theme had
 * already said about it. Nothing else styles this wrapper, so no !important is
 * needed and none is used. */
.wcd-native {
	position: absolute;
	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;
}

/* Clicking the chosen row already clears it. Divi moves this link around inside
   the cell, so it is matched by where it lives rather than by what it follows. */
.woocommerce div.product form.variations_form .reset_variations {
	display: none;
}

/* --- Where the chooser sits ---------------------------------------------- */

/* Below the price and the button rather than above them. WooCommerce puts the
 * attribute table first; these two are siblings inside the form, so ordering
 * them is all it takes — no template override, nothing to re-apply after an
 * update. */
.woocommerce div.product form.variations_form {
	display: flex;
	flex-direction: column;
}

.woocommerce div.product form.variations_form > table.variations {
	order: 2;
	margin-bottom: 0;
}

.woocommerce div.product form.variations_form > .single_variation_wrap {
	order: 1;
}

/* The label column has nothing to line up with once the chooser is a table of
 * its own, so the row stacks instead.
 *
 * Every step is a child combinator. Descendant selectors here reach straight
 * through the cell into our own table and flatten that too — which is exactly
 * what turned the four rows into a stack of loose lines. */
.woocommerce div.product form.variations_form > table.variations,
.woocommerce div.product form.variations_form > table.variations > tbody,
.woocommerce div.product form.variations_form > table.variations > tbody > tr,
.woocommerce div.product form.variations_form > table.variations > tbody > tr > th,
.woocommerce div.product form.variations_form > table.variations > tbody > tr > td {
	display: block;
	width: auto;
	border: 0;
	padding: 0;
	background: none;
}

/* --- Shielding the chooser from the theme -------------------------------- */

/* Divi dresses the variation cell by element name, not by class, so three of its
 * rules reach past the cell and into our table:
 *
 *   td.value span:after  draws the dropdown's arrow on every span inside the
 *                        cell — which meant one on the radio dot and one on each
 *                        piece of each price, absolutely placed at the right
 *                        edge, where they piled up as a stroke through the
 *                        figures;
 *   .variations td       sets padding and max-width with !important;
 *   stacked labels       turn every td in the cell into a block.
 *
 * These three undo exactly those, for our table only. The !important is answering
 * an !important; the long selectors are answering specificity. Neither is here by
 * preference. */
.woocommerce div.product form.cart .variations .wcd-swatches span:after,
.woocommerce div.product form.cart .variations .wcd-swatches span:before {
	content: none;
	border: 0;
}

.woocommerce div.product form.cart .variations table.wcd-choice > tbody > tr > td {
	display: table-cell;
	padding: 11px 12px !important;
	max-width: none !important;
}

.woocommerce div.product form.cart .variations table.wcd-choice > tbody > tr > td.wcd-choice__pick {
	padding-right: 0 !important;
}

.woocommerce div.product form.cart .variations table.wcd-choice > tbody > tr {
	display: table-row;
}

/* The chooser's own frame and its row separators, stated where no theme rule
 * reaches. Two of them otherwise do:
 *
 *   form.cart table       sets a border-width on any table inside the form, and
 *   entry-content tr td   puts a line above every cell — which would rule
 *                         between the columns as well as between the rows.
 *
 * Both are more specific than the plain declarations at the top of this file. */
.woocommerce div.product form.cart .variations table.wcd-choice {
	border: 1px solid #d8dcd0;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce div.product form.cart .variations table.wcd-choice > tbody > tr > td {
	border: 0;
}

.woocommerce div.product form.cart .variations table.wcd-choice > tbody > tr + tr > td {
	border-top: 1px solid #eceee7;
}

.woocommerce div.product form.variations_form > table.variations > tbody > tr > th.label {
	margin: 14px 0 6px;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: #6b7280;
	text-align: left;
}

/* The range above the chooser, once an expiry has been picked.

   Hidden rather than removed: WooCommerce and the theme both write into this
   element, and taking it out of the page would break the next thing that looks
   for it. */
.wcd-range-hidden {
	display: none !important;
}