/* PCB lines on the cart and checkout pages. Applies only to lines marked by Oku_PCB_Cart::item_class(). */
.oku-pcb-cart-item dl.variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 8px;
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.4;
}

.oku-pcb-cart-item dl.variation dt {
	float: none;
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: var(--oku-color-muted, #5b6b73);
}

.oku-pcb-cart-item dl.variation dd {
	float: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--oku-color-ink, #13202a);
	overflow-wrap: anywhere;
}

.oku-pcb-cart-item dl.variation dd p {
	margin: 0;
	font: inherit;
	color: inherit;
}

.oku-co-summary__item.oku-pcb-cart-item {
	align-items: start;
}

/* Below: only an older theme, which shows these details in its own row. */
/* One line is one job: the number of boards is part of its specification and price. */
.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-qty__btn {
	display: none;
}

.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-qty {
	justify-content: center;
}

/*
 * Cart page, tablet and up. The product column is too narrow for the details, so they get
 * their own row across the line. The other columns still line up with the table heading.
 */
@media (min-width: 48em) {
	.oku-cart-item.oku-pcb-cart-item:not(.oku-cart-job) {
		grid-template-columns: 4.5rem minmax(0, 1fr) 6.5rem 9rem 6.5rem 2.25rem;
		row-gap: 2px;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__product,
	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__info {
		display: contents;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__info > * {
		grid-column: 2 / -1;
		justify-self: start;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__info > :not(dl) {
		grid-column: 2;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__info > dl.variation {
		grid-column: 2 / -1;
		justify-self: stretch;
		grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
		width: 100%;
		max-width: 34rem;
		margin-block-start: 8px;
	}

	/* The Gerber file comes first, and its name can be long. */
	.oku-pcb-cart-item:not(.oku-cart-job) dl.variation dd:first-of-type {
		grid-column: 2 / -1;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__thumb {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__price {
		grid-column: 3;
		grid-row: 1 / span 3;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__qty {
		grid-column: 4;
		grid-row: 1 / span 3;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__subtotal {
		grid-column: 5;
		grid-row: 1 / span 3;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__remove {
		grid-column: 6;
		grid-row: 1 / span 3;
	}
}

/* Where the name would have almost no width, the figures drop below it. */
@media (min-width: 48em) and (max-width: 57.99em), (min-width: 64em) and (max-width: 79.99em) {
	/* The theme's fixed columns are wider than the panel here, so these ones flex. */
	.oku-cart-item.oku-pcb-cart-item:not(.oku-cart-job) {
		grid-template-columns: 4.5rem 0 minmax(0, 1fr) auto minmax(0, 1fr) 2.25rem;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__info > :not(dl) {
		grid-column: 2 / 6;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__info > dl.variation {
		grid-column: 1 / -1;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__price,
	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__qty,
	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__subtotal {
		grid-row: 4;
	}

	.oku-pcb-cart-item:not(.oku-cart-job) .oku-cart-item__remove {
		grid-row: 1;
	}
}