/**
 * WooCommerce — product identity, measurements, trust and sold state
 * ==========================================================================
 * Enqueued by inc/woocommerce.php on product pages only, alongside
 * woocommerce/product.css.
 *
 * Split from product.css rather than appended to it: that file was already at
 * 601 lines against the ~250-line guidance in PROJECT.md §9.3, and this is a
 * distinct concern — the detail stack that tasks 5.17-5.19 add below the price.
 *
 * Implements UI-LAYOUTS.md §7.1 (identity, measurements, trust row), §7.5
 * (sold state) and §7.6 (disclosure panels).
 *
 * @package Preloved
 * @since   1.0.0
 * ========================================================================== */


/* ==========================================================================
   1. Identity — brand and item ID
   ========================================================================== */

.product__identity {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-space-3);
	margin-block-end: var(--pl-space-2);
}

.product__brand {
	font-size: var(--pl-ui-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--pl-tracking-wide);
	color: var(--pl-text-secondary);
	text-decoration: none;
}

.product__brand:hover,
.product__brand:focus-visible { color: var(--pl-primary); }

.product__item-id { color: var(--pl-text-muted); }


/* ==========================================================================
   2. Condition
   ========================================================================== */

.product__condition {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pl-space-3);
	margin-block: var(--pl-space-4) var(--pl-space-3);
}

/* A linked badge must not lose the badge's own colour pairing to link styles. */
.badge--link {
	text-decoration: none;
	transition: filter var(--pl-fast) var(--pl-ease-standard);
}

.badge--link:hover { filter: brightness(0.95); }

.badge--link:focus-visible {
	outline: 2px solid var(--pl-focus);
	outline-offset: 2px;
}

.product__condition-link {
	font-size: var(--pl-body-sm);
	color: var(--pl-text-secondary);
	text-underline-offset: 3px;
}

.product__condition-link:hover { color: var(--pl-primary); }


/* ==========================================================================
   3. Fit line — size and origin
   ========================================================================== */

.product__fit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-space-2) var(--pl-space-5);
	margin: 0 0 var(--pl-space-5);
	padding-block: var(--pl-space-3);
	border-block: 1px solid var(--pl-line-soft);
	font-size: var(--pl-body-sm);
}

.product__fit-item {
	display: flex;
	align-items: baseline;
	gap: var(--pl-space-2);
}

.product__fit-item dt {
	margin: 0;
	color: var(--pl-text-muted);
}

.product__fit-item dd {
	margin: 0;
	font-weight: 600;
	color: var(--pl-text);
}


/* ==========================================================================
   4. Measurements
   ========================================================================== */

/* Flex, not `vertical-align`. The icon component is a block-level SVG, so the
   old inline alignment never took and the glyph sat on its own line above the
   heading. */
.product__specs-title {
	display: flex;
	align-items: center;
	gap: var(--pl-space-2);
}

.product__specs-title .icon { flex: 0 0 auto; }

/* Tighter rows than the spec list's default — this table can run to 7 rows. */
.spec-list--compact .spec-list__row { padding-block: var(--pl-space-2); }

.spec-list--compact .spec-list__value { font-variant-numeric: tabular-nums; }

.product__measure-note {
	margin-block-start: var(--pl-space-3);
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}

.product__measure-link {
	color: var(--pl-primary);
	white-space: nowrap;
}


/* ==========================================================================
   5. Trust row
   ========================================================================== */

.product__assurance {
	display: grid;
	gap: var(--pl-space-3);
	margin: var(--pl-space-6) 0;
	padding: var(--pl-space-4);
	list-style: none;
	background-color: var(--pl-peach-50);
	border-radius: var(--pl-radius-md);
	font-size: var(--pl-body-sm);
}

.product__assurance-item {
	display: flex;
	align-items: flex-start;
	gap: var(--pl-space-3);
}

.product__assurance-item .icon {
	flex: 0 0 auto;
	margin-block-start: 1px;
	color: var(--pl-primary);
}

.product__assurance-note {
	display: block;
	color: var(--pl-text-muted);
	font-size: var(--pl-caption);
}

/* The product-level promises (warranty, tested, inspection) reuse this list but
   sit on the neutral surface, so the green delivery panel does not read as a
   second delivery notice directly beneath the first. */
.product__assurance--product {
	background-color: var(--pl-bg-sunken);
}

/*
 * "This parcel is not opened before payment." Amber rather than red: it is a
 * condition of sale on fragile stock, not an error — but it must not look like
 * the reassurances above it, because it is the one line that takes something
 * away. Left border rather than a fill, so it reads as an aside on the same
 * surface instead of a second panel.
 */
.product__assurance-item--warn {
	padding-inline-start: var(--pl-space-3);
	border-inline-start: 3px solid var(--pl-warning);
}

.product__assurance-item--warn .icon {
	color: var(--pl-warning);
}

/* Woo wraps prices in .amount; inside the trust row they are body text. */
.product__assurance .amount { font-weight: 600; }


/* ==========================================================================
   6. Disclosure panels
   ========================================================================== */

.product__disclosures {
	margin-block: var(--pl-space-6);
	border-block-start: 1px solid var(--pl-line-soft);
}

/*
 * The `.disclosure` component itself now lives in
 * `components/disclosure.css`, imported globally by `main.css`. It was defined
 * here, which meant the checkout's login and coupon panels — the same component
 * — rendered unstyled, because this file only loads on product pages.
 * Only the product-page wrapper stays.
 */

.product__grade-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pl-space-2);
	margin-block-end: var(--pl-space-3);
}

.product__grade-desc { color: var(--pl-text-secondary); }

.product__flaws-title,
.product__panel-title {
	margin-block: var(--pl-space-4) var(--pl-space-2);
	font-family: var(--pl-font-body);
	font-size: var(--pl-body-sm);
	font-weight: 600;
	color: var(--pl-text);
}

.product__panel-title:first-child { margin-block-start: 0; }

.product__flaws p { margin-block: 0 var(--pl-space-2); }
.product__flaws p:last-child { margin-block-end: 0; }

.product__flaws--none { color: var(--pl-text-muted); }

.product__terms {
	margin: 0;
	padding-inline-start: var(--pl-space-5);
	display: grid;
	gap: var(--pl-space-2);
}

.product__panel-note {
	margin-block: var(--pl-space-2) 0;
	color: var(--pl-text-muted);
}

.product__panel-link {
	display: inline-block;
	margin-block-start: var(--pl-space-3);
	color: var(--pl-primary);
	font-weight: 600;
}


/* ==========================================================================
   7. Sold state — UI-LAYOUTS.md §7.5
   ========================================================================== */

.product__sold-panel {
	margin-block: var(--pl-space-5);
	padding: var(--pl-space-5);
	background-color: var(--pl-bg-sunken);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-md);
}

.product__sold-lead {
	margin: 0 0 var(--pl-space-2);
	font-family: var(--pl-font-display);
	font-size: var(--pl-h4);
	color: var(--pl-text);
}

.product__sold-note {
	margin: 0 0 var(--pl-space-4);
	font-size: var(--pl-body-sm);
	color: var(--pl-text-secondary);
}

.product__sold-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-space-3);
}

/*
 * The related strip is promoted above the description for a sold product, so
 * it needs the top margin the description would otherwise have provided.
 */
.related__title {
	margin-block-end: var(--pl-space-6);
	font-size: var(--pl-h2);
}

.related:focus { outline: none; }

/*
 * The card slots this phase fills (.card__brand, .card__meta) are styled in
 * components/cards.css, not here: cards render on the shop, the homepage and
 * inside this page's own related strip, so their rules belong in the global
 * bundle rather than a product-page stylesheet.
 */