.pms-preview {
	max-width: 1120px;
}

.pms-intro {
	margin-bottom: 34px;
}

.pms-panel {
	padding: clamp(18px, 3.4vw, 34px);
	border: 1px solid rgba(75, 98, 110, .09);
	border-radius: 24px;
	background: #fffefa;
	box-shadow: 0 12px 36px rgba(67, 57, 40, .055);
}

.pms-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 18px;
}

.pms-option {
	--pms-display-width: 132px;
	display: flex;
	min-width: 0;
	min-height: 292px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 22px 18px;
	border: 1px solid rgba(75, 98, 110, .12);
	border-radius: 20px;
	background: #fff;
	color: #26323a;
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pms-option[data-size="27"] { --pms-display-width: 148px; }
.pms-option[data-size="32"] { --pms-display-width: 170px; }

.pms-option:hover,
.pms-option.is-selected {
	transform: translateY(-2px);
	border-color: rgba(48, 116, 145, .58);
	box-shadow: 0 12px 28px rgba(67, 57, 40, .09);
}

.pms-option:focus-visible,
.pms-unknown:focus-visible,
.pms-change:focus-visible {
	outline: 3px solid #287b9c;
	outline-offset: 3px;
}

.pms-monitor {
	display: flex;
	flex: 0 0 132px;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.pms-screen {
	display: block;
	width: min(var(--pms-display-width), 100%);
	aspect-ratio: 16 / 9;
	border: 3px solid #33464f;
	border-radius: 6px;
	background: linear-gradient(145deg, #eaf4f5 0%, #d9e7e9 100%);
	box-shadow: 0 4px 10px rgba(31, 50, 58, .12);
}

.pms-neck {
	width: 16px;
	height: 14px;
	background: #586d76;
}

.pms-foot {
	width: 54px;
	height: 5px;
	border-radius: 5px 5px 2px 2px;
	background: #586d76;
}

.pms-option-title {
	color: #203541;
	font-size: clamp(21px, 2vw, 26px);
	font-weight: 750;
	line-height: 1.2;
}

.pms-option-title span {
	font-size: 16px;
	font-weight: 650;
}

.pms-option-description {
	max-width: 250px;
	color: #69747a;
	font-size: 15px;
	line-height: 1.5;
}

.pms-unknown {
	display: block;
	width: min(100%, 440px);
	min-height: 56px;
	margin: 22px auto 0;
	padding: 14px 20px;
	border: 1px solid rgba(75, 98, 110, .14);
	border-radius: 16px;
	background: #f7faf9;
	color: #314c58;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

.pms-unknown:hover,
.pms-change:hover { border-color: rgba(48, 116, 145, .5); }

.pms-selection {
	margin: 24px auto 0;
	padding: 20px;
	border-radius: 16px;
	background: #f2f7f8;
	text-align: center;
}

.pms-selection p { margin: 0 0 8px; color: #53656d; line-height: 1.5; }
.pms-selection .pms-selection-value { color: #203541; font-size: 21px; font-weight: 750; }
.pms-results-copy { margin: 12px 0 22px !important; color: #53656d; font-size: 17px; }
.pms-results-grid { margin-top: 20px; text-align: left; }
.pms-results-grid.is-selection { grid-template-columns: minmax(0, 460px); justify-content: center; }
.pms-results-grid .mmc-card[role="button"] { cursor: pointer; }
.pms-results-grid .mmc-card[role="button"]:focus-visible,
.pms-flow button:focus-visible { outline: 3px solid #287b9c; outline-offset: 3px; }
.pms-zero-result { margin: 22px 0 8px; color: #69747a; font-size: 17px; }
.pms-offer-templates { display: none !important; }
.pms-flow { margin: 20px auto 0; text-align: center; }
.pms-confirm-offer,
.pms-add-to-cart { display: block; margin: 12px auto; }
.pms-connectors { margin: 18px auto 0; }
.pms-connectors h3 { color: #26343c; font-size: 22px; }
.pms-connectors > p { color: #69747a; }
.pms-cable-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; }
.pms-cable-option { min-height: 62px; padding: 12px 16px; border: 1px solid rgba(75, 98, 110, .14); border-radius: 14px; background: #fff; color: #314c58; font: inherit; font-weight: 700; cursor: pointer; }
.pms-cable-option:hover,
.pms-cable-option.is-selected { border-color: rgba(48, 116, 145, .58); box-shadow: 0 6px 18px rgba(67, 57, 40, .08); }
.pms-cable-option[hidden] { display: none !important; }
.pms-cable-confirm { margin-top: 18px; }
.pms-cable-copy,
.pms-cable-included { margin: 8px 0; font-weight: 700; }
.pms-cable-unknown-copy { color: #69747a; }
.pms-change-cable { margin: 4px 0 12px; padding: 8px 12px; border: 0; background: transparent; color: #287b9c; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.pms-cart-error,
.pms-cart-success { margin: 16px 0 0; }
.pms-cart-link { display: inline-block; margin: 8px; color: #287b9c; font-weight: 700; }

.pms-change {
	margin-top: 6px;
	padding: 8px 12px;
	border: 0;
	background: transparent;
	color: #287b9c;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 760px) {
	.pms-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.pms-option { min-height: 258px; padding: 18px 12px; gap: 12px; }
	.pms-option[data-size="32"] { grid-column: 1 / -1; }
	.pms-option[data-size="32"] .pms-monitor { flex-basis: 116px; }
	.pms-option-title span { display: block; margin-top: 3px; }
}

@media (max-width: 430px) {
	.pms-preview { width: min(100% - 28px, 1120px); padding-top: 34px; }
	.pms-intro { margin-bottom: 24px; }
	.pms-intro h1 { font-size: clamp(29px, 8vw, 36px); }
	.pms-intro .mmc-subtitle { font-size: 16px; }
	.pms-panel { padding: 14px; border-radius: 20px; }
	.pms-options { grid-template-columns: minmax(0, 1fr); }
	.pms-option,
	.pms-option[data-size="32"] { grid-column: auto; min-height: 220px; }
	.pms-option { --pms-display-width: 132px; }
	.pms-option[data-size="27"] { --pms-display-width: 148px; }
	.pms-option[data-size="32"] { --pms-display-width: 170px; }
	.pms-monitor { flex-basis: 104px; }
	.pms-option-description { font-size: 14px; }
	.pms-unknown { min-height: 54px; margin-top: 16px; font-size: 16px; }
	.pms-cable-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}