/* Utilities: grid and layout primitives */

.row { display: flex; gap: var(--pfse-spacing-2); align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.column, .col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }
.cols-center { align-items: center; }
.inline { display: inline-flex; align-items: center; gap: 6px; }
.flex-1 { flex: 1 1 auto; }
.minw-0 { min-width: 0; }
.push-right { margin-left: auto; }
.swatch-row { display: flex; align-items: center; gap: var(--pfse-spacing-1); flex-wrap: nowrap; max-width: 140px; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pfse-spacing-3); }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: var(--pfse-spacing-2); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Two-column responsive row (input + button) */
.row-1fr-auto { display: grid; grid-template-columns: 1fr auto; column-gap: var(--pfse-spacing-3); align-items: center; }

@media (max-width: 340px) {
	.row-1fr-auto { grid-template-columns: 1fr; }
	.row-1fr-auto > *:last-child { margin-top: var(--pfse-spacing-2); }
}