/* DTJ Decor Viewer */

/* A swatch that opens its full picture: a zoom pointer and a small magnifier on the corner of the picture. */
.dtj-sw figure.dtjdv-has { position: relative; cursor: zoom-in; }
.dtj-sw figure.dtjdv-has::before {
	content: ""; position: absolute; z-index: 2; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
	background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5243' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 16px no-repeat;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25); opacity: 0; transform: scale(.85); transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}
.dtj-sw figure.dtjdv-has:hover::before,
.dtj-sw figure.dtjdv-has:focus-visible::before { opacity: 1; transform: none; }
.dtj-sw figure.dtjdv-has:focus-visible { outline: 3px solid var(--e-global-color-primary, #2E5243); outline-offset: 3px; border-radius: 4px; }
@media (hover: none), (pointer: coarse) {
	.dtj-sw figure.dtjdv-has::before { opacity: .9; transform: scale(.85); }
}

html.dtjdv-lock, html.dtjdv-lock body { overflow: hidden; }

/* ---------- the viewer ---------- */

#dtjdv[hidden] { display: none !important; }
#dtjdv {
	position: fixed; inset: 0; z-index: 100001; background: #141816; color: #F4EFE9;
	font-family: "Work Sans", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.4;
	-webkit-user-select: none; user-select: none;
}
#dtjdv .dtjdv-stage {
	position: absolute; left: 0; right: 0; top: 64px; bottom: 56px; overflow: hidden;
	touch-action: none; cursor: zoom-in;
}
#dtjdv.is-zoomed .dtjdv-stage { cursor: grab; }
#dtjdv.is-dragging .dtjdv-stage { cursor: grabbing; }
#dtjdv img.dtjdv-img {
	position: absolute; left: 0; top: 0; max-width: none !important; max-height: none !important; margin: 0; padding: 0;
	border: 0; border-radius: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
	transform-origin: 0 0; will-change: transform; background: #2a2f2c;
	-webkit-user-drag: none; image-rendering: auto;
}
#dtjdv .dtjdv-spin {
	position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
	border: 3px solid rgba(244, 239, 233, .25); border-top-color: #F4EFE9; animation: dtjdv-spin .8s linear infinite;
	pointer-events: none;
}
#dtjdv .dtjdv-spin[hidden] { display: none; }
@keyframes dtjdv-spin { to { transform: rotate(360deg); } }

#dtjdv .dtjdv-top, #dtjdv .dtjdv-bottom {
	position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 20px; box-sizing: border-box;
}
#dtjdv .dtjdv-top { top: 0; height: 64px; justify-content: space-between; }
#dtjdv .dtjdv-bottom { bottom: 0; height: 56px; font-size: 13.5px; color: rgba(244, 239, 233, .72); }
#dtjdv .dtjdv-cap { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
#dtjdv .dtjdv-code { font: 600 19px/1.2 "Zilla Slab", "Roboto Slab", Georgia, serif; color: #fff; }
#dtjdv .dtjdv-name { font-size: 16px; color: #F4EFE9; }
#dtjdv .dtjdv-group { flex-basis: 100%; font-size: 12.5px; color: #A9B4A4; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dtjdv .dtjdv-group:empty { display: none; }
#dtjdv .dtjdv-tools { display: flex; gap: 6px; flex: 0 0 auto; }

#dtjdv button.dtjdv-btn,
#dtjdv button.dtjdv-btn:hover,
#dtjdv button.dtjdv-btn:focus {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; box-shadow: none;
	transition: background .15s ease;
}
#dtjdv button.dtjdv-btn:hover { background: rgba(255, 255, 255, .22); }
#dtjdv button.dtjdv-btn:focus-visible { outline: 2px solid #E2D7CA; outline-offset: 2px; }
#dtjdv button.dtjdv-btn[disabled] { opacity: .35; cursor: default; background: rgba(255, 255, 255, .1); }
#dtjdv button.dtjdv-btn[hidden] { display: none; }
#dtjdv button.dtjdv-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#dtjdv button.dtjdv-prev, #dtjdv button.dtjdv-next { position: absolute; top: 50%; margin-top: -22px; z-index: 2; background: rgba(20, 24, 22, .55); }
#dtjdv button.dtjdv-prev { left: 14px; }
#dtjdv button.dtjdv-next { right: 14px; }
#dtjdv button.dtjdv-prev:hover, #dtjdv button.dtjdv-next:hover { background: rgba(20, 24, 22, .8); }

#dtjdv .dtjdv-hint { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dtjdv .dtjdv-note { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dtjdv a.dtjdv-sample {
	flex: 0 0 auto; padding: 8px 14px; border-radius: 6px; background: #E2D7CA; color: #1B2D23; font-weight: 600; text-decoration: none;
}
#dtjdv a.dtjdv-sample:hover { background: #fff; color: #1B2D23; }
#dtjdv a.dtjdv-sample:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#dtjdv .dtjdv-count { flex: 0 0 auto; min-width: 64px; text-align: right; }

@media (max-width: 900px) {
	#dtjdv .dtjdv-note { display: none; }
}
@media (max-width: 640px) {
	#dtjdv .dtjdv-top { height: 58px; padding-left: 14px; }
	#dtjdv .dtjdv-stage { top: 58px; bottom: 52px; }
	#dtjdv .dtjdv-bottom { height: 52px; padding: 0 10px 0 14px; gap: 10px; }
	#dtjdv .dtjdv-hint { display: none; }
	#dtjdv .dtjdv-count { order: -1; min-width: 0; text-align: left; flex: 1 1 auto; }
	#dtjdv .dtjdv-code { font-size: 17px; }
	#dtjdv .dtjdv-name { font-size: 14.5px; }
	#dtjdv button.dtjdv-out { display: none; }
	#dtjdv button.dtjdv-prev, #dtjdv button.dtjdv-next { width: 38px; height: 38px; margin-top: -19px; }
	#dtjdv button.dtjdv-prev { left: 6px; }
	#dtjdv button.dtjdv-next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.dtj-sw figure.dtjdv-has::before, #dtjdv button.dtjdv-btn { transition: none; }
	#dtjdv .dtjdv-spin { animation-duration: 2s; }
}