.sh-portfolio-preview {
	--sh-portfolio-gap: 18px;
	display: flex;
	flex-direction: column;
	gap: var(--sh-portfolio-gap);
	width: 100%;
}

.sh-portfolio-preview__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	overflow-x: auto;
	padding: 2px;
	scrollbar-width: thin;
}

.sh-portfolio-preview--tabs-bottom .sh-portfolio-preview__tabs { order: 3; }

.sh-portfolio-preview__tab {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 1px solid #c3c4c7;
	border-radius: 30px;
	background: #fff;
	color: #1d2327;
	cursor: pointer;
	line-height: 1.2;
}

.sh-portfolio-preview__tab:hover,
.sh-portfolio-preview__tab[aria-selected="true"] { border-color: #1d2327; }

.sh-portfolio-preview__tab:focus-visible,
.sh-portfolio-preview__external:focus-visible,
.sh-portfolio-preview__handle:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 3px;
}

.sh-portfolio-preview__panel[hidden] { display: none; }

.sh-portfolio-preview__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sh-portfolio-gap);
}

.sh-portfolio-preview__browser {
	width: 100%;
	overflow: hidden;
	border: 1px solid #dcdcde;
	border-radius: 18px;
	background: #fff;
}

.sh-portfolio-preview__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 16px;
	border-bottom: 1px solid #dcdcde;
	background: #f6f7f7;
}

.sh-portfolio-preview__header-left {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	gap: 12px;
}

.sh-portfolio-preview__lights { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.sh-portfolio-preview__light { display: block; width: 9px; aspect-ratio: 1; border-radius: 50%; background: #8c8f94; }
.sh-portfolio-preview__light:nth-child(2) { opacity: .75; }
.sh-portfolio-preview__light:nth-child(3) { opacity: .5; }

.sh-portfolio-preview__header-meta {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
}

.sh-portfolio-preview__address {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 6px;
}

.sh-portfolio-preview__url {
	min-width: 0;
	overflow: hidden;
	color: #50575e;
	font: 12px/1.3 monospace;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sh-portfolio-preview__external { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1em; height: 1em; color: #50575e; text-decoration: none; }
.sh-portfolio-preview__external svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.sh-portfolio-preview__helper { color: #50575e; font: 12px/1.3 monospace; }
.sh-portfolio-preview__helper--website { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }

.sh-portfolio-preview__viewport {
	position: relative;
	height: 560px;
	overflow: hidden;
	background: #f0f0f1;
	overscroll-behavior: contain;
}

.sh-portfolio-preview__viewport[data-manual="true"] { overflow-y: auto; }

.sh-portfolio-preview__image {
	display: block;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: cover;
	object-position: top center;
}

.sh-portfolio-preview__viewport[data-auto-scroll="true"] .sh-portfolio-preview__image { will-change: transform; }

.sh-portfolio-preview__compare {
	--sh-compare-position: 50%;
	--sh-compare-color: #fff;
	--sh-compare-width: 2px;
	--sh-label-offset: 16px;
	isolation: isolate;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	touch-action: none;
	user-select: none;
}

.sh-portfolio-preview__compare-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sh-portfolio-preview__compare-after { position: absolute; inset: 0; z-index: 0; }

.sh-portfolio-preview__compare-before {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	clip-path: inset(0 calc(100% - var(--sh-compare-position)) 0 0);
}

.sh-portfolio-preview__compare--vertical .sh-portfolio-preview__compare-before {
	clip-path: inset(0 0 calc(100% - var(--sh-compare-position)) 0);
}

.sh-portfolio-preview__handle {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: var(--sh-compare-position);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	padding: 8px;
	border: 2px solid var(--sh-compare-color);
	border-radius: 50%;
	background: #1d2327;
	color: #fff;
	font-size: 20px;
	cursor: ew-resize;
	transform: translate(-50%, -50%);
}

.sh-portfolio-preview__divider {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: var(--sh-compare-position);
	width: var(--sh-compare-width);
	background: var(--sh-compare-color);
	transform: translateX(-50%);
	pointer-events: none;
}

.sh-portfolio-preview__handle i { font-size: 1em; line-height: 1; }
.sh-portfolio-preview__handle svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.sh-portfolio-preview__compare--vertical .sh-portfolio-preview__handle { top: var(--sh-compare-position); left: 50%; cursor: ns-resize; }
.sh-portfolio-preview__compare--vertical .sh-portfolio-preview__divider { top: var(--sh-compare-position); right: 0; bottom: auto; left: 0; width: auto; height: var(--sh-compare-width); transform: translateY(-50%); }

.sh-portfolio-preview__compare-label {
	position: absolute;
	z-index: 3;
	top: var(--sh-label-offset);
	padding: 6px 10px;
	border-radius: 20px;
	background: rgba(0, 0, 0, .72);
	color: #fff;
	font-size: 12px;
}

.sh-portfolio-preview__compare-label--before { left: 16px; }
.sh-portfolio-preview__compare-label--after { right: 16px; }
.sh-portfolio-preview__compare--labels-bottom .sh-portfolio-preview__compare-label { top: auto; bottom: var(--sh-label-offset); }
.sh-portfolio-preview__helper--compare { position: absolute; z-index: 3; right: 16px; bottom: 12px; }
.sh-portfolio-preview__compare--labels-bottom .sh-portfolio-preview__helper--compare { top: 12px; bottom: auto; }

.sh-portfolio-preview__content-box {
	box-sizing: border-box;
	width: 100%;
	padding: 28px;
	border: 1px solid #dcdcde;
	border-radius: 14px;
	background: #fff;
}

.sh-portfolio-preview__source,
.sh-portfolio-preview__content-subheading { margin-bottom: 10px; color: #646970; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sh-portfolio-preview__rating { --sh-rating-filled: #f0b849; --sh-rating-empty: #dcdcde; display: flex; gap: 3px; margin-bottom: 16px; line-height: 1; }
.sh-portfolio-preview__rating-star { position: relative; display: inline-block; width: 1em; color: var(--sh-rating-empty); line-height: 1; }
.sh-portfolio-preview__rating-star::after { content: "★"; position: absolute; inset: 0; width: var(--sh-star-fill); overflow: hidden; color: var(--sh-rating-filled); white-space: nowrap; }
.sh-portfolio-preview__content-heading { margin: 0 0 14px; color: #1d2327; }
.sh-portfolio-preview__highlight { display: inline-block; margin: 0 0 14px; padding: 6px 10px; border-radius: 4px; font-weight: 600; }
.sh-portfolio-preview__description { color: #3c434a; }
.sh-portfolio-preview__description > :first-child { margin-top: 0; }
.sh-portfolio-preview__description > :last-child { margin-bottom: 0; }
.sh-portfolio-preview__reviewer { display: flex; align-items: center; column-gap: 12px; margin-top: 0; }
.sh-portfolio-preview__reviewer-image { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.sh-portfolio-preview__reviewer-text { min-width: 0; }
.sh-portfolio-preview__reviewer-name { font-weight: 600; }
.sh-portfolio-preview__reviewer-role,
.sh-portfolio-preview__company,
.sh-portfolio-preview__additional { color: #646970; font-size: .9em; }
.sh-portfolio-preview__additional { margin-top: 16px; }

@media (max-width: 767px) {
	.sh-portfolio-preview__tabs { flex-wrap: nowrap; }
	.sh-portfolio-preview__viewport { height: 360px; }
	.sh-portfolio-preview__header { gap: 8px; }
	.sh-portfolio-preview__content-box { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.sh-portfolio-preview__image { transform: none !important; }
	.sh-portfolio-preview__tab,
	.sh-portfolio-preview__handle { transition: none !important; }
}