/**
 * Product Taxonomy Details - stylesheet
 * Version: 1.3.1
 *
 * Structural layout only. Colors, typography, spacing, row direction,
 * alignment and the separators are all controlled from the Elementor
 * Style/Content tabs via generated inline selectors (see
 * class-ybsb-product-taxonomy-details-widget.php register_controls()).
 * This file just provides sane fallback layout so the widget looks
 * correct even before any control has been touched.
 *
 * Features implemented:
 * - Outer wrapper: Stacked (--column) or Inline (--row) rows
 * - Row: label + value, direction/alignment fallback before Elementor
 *   controls override them per breakpoint
 * - Label: bold, no-wrap
 * - Value (Row layout): terms + separator flow inline, wrap as needed
 * - Value (Line layout): each term stacked on its own line
 * - Separator: inline text node between terms in Row layout, styled
 *   independently via its own Style section
 * - Value links: color transition on hover
 * - Empty-value placeholder: dimmed
 * - Stock row: optional icon + text, colored per state via the
 *   Style > Stock Status controls. The text is the alignment anchor,
 *   so the label / value alignment controls behave the same with or
 *   without an icon, for font icons and SVG icons of any size.
 *
 * v1.3.1 changes:
 * - Stock row: the text now provides the row's baseline and height;
 *   the icon is centered on the text line and no longer influences the
 *   row's baseline or height.
 *
 * v1.3.0 changes:
 * - Added structural rules for the Stock row type (-stock, -stock-inner,
 *   -stock-icon, -stock-text). Per-state coloring is applied via
 *   Elementor's generated selectors.
 *
 * v1.2.1 changes:
 * - Rows Layout (Stacked / Inline) now controls flex-direction through
 *   the --column / --row modifier classes.
 * - Inline variant wraps on narrow screens and aligns on the text
 *   baseline.
 *
 * v1.1.0 changes:
 * - Added .ybsb-taxonomy-details-value--row / --line layout variants
 * - Added .ybsb-taxonomy-details-separator and .ybsb-taxonomy-details-term-line
 */

/* ── Outer wrapper - direction comes from the modifier class below,
	 based on the Rows Layout control (Stacked vs Inline) ── */
.ybsb-taxonomy-details {
	display: flex;
}

/* Stacked: each row on its own line (default) */
.ybsb-taxonomy-details--column {
	flex-direction: column;
}

/* Inline: all rows joined on one line via the Row Separator */
.ybsb-taxonomy-details--row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
}

/* ── Single row (one taxonomy or the stock row): label + value.
	 flex-direction and align-items are overridden per-breakpoint by the
	 Row Direction / Row Vertical Alignment controls - these are just the
	 fallback so the widget looks right before either control is touched. ── */
.ybsb-taxonomy-details-row {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
}

.ybsb-taxonomy-details-label {
	font-weight: 600;
	white-space: nowrap;
}

/* ── Row layout: terms + separators flow inline and wrap together ── */
.ybsb-taxonomy-details-value--row {
	display: inline;
}

/* ── Line layout: each term on its own line, stacked ── */
.ybsb-taxonomy-details-value--line {
	display: flex;
	flex-direction: column;
}

.ybsb-taxonomy-details-term-line {
	display: block;
}

.ybsb-taxonomy-details-separator {
	display: inline-block;
}

.ybsb-taxonomy-details-value a {
	transition: color 0.15s ease;
}

/* Shown in place of the value when the product has no terms for that
   taxonomy and "Hide Row If No Terms" is off. */
.ybsb-taxonomy-details-value-empty {
	opacity: 0.5;
}

/* ── Stock row: icon + text. Per-state color comes from the
	 Style > Stock Status controls (.ybsb-taxonomy-details-stock--*
	 modifiers) on the .ybsb-taxonomy-details-stock wrapper, so the icon
	 (currentColor) and the text share it.

	 Alignment: only the text takes part in baseline alignment, so the
	 row baseline and height come from the text alone. The icon is
	 centered on that text line and its margins keep it from making
	 the row taller, whatever icon type or size is used. ── */
.ybsb-taxonomy-details-stock-inner {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.ybsb-taxonomy-details-stock-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	align-self: center;
	margin-top: -100px;
	margin-bottom: -100px;
	line-height: 1;
}

.ybsb-taxonomy-details-stock-icon i {
	color: currentColor;
}

.ybsb-taxonomy-details-stock-icon svg {
	display: block;
	fill: currentColor;
}

.ybsb-taxonomy-details-stock-text {
	min-width: 0;
}