/**
 * Vlaggenlijn Studio — design summary.
 * Used in the cart, the customer's order view, the admin order screen and the
 * printable production sheet. Namespaced under .vlst- so no theme rule bleeds in.
 */

.vlst-summary,
.vlst-cart-item,
.vlst-admin-item {
	--vlst-ink: #16181d;
	--vlst-muted: #6b7280;
	--vlst-line-color: #e3e5e9;
	--vlst-accent: #5a9b97;
	font-size: 14px;
	line-height: 1.5;
	color: var(--vlst-ink);
}

/* --- the bunting itself --------------------------------------------------- */

.vlst-line {
	--vlst-flag-w: 44px;
	--vlst-flag-h: 68px;
	--vlst-cord: #ffffff;
	--vlst-letter: #000000;
	--vlst-shadow: transparent;
	--vlst-font: Arial, Helvetica, sans-serif;
	position: relative;
	padding: 10px 0 6px;
	margin: 0 0 14px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.vlst-line__cord {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 4px;
	background: var(--vlst-cord);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
	min-width: 100%;
}

.vlst-line__flags {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 2px;
	padding-top: 14px;
	width: max-content;
	min-width: 100%;
}

.vlst-flag {
	position: relative;
	flex: 0 0 auto;
	width: var(--vlst-flag-w);
	height: var(--vlst-flag-h);
}

.vlst-flag__shape {
	position: absolute;
	inset: 0;
	background: #eceef1 center/cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.vlst-line--triangle .vlst-flag__shape {
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 2026-10-29: the "schaduwrand" outlines the letters/symbols, not the flag. */
.vlst-line.has-shadow .vlst-flag__letter {
	--vlst-o: max(1px, calc(var(--vlst-flag-w) * .03));
	text-shadow:
		var(--vlst-o) 0 0 var(--vlst-shadow),
		calc(var(--vlst-o) * -1) 0 0 var(--vlst-shadow),
		0 var(--vlst-o) 0 var(--vlst-shadow),
		0 calc(var(--vlst-o) * -1) 0 var(--vlst-shadow),
		var(--vlst-o) var(--vlst-o) 0 var(--vlst-shadow),
		calc(var(--vlst-o) * -1) var(--vlst-o) 0 var(--vlst-shadow),
		var(--vlst-o) calc(var(--vlst-o) * -1) 0 var(--vlst-shadow),
		calc(var(--vlst-o) * -1) calc(var(--vlst-o) * -1) 0 var(--vlst-shadow),
		0 1px 2px rgba(0, 0, 0, .18);
}

.vlst-flag__letter {
	position: absolute;
	left: 0;
	right: 0;
	top: 22%;
	text-align: center;
	font-family: var(--vlst-font);
	font-weight: 800;
	font-size: calc(var(--vlst-flag-w) * .48);
	line-height: 1;
	color: var(--vlst-letter);
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
	pointer-events: none;
}

.vlst-line--rectangle .vlst-flag__letter {
	top: 50%;
	transform: translateY(-50%);
}

/* --- specification table -------------------------------------------------- */

.vlst-specs {
	width: 100%;
	max-width: 420px;
	border-collapse: collapse;
	margin: 0 0 12px;
	font-size: 13px;
}

.vlst-specs th,
.vlst-specs td {
	text-align: left;
	padding: 5px 8px 5px 0;
	border-bottom: 1px solid var(--vlst-line-color);
	vertical-align: middle;
}

.vlst-specs th {
	width: 45%;
	font-weight: 500;
	color: var(--vlst-muted);
}

.vlst-specs td {
	font-weight: 600;
}

.vlst-specs--price .is-total th,
.vlst-specs--price .is-total td {
	border-top: 2px solid var(--vlst-ink);
	border-bottom: 0;
	font-weight: 700;
	color: var(--vlst-ink);
}

.vlst-swatch {
	display: inline-block;
	width: 13px;
	height: 13px;
	border-radius: 3px;
	margin-right: 6px;
	vertical-align: -2px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

/* --- per-flag list -------------------------------------------------------- */

.vlst-flaglist {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 4px 16px;
	counter-reset: vlstflag;
	font-size: 13px;
}

.vlst-flaglist li {
	counter-increment: vlstflag;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	border-bottom: 1px solid var(--vlst-line-color);
	margin: 0;
}

.vlst-flaglist li::before {
	content: counter(vlstflag);
	flex: 0 0 20px;
	font-variant-numeric: tabular-nums;
	color: var(--vlst-muted);
	font-size: 11px;
	text-align: right;
}

.vlst-flaglist__thumb {
	flex: 0 0 22px;
	height: 22px;
	border-radius: 4px;
	background: #eceef1 center/cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.vlst-flaglist__letter {
	flex: 0 0 20px;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
}

.vlst-flaglist__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #374151;
}

/* --- fabric tally --------------------------------------------------------- */

.vlst-tally {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
}

.vlst-tally li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid var(--vlst-line-color);
	margin: 0;
}

.vlst-tally__thumb {
	flex: 0 0 26px;
	height: 26px;
	border-radius: 4px;
	background: #eceef1 center/cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.vlst-tally__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vlst-tally__count {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- layout helpers ------------------------------------------------------- */

.vlst-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.vlst-col {
	flex: 1 1 260px;
	min-width: 0;
}

.vlst-summary h4,
.vlst-admin-item h4 {
	margin: 14px 0 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--vlst-muted);
}

.vlst-summary__details,
.vlst-cart-item__details {
	margin: 8px 0;
}

.vlst-summary__details > summary,
.vlst-cart-item__details > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--vlst-accent);
	font-weight: 600;
}

.vlst-cart-item {
	margin: 8px 0 0;
}

.vlst-cart-item__edit {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--vlst-accent);
	text-decoration: underline;
}

/* --- admin ---------------------------------------------------------------- */

.vlst-admin-item {
	margin: 10px 0 4px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.vlst-admin-item__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.vlst-admin-item__bar strong {
	margin-right: auto;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #6b7280;
}