/* 3D-вьюер стола в карточке: modules/table-viewer.php, js/table-product-3d.js */

.table-product-media {
	position: relative;
}

.table-product-media__tabs {
	position: absolute;
	z-index: 4;
	top: 14px;
	left: 50%;
	display: flex;
	gap: 2px;
	padding: 3px;
	transform: translateX(-50%);
	border: 1px solid rgba(239, 125, 0, .24);
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.table-product-media__tabs[hidden] {
	display: none;
}

.table-product-media__tab {
	min-width: 64px;
	padding: 7px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #6b6259;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.table-product-media__tab[aria-selected="true"] {
	background: #ef7d00;
	color: #fff;
}

.table-product-media__tab:focus-visible {
	outline: 2px solid #ef7d00;
	outline-offset: 2px;
}

.table-product-3d {
	position: relative;
	height: clamp(390px, 34vw, 460px);
	overflow: hidden;
	background: #eeece8;
}

.table-product-3d[hidden] {
	display: none;
}

.table-product-3d iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0 !important;
}

/* Постер с фото и статус закрывают iframe, пока вьюер не загрузил модель. */
.table-product-3d__poster {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.table-product-3d__status {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 22px;
	margin: 0;
	padding: 9px 16px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: #4d4741;
	font-size: 13px;
	white-space: nowrap;
}

.table-product-3d__status[hidden],
.table-product-3d.is-ready .table-product-3d__poster,
.table-product-3d.is-ready .table-product-3d__status {
	display: none;
}

@media (max-width: 1199px) and (min-width: 992px) {
	.table-product-3d {
		height: clamp(360px, 37vw, 410px);
	}
}

@media (max-width: 767px) {
	.table-product-3d {
		height: min(440px, 112vw);
	}
}

/* Фото/3D и цена прилипают вместе; под цену резервируется место, чтобы 3D не наезжал на неё в конце колонки. */
@media (min-width: 992px) and (min-height: 720px) {
	/* overflow: hidden у обёртки темы отключает sticky; clip так же обрезает выступающее, но не мешает прилипанию. */
	#wrapper {
		overflow: clip;
	}

	.detail__grid--table.is-media-sticky {
		--table-sticky-top: 94px;
	}

	.detail__grid--table.is-media-sticky .detail__gallery {
		position: sticky;
		z-index: 2;
		top: var(--table-sticky-top);
		margin-bottom: calc(var(--table-info-height, 62px) + 16px);
	}

	.detail__grid--table.is-media-sticky .detail__info--table {
		position: sticky;
		top: calc(var(--table-sticky-top) + clamp(390px, 34vw, 460px) + 16px);
	}
}

@media (min-width: 992px) and (max-width: 1199px) and (min-height: 720px) {
	.detail__grid--table.is-media-sticky .detail__info--table {
		top: calc(var(--table-sticky-top) + clamp(360px, 37vw, 410px) + 16px);
	}
}

.table-product-3d-options__check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	color: #282828;
	font-size: 15px;
	cursor: pointer;
}

.table-product-3d-options__check input {
	width: 18px;
	height: 18px;
	accent-color: #ef7d00;
}

.table-crm-configurator__status {
	margin: 0 0 20px;
	color: #6b6259;
	font-size: 14px;
}

.table-crm-configurator__status--error {
	color: #b3261e;
}

[data-table-product-order].is-disabled {
	opacity: .5;
	cursor: not-allowed;
}