/**
 * Area: EDGE STATES 2 — the states fix-edge-states.css does not style.
 *
 * Everything here was measured on the live site on 18 Sep 2026 (see
 * SITE-AUDIT/EDGE-STATES-2.md). Nothing here restyles another area's blocks: every rule either
 * targets a WooCommerce/WoodMart state class that had NO styling at all, or a .yb-es2-* node
 * created by inc/areas/fix-edge-states2.php.
 *
 * Colours and spacing come from 00-tokens.css.
 */

/* ==========================================================================
   1. Add-to-cart that cannot be used yet
   --------------------------------------------------------------------------
   Variable product before a size is chosen: WooCommerce puts
   `.disabled.wc-variation-selection-needed` on the button, but it was drawn exactly like a live
   button — full red, pointer cursor, opacity 1 — and clicking it did nothing. Same treatment for
   a sold-out product's `[disabled]` button, and it matches the grey, not-allowed "Place order"
   button that fix-a5 already shows when no payment method is available (#D5D5D5).
   ========================================================================== */

body.yb .single_add_to_cart_button.wc-variation-selection-needed,
body.yb .single_add_to_cart_button.disabled,
body.yb .single_add_to_cart_button[disabled],
body.yb .single_add_to_cart_button[aria-disabled="true"] {
	background-color: #D5D5D5 !important;
	border-color: #D5D5D5 !important;
	color: #fff !important;
	cursor: not-allowed !important;
	box-shadow: none;
}

body.yb .single_add_to_cart_button.wc-variation-selection-needed:hover,
body.yb .single_add_to_cart_button.wc-variation-selection-needed:focus,
body.yb .single_add_to_cart_button.disabled:hover,
body.yb .single_add_to_cart_button.disabled:focus,
body.yb .single_add_to_cart_button[disabled]:hover,
body.yb .single_add_to_cart_button[disabled]:focus,
body.yb .single_add_to_cart_button[aria-disabled="true"]:hover,
body.yb .single_add_to_cart_button[aria-disabled="true"]:focus {
	background-color: #D5D5D5 !important;
	border-color: #D5D5D5 !important;
	color: #fff !important;
}

/* The keyboard ring must stay visible on the disabled-looking button. */
body.yb .single_add_to_cart_button[aria-disabled="true"]:focus-visible {
	outline: 2px solid var(--yb-ink, #000);
	outline-offset: 2px;
}

/* WooCommerce's own "choose an option" string, shown by fix-edge-states2.php only when the
   visitor clicks the button before choosing. Never rendered when that string is absent. */
body.yb .yb-es2-selectmsg {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--yb-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #CC0000;
}

body.yb .yb-es2-selectmsg:focus {
	outline: 2px solid var(--yb-ink, #000);
	outline-offset: 2px;
}

body.yb .yb-es2-selectmsg:focus:not(:focus-visible) {
	outline: 0;
}

/* ==========================================================================
   2. A size that is sold out
   --------------------------------------------------------------------------
   WoodMart marks it `.wd-disabled` and only drops it to opacity .4, which reads as "faint" more
   than as "gone" and leaves the label barely legible. A line through the size is the reference
   treatment and survives at a readable opacity.
   ========================================================================== */

body.yb .wd-swatch.wd-disabled,
body.yb .wd-swatch.wd-disabled:hover {
	opacity: 0.55;
	cursor: not-allowed;
}

body.yb .wd-swatch.wd-text.wd-disabled,
body.yb .wd-swatch.wd-text.wd-disabled:hover {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-underline-offset: 0;
}

/* ==========================================================================
   3. Backordered stock line
   --------------------------------------------------------------------------
   WooCommerce prints its own "Available on backorder" line; it had no styling, so it inherited
   the body size and sat flush against the add-to-cart row.
   ========================================================================== */

body.yb .stock.available-on-backorder {
	display: block;
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--yb-muted, #57585B);
}

/* ==========================================================================
   4. Empty wishlist
   --------------------------------------------------------------------------
   Two blocks land on the empty wishlist: the "Start a Wishlist" panel and
   fix-edge-states.php's category links. The links are useful, the stacking was not: pull them up
   so they read as one quiet row under the panel's button instead of a second empty state.
   (The wording of both blocks is the owner's call — see the report.)
   ========================================================================== */

body.yb:has(.yb-wl-start) .yb-edge--wish {
	margin-top: -8px;
	padding-top: 0;
	padding-bottom: 56px;
}

body.yb:has(.yb-wl-start) .yb-edge--wish .yb-edge__text {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--yb-muted, #57585B);
}

body.yb:has(.yb-wl-start) .yb-edge--wish .yb-edge-links a {
	font-size: 14px;
}

/* ==========================================================================
   5. Blog card with no featured image
   --------------------------------------------------------------------------
   WoodMart only prints `figure.entry-thumbnail` when the post has one. Without it
   `.entry-header` collapses to 0px and the absolutely positioned date badge inside it is drawn
   at 0x0 — the date disappears. Measured on /blogs/ with the thumbnail removed.
   ========================================================================== */

body.yb .blog-post-loop .entry-header:not(:has(.entry-thumbnail)) {
	position: relative;
	padding: 20px 20px 0;
}

body.yb .blog-post-loop .entry-header:not(:has(.entry-thumbnail)) .post-date {
	position: static;
	display: inline-flex;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	margin: 0;
}

/* The body block already carries its own padding, so keep the two from doubling up. */
body.yb .blog-post-loop .entry-header:not(:has(.entry-thumbnail)) + .article-body-container {
	padding-top: 12px;
}

/* ==========================================================================
   6. One search result
   --------------------------------------------------------------------------
   fix-edge-states2.php stops WooCommerce redirecting a single match straight to the product, so
   a one-tile grid now has to look deliberate rather than half-empty in a three-column row.
   ========================================================================== */

body.yb.search .products.grid-columns-3 > .product:only-child,
body.yb.search .products.grid-columns-4 > .product:only-child {
	max-width: 420px;
}

/* ==========================================================================
   7. Removal notices on the bag
   --------------------------------------------------------------------------
   "<product> removed. Undo?" is the one notice a visitor must not miss when the bag has just
   emptied. It already carries role="alert"; give the Undo link the same underlined affordance
   the rest of the site uses for inline links.
   ========================================================================== */

body.yb.woocommerce-cart .woocommerce-message a.restore-item {
	font-weight: 500;
	color: var(--yb-ink, #000);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.yb.woocommerce-cart .woocommerce-message a.restore-item:hover,
body.yb.woocommerce-cart .woocommerce-message a.restore-item:focus-visible {
	color: var(--yb-red, #D31334);
}

@media (max-width: 767px) {
	body.yb .yb-es2-selectmsg {
		font-size: 13px;
		line-height: 19px;
	}

	body.yb .blog-post-loop .entry-header:not(:has(.entry-thumbnail)) {
		padding: 16px 16px 0;
	}

	body.yb.search .products.grid-columns-3 > .product:only-child,
	body.yb.search .products.grid-columns-4 > .product:only-child {
		max-width: none;
	}
}