/**
 * YouBeauty — single product.
 *
 * Follows the CSL003 comp: gallery left, summary right, and the Description / Additional
 * information panels stacked open in the summary column rather than behind a tab strip. Reviews
 * and related products are full-width bands beneath, each under the comp's band heading — a
 * sentence-case title over a hairline rule spanning the column.
 *
 * The composition is set up in `functions.php` through `woocommerce_single_product_summary` and
 * `woocommerce_after_single_product_summary`; this file only draws it. Nothing here assumes markup
 * the catalogue cannot produce — the comp's shade and size swatches, instalment line, shipping
 * estimate and review histogram have no data behind them and are deliberately absent rather than
 * scaffolded.
 */

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

/*
 * Divi wraps the gallery and the summary in a bare `.clearfix` and floats both to ~48%. `:has()`
 * makes the grid conditional on that wrapper actually holding the summary, so if a Divi update
 * changes the wrapper the page falls back to the float layout instead of to a broken grid.
 */
#left-area div.product > .clearfix:has( > .summary ) {
	display: grid;
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 6fr );
	gap: clamp( var( --csl-space-6 ), 4vw, var( --csl-space-12 ) );
	align-items: start;
}

#left-area div.product > .clearfix:has( > .summary ) > .woocommerce-product-gallery,
#left-area div.product > .clearfix:has( > .summary ) > .summary {
	float: none;
	width: auto;
	margin: 0;
}

/* The flag anchors to the gallery's top-left corner, so the product box is its containing block. */
#left-area div.product {
	position: relative;
}

#left-area div.product > .clearfix > .onsale {
	top: 0 !important; /* Divi: `span.onsale { top:10px !important }`. */
	left: 0 !important; /* Divi: `span.onsale { left:10px !important }`. */
}

/* ------------------------------------------------------------------- gallery */

#left-area div.product .woocommerce-product-gallery {
	position: relative;
}

/*
 * The full-screen trigger, as a zoom-in glass — a magnifier with a plus in it, per the design.
 *
 * WooCommerce adds this link from `single-product.js` and draws its magnifier in CSS: a `::before`
 * ring and an `::after` handle over a white disc, with the glyph text pushed off-screen. The disc
 * and the positioning are kept; the two pseudo-elements go and the glass is an inline SVG on the
 * same box, navy to match the rest of the page's line icons. `content: none` rather than
 * `display: none` so nothing is generated at all.
 */
#left-area div.product .woocommerce-product-gallery__trigger {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23143242' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.6 15.6 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

#left-area div.product .woocommerce-product-gallery__trigger::before,
#left-area div.product .woocommerce-product-gallery__trigger::after {
	content: none;
}

/*
 * The image well is a fixed height, not the packshot's own.
 *
 * Catalogue images are wildly different shapes — this foundation is 600x1920, the Essie polish
 * 1329x1956, others are square. At `height: auto` in a 637px column the foundation rendered 2039px
 * tall, three times the height of the summary beside it. A fixed well with `object-fit: contain`
 * letterboxes each packshot instead, so every product page presents at the same size whatever
 * shape its photograph is.
 *
 * `!important` on the viewport is unavoidable and is the only one in this file that does not answer
 * Divi: WooCommerce's flexslider measures the tallest slide and writes the result as an *inline*
 * `height` on `.flex-viewport`. An inline style cannot be beaten from a stylesheet any other way.
 */
#left-area div.product .flex-viewport {
	height: auto !important; /* flexslider writes `height: 2039.25px` inline on this element. */
}

#left-area div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: clamp( 320px, 30vw, 520px );
	margin: 0;
	object-fit: contain;
}

/*
 * The thumbnail strip. WooCommerce's gallery script turns the wrapper into a flexslider and emits
 * `.flex-control-thumbs`; before it runs, the raw markup is a plain stack. Both are covered — the
 * strip is a horizontal row either way, and scrolls rather than wrapping when there are more
 * thumbnails than fit.
 */
#left-area div.product .flex-control-thumbs {
	display: flex;
	gap: var( --csl-space-2 );
	margin: var( --csl-space-4 ) 0 0;
	padding: 0 !important; /* Divi: `div.images div.thumbnails { padding-top:20px !important }`. */
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

#left-area div.product .flex-control-thumbs li {
	flex: 0 0 auto;
	width: 72px;
	margin: 0;
	list-style: none;
}

#left-area div.product .flex-control-thumbs img {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0;
	border: 1px solid var( --csl-rule );
	object-fit: contain;
	opacity: 1;
	cursor: pointer;
	transition: border-color var( --csl-transition );
}

#left-area div.product .flex-control-thumbs img:hover,
#left-area div.product .flex-control-thumbs img.flex-active {
	border-color: var( --csl-brand-pink-deep );
}

/* ------------------------------------------------------------------- summary */

#left-area div.product .summary.entry-summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* The brand eyebrow above the title. */
#left-area div.product .yb-product__brand {
	margin: 0 0 var( --csl-space-2 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

#left-area div.product .product_title.entry-title {
	margin: 0 0 var( --csl-space-3 );
	padding: 0 !important; /* Divi: `.entry-summary .entry-title { padding-bottom:14px !important }`. */
	color: var( --csl-ink );
	font-size: var( --csl-text-2xl );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-tight );
	line-height: var( --csl-leading-tight );
	text-transform: uppercase;
}

#left-area div.product .summary p.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --csl-space-3 );
	margin: 0 0 var( --csl-space-3 );
	line-height: var( --csl-leading-tight );
}

/* Sale price first and large, original struck beside it — the comp's order, not the DOM's. */
#left-area div.product .summary p.price ins {
	order: 1;
	font-size: var( --csl-text-3xl );
}

#left-area div.product .summary p.price del {
	order: 2;
	margin: 0;
}

#left-area div.product .summary p.price del .amount,
#left-area div.product .summary p.price ins .amount {
	font-size: inherit !important; /* Divi: `.entry-summary p.price span { font-size:26px !important }`. */
}

#left-area div.product .summary p.price del .amount {
	font-size: var( --csl-text-xl ) !important;
}

#left-area div.product .summary .stock {
	margin: 0 0 var( --csl-space-5 );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
}

#left-area div.product .summary .stock.in-stock {
	color: var( --csl-ink-soft );
}

#left-area div.product .summary .stock.out-of-stock {
	color: var( --csl-brand-pink-deep );
}

#left-area div.product .summary .woocommerce-product-details__short-description {
	margin: 0 0 var( --csl-space-5 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-sm );
	line-height: var( --csl-leading-normal );
}

/* ------------------------------------------------------------- add to cart */

/*
 * Quantity and the primary action on one row, as drawn. The form is a flex row rather than the
 * default float pair so the button can take the remaining width without a percentage.
 */
#left-area div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var( --csl-space-3 );
	width: 100%;
	margin: 0 0 var( --csl-space-6 ) !important; /* Divi: `div.product form.cart { margin:24px 0 39px }`. */
}

/*
 * A variable product prints its stepper, button and wishlist inside `.woocommerce-variation-add-to-cart`
 * — a block WooCommerce lays out with floats — rather than directly in the form. Its wrapper is given
 * the full row and the inner block the same flex row the form has, so both product types share one
 * layout: label, stepper and button across, the wishlist button on the line beneath.
 */
#left-area div.product form.cart .single_variation_wrap {
	flex: 1 1 100%;
}

#left-area div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var( --csl-space-3 );
}

/* `QTY:` before the stepper. Printed by `b7ectg_wc_qty_label()`; the stepper's own label is for screen readers. */
#left-area div.product form.cart .yb-qty-label {
	align-self: center;
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: 1;
	text-transform: uppercase;
}

#left-area div.product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

#left-area div.product form.cart .quantity .qty {
	width: 4.5rem;
	height: 100%;
	padding: 0.55em 0.5em;
	border: 2px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-sm );
	color: var( --csl-ink );
	font-size: var( --csl-text-base );
	font-weight: var( --csl-weight-semibold );
	text-align: center;
}

#left-area div.product form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 3rem;
	font-size: var( --csl-text-base );
	letter-spacing: var( --csl-tracking-wide );
	text-transform: uppercase;
}

/*
 * The wishlist action, as the full-width navy button beneath Add to cart that the Figma draws.
 *
 * It is TI Wishlist's own button — so the AJAX add, the "already in list" state and the filled
 * heart all keep working — restyled from the bare heart it used to be. The wrapper takes the whole
 * row so the button wraps beneath the stepper and Add to cart rather than sitting beside them.
 *
 * The label is the plugin's `Add to Wishlist` setting, which the shared rule in `woocommerce.css`
 * hides visually everywhere a heart alone is wanted; it is brought back here, on this button only.
 * The heart is the plugin's icon-font glyph on `::before`, which also swaps itself for the filled
 * form once the product is saved.
 */
#left-area div.product form.cart .tinv-wraper {
	display: block;
	flex: 1 1 100%;
	margin: 0;
}

#left-area div.product form.cart .tinvwl_add_to_wishlist_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --csl-space-2 );
	width: 100%;
	min-height: 3rem;
	padding: 0.7em 1.4em;
	border: 2px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-btn );
	background-color: var( --csl-brand-navy );
	color: #ffffff;
	font-size: var( --csl-text-base );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-wide );
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var( --csl-transition ), border-color var( --csl-transition );
}

#left-area div.product form.cart .tinvwl_add_to_wishlist_button:hover,
#left-area div.product form.cart .tinvwl_add_to_wishlist_button:focus-visible {
	border-color: var( --csl-brand-pink-deep );
	background-color: var( --csl-brand-pink-deep );
	color: #ffffff;
}

/* The plugin sizes and offsets its glyph for an inline text button; inside the flex row it is just a 1.25em heart. */
#left-area div.product form.cart .tinvwl_add_to_wishlist_button::before {
	margin: 0;
	font-size: 1.25em;
	vertical-align: baseline;
}

#left-area div.product form.cart .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

#left-area div.product form.cart .tinvwl-tooltip {
	display: none;
}

/* ---------------------------------------------------------------------- meta */

#left-area div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: var( --csl-space-1 );
	width: 100%;
	margin: 0;
	padding: 0 !important; /* Divi: `.product_meta { padding-top:6px }` with its own border. */
	border: 0 !important; /* Divi: `.product_meta { border-top:1px solid #dadada }`. */
	color: var( --csl-ink-soft ) !important; /* Divi: `.product_meta { color:#666 }`. */
	font-size: var( --csl-text-xs );
	line-height: var( --csl-leading-snug );
}

#left-area div.product .product_meta a {
	color: var( --csl-ink-soft ) !important; /* Divi: `.posted_in a { color:#2ea3f2 }`. */
	text-decoration: underline;
}

#left-area div.product .product_meta a:hover,
#left-area div.product .product_meta a:focus-visible {
	color: var( --csl-accent ) !important;
}

/* ------------------------------------------------------------------- panels */

/*
 * The stacked panels that replace the tab strip. Each carries the comp's rule *above* its label,
 * so the group reads as a list of sections rather than as a stack of cards.
 *
 * The `<h2>` is WooCommerce's own — `single-product/tabs/description.php` and its
 * additional-information sibling each print one, gated on a filter. Styling it rather than
 * printing a second means the label text stays whatever WooCommerce and its translations say.
 */
#left-area div.product .yb-product__panels {
	width: 100%;
	margin-top: var( --csl-space-6 );
}

#left-area div.product .yb-product__panel {
	padding: var( --csl-space-5 ) 0;
	border-top: 1px solid var( --csl-rule );
}

#left-area div.product .yb-product__panel > h2 {
	margin: 0 0 var( --csl-space-3 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

#left-area div.product .yb-product__panel p {
	margin: 0 0 var( --csl-space-3 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-sm );
	line-height: var( --csl-leading-normal );
}

#left-area div.product .yb-product__panel p:last-child {
	margin-bottom: 0;
}

/* The attribute table, as label/value rows rather than a bordered grid. */
#left-area div.product .yb-product__panel .shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var( --csl-text-sm );
}

#left-area div.product .yb-product__panel .shop_attributes tr {
	border-bottom: 1px solid var( --csl-rule );
}

#left-area div.product .yb-product__panel .shop_attributes tr:last-child {
	border-bottom: 0;
}

#left-area div.product .yb-product__panel .shop_attributes th,
#left-area div.product .yb-product__panel .shop_attributes td {
	padding: var( --csl-space-2 ) 0;
	border: 0;
	line-height: var( --csl-leading-snug );
	text-align: left;
	vertical-align: top;
}

#left-area div.product .yb-product__panel .shop_attributes th {
	width: 40%;
	color: var( --csl-ink );
	font-weight: var( --csl-weight-semibold );
}

#left-area div.product .yb-product__panel .shop_attributes td {
	color: var( --csl-ink-soft );
}

#left-area div.product .yb-product__panel .shop_attributes td p {
	margin: 0;
}

/* ---------------------------------------------------- reviews and related */

/*
 * Both bands take the comp's heading treatment. The headings belong to WooCommerce's templates —
 * `reviews.php` prints one and `related.php` prints another — so they are named here rather than
 * given a class through an override.
 */
#left-area div.product .yb-product__reviews,
#left-area div.product .related.products,
#left-area div.product .upsells.products {
	clear: both;
	margin-top: var( --csl-space-12 );
}

#left-area div.product .yb-product__reviews #reviews > h2,
#left-area div.product .yb-product__reviews .woocommerce-Reviews-title,
#left-area div.product .related.products > h2,
#left-area div.product .upsells.products > h2 {
	margin: 0 0 var( --csl-space-6 );
	padding: 0 0 var( --csl-space-3 ) !important; /* Divi: `.product .related h2 { padding-bottom:16px }`. */
	border-bottom: 1px solid var( --csl-ink );
	color: var( --csl-ink );
	font-size: var( --csl-text-2xl ) !important; /* Divi: `.product .related h2 { font-size:26px !important }`. */
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-tight );
	line-height: var( --csl-leading-tight );
}

#left-area div.product .yb-product__reviews .woocommerce-noreviews {
	margin: 0;
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-sm );
}

/*
 * The related and upsell rows reuse the archive tile, which `woocommerce.css` describes once for
 * every `ul.products` on the site. Only the things that differ in this row are set here: the
 * column count and a shorter image well.
 *
 * A fixed count, not the shared grid's `auto-fill`. The shop archive is a fluid grid on purpose —
 * it holds 97 products and should use whatever width it is given. This row holds an exact number,
 * and `auto-fill` sized its tracks to a floor rather than to that number, so the row rendered its
 * cards into a track count that did not match and left an empty column at the end.
 *
 * Five must match `b7ectg_wc_related_columns()`, which asks WooCommerce for five products. If the
 * two ever disagree the surplus card wraps onto a line of its own.
 */
#left-area div.product .related ul.products,
#left-area div.product .upsells ul.products {
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
}

/*
 * The card-based row `b7ectg_wc_related_cards()` prints. Same track count and the same gap the shop
 * grid uses (`shop.css`), so the tiles here are the tiles there at the same size and spacing. The
 * `ul.products` rules above remain for the upsell row and for the fallback when the plugin is off.
 */
#left-area div.product .yb-related__grid {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 2vw, 1.75rem );
	align-items: start;
}

/*
 * `woocommerce.css` paints every `.amount` in the content column navy and bold for the loop tile
 * and the summary price. The card colours its own two prices — the struck one soft and medium —
 * and that has to win here as it does on the shop, where there is no `#left-area` to outrank it.
 */
#left-area div.product .yb-related__grid .csl-card__price .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/*
 * The packshot is deliberately not given a height here.
 *
 * It used to be pinned to `height: 160px`. The well around it is `aspect-ratio: 1 / 1`, so at five
 * across it is ~243px tall on a 1440px screen — and a 160px image in a 243px box sits at the top of
 * it in normal flow, leaving a band of empty grey underneath. That is the "not in the middle" the
 * client reported, and it got worse as the row got wider, because the well grows with the column
 * and the image did not.
 *
 * Removing the override lets the shared tile rule in `woocommerce.css` apply — `width: 100%`,
 * `height: 100%`, `object-fit: contain` — so the image fills the square and `contain` centres it on
 * both axes whatever the packshot's aspect ratio. The catalogue's photos run from 1329x1956 to
 * 820x2157, so centring has to come from `object-fit` rather than from a fixed height that only
 * suits one shape.
 */

/* ------------------------------------------------------------- review form */

#left-area div.product #review_form_wrapper {
	margin-top: var( --csl-space-8 );
}

#left-area div.product #reply-title {
	margin: 0 0 var( --csl-space-3 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	text-transform: uppercase;
}

#left-area div.product .comment-form label {
	display: block;
	margin-bottom: var( --csl-space-1 );
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-semibold );
}

#left-area div.product .comment-form input[type="text"],
#left-area div.product .comment-form input[type="email"],
#left-area div.product .comment-form textarea {
	width: 100%;
	max-width: 32rem;
}

/* ------------------------------------------------------------------- mobile */

@media ( max-width: 980px ) {
	/*
	 * One column. The gallery leads, exactly as the source order already has it, so nothing needs
	 * reordering — the grid simply stops being two tracks.
	 */
	#left-area div.product > .clearfix:has( > .summary ) {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --csl-space-6 );
	}

	/*
	 * Four across once the page is one column. Five would put the card at ~166px here and ~129px by
	 * 768px, which is narrower than the packshot and its two-line title can carry. The row keeps
	 * five items — the fifth simply wraps onto a second line rather than being dropped.
	 */
	#left-area div.product .related ul.products,
	#left-area div.product .upsells ul.products,
	#left-area div.product .yb-related__grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/*
 * Two across on a phone. Below 768px the content column is ~345px at a 375px viewport, so even the
 * four of the block above would leave each card ~75px — narrower than the packshot needs. Two gives
 * ~166px, which is what the shop grid already drops its own tiles to at this width.
 *
 * This has to be stated rather than left to the shared tile: pinning the count above overrides the
 * fluid `auto-fill` that used to do this on its own, at a higher specificity than
 * `woocommerce.css`'s own narrow-width rule.
 */
@media ( max-width: 767px ) {
	#left-area div.product .related ul.products,
	#left-area div.product .upsells ul.products,
	#left-area div.product .yb-related__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 479px ) {
	#left-area div.product .product_title.entry-title {
		font-size: var( --csl-text-xl );
	}

	#left-area div.product .summary p.price ins {
		font-size: var( --csl-text-2xl );
	}

	/* The action stays one tap target on its own line rather than shrinking beside the stepper. */
	#left-area div.product form.cart .single_add_to_cart_button {
		flex: 1 1 100%;
	}

	/*
	 * Nothing here for the related row's column count — it is already two across from 767px down,
	 * set in the block above. The gap and the image well still come from the shared tile.
	 */
}

/* ------------------------------------------------------- the shade swatch picker
 *
 * Squares in a tight grid with the shade name above, per the product page comp. WooCommerce's own
 * `<select>` is hidden only once the script has taken over - `.yb-swatches--ready` is set in JS -
 * so if the script fails the native dropdown is still there and the product is still buyable.
 *
 * A shade with no colour in term meta renders as a text pill rather than a guessed colour, so the
 * grid mixes squares and pills until the remaining values are filled in.
 */
.yb-swatches {
	margin: 0 0 1.25rem;
}

/*
 * WooCommerce prints the attribute name in its own label cell, and the swatch group prints it
 * again with the chosen shade beside it. Drop WooCommerce's, keep the one that says what is
 * selected, and let the value cell take the full row.
 */
.variations tr:has( .yb-swatches--ready ) th.label {
	display: none;
}

.variations tr:has( .yb-swatches--ready ) td.value {
	display: block;
	width: 100%;
}

.variations .yb-swatches--ready + select,
.variations td.value select:has(~ .yb-swatches--ready) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset( 50% );
	white-space: nowrap;
}

.yb-swatches__label {
	margin: 0 0 0.5rem;
	color: #143242;
	font-size: 0.8125rem;
	font-weight: 700;
}

.yb-swatches__selected {
	color: #ef357f;
	font-weight: 600;
}

.yb-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yb-swatches__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The swatch is a 2px-inset ring: the border stays transparent until selected, so the square does
 * not move or resize when chosen - only the ring colour changes.
 */
.yb-swatch {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	background: var( --yb-swatch, #e3e6e8 );
	background-clip: content-box;
	box-shadow: inset 0 0 0 1px rgba( 20, 50, 66, 0.12 );
	cursor: pointer;
	transition: border-color 120ms ease;
}

.yb-swatch:hover {
	border-color: rgba( 239, 53, 127, 0.4 );
}

.yb-swatch[aria-checked="true"] {
	border-color: #ef357f;
}

.yb-swatch:focus-visible {
	outline: 2px solid #143242;
	outline-offset: 2px;
}

/*
 * Unavailable shades stay selectable - WooCommerce then says why - but read as struck through.
 *
 * The strike is a gradient rather than a rotated pseudo-element. A rotated line has to be sized in
 * advance, and at the width of a text pill a 45-degree rotation threw it well outside the box; a
 * corner-to-corner gradient fits whatever size the swatch happens to be, square or pill.
 */
.yb-swatch--oos {
	background-image: linear-gradient(
		to top right,
		transparent calc( 50% - 1px ),
		rgba( 20, 50, 66, 0.55 ) calc( 50% - 1px ),
		rgba( 20, 50, 66, 0.55 ) calc( 50% + 1px ),
		transparent calc( 50% + 1px )
	);
}

/* No colour recorded for this shade: show the name, never a guess. */
.yb-swatch--text {
	width: auto;
	min-width: 2rem;
	height: auto;
	padding: 0.375rem 0.625rem;
	/*
	 * `background-color`, never the `background` shorthand: the shorthand resets `background-image`
	 * and silently erased the out-of-stock strike on every text pill.
	 */
	background-color: #ffffff;
	color: #143242;
	font-size: 0.75rem;
	line-height: 1.2;
	white-space: nowrap;
}

.yb-swatch__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* The text pill shows its own name, so its screen-reader copy would be read twice. */
.yb-swatch--text .yb-swatch__sr {
	display: none;
}

@media (max-width: 767px) {
	.yb-swatch {
		width: 2.25rem;
		height: 2.25rem;
	}
}