/**
 * NOMA — файлы для дизайнеров: блок «3D-модели и чертежи» на странице товара.
 *
 * ВАЖНО про масштабирование. Сайт зумится «как в Тильде»: секция .noma-scale
 * верстается на артборде 1200 px и целиком масштабируется через
 * zoom: var(--noma-zoom) (themes/noma/assets/css/noma-autoscale.css).
 * Поэтому здесь ТОЛЬКО обычные px из макета — ни vw, ни rem, ни var(--noma-*):
 * иначе размер умножится на зум дважды. Мобильные значения — для артборда 360 px.
 *
 * Линии и размеры — как у вкладок товара (noma-product-tabs), цвета — токены сайта, как в
 * кабинете (noma-dz-account.css): текст #454545, заголовок и ссылки #000, название файла
 * #151515, второстепенное #646464. Все селекторы начинаются с .noma-dz: блок стоит внутри
 * виджета «ЧЕРТЁЖ», и так правила темы и набора Elementor (h2, a) его не перебивают.
 */

.noma-dz {
	box-sizing: border-box;
	width: 100%;
	margin: 48px 0 0;
	font-family: MainFont, sans-serif;      /* как весь сайт; тема по умолчанию даёт системный шрифт */
	color: #454545;
}

.noma-dz *,
.noma-dz *::before,
.noma-dz *::after {
	box-sizing: border-box;
}

.noma-dz.noma-dz--standalone {
	margin-top: 32px;
}

/* --- заголовок --------------------------------------------------------- */
.noma-dz .noma-dz__title {
	margin: 0 0 16px;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #000;
}

/* --- список файлов ----------------------------------------------------- */
.noma-dz .noma-dz__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #e3e3e3;
}

.noma-dz .noma-dz__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 72px 96px;
	column-gap: 16px;
	align-items: baseline;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	border-bottom: 1px solid #efefef;
	font-size: 15px;
	line-height: 1.4;
}

.noma-dz .noma-dz__name {
	color: #151515;
	overflow-wrap: anywhere;
}

.noma-dz .noma-dz__meta {
	display: contents;
}

.noma-dz .noma-dz__format,
.noma-dz .noma-dz__size {
	font-size: 14px;
	color: #646464;
	white-space: nowrap;
}

.noma-dz .noma-dz__action {
	justify-self: end;
	text-align: right;
}

/* --- ссылка «скачать» -------------------------------------------------- */
.noma-dz .noma-dz__link {
	font-size: 15px;
	color: #454545;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	white-space: nowrap;
	box-shadow: none;
	transition: color 160ms ease;
}

.noma-dz .noma-dz__link:hover,
.noma-dz .noma-dz__link:focus-visible {
	color: #000;
}

.noma-dz .noma-dz__link:focus-visible {
	outline: 1px solid #000;
	outline-offset: 3px;
}

.noma-dz .noma-dz__link--disabled,
.noma-dz .noma-dz__link--disabled:hover {
	color: #8c8c8c;
	border-bottom-color: transparent;
	cursor: default;
}

/* --- кнопка «Скачать» (1.2.0) ------------------------------------------ */
/* Чёрная прямоугольная, как кнопки заявки сайта; ghost — вторичная (контур). */
.noma-dz .noma-dz__actions,
.noma-dz .noma-dz__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0;
}

.noma-dz .noma-dz__actions {
	margin-top: 24px;
}

.noma-dz .noma-dz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 0 32px;
	border: 1px solid #151515;
	border-radius: 0;
	background: #151515;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.noma-dz .noma-dz-btn:hover,
.noma-dz .noma-dz-btn:focus-visible {
	background: #fff;
	color: #151515;
}

.noma-dz .noma-dz-btn:focus-visible {
	outline: 1px solid #000;
	outline-offset: 3px;
}

.noma-dz .noma-dz-btn[disabled],
.noma-dz .noma-dz-btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.noma-dz .noma-dz-btn--ghost {
	background: transparent;
	color: #151515;
}

.noma-dz .noma-dz-btn--ghost:hover,
.noma-dz .noma-dz-btn--ghost:focus-visible {
	background: #151515;
	color: #fff;
}

.noma-dz .noma-dz-btn--disabled,
.noma-dz .noma-dz-btn--disabled:hover {
	border-color: #c8c8c8;
	background: #f2f2f2;
	color: #8c8c8c;
	cursor: default;
}

.noma-dz .noma-dz__added {
	font-size: 15px;
	color: #151515;
}

.noma-dz .noma-dz__added::before {
	content: "\2713";
	margin-right: 8px;
}

.noma-dz .noma-dz__hint {
	font-size: 14px;
	line-height: 1.4;
	color: #646464;
}

.noma-dz .noma-dz__error {
	flex-basis: 100%;
	margin: 0;
	font-size: 14px;
	color: #a00;
}

/* --- примечание -------------------------------------------------------- */
.noma-dz .noma-dz__note {
	margin: 16px 0 0;
	max-width: 560px;
	font-size: 14px;
	line-height: 1.5;
	color: #646464;
}

.noma-dz .noma-dz__note a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	box-shadow: none;
	transition: color 160ms ease;
}

.noma-dz .noma-dz__note a:hover {
	color: #646464;
}

.noma-dz .noma-dz__note a:focus-visible {
	outline: 1px solid #000;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.noma-dz .noma-dz__link,
	.noma-dz .noma-dz-btn,
	.noma-dz .noma-dz__note a {
		transition: none;
	}
}

/* --- мобильный артборд 360 --------------------------------------------- */
@media (max-width: 767px) {
	.noma-dz {
		margin-top: 32px;
	}

	.noma-dz .noma-dz__item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"name"
			"meta";
		row-gap: 4px;
		padding: 12px 0;
		font-size: 14px;
	}

	.noma-dz .noma-dz__name {
		grid-area: name;
	}

	.noma-dz .noma-dz__meta {
		display: flex;
		gap: 8px;
		grid-area: meta;
	}

	.noma-dz .noma-dz__format,
	.noma-dz .noma-dz__size {
		font-size: 13px;
	}

	.noma-dz .noma-dz__actions,
	.noma-dz .noma-dz__form {
		flex-direction: column;
		align-items: stretch;
	}

	.noma-dz .noma-dz__actions {
		margin-top: 20px;
	}

	.noma-dz .noma-dz-btn {
		width: 100%;
		min-height: 48px;
		font-size: 14px;
	}

	.noma-dz .noma-dz__hint,
	.noma-dz .noma-dz__added {
		font-size: 13px;
	}

	.noma-dz .noma-dz__note {
		font-size: 13px;
	}
}