/* Mr Gates. Supplied product ranges (inc/products.php), 2026-10-27.
   Loaded after style.css, only on pages that use the product shortcodes. */

/* ==========================================================================
   SUPPLIED PRODUCT RANGES (inc/products.php). Added 2026-10-27.
   Cantilever sliding gates, bi-folding speed gates, automatic barriers and
   full height turnstiles: key facts, spec tables, captioned pictures, the
   picture switcher, annotated pictures and the four animated diagrams.
   ========================================================================== */

/* --- Key facts strip ------------------------------------------------------ */
.mg-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mg-facts li {
	margin: 0; padding: 22px 22px 20px; background: #fff;
	border: 1px solid var(--c-border); border-radius: var(--r-card);
}
.mg-section--alt .mg-facts li { border-color: var(--c-border-light); }
.mg-facts strong {
	display: block; font-family: var(--f-head); font-weight: 800; font-size: 30px; line-height: 1.1;
	letter-spacing: -0.02em; color: var(--c-contrast);
}
.mg-facts span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--c-text-muted); }
.mg-pagehead .mg-facts { margin-top: 34px; }

/* --- Spec tables ------------------------------------------------------------ */
.mg-spec { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; border-radius: var(--r-card); overflow: hidden; }
.mg-spec caption { text-align: left; font-family: var(--f-head); font-weight: 700; font-size: 19px; color: var(--c-contrast); padding: 0 0 12px; }
.mg-spec th, .mg-spec td { text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 1px solid var(--c-border-light); }
.mg-spec tr:last-child th, .mg-spec tr:last-child td { border-bottom: 0; }
.mg-spec th { width: 38%; font-weight: 600; color: var(--c-contrast); background: var(--c-surface-subtle); }
.mg-spec td { color: var(--c-text); }
.mg-spec-wrap { border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; }
.mg-spec-wrap + .mg-spec-wrap { margin-top: 24px; }
.mg-spec--compare th:first-child { width: 30%; }
.mg-spec--compare thead th { background: var(--c-contrast); color: #fff; }

/* --- Captioned pictures ----------------------------------------------------- */
.mg-pfig { margin: 0; display: flex; flex-direction: column; }
.mg-pfig img {
	display: block; width: 100%; height: auto; border-radius: var(--r-card);
	background: var(--c-surface-alt); border: 1px solid var(--c-border-light);
}
.mg-pfig figcaption, .mg-switch__item figcaption, .mg-anim figcaption {
	margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--c-text-muted);
}
.mg-pgallery { display: grid; gap: 22px; align-items: start; }
.mg-pgallery--2 { grid-template-columns: repeat(2, 1fr); }
.mg-pgallery--3 { grid-template-columns: repeat(3, 1fr); }
.mg-pgallery--4 { grid-template-columns: repeat(4, 1fr); }
.mg-pgallery .mg-pfig img { aspect-ratio: 4 / 3; object-fit: cover; }
.mg-pgallery__note { margin: 18px 0 0; font-size: 14px; color: var(--c-text-meta); }
.mg-pfig--contain img { object-fit: contain !important; background: #fff; }
.mg-pfig--dark img { background: #000; }

/* --- Picture switcher ------------------------------------------------------- */
.mg-switch { margin: 0; }
.mg-switch__btns { display: none; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.mg-switch.is-ready .mg-switch__btns { display: flex; }
.mg-switch__btn[aria-pressed="true"],
.mg-switch__btn[aria-pressed="true"]:hover { background: var(--c-contrast); border-color: var(--c-contrast); color: #fff; }
.mg-switch__btn:hover { border-color: var(--c-accent); background: var(--c-accent-tint); color: var(--c-contrast); }
.mg-switch__stage { display: grid; gap: 22px; }
.mg-switch__item { margin: 0; }
.mg-switch__item img {
	display: block; width: 100%; height: auto; border-radius: var(--r-card);
	background: #fff; border: 1px solid var(--c-border-light);
}
/* Portrait renders (the turnstiles) are capped so one picture doesn't take a
   whole screen; landscape drawings are never tall enough to reach the cap. */
.mg-switch__item img { width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; }
.mg-switch.is-ready .mg-switch__stage { gap: 0; }
.mg-switch.is-ready .mg-switch__item {
	grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden;
	transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.mg-switch.is-ready .mg-switch__item.is-active { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }

/* --- Annotated pictures ----------------------------------------------------- */
.mg-annot { margin: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 34px; align-items: center; }
.mg-annot__stage {
	position: relative; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card);
	padding: 14px;
}
.mg-annot__frame { position: relative; }
.mg-annot--portrait .mg-annot__frame { max-width: 400px; margin: 0 auto; }
.mg-annot__frame > .mg-annot__img { display: block; width: 100%; height: auto; }
.mg-annot__frame > .mg-annot__img--alt {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity .7s var(--ease);
}
.mg-annot.is-open .mg-annot__img--alt { opacity: 1; }
.mg-pin {
	position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--f-head); font-weight: 800; font-size: 14px; line-height: 1;
	color: #fff; background: var(--c-accent-strong); border: 2px solid #fff; box-shadow: 0 4px 12px rgba(7,27,53,.28);
	transition: transform .2s var(--ease), background .2s var(--ease);
}
.mg-pin.is-hot { transform: scale(1.22); background: var(--c-contrast); }
.mg-annot__key { margin: 0; padding: 0; list-style: none; counter-reset: pin; display: grid; gap: 12px; }
.mg-annot__key li {
	counter-increment: pin; position: relative; margin: 0; padding: 4px 0 4px 44px;
	font-size: 16px; line-height: 1.5; color: var(--c-text); border-radius: var(--r-sm);
	transition: background .2s var(--ease);
}
.mg-annot__key li::before {
	content: counter(pin); position: absolute; left: 0; top: 2px;
	width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--f-head); font-weight: 800; font-size: 14px; color: #fff; background: var(--c-accent-strong);
}
.mg-annot__key li.is-hot::before { background: var(--c-contrast); }
.mg-annot__key strong { color: var(--c-contrast); }
.mg-annot__toggle { margin: 0 0 20px; }
@keyframes mg-pin-ring { 0% { box-shadow: 0 0 0 0 rgba(240,90,22,.45), 0 4px 12px rgba(7,27,53,.28); } 70%, 100% { box-shadow: 0 0 0 12px rgba(240,90,22,0), 0 4px 12px rgba(7,27,53,.28); } }
@media (prefers-reduced-motion: no-preference) {
	.mg-pin { animation: mg-pin-ring 2.6s ease-out infinite; }
	.mg-pin:nth-child(3n) { animation-delay: .9s; }
	.mg-pin:nth-child(3n+1) { animation-delay: 1.7s; }
}

/* --- Animated diagrams ------------------------------------------------------ */
.mg-anim { margin: 0; display: block; --d: 8s; }
.mg-anim__stage {
	position: relative; display: block; background: #fff;
	border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 18px 18px 52px;
}
.mg-anim__svg { display: block; width: 100%; height: auto; overflow: hidden; }
.mg-anim__pause {
	position: absolute; right: 12px; bottom: 12px;
	font: 600 13px/1 var(--f-body); color: var(--c-contrast); cursor: pointer;
	background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r-pill);
	padding: 8px 14px;
}
.mg-anim__pause:hover { border-color: var(--c-border-hover); background: #fff; }

/* Shared drawing styles */
.mg-anim text { font-family: var(--f-head); font-weight: 700; font-size: 11px; fill: var(--c-accent-text); }
.mg-a-ground { stroke: var(--c-border-hover); stroke-width: 2; }
.mg-a-found { fill: #E4E7EE; }
.mg-a-post, .mg-a-tower { fill: var(--c-contrast); }
.mg-a-leaf rect { fill: #3A4A66; }
.mg-a-brace { stroke: #3A4A66; stroke-width: 4; }
.mg-a-wheel { fill: #fff; stroke: var(--c-accent); stroke-width: 3; }
.mg-a-dim line { stroke: var(--c-accent-text); stroke-width: 1.5; }
.mg-a-dim { opacity: 0; }
.mg-a-label { fill: var(--c-text-meta) !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; }
.mg-a-note { font-size: 10px !important; }
.mg-a-note--muted { fill: var(--c-text-meta) !important; }
.mg-a-fence { stroke: var(--c-border-hover); stroke-width: 3; stroke-dasharray: 4 4; }
.mg-a-sweep { fill: var(--c-accent-tint-2); stroke: var(--c-accent); stroke-width: 1; stroke-dasharray: 3 3; }
.mg-a-swing { fill: none; stroke: var(--c-border-hover); stroke-width: 1.5; stroke-dasharray: 5 5; }
.mg-a-bfa rect, .mg-a-bfb rect { fill: #3A4A66; }
.mg-a-hinge { fill: var(--c-accent); }
.mg-a-bfa { transform-box: view-box; transform-origin: 40px 50px; }
.mg-a-bfb { transform-box: view-box; transform-origin: 120px 50px; }
.mg-a-car rect { fill: var(--c-contrast); }
.mg-a-car .mg-a-glass { fill: #9FB3CF; }
.mg-a-car { opacity: 0; }
.mg-a-armbody { fill: #fff; stroke: #B9C1D1; stroke-width: 1; }
.mg-a-stripe { fill: #D9302C; }
.mg-a-led { stroke: #D9302C; stroke-width: 2.5; stroke-linecap: round; }
.mg-a-arm { transform-box: view-box; transform-origin: 80px 92px; }
.mg-a-cab { fill: #D9302C; }
.mg-a-lid { fill: #F4F6F8; stroke: #C9CFDD; stroke-width: 1; }
.mg-a-pivot { fill: #fff; stroke: var(--c-contrast); stroke-width: 2; }
.mg-a-pogo { fill: #8A93A6; }
.mg-a-loop { fill: none; stroke: var(--c-border-hover); stroke-width: 2; stroke-dasharray: 6 4; }
.mg-a-cmd, .mg-a-lock { opacity: 0; }
.mg-a-cmd rect, .mg-a-lock rect { fill: var(--c-contrast); }
.mg-a-cmd text, .mg-a-lock text { fill: #fff; font-size: 11px; }
.mg-a-route { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.mg-a-wall { stroke: var(--c-contrast); stroke-width: 4; }
.mg-a-cage { fill: none; stroke: var(--c-contrast); stroke-width: 6; stroke-linecap: round; }
.mg-a-comb { fill: none; stroke: #8A93A6; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 3 7; }
.mg-a-rotor line { stroke: #3A4A66; stroke-width: 7; stroke-linecap: round; }
.mg-a-rotor { transform-box: view-box; transform-origin: 150px 130px; }
.mg-a-hub { fill: var(--c-contrast); }
.mg-a-person { fill: var(--c-accent); stroke: #fff; stroke-width: 3; opacity: 0; }
.mg-a-lamp-red { fill: #D9302C; }
.mg-a-lamp-green { fill: #22A559; opacity: 0; }

/* Timelines. One cycle is --d long; the page diagrams loop, the cards play once. */
@keyframes mg-k-slide { 0%, 14% { transform: translateX(0); } 44%, 70% { transform: translateX(196px); } 96%, 100% { transform: translateX(0); } }
@keyframes mg-k-open  { 0%, 42% { opacity: 0; } 47%, 68% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes mg-k-bfa   { 0%, 14% { transform: rotate(0); } 40%, 70% { transform: rotate(86deg); } 94%, 100% { transform: rotate(0); } }
@keyframes mg-k-bfb   { 0%, 14% { transform: rotate(0); } 40%, 70% { transform: rotate(-172deg); } 94%, 100% { transform: rotate(0); } }
@keyframes mg-k-car   { 0%, 41% { opacity: 0; transform: translateY(0); } 43% { opacity: 1; } 66% { opacity: 1; transform: translateY(250px); } 67%, 100% { opacity: 0; transform: translateY(250px); } }
@keyframes mg-k-arm   { 0%, 24% { transform: rotate(0); } 40%, 66% { transform: rotate(-88deg); } 86%, 100% { transform: rotate(0); } }
@keyframes mg-k-led   { 0%, 30% { stroke: #D9302C; } 36%, 70% { stroke: #22A559; } 76%, 100% { stroke: #D9302C; } }
@keyframes mg-k-cmd   { 0%, 5% { opacity: 0; } 10%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes mg-k-loop  { 0%, 5% { stroke: var(--c-border-hover); } 10%, 30% { stroke: var(--c-accent); } 36%, 100% { stroke: var(--c-border-hover); } }
@keyframes mg-k-rotor { 0%, 18% { transform: rotate(0); } 58%, 100% { transform: rotate(120deg); } }
@keyframes mg-k-person { 0% { opacity: 0; transform: translateY(44px); } 15% { opacity: 1; transform: none; } 62% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes mg-k-green { 0%, 8% { opacity: 0; } 12%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes mg-k-lock  { 0%, 33% { opacity: 0; } 38%, 58% { opacity: 1; } 64%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
	.mg-anim--sliding .mg-a-slide { animation: mg-k-slide var(--d) var(--ease) infinite; }
	.mg-anim--sliding .mg-a-dim   { animation: mg-k-open var(--d) linear infinite; }
	.mg-anim--bifold .mg-a-bfa    { animation: mg-k-bfa var(--d) var(--ease) infinite; }
	.mg-anim--bifold .mg-a-bfb    { animation: mg-k-bfb var(--d) var(--ease) infinite; }
	.mg-anim--bifold .mg-a-car    { animation: mg-k-car var(--d) linear infinite; }
	.mg-anim--barrier .mg-a-arm   { animation: mg-k-arm var(--d) var(--ease) infinite; }
	.mg-anim--barrier .mg-a-led   { animation: mg-k-led var(--d) linear infinite; }
	.mg-anim--barrier .mg-a-cmd   { animation: mg-k-cmd var(--d) linear infinite; }
	.mg-anim--barrier .mg-a-loop  { animation: mg-k-loop var(--d) linear infinite; }
	.mg-anim--turnstile .mg-a-rotor  { animation: mg-k-rotor var(--d) var(--ease) infinite; }
	.mg-anim--turnstile .mg-a-person { animation: mg-k-person var(--d) linear infinite; }
	.mg-anim--turnstile .mg-a-lamp-green { animation: mg-k-green var(--d) linear infinite; }
	.mg-anim--turnstile .mg-a-lock   { animation: mg-k-lock var(--d) linear infinite; }

	/* Nothing moves until products.js has seen the diagram on screen, and the
	   pause button holds it wherever it is. */
	.mg-anim [class*="mg-a-"] { animation-play-state: paused; }
	.mg-anim.is-on:not(.is-paused) [class*="mg-a-"] { animation-play-state: running; }

	/* Cards: one cycle under five seconds, replayed on hover or focus. */
	.mg-anim--card { --d: 4.8s; }
	.mg-anim--card [class*="mg-a-"] { animation-iteration-count: 1 !important; }
	/* products.js sets .is-rest for one frame to restart a card's cycle. */
	.mg-anim.is-rest [class*="mg-a-"] { animation: none !important; }
}
/* Still frame for reduced motion, and for the page with no JavaScript: the
   person and the green lamp are shown so the turnstile still reads. */
@media (prefers-reduced-motion: reduce) {
	.mg-anim__pause { display: none; }
	.mg-anim__stage { padding-bottom: 18px; }
	.mg-a-person, .mg-a-lamp-green { opacity: 1; }
}

/* --- Product cards ---------------------------------------------------------- */
.mg-pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mg-pcard {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: clip;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mg-pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-card); border-color: var(--c-border-hover); }
.mg-pcard .mg-anim__stage {
	display: flex; align-items: center; justify-content: center; height: 170px;
	border: 0; border-bottom: 1px solid var(--c-border-light); border-radius: 0; padding: 16px; background: var(--c-surface-subtle);
}
.mg-pcard .mg-anim__svg { width: auto; height: 100%; max-width: 100%; }
.mg-anim--card text, .mg-anim--card .mg-a-cmd, .mg-anim--card .mg-a-lock, .mg-anim--card .mg-a-dim { display: none; }
.mg-pcard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 22px; }
.mg-pcard__title { font-family: var(--f-head); font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: var(--c-contrast); }
.mg-pcard__text { font-size: 15px; line-height: 1.5; color: var(--c-text-muted); }
.mg-pcard .mg-link { align-self: flex-start; margin-top: auto; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .mg-pcard, .mg-pcard:hover { transition: none; transform: none; } }

/* --- Two-up layout used beside the diagrams --------------------------------- */
.mg-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mg-duo--top { align-items: start; }

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
	.mg-pcards { grid-template-columns: repeat(2, 1fr); }
	.mg-facts { grid-template-columns: repeat(2, 1fr); }
	.mg-pgallery--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
	.mg-annot { grid-template-columns: 1fr; gap: 24px; }
	.mg-duo { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 780px) {
	.mg-pgallery--3, .mg-pgallery--2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.mg-pgallery figcaption { font-size: 14px; }
	.mg-facts strong { font-size: 24px; }
	.mg-facts li { padding: 18px 16px; }
	.mg-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12px; }
	.mg-annot__stage { padding: 8px; }
	.mg-spec th, .mg-spec td { padding: 11px 14px; font-size: 15px; }
	.mg-spec th { width: 42%; }
}
@media (max-width: 600px) {
	.mg-pcards { grid-template-columns: 1fr; }
	.mg-pgallery--3, .mg-pgallery--2, .mg-pgallery--4 { grid-template-columns: 1fr; }
	.mg-facts { grid-template-columns: 1fr 1fr; gap: 10px; }
	.mg-spec, .mg-spec tbody, .mg-spec tr, .mg-spec th, .mg-spec td { display: block; width: 100%; }
	.mg-spec th { border-bottom: 0; padding-bottom: 2px; }
	.mg-spec td { padding-top: 2px; }
	.mg-spec--compare thead { display: none; }
	.mg-spec--compare td[data-l]::before { content: attr(data-l) ": "; font-weight: 600; color: var(--c-contrast); }
}

/* Visually hidden but read by screen readers (table captions here). */
.mg-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}