/* Native Popup Maker dialog; scoped to this product's owned help posts. */
.pum.mdb-guide-popup { background: rgba(48,55,68,.55); }
.pum.mdb-guide-popup .pum-container {
	box-sizing: border-box;
	width: min(780px, calc(100vw - 40px));
	max-width: calc(100vw - 40px);
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 18px 70px rgba(28,35,47,.25);
	color: #444e60;
}
.mdb-guide-popup .pum-content {
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #8b95a3 #f1f3f5;
	border-radius: inherit;
}
.mdb-guide-popup .pum-content:focus { outline: none; }
.mdb-guide-popup .pum-title { display: none; }
.pum.mdb-guide-popup .pum-container > .pum-content + .pum-close {
	top: 14px;
	right: 16px;
	width: auto;
	min-width: 54px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #d9e1df;
	border-radius: 2px;
	background: #fff;
	box-shadow: none;
	color: #444e60;
	font: 600 13px/1.2 "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
}
.mdb-roller-guide { color: #444e60; font: 16px/1.55 "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif; }
.mdb-roller-guide ::selection { color: #fff; background: #444e60; }
.mdb-roller-guide .mdb-guide-heading { padding: 28px 40px 24px; background: #faf9f6; border-bottom: 1px solid #d9e1df; }
.mdb-guide-heading .mdb-guide-logo { display: block; width: 156px; height: auto; margin: 0 0 28px; object-fit: contain; }
.mdb-roller-guide h2 { margin: 0 0 12px; max-width: 22ch; font: 600 clamp(25px, 3vw, 34px)/1.12 "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif; letter-spacing: -.025em; text-wrap: balance; color: #444e60; }
.mdb-roller-guide p { margin: 0; max-width: 65ch; color: #566873; font-size: 15px; line-height: 1.6; }
.mdb-guide-body { padding: 0 40px; }
.mdb-guide-section { margin: 0; padding: 24px 0; border-bottom: 1px solid #e6eae9; }
.mdb-guide-section:last-child { border: 0; }
.mdb-guide-section h3 { margin: 0 0 8px; color: #444e60; font-size: 19px; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; }
.mdb-guide-facts { margin: 18px 0 0; font-size: 14px; line-height: 1.5; }
.mdb-guide-facts > div { display: grid; grid-template-columns: minmax(90px,1fr) minmax(0,2fr); gap: 16px; padding: 10px 0; border-top: 1px solid #d9e1df; }
.mdb-guide-facts dt { color: #444e60; font-weight: 600; }
.mdb-guide-facts dd { margin: 0; color: #566873; }
.mdb-guide-illustrated { display: grid; grid-template-columns: 124px minmax(0,1fr); align-items: center; gap: 28px; }
.mdb-guide-illustrated > img { width: 124px; height: 124px; object-fit: contain; background: transparent; }
.mdb-guide-swatches { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px 14px; list-style: none; margin: 20px 0 0; padding: 0; }
.mdb-guide-swatches li { margin: 0; padding: 0; min-width: 0; text-align: left; font-size: 13px; line-height: 1.4; }
.mdb-guide-swatches img { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 7px; object-fit: cover; border: 1px solid #d9e1df; border-radius: 0; }
.mdb-guide-swatches small { display: block; margin-top: 4px; color: #566873; font-size: 12px; }
.mdb-guide-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 40px 28px; border-top: 1px solid #d9e1df; }
.mdb-guide-footer .mdb-guide-back { min-height: 44px; margin: 0; padding: 12px 18px; border: 1px solid #444e60; border-radius: 2px; background: #444e60; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.mdb-guide-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #277f84; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mdb-guide-footer .mdb-guide-back:hover { background: #303744; }
.mdb-guide-popup .pum-close:hover { background: #edf4f3; }
.mdb-guide-popup button:focus-visible, .mdb-guide-popup a:focus-visible { outline: 2px solid #277f84; outline-offset: 3px; }
.mdb-native-cpo .uni-cpo-tooltip[class*="mdb-cpo-help-"]:focus-visible { outline: 2px solid #277f84; outline-offset: 3px; }
@media (max-width: 580px) {
	.pum.mdb-guide-popup .pum-container { width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
	.mdb-guide-popup .pum-content { max-height: calc(100dvh - 32px); }
	.mdb-roller-guide .mdb-guide-heading { padding: 24px; }
	.mdb-guide-heading .mdb-guide-logo { width: 134px; margin-bottom: 25px; }
	.mdb-guide-body { padding: 0 24px; }
	.mdb-guide-illustrated { grid-template-columns: 80px minmax(0,1fr); gap: 16px; }
	.mdb-guide-illustrated > img { width: 80px; height: 80px; }
	.mdb-guide-swatches { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 12px; }
	.mdb-guide-footer { align-items: stretch; flex-direction: column; gap: 8px; padding: 18px 24px 24px; }
	.mdb-guide-footer a { justify-content: center; }
}
@media (max-width: 350px) {
	.mdb-guide-illustrated { grid-template-columns: minmax(0,1fr); }
}
body.mdb-help-open { overflow:hidden; }
.mdb-guide-fallback { width:min(780px, calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:32px; border:1px solid var(--mdb-line); background:var(--mdb-paper,#fff); color:var(--mdb-ink,#454f61); }
.mdb-guide-fallback::backdrop { background:rgb(24 31 42 / 65%); }
.mdb-guide-fallback .mdb-help-close { position:sticky; top:0; float:right; z-index:2; width:44px; height:44px; border:0; background:var(--mdb-ink,#454f61); color:white; font-size:26px; }
.mdb-guide-fallback img { max-width:100%; height:auto; object-fit:contain; }
.mdb-guide-fallback .mdb-guide-logo { width:180px; }
.mdb-guide-fallback .mdb-guide-illustrated { display:grid; grid-template-columns:minmax(100px,160px) minmax(0,1fr); gap:24px; }
.mdb-guide-fallback .mdb-guide-section { padding:24px 0; border-bottom:1px solid var(--mdb-line); }
.mdb-guide-fallback .mdb-guide-body > .mdb-guide-section:last-child { border-bottom:0; }
.mdb-guide-fallback .mdb-guide-swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:16px; padding:0; list-style:none; }
.mdb-guide-fallback .mdb-guide-swatches li { display:flex; flex-direction:column; gap:6px; }
.mdb-guide-fallback .mdb-guide-footer { display:flex; gap:20px; align-items:center; flex-wrap:wrap; padding-top:24px; }
@media(max-width:580px) { .mdb-guide-fallback { padding:20px; } .mdb-guide-fallback .mdb-guide-illustrated { grid-template-columns:1fr; } }

/* Both rail profiles get enough space to show their full length. */
body.mdb-complete-site .mdb-guide-illustrated:has(img[src*="-rail-"]) { grid-template-columns: minmax(0,1fr); gap: 16px; }
body.mdb-complete-site .mdb-guide-illustrated img[src*="-rail-"] { width: min(100%, 380px); height: auto; max-height: 120px; object-fit: contain; background: transparent; }
body.mdb-complete-site .mdb-roller-guide img { background-color: transparent; }