/**
 * CzarCommerce — Utilities (FASE 12.3 — mini extensão 2026-05-28)
 *
 * Classes utility opt-in com baixíssima especificidade (0,0,1,0 sem !important
 * salvo `.czar-hidden`). Cobrem necessidades comuns que código novo invoca
 * com frequência sem precisar definir CSS local. Cada utility é independente
 * (não consome variáveis fora de `tokens.css`).
 *
 * Algumas dessas existem como wd-* equivalentes no framework herdado (`wd-hide`,
 * `wd-align-center`, `wd-row-gap`, `wd-aspect-ratio`). Markup novo deve preferir
 * a versão czar-*. A migração inversa (wd-* → czar-*) em templates legacy é
 * trabalho de PR-por-template (pendência #15 ainda aberta).
 */

/* === Display === */
.czar-hidden { display: none !important; }
.czar-block { display: block; }
.czar-inline-block { display: inline-block; }
.czar-flex { display: flex; }
.czar-inline-flex { display: inline-flex; }

/* === Position === */
.czar-fill {
	position: absolute;
	inset: 0;
}
.czar-relative { position: relative; }
.czar-absolute { position: absolute; }
.czar-fixed { position: fixed; }
.czar-sticky { position: sticky; }

/* === Acessibilidade === */
.czar-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* === Alinhamento de texto === */
.czar-text-center { text-align: center; }
.czar-text-left { text-align: left; }
.czar-text-right { text-align: right; }

/* === Truncamento === */
.czar-no-wrap { white-space: nowrap; }
.czar-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* === Aspect ratio === */
.czar-aspect-1 { aspect-ratio: 1 / 1; }
.czar-aspect-16-9 { aspect-ratio: 16 / 9; }
.czar-aspect-4-3 { aspect-ratio: 4 / 3; }
.czar-aspect-3-2 { aspect-ratio: 3 / 2; }

/* === Row gap (complementa czar-grid--gap-*) === */
.czar-row-gap-sm { row-gap: var(--czar-space-2); }
.czar-row-gap-md { row-gap: var(--czar-space-4); }
.czar-row-gap-lg { row-gap: var(--czar-space-6); }

/* === Visibilidade responsiva === */
@media (max-width: 768px) {
	.czar-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
	.czar-hide-desktop { display: none !important; }
}

/* === Reduced motion utility === */
@media (prefers-reduced-motion: reduce) {
	.czar-respect-motion {
		animation: none !important;
		transition: none !important;
	}
}

/* === Pendência #15 round 2026-05-29 ===
 * Espelhos para wd-* de alto volume que dependem de CSS vars (--wd-X) ou são
 * utilities simples. Permite uso aditivo `class="czar-X wd-X"` em PHPs novos
 * e migração progressiva para o namespace próprio.
 */
.czar-invisible {
	visibility: hidden;
}
.czar-row-gap {
	/* Mirrora a behavior de .wd-row-gap (legacy) que lê --wd-row-gap inline. */
	row-gap: var(--wd-row-gap, var(--czar-space-3, 0.75rem));
}
.czar-aspect-ratio {
	/* Mirrora .wd-aspect-ratio (legacy) que lê --wd-aspect-ratio inline. */
	aspect-ratio: var(--wd-aspect-ratio, auto);
}
.czar-align {
	/* Mirrora .wd-align (legacy) que lê --wd-align inline. */
	text-align: var(--wd-align);
}
.czar-action-btn {
	/* Mirrora a base de .wd-action-btn (compound selectors permanecem em legacy CSS). */
	flex: 0 0 auto;
}

/* === Pendência #15 round 2026-05-28 (bump 1.14.0) === */
.czar-scroll-content {
	/* Mirrora .wd-scroll-content (legacy): container com scroll vertical limitado. */
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	max-height: var(--wd-scroll-h, 50dvh);
}
.czar-entities-title {
	/* Mirrora .wd-entities-title: títulos de produtos, posts, terms. */
	display: block;
	color: var(--wd-entities-title-color, inherit);
	word-wrap: break-word;
	font-weight: var(--wd-entities-title-font-weight, inherit);
}
.czar-entities-title a {
	color: inherit;
}
.czar-grid-g {
	/* Mirrora .wd-grid-g: grid responsivo que lê --wd-col/--wd-gap inline. */
	display: grid;
	grid-template-columns: repeat(var(--wd-col, 1), minmax(0, 1fr));
	gap: var(--wd-gap, var(--czar-space-3, 0.75rem));
}
.czar-grid-g > .czar-wider,
.czar-grid-g > .wd-wider {
	grid-column: auto / span 2;
	grid-row: auto / span 2;
}
.czar-entry-content > * {
	/* Mirrora .wd-entry-content: layout flow padrão entre blocos. */
	margin-block: 0 var(--wd-block-spacing, var(--czar-space-4, 1rem));
}
.czar-entry-content > :last-child {
	margin-bottom: 0;
}
.czar-loader-overlay {
	/* Mirrora .wd-loader-overlay: overlay de spinner durante AJAX. */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	z-index: 10;
	pointer-events: none;
}

/* === Pendência #15 round 2026-05-28 part 2 (bump 1.15.0) ===
 * Mirrors para classes do compound `.wd-action-btn` (ícone + texto interno).
 * Bodies aqui são fail-safes mínimos — comportamento visual REAL continua vindo
 * de css/parts/base.min.css quando duplicated `czar-X wd-X`.
 */
.czar-action-icon {
	/* Mirrora .wd-action-icon: container relativo para os pseudo-elementos do ícone. */
	position: relative;
}
.czar-action-text {
	/* Mirrora .wd-action-text: cor + transição. Var fallback para inherit. */
	color: var(--wd-action-text-color, inherit);
	transition: color 0.25s ease;
}
.czar-style-icon {
	/* Mirrora .wd-style-icon: setter de var, behavior real em compound `.wd-action-btn`. */
	--wd-action-icon-size: 20px;
}
.czar-style-text {
	/* Mirrora .wd-style-text: marcador para variante text-only. Body vazio. */
}
.czar-cross-icon {
	/* Mirrora .wd-cross-icon: setter de glyph icon font, ativado em compound. */
	--wd-btn-icon: "\f112";
}