/* Згенеровано tools/port_mockup.py з mockup/assets/css/lookbook.css. Руками не правити. */
.uhc .uhc-lookgrid {
	display: grid;
	grid-template-columns: repeat(var(--uhc-cols, 3), minmax(0, 1fr));
	gap: 14px;
	margin-top: 18px;
}
.uhc .uhc-look {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: visible;
}
.uhc .uhc-look__ph {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #dde5f0;
}
.uhc .uhc-look__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uhc .uhc-look__cap { display: block; margin-top: 11px; }
.uhc .uhc-look__cap b { display: block; font-size: 15px; font-weight: 700; color: var(--uhc-ink); }
.uhc .uhc-look__cap i { display: block; font-style: normal; font-size: 13px; color: var(--uhc-mut); margin-top: 2px; }
.uhc .uhc-hot-hint {
	margin: 6px 0 0;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.4;
	color: #677183;
}
.uhc .uhc-hot {
	position: absolute;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	background: var(--uhc-blue);
	border: 4px solid #fff;
	box-shadow: 0 2px 9px rgba(0, 0, 0, .4);
	cursor: pointer;
	transform: translate(-50%, -50%);
	z-index: 4;
	transition: transform var(--uhc-dur-fast) var(--uhc-ease-hover);
	animation: uhc-pulse 3.2s ease-out 4 forwards;
}
.uhc .uhc-hot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
}
.uhc .uhc-hot:hover,
.uhc .uhc-hot[aria-expanded="true"] { transform: translate(-50%, -50%) scale(1.15); }
.uhc .uhc-hot:focus-visible { outline: 3px solid var(--uhc-gold) !important; outline-offset: 3px; }
@keyframes uhc-pulse {
	0%   { box-shadow: 0 2px 9px rgba(0, 0, 0, .4), 0 0 0 0 rgba(31, 79, 158, .5); }
	60%  { box-shadow: 0 2px 9px rgba(0, 0, 0, .4), 0 0 0 14px rgba(31, 79, 158, 0); }
	100% { box-shadow: 0 2px 9px rgba(0, 0, 0, .4), 0 0 0 0 rgba(31, 79, 158, 0); }
}
.uhc .uhc-hot__card {
	position: absolute;
	z-index: 5;
	min-width: 214px;
	width: 250px;
	padding: 13px;
	background: #fff;
	border: 1px solid #edf1f7;
	border-radius: 14px;
	box-shadow: 0 20px 44px -16px rgba(13, 25, 45, .42), 0 2px 6px rgba(13, 25, 45, .10);
	display: flex;
	gap: 11px;
	transform: translate(-50%, calc(-100% - 22px));
	overscroll-behavior: contain;
}
.uhc .uhc-hot__card.is-flip-left  { transform: translate(-14px, calc(-100% - 22px)); }
.uhc .uhc-hot__card.is-flip-right { transform: translate(calc(-100% + 14px), calc(-100% - 22px)); }
.uhc .uhc-hot__card.is-below      { transform: translate(-50%, 22px); }
.uhc .uhc-hot__thumb { flex: 0 0 auto; }
.uhc .uhc-hot__thumb img { width: 74px; height: 74px; object-fit: contain; display: block; border-radius: 8px; background: #f5f8fc; }
.uhc .uhc-hot__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uhc .uhc-hot__meta b { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--uhc-ink); }
.uhc .uhc-hot__meta .pr {
	font-family: 'Geologica', 'Onest', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--uhc-ink2);
	font-variant-numeric: tabular-nums;
}
.uhc .uhc-hot__meta .pr s { font-size: 12px; font-weight: 400; color: #61728b; }
.uhc .uhc-hot__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin-top: 7px;
	padding: 7px 12px;
	border-radius: 8px;
	background: var(--uhc-blue);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
.uhc .uhc-hot__go:hover { background: #17417f; color: #fff; }
.uhc .uhc-hot__stub { margin: 0; font-size: 12.5px; color: var(--uhc-mut); }
.uhc .uhc-hot__card.is-loading .uhc-hot__stub { opacity: .55; }
.uhc .uhc-hot__err { margin: 0; font-size: 12.5px; color: #e03131; }
.uhc .uhc-look__panel {
	display: none;
	margin-top: 10px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--uhc-line2);
	border-radius: 12px;
	gap: 11px;
}
@media (max-width: 900px) {
	.uhc .uhc-lookgrid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.uhc .uhc-hot__card { display: none !important; }
	.uhc .uhc-look__panel[data-open="1"] { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	.uhc .uhc-hot { animation: none; transition: none; }
	.uhc .uhc-hot:hover,
	.uhc .uhc-hot[aria-expanded="true"] { transform: translate(-50%, -50%); }
}