/*
   NIOS — the customer's engraving, shown inside WooCommerce's own order
   tables (My Account > view order, and the order-received page). Loaded from
   inc/account/order-design.php on those two screens only.

   Same language as the rest of the account area: white surface, 1px #e5ddd3
   border, 12px radius, muted #665f59 captions. Not scoped under .nios-account
   because the order-received page is a different template.
*/

.nios-order-design {
	display: block;
	margin: 10px 0 2px;
	padding: 12px;
	border: 1px solid #e5ddd3;
	border-radius: 12px;
	background: #fffdfc;
	text-align: start;
}

.nios-order-design__title {
	display: block;
	margin-bottom: 10px;
	font: 600 12px/18px var(--nios-font, sans-serif);
	color: #665f59;
}

.nios-order-design__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nios-order-design__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	max-width: 160px;
}

.nios-order-design__item a {
	display: block;
	border-radius: 8px;
}
.nios-order-design__item a:focus-visible {
	outline: 2px solid var(--nios-accent, #ad6c22);
	outline-offset: 2px;
}

.nios-order-design__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 160px;
	border: 1px solid #e5ddd3;
	border-radius: 8px;
	background: #fff;
}

.nios-order-design__caption {
	font: 500 11px/16px var(--nios-font, sans-serif);
	color: #665f59;
	text-align: center;
}

@media (min-width: 768px) {
	.nios-order-design { padding: 14px; }
	.nios-order-design__item,
	.nios-order-design__img { max-width: 190px; }
}