/* MR Light Catalog — professional B2B product presentation.
   Compact vertical rhythm, orange + teal accents, and colored section
   headers so buyers can skim a full product without endless scrolling. */

.mr-plugin-wrapper {
	box-sizing: border-box;
	color: var(--mr-body, #3c4a55);
	font-family: var(--mr-font, inherit);
	line-height: 1.6;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 32px);
	--mr-space: var(--mr-section-space, 34px);
	--mr-soft: color-mix(in srgb, var(--mr-primary, #0e8a83), transparent 92%);
	--mr-accent-soft: color-mix(in srgb, var(--mr-accent, #f5860f), transparent 88%);
}
.mr-plugin-wrapper *, .mr-plugin-wrapper *::before, .mr-plugin-wrapper *::after { box-sizing: inherit; }
.mr-plugin-wrapper :where(h1, h2, h3, h4) { color: var(--mr-heading, #13324c); line-height: 1.22; }
.mr-plugin-wrapper :where(a, button, input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--mr-accent, #f5860f), transparent 35%); outline-offset: 2px; }

/* ---------- Breadcrumbs ---------- */
.mr-plugin-wrapper .mr-breadcrumbs { margin-block: 18px 8px; padding: 6px 0; background: var(--mr-breadcrumb-bg, transparent); font-size: .84rem; }
.mr-plugin-wrapper .mr-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mr-plugin-wrapper .mr-breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.mr-plugin-wrapper .mr-breadcrumbs a, .mr-plugin-wrapper .mr-text-link { color: var(--mr-primary, #0e8a83); text-decoration: none; font-weight: 600; }
.mr-plugin-wrapper .mr-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mr-plugin-wrapper .mr-breadcrumb-separator { color: var(--mr-muted, #6a7883); }
.mr-plugin-wrapper .mr-breadcrumbs [aria-current="page"] { color: var(--mr-muted, #6a7883); }

/* ---------- Product hero ---------- */
.mr-plugin-wrapper .mr-product-header { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; padding-block: 8px 34px; margin-bottom: var(--mr-space); border-bottom: 1px solid var(--mr-border, #e4e9ed); }
.mr-plugin-wrapper .mr-product-header-details { position: sticky; top: 20px; }
.mr-plugin-wrapper .mr-product-title { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 12px 0 14px; letter-spacing: -.02em; font-weight: 800; }
.mr-plugin-wrapper .mr-product-identifiers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mr-plugin-wrapper .mr-product-identifiers span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--mr-soft); color: var(--mr-heading, #13324c); font-size: .82rem; }
.mr-plugin-wrapper .mr-product-identifiers strong { color: var(--mr-primary, #0e8a83); font-weight: 700; }
.mr-plugin-wrapper .mr-product-summary { font-size: 1.02rem; color: var(--mr-body, #3c4a55); }
.mr-plugin-wrapper .mr-product-summary p:first-child { margin-top: 0; }
.mr-plugin-wrapper .mr-product-badge { display: inline-flex; background: var(--mr-accent, #f5860f); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }

/* ---------- Gallery ---------- */
.mr-plugin-wrapper .mr-product-gallery { position: relative; }
.mr-plugin-wrapper .mr-gallery-stage { position: relative; overflow: hidden; border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-gallery-radius, var(--mr-radius, 12px)); background: #f7f9fa; aspect-ratio: var(--mr-image-ratio, 1 / 1); }
.mr-plugin-wrapper .mr-gallery-main-image { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s ease; }
.mr-plugin-wrapper .mr-gallery-stage:hover .mr-gallery-zoom-enabled { transform: scale(1.06); }
.mr-plugin-wrapper :where(.mr-gallery-prev, .mr-gallery-next, .mr-gallery-expand, .mr-gallery-fullscreen, .mr-slider-prev, .mr-slider-next) { position: absolute; z-index: 2; border: 1px solid var(--mr-border, #e4e9ed); background: rgba(255,255,255,.95); color: var(--mr-heading, #13324c); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 1.4rem; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(19,50,76,.12); transition: background .15s ease, color .15s ease; }
.mr-plugin-wrapper :where(.mr-gallery-prev, .mr-gallery-next, .mr-slider-prev, .mr-slider-next):hover { background: var(--mr-primary, #0e8a83); color: #fff; border-color: transparent; }
.mr-plugin-wrapper .mr-gallery-prev { left: 12px; top: calc(50% - 21px); }
.mr-plugin-wrapper .mr-gallery-next { right: 12px; top: calc(50% - 21px); }
.mr-plugin-wrapper .mr-gallery-expand { right: 12px; top: 12px; }
.mr-plugin-wrapper .mr-gallery-fullscreen { right: 12px; top: 62px; }
.mr-plugin-wrapper .mr-gallery-stage:fullscreen { background: #0c1117; }
.mr-plugin-wrapper .mr-gallery-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding-block: 12px; scrollbar-width: thin; }
.mr-plugin-wrapper .mr-gallery-thumbnail { flex: 0 0 72px; height: 72px; padding: 3px; border: 2px solid var(--mr-border, #e4e9ed); border-radius: 10px; background: var(--mr-card, #fff); cursor: pointer; transition: border-color .15s ease; }
.mr-plugin-wrapper .mr-gallery-thumbnail.mr-is-active { border-color: var(--mr-primary, #0e8a83); }
.mr-plugin-wrapper .mr-gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; }
.mr-plugin-wrapper .mr-gallery-caption { min-height: 1.4em; color: var(--mr-muted, #6a7883); font-size: .84rem; }

/* ---------- Buttons ---------- */
.mr-plugin-wrapper .mr-quote-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mr-plugin-wrapper .mr-product-card-actions, .mr-plugin-wrapper .mr-filter-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mr-plugin-wrapper :where(.mr-primary-button, .mr-secondary-button) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 22px; border-radius: var(--mr-button-radius, 999px); font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
/* Primary actions wear the brand red-to-amber gradient (emitted as --mr-button-bg from
   Design Settings); a per-button custom color (--mr-action-color) still wins. */
.mr-plugin-wrapper .mr-primary-button { border: 1px solid var(--mr-action-color, var(--mr-button-border, transparent)); background: var(--mr-action-color, var(--mr-button-bg, linear-gradient(100deg, #ef3a35 0%, #f8b119 100%))); color: var(--mr-button-text, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--mr-button, #ef3a35), transparent 72%); }
.mr-plugin-wrapper .mr-primary-button:hover { background: var(--mr-action-hover, var(--mr-button-hover-bg, var(--mr-button-hover, #d32b27))); color: #fff; transform: translateY(-1px); box-shadow: 0 9px 22px color-mix(in srgb, var(--mr-button, #ef3a35), transparent 62%); }
.mr-plugin-wrapper .mr-secondary-button { border: 1.5px solid var(--mr-primary, #33414e); background: transparent; color: var(--mr-primary, #33414e); }
.mr-plugin-wrapper .mr-secondary-button:hover { background: linear-gradient(100deg, var(--mr-accent, #ef3a35) 0%, var(--mr-secondary, #f8b119) 100%); border-color: transparent; color: #fff; }
.mr-plugin-wrapper .mr-button-icon { display: inline-flex; align-items: center; font-size: 1.05em; line-height: 1; }
.mr-plugin-wrapper .mr-button-icon svg { width: 1.15em; height: 1.15em; }
.mr-plugin-wrapper .mr-text-link { color: var(--mr-primary, #0e8a83); font-weight: 700; text-decoration: none; }
.mr-plugin-wrapper .mr-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Product navigation / tools / anchor bar ---------- */
.mr-plugin-wrapper .mr-product-navigation { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; border-block: 1px solid var(--mr-border, #e4e9ed); }
.mr-plugin-wrapper .mr-product-tools, .mr-plugin-wrapper .mr-product-tools form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 14px; }
.mr-plugin-wrapper .mr-product-tools label { display: grid; gap: 5px; }
.mr-plugin-wrapper .mr-product-tools :where(input, select) { min-height: 44px; min-width: 220px; padding: 8px 12px; border: 1px solid var(--mr-border, #e4e9ed); border-radius: 10px; background: #fff; }
.mr-plugin-wrapper .mr-anchor-navigation { position: sticky; top: 0; z-index: 10; display: flex; gap: 4px; overflow-x: auto; padding: 8px; margin: 0 0 var(--mr-space); border: 1px solid var(--mr-border, #e4e9ed); border-radius: 999px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(19,50,76,.06); scrollbar-width: none; }
.mr-plugin-wrapper .mr-anchor-navigation::-webkit-scrollbar { display: none; }
.mr-plugin-wrapper .mr-anchor-navigation a { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; color: var(--mr-heading, #13324c); text-decoration: none; font-weight: 600; font-size: .86rem; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.mr-plugin-wrapper .mr-anchor-navigation a:hover { background: var(--mr-soft); color: var(--mr-primary, #0e8a83); }

/* ---------- Sections & colored headings ----------
   Desktop uses a compact two-column magazine layout so B2B buyers skim a full
   product without endless scrolling; wide/rich sections span the full width. */
.mr-plugin-wrapper .mr-product-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mr-space) clamp(24px, 3vw, 48px); align-items: start; grid-auto-flow: row dense; }
.mr-plugin-wrapper .mr-product-section { padding: 0; border: 0; scroll-margin-top: 74px; grid-column: span 1; }
.mr-plugin-wrapper .mr-product-sections .mr-section-overview,
.mr-plugin-wrapper .mr-product-sections .mr-section-datasheet,
.mr-plugin-wrapper .mr-product-sections .mr-section-related-products,
.mr-plugin-wrapper .mr-product-sections .mr-section-related-categories,
.mr-plugin-wrapper .mr-product-sections .mr-section-two-column { grid-column: 1 / -1; }
.mr-plugin-wrapper .mr-section-heading { position: relative; display: inline-block; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 800; margin: 0 0 22px; padding-bottom: 10px; }
.mr-plugin-wrapper .mr-section-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--mr-accent, #ef3a35), var(--mr-secondary, #f8b119)); }
.mr-plugin-wrapper .mr-background-muted, .mr-plugin-wrapper .mr-background-accent { padding: clamp(22px, 3vw, 34px); border-radius: var(--mr-radius, 12px); }
.mr-plugin-wrapper .mr-background-muted { background: color-mix(in srgb, var(--mr-primary, #0e8a83), transparent 95%); border: 1px solid var(--mr-border, #e4e9ed); }
.mr-plugin-wrapper .mr-background-accent { background: var(--mr-accent-soft); }
.mr-plugin-wrapper .mr-section-two-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.mr-plugin-wrapper .mr-section-two-column > .mr-section-heading { grid-column: 1 / -1; }

/* ---------- Feature / application content ---------- */
.mr-plugin-wrapper .mr-feature-blocks, .mr-plugin-wrapper .mr-application-blocks { display: grid; gap: 22px; }
.mr-plugin-wrapper .mr-content-block { break-inside: avoid; }
.mr-plugin-wrapper .mr-content-block > h3 { font-size: 1.1rem; margin: 0 0 12px; }
.mr-plugin-wrapper .mr-content-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mr-plugin-wrapper .mr-content-list li { position: relative; padding-left: 30px; }
.mr-plugin-wrapper .mr-content-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--mr-soft); color: var(--mr-primary, #0e8a83); font-size: .7rem; font-weight: 800; }
.mr-plugin-wrapper .mr-content-list li:has(.mr-content-icon) { padding-left: 32px; }
.mr-plugin-wrapper .mr-content-icon { position: absolute; left: 0; top: 0; }
.mr-plugin-wrapper ol.mr-content-list { counter-reset: mr-step; }
.mr-plugin-wrapper ol.mr-content-list li::before { content: counter(mr-step); counter-increment: mr-step; }
.mr-plugin-wrapper .mr-content-cards, .mr-plugin-wrapper .mr-application-tags { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.mr-plugin-wrapper .mr-content-cards li { border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); padding: 16px; background: var(--mr-card, #fff); }
.mr-plugin-wrapper .mr-application-tags li { padding: 8px 16px; border-radius: 999px; background: var(--mr-soft); color: var(--mr-heading, #13324c); font-weight: 600; font-size: .9rem; text-align: center; }
.mr-plugin-wrapper .mr-application-tags { grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); margin-bottom: 20px; }
.mr-plugin-wrapper .mr-rich-content p:first-child { margin-top: 0; }

/* ---------- Tables ----------
   Compact datasheet style: the brand gradient appears ONLY on the thin title bar;
   rows stay white with hairline separators so heavy spec data remains readable.
   The viewport caps tall tables and scrolls inside itself (sticky header row),
   so a table with many rows never takes over the page. */
.mr-plugin-wrapper .mr-table-region { width: 100%; margin-bottom: 20px; border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); overflow: hidden; background: var(--mr-bg, #fff); }
.mr-plugin-wrapper .mr-table-region:last-child { margin-bottom: 0; }
.mr-plugin-wrapper .mr-table-title { margin: 0; padding: 9px 14px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: linear-gradient(90deg, var(--mr-accent, #ef3a35), var(--mr-secondary, #f8b119)); }
.mr-plugin-wrapper .mr-table-viewport { overflow: auto; max-height: min(430px, 62vh); }
.mr-plugin-wrapper .mr-table-region table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-size: .84rem; line-height: 1.45; }
.mr-plugin-wrapper .mr-table-region :where(th, td) { padding: 7px 12px; border: 0; border-bottom: 1px solid var(--mr-border, #e4e9ed); text-align: left; vertical-align: top; }
.mr-plugin-wrapper .mr-table-region tbody tr:nth-child(even) { background: color-mix(in srgb, var(--mr-heading, #1f2933), transparent 97%); }
.mr-plugin-wrapper .mr-table-region tbody tr:last-child :where(th, td) { border-bottom: 0; }
.mr-plugin-wrapper .mr-table-region tbody th[scope="row"] { color: var(--mr-heading, #1f2933); font-weight: 700; }
.mr-plugin-wrapper .mr-table-region thead th { position: sticky; top: 0; z-index: 2; background: var(--mr-table-head, #f6f7f9); color: var(--mr-heading, #1f2933); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.mr-plugin-wrapper .mr-table-align-center :where(th, td) { text-align: center; }
.mr-plugin-wrapper .mr-table-align-right :where(th, td) { text-align: right; }
.mr-plugin-wrapper .mr-table-sticky-first :where(th:first-child, td:first-child) { position: sticky; left: 0; z-index: 1; background: var(--mr-bg, #fff); }
.mr-plugin-wrapper .mr-table-sticky-first thead th:first-child { z-index: 3; background: var(--mr-table-head, #f6f7f9); }
.mr-plugin-wrapper .mr-table-sticky-first tbody tr:nth-child(even) :where(th:first-child, td:first-child) { background: color-mix(in srgb, var(--mr-heading, #1f2933), #fff 97%); }
.mr-plugin-wrapper .mr-table-notes { margin: 0; padding: 9px 14px; color: var(--mr-muted, #6a7883); font-size: .8rem; background: color-mix(in srgb, var(--mr-heading, #1f2933), transparent 97%); border-top: 1px solid var(--mr-border, #e4e9ed); }

/* ---------- Downloads ---------- */
.mr-plugin-wrapper .mr-download-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.mr-plugin-wrapper .mr-download-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); background: var(--mr-card, #fff); transition: border-color .15s ease, box-shadow .15s ease; }
.mr-plugin-wrapper .mr-download-item:hover { border-color: color-mix(in srgb, var(--mr-primary, #0e8a83), transparent 55%); box-shadow: 0 6px 18px rgba(19,50,76,.06); }
.mr-plugin-wrapper .mr-download-item h3 { margin: 0 0 3px; font-size: 1rem; }
.mr-plugin-wrapper .mr-download-item p { margin: 0; color: var(--mr-muted, #6a7883); font-size: .84rem; }
.mr-plugin-wrapper .mr-download-button { flex: 0 0 auto; }

/* ---------- Certifications & videos ---------- */
.mr-plugin-wrapper .mr-certification-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.mr-plugin-wrapper .mr-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.mr-plugin-wrapper :where(.mr-certification-card, .mr-video-card) { border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); padding: 18px; background: var(--mr-card, #fff); }
.mr-plugin-wrapper .mr-certification-card { display: grid; gap: 6px; text-align: center; }
.mr-plugin-wrapper .mr-certification-card h3 { margin: 0; font-size: 1.05rem; }
.mr-plugin-wrapper .mr-certification-card p { margin: 0; color: var(--mr-muted, #6a7883); font-size: .86rem; }
.mr-plugin-wrapper .mr-certification-icon { font-size: 2rem; color: var(--mr-primary, #0e8a83); }
.mr-plugin-wrapper .mr-certification-card img { max-width: 84px; height: auto; margin: 0 auto; }
.mr-plugin-wrapper .mr-video-card h3 { margin: 0 0 12px; font-size: 1.05rem; }
.mr-plugin-wrapper .mr-video-card p { margin: 12px 0 0; color: var(--mr-muted, #6a7883); font-size: .9rem; }
.mr-plugin-wrapper .mr-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #0c1117; }
.mr-plugin-wrapper .mr-video-frame :where(iframe, video) { width: 100%; height: 100%; border: 0; }

/* ---------- FAQs ---------- */
.mr-plugin-wrapper .mr-faq-list { display: grid; gap: var(--mr-faq-gap, 10px); }
.mr-plugin-wrapper .mr-faq-item { border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); padding-inline: 20px; background: var(--mr-faq-background, #fff); transition: border-color .15s ease; }
.mr-plugin-wrapper .mr-faq-item:hover { border-color: color-mix(in srgb, var(--mr-primary, #0e8a83), transparent 55%); }
.mr-plugin-wrapper .mr-faq-item h3 { margin: 0; }
.mr-plugin-wrapper .mr-faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border: 0; background: transparent; color: var(--mr-heading, #13324c); font: inherit; font-size: 1.02rem; font-weight: 700; text-align: left; cursor: pointer; }
.mr-plugin-wrapper .mr-faq-question span { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mr-soft); color: var(--mr-primary, #0e8a83); font-size: 1.1rem; line-height: 1; }
.mr-plugin-wrapper .mr-faq-answer { padding: 0 0 20px; color: var(--mr-body, #3c4a55); }
.mr-plugin-wrapper .mr-faq-answer p:first-child { margin-top: 0; }

/* ---------- Related slider ---------- */
.mr-plugin-wrapper .mr-related-products { position: relative; padding-inline: 50px; }
.mr-plugin-wrapper .mr-related-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 25%); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 6px 2px; }
.mr-plugin-wrapper .mr-related-track .mr-product-card { scroll-snap-align: start; }
.mr-plugin-wrapper .mr-slider-prev { left: 0; top: calc(50% - 21px); }
.mr-plugin-wrapper .mr-slider-next { right: 0; top: calc(50% - 21px); }

/* ---------- Product & category grids ---------- */
.mr-plugin-wrapper .mr-product-grid, .mr-plugin-wrapper .mr-category-grid { display: grid; grid-template-columns: repeat(var(--mr-grid-columns, 4), minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
/* The product grid never grows wider than its own columns need (~380px per column), so a
   category with only one or two products shows normal-sized cards that still fill the row —
   never a single oversized full-width card. At 3–4 columns this exceeds the page width, so
   the common layouts are unchanged; it only reins in 1–2 column grids. */
.mr-plugin-wrapper .mr-product-grid { max-width: calc(var(--mr-grid-columns, 4) * 380px); }
.mr-plugin-wrapper :where(.mr-product-grid, .mr-category-grid)[data-mr-columns="1"] { --mr-grid-columns: 1; }
.mr-plugin-wrapper :where(.mr-product-grid, .mr-category-grid)[data-mr-columns="2"] { --mr-grid-columns: 2; }
.mr-plugin-wrapper :where(.mr-product-grid, .mr-category-grid)[data-mr-columns="3"] { --mr-grid-columns: 3; }
.mr-plugin-wrapper :where(.mr-product-grid, .mr-category-grid)[data-mr-columns="4"] { --mr-grid-columns: 4; }
.mr-plugin-wrapper :where(.mr-product-grid, .mr-category-grid)[data-mr-columns="5"] { --mr-grid-columns: 5; }
.mr-plugin-wrapper :where(.mr-product-grid, .mr-category-grid)[data-mr-columns="6"] { --mr-grid-columns: 6; }
/* Cards fill their grid cell so every card in a row is the same height, and each
   card is a flex column so the action button always sits on the same bottom line. */
.mr-plugin-wrapper :where(.mr-product-card, .mr-category-card) { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); background: var(--mr-card, #fff); transition: transform .15s ease, box-shadow .15s ease; }
.mr-plugin-wrapper .mr-product-card { box-shadow: var(--mr-product-shadow, 0 10px 28px rgba(19,50,76,.07)); }
.mr-plugin-wrapper .mr-category-card { box-shadow: var(--mr-category-shadow, 0 10px 28px rgba(19,50,76,.07)); }
.mr-plugin-wrapper :where(.mr-product-card, .mr-category-card):hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(19,50,76,.12); }
.mr-plugin-wrapper .mr-related-track .mr-product-card { box-shadow: var(--mr-related-shadow, var(--mr-product-shadow)); }
.mr-plugin-wrapper :where(.mr-product-card-image, .mr-category-card-image) { position: relative; display: block; aspect-ratio: var(--mr-image-ratio, 1 / 1); overflow: hidden; background: #f4f6f7; flex: 0 0 auto; }
.mr-plugin-wrapper :where(.mr-product-card-image, .mr-category-card-image) img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mr-plugin-wrapper :where(.mr-product-card, .mr-category-card):hover img { transform: scale(1.05); }
.mr-plugin-wrapper :where(.mr-product-card-body, .mr-category-card-body) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
/* A small, responsive title that clamps to two lines; the full name is available on hover
   via the link's title attribute. font-size scales gently with the viewport. */
.mr-plugin-wrapper .mr-product-card-title { font-size: clamp(.86rem, .78rem + .35vw, .98rem); line-height: 1.3; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; min-height: 2.6em; }
.mr-plugin-wrapper .mr-product-card-title a, .mr-plugin-wrapper .mr-category-card h3 a { color: var(--mr-heading, #13324c); text-decoration: none; }
.mr-plugin-wrapper .mr-product-card-title a:hover { color: var(--mr-primary, #0e8a83); }
/* Deliberately small: the capsule is a quiet hint, the product name is the hero. */
.mr-plugin-wrapper .mr-product-card-category { align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--mr-soft); color: var(--mr-primary, #33414e); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.25; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.mr-plugin-wrapper a.mr-product-card-category:hover { background: var(--mr-primary, #33414e); color: #fff; }
.mr-plugin-wrapper .mr-category-count { color: var(--mr-muted, #6a7883); font-size: .85rem; margin: 0; }
.mr-plugin-wrapper .mr-product-card-actions { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mr-plugin-wrapper .mr-product-card-actions .mr-secondary-button { min-height: 40px; padding: 8px 16px; font-size: .88rem; }
.mr-plugin-wrapper .mr-category-card-body > .mr-text-link { margin-top: auto; padding-top: 12px; }
.mr-plugin-wrapper .mr-product-image-missing, .mr-plugin-wrapper .mr-category-image-missing { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #f2f5f7, #e2e9ed); }
.mr-plugin-wrapper .mr-product-card-image .mr-product-badge { position: absolute; top: 12px; left: 12px; }
.mr-plugin-wrapper .mr-category-card-body h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.mr-plugin-wrapper .mr-category-card-body p:not(.mr-category-count) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; color: var(--mr-body, #3c4a55); font-size: .9rem; }

/* ---------- Filters, pagination, empty & category views ---------- */
/* Shopify-style product toolbar: result count on the left, search / category / wattage /
   sort controls grouped on the right, with a row of removable active-filter chips below. */
.mr-plugin-wrapper .mr-filter-toolbar { margin-bottom: var(--mr-space); padding: 12px 16px; border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); background: var(--mr-card, #fff); box-shadow: 0 4px 16px rgba(19,50,76,.05); }
.mr-plugin-wrapper .mr-filter-toolbar-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.mr-plugin-wrapper .mr-result-count { margin: 0; font-weight: 700; color: var(--mr-heading, #13324c); font-size: .9rem; }
.mr-plugin-wrapper .mr-filter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-field { display: block; margin: 0; flex: 0 0 auto; }
.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-field :where(input, select) { min-height: 42px; padding: 8px 16px; border: 1px solid var(--mr-border, #e4e9ed); border-radius: 999px; background: #fff; color: var(--mr-body, #3c4a55); font-size: .9rem; }
.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-field select { min-width: 168px; padding-right: 12px; cursor: pointer; }
.mr-plugin-wrapper .mr-filter-field-search input { min-width: 220px; }
.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-actions { margin: 0; }
.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-actions .mr-primary-button { min-height: 42px; padding: 9px 22px; }
/* Active-filter chips: each removes its own filter; "Clear all" resets them together. */
.mr-plugin-wrapper .mr-filter-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mr-border, #e4e9ed); }
.mr-plugin-wrapper .mr-filter-active-label { font-size: .8rem; font-weight: 700; color: var(--mr-muted, #6a7883); }
.mr-plugin-wrapper .mr-filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--mr-soft); color: var(--mr-heading, #13324c); font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; }
.mr-plugin-wrapper a.mr-filter-chip:hover { background: var(--mr-primary, #33414e); color: #fff; }
.mr-plugin-wrapper .mr-filter-chip-x { font-size: 1.05rem; line-height: 1; margin-top: -1px; }
.mr-plugin-wrapper .mr-filter-chip-clear { background: transparent; color: var(--mr-accent, #ef3a35); font-weight: 700; }
.mr-plugin-wrapper a.mr-filter-chip-clear:hover { background: transparent; color: var(--mr-button-hover, #d32b27); text-decoration: underline; }
.mr-plugin-wrapper[aria-busy="true"] { opacity: .6; pointer-events: none; }
.mr-plugin-wrapper .mr-empty-state { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--mr-muted, #6a7883); border: 2px dashed var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); }
.mr-plugin-wrapper .mr-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 26px 0 0; margin: 0; }
.mr-plugin-wrapper .mr-pagination :where(a, span) { display: grid; place-items: center; min-width: 42px; min-height: 42px; padding: 0 6px; border: 1px solid var(--mr-border, #e4e9ed); border-radius: 10px; text-decoration: none; color: var(--mr-heading, #13324c); font-weight: 600; }
.mr-plugin-wrapper .mr-pagination a:hover { border-color: var(--mr-primary, #0e8a83); color: var(--mr-primary, #0e8a83); }
.mr-plugin-wrapper .mr-pagination .current { background: var(--mr-primary, #0e8a83); border-color: var(--mr-primary, #0e8a83); color: #fff; }
.mr-plugin-wrapper .mr-category-view { padding-block: 12px; }
.mr-plugin-wrapper .mr-category-banner { width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--mr-radius, 12px); }
.mr-plugin-wrapper .mr-category-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 800; margin: 20px 0 10px; }
.mr-plugin-wrapper .mr-category-description { color: var(--mr-body, #3c4a55); margin-bottom: var(--mr-space); }
.mr-plugin-wrapper .mr-notice { padding: 40px; text-align: center; color: var(--mr-muted, #6a7883); border: 2px dashed var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); }

/* ---------- Subcategory circle carousel ----------
   The circle diameter is driven by --mr-circle-size (set from the shortcode `size`
   attribute) so the same strip can be a compact shop-by-category row or a bold feature. */
.mr-plugin-wrapper.mr-category-strip { margin-bottom: var(--mr-space); }
.mr-plugin-wrapper .mr-category-strip-heading { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 800; margin: 0 0 14px; }
.mr-plugin-wrapper .mr-category-circles { position: relative; padding-inline: 48px; margin-bottom: var(--mr-space); --mr-circle-size: 156px; }
.mr-plugin-wrapper.mr-category-strip .mr-category-circles { margin-bottom: 0; }
/* The track also carries .mr-related-track (for the shared slider JS); the extra
   .mr-category-circles ancestor keeps these rules winning over the related-slider
   column sizes at every breakpoint regardless of declaration order. */
.mr-plugin-wrapper .mr-category-circles .mr-category-circles-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--mr-circle-size, 156px); justify-content: safe center; gap: clamp(14px, 2.4vw, 30px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 10px; }
.mr-plugin-wrapper .mr-category-circles .mr-category-circles-track::-webkit-scrollbar { display: none; }
.mr-plugin-wrapper .mr-category-circle { scroll-snap-align: start; display: grid; gap: 12px; justify-items: center; align-content: start; text-decoration: none; }
.mr-plugin-wrapper .mr-category-circle-image { display: block; width: 100%; max-width: var(--mr-circle-size, 156px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--mr-border, #e4e9ed); background: #f4f6f7; box-shadow: 0 6px 18px rgba(19,50,76,.08); }
.mr-plugin-wrapper .mr-category-circle-image :where(img, .mr-category-image-missing) { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.mr-plugin-wrapper .mr-category-circle:hover .mr-category-circle-image img { transform: scale(1.07); }
.mr-plugin-wrapper .mr-category-circle-name { display: block; color: var(--mr-heading, #1f2933); font-weight: 600; font-size: clamp(.78rem, .72rem + .3vw, .9rem); line-height: 1.3; text-align: center; }
.mr-plugin-wrapper .mr-category-circle:hover .mr-category-circle-name { color: var(--mr-accent, #ef3a35); }
.mr-plugin-wrapper .mr-category-circle-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--mr-primary, #33414e); color: #fff; font-size: .68rem; font-weight: 700; vertical-align: middle; }

/* ---------- Client logos (moving strip + grid) ---------- */
.mr-plugin-wrapper.mr-clients { --mr-client-gap: clamp(14px, 2vw, 30px); }
.mr-plugin-wrapper .mr-client-logo { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: clamp(12px, 1.4vw, 20px); border-radius: 16px; background: #fff; border: 1px solid var(--mr-border, #e4e9ed); box-shadow: 0 4px 14px rgba(19,50,76,.06); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.mr-plugin-wrapper a.mr-client-logo:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(19,50,76,.12); }
.mr-plugin-wrapper .mr-client-logo-inner { display: grid; place-items: center; width: 100%; height: 100%; }
.mr-plugin-wrapper .mr-client-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mr-plugin-wrapper .mr-client-logo-fallback { text-align: center; font-weight: 700; font-size: .86rem; color: var(--mr-heading, #1f2933); line-height: 1.2; }
.mr-plugin-wrapper.mr-clients-grayscale .mr-client-logo img { filter: grayscale(1); opacity: .72; transition: filter .2s ease, opacity .2s ease; }
.mr-plugin-wrapper.mr-clients-grayscale .mr-client-logo:hover img { filter: none; opacity: 1; }
/* tile="plain": logos sit straight on the page background, no white box around them. */
.mr-plugin-wrapper.mr-clients-plain .mr-client-logo { background: none; border: 0; box-shadow: none; padding: 0 8px; aspect-ratio: auto; height: clamp(46px, 5.4vw, 72px); }
.mr-plugin-wrapper.mr-clients-plain a.mr-client-logo:hover { transform: none; box-shadow: none; }

/* Moving single-row strip: two identical groups scroll left forever; translateX(-50%)
   lands exactly on the seam, so the loop is invisible. */
.mr-plugin-wrapper .mr-client-marquee-viewport { overflow: hidden; }
.mr-plugin-wrapper .mr-client-marquee-track { display: flex; width: max-content; animation: mr-client-scroll var(--mr-client-speed, 40s) linear infinite; }
.mr-plugin-wrapper .mr-client-marquee-viewport:hover .mr-client-marquee-track, .mr-plugin-wrapper .mr-client-marquee-viewport:focus-within .mr-client-marquee-track { animation-play-state: paused; }
.mr-plugin-wrapper.mr-clients-marquee.mr-is-paused .mr-client-marquee-track { animation-play-state: paused; }
/* Accessible pause/play control (WCAG 2.2.2) for the auto-scrolling strip. */
.mr-plugin-wrapper.mr-clients-marquee { position: relative; }
.mr-plugin-wrapper .mr-marquee-toggle { position: absolute; top: -6px; right: 0; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--mr-border, #e4e9ed); border-radius: 50%; background: #fff; color: var(--mr-heading, #1f2933); cursor: pointer; box-shadow: 0 3px 10px rgba(19,50,76,.1); }
.mr-plugin-wrapper .mr-marquee-toggle:hover { color: var(--mr-accent, #ef3a35); }
/* The default (show_pause="auto") toggle stays out of the design — a logo strip reads
   better without a control floating over it — and appears the moment it is focused, so
   keyboard users still have the pause mechanism WCAG 2.2.2 asks for. */
.mr-plugin-wrapper .mr-marquee-toggle-quiet:not(:focus) { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; box-shadow: none; background: none; }
.mr-plugin-wrapper .mr-marquee-toggle-pause { width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.mr-plugin-wrapper .mr-marquee-toggle-play { display: none; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; margin-left: 2px; }
.mr-plugin-wrapper.mr-is-paused .mr-marquee-toggle-pause { display: none; }
.mr-plugin-wrapper.mr-is-paused .mr-marquee-toggle-play { display: block; }
.mr-plugin-wrapper .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mr-plugin-wrapper .mr-client-marquee-group { display: flex; align-items: center; gap: var(--mr-client-gap); padding-right: var(--mr-client-gap); }
.mr-plugin-wrapper.mr-clients-marquee .mr-client-logo { flex: 0 0 auto; width: clamp(108px, 13vw, 150px); }
@keyframes mr-client-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Grid: admin-chosen columns on desktop, gracefully fewer on tablet/phone. */
.mr-plugin-wrapper .mr-client-grid-inner { display: grid; grid-template-columns: repeat(var(--mr-client-cols, 6), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
@media (max-width: 980px) { .mr-plugin-wrapper .mr-client-grid-inner { grid-template-columns: repeat(var(--mr-client-cols-tablet, 4), minmax(0, 1fr)); } }
@media (max-width: 600px) { .mr-plugin-wrapper .mr-client-grid-inner { grid-template-columns: repeat(var(--mr-client-cols-mobile, 3), minmax(0, 1fr)); gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
	.mr-plugin-wrapper .mr-client-marquee-viewport { overflow-x: auto; }
	.mr-plugin-wrapper .mr-client-marquee-track { animation: none !important; }
	.mr-plugin-wrapper .mr-client-marquee-group[aria-hidden="true"] { display: none; }
}

/* ---------- Projects ---------- */
.mr-plugin-wrapper.mr-projects-page-header h1 { margin: 26px 0 6px; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 800; }

/* Cover-flow showcase ([mr_projects layout="slider"]): the front project sits whole in the
   middle and the rest are stacked behind it, each step smaller, dimmer and further out so
   only its edge shows — a home page can present many projects in the height of one card.
   Every card occupies the same grid cell (so the block is as tall as one card) and is placed
   by mr-public.js with translateX + scale; turning the deck is just a change of which card
   is the front one, which is why it loops with no seam and no cloned cards.
   --mr-showcase-cards is how many cards are on screen at once; the front card's width is an
   even share of the row for the depth of the stack, which --mr-showcase-width then scales
   (100% = that even share) and --mr-showcase-max caps on a wide screen. */
.mr-plugin-wrapper.mr-projects-showcase { --mr-showcase-cards: var(--mr-showcase-desktop, 5); --mr-showcase-width: 100%; --mr-showcase-max: 460px; margin-bottom: var(--mr-space); }
.mr-plugin-wrapper .mr-showcase-heading { margin: 0 0 14px; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 800; }
.mr-plugin-wrapper .mr-showcase-frame { position: relative; padding-inline: 52px; }
.mr-plugin-wrapper .mr-showcase-viewport { overflow: hidden; padding-block: 10px; }
.mr-plugin-wrapper .mr-showcase-track { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
/* Same cell for every card, so the deck is exactly one card tall. min-width:0 stops a long
   title from making one card wider than the rest. */
.mr-plugin-wrapper .mr-showcase-slide { grid-area: 1 / 1; display: flex; width: var(--mr-showcase-card, 320px); min-width: 0; will-change: transform; transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease; }
.mr-plugin-wrapper .mr-showcase-slide > .mr-product-card { flex: 1 1 auto; width: 100%; min-width: 0; }
.mr-plugin-wrapper .mr-showcase-slide.mr-is-hidden { opacity: 0; pointer-events: none; }
/* Written out rather than grouped in :where(), which would drop the specificity below the
   rule that sets the transition in the first place. */
.mr-plugin-wrapper .mr-showcase-track.mr-no-transition .mr-showcase-slide { transition: none; }
.mr-plugin-wrapper .mr-showcase-slide.mr-no-transition { transition: none; }
/* A card behind the front one steps forward when clicked, so the whole deck stays usable. */
.mr-plugin-wrapper .mr-showcase-frame[data-mr-ready] .mr-showcase-slide:not(.mr-is-active) { cursor: pointer; }
.mr-plugin-wrapper .mr-showcase-slide.mr-is-active > .mr-product-card { box-shadow: 0 22px 50px rgba(19,50,76,.18); }
/* With scripting off the cards would sit on top of each other, so only the first is shown. */
.mr-plugin-wrapper .mr-showcase-frame:not([data-mr-ready]) .mr-showcase-slide ~ .mr-showcase-slide { visibility: hidden; }
@media (max-width: 980px) { .mr-plugin-wrapper.mr-projects-showcase { --mr-showcase-cards: var(--mr-showcase-tablet, 3); --mr-showcase-max: 400px; } }
@media (max-width: 600px) {
	/* A phone gets a wide front card with just an edge of its neighbours showing. */
	.mr-plugin-wrapper.mr-projects-showcase { --mr-showcase-cards: var(--mr-showcase-mobile, 3); --mr-showcase-width: 155%; --mr-showcase-max: none; }
	.mr-plugin-wrapper .mr-showcase-frame { padding-inline: 34px; }
	.mr-plugin-wrapper .mr-showcase-arrow { width: 34px; height: 34px; font-size: 1.1rem; top: calc(50% - 17px); }
}
@media (prefers-reduced-motion: reduce) { .mr-plugin-wrapper .mr-showcase-slide { transition: none; } }

.mr-plugin-wrapper .mr-featured-project { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; margin-bottom: clamp(22px, 3vw, 34px); border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); background: var(--mr-card, #fff); box-shadow: var(--mr-product-shadow, 0 10px 28px rgba(19,50,76,.07)); }
.mr-plugin-wrapper .mr-featured-project-image { display: block; position: relative; min-height: 260px; background: #f4f6f7; }
.mr-plugin-wrapper .mr-featured-project-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mr-plugin-wrapper .mr-featured-project-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: clamp(20px, 3.4vw, 42px); }
.mr-plugin-wrapper .mr-featured-project-badge { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: linear-gradient(100deg, var(--mr-accent, #ef3a35), var(--mr-secondary, #f8b119)); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.mr-plugin-wrapper .mr-featured-project-body h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.2; }
.mr-plugin-wrapper .mr-featured-project-body h2 a { color: var(--mr-heading, #1f2933); text-decoration: none; }
.mr-plugin-wrapper .mr-featured-project-body h2 a:hover { color: var(--mr-accent, #ef3a35); }
.mr-plugin-wrapper .mr-project-intro { margin: 0; color: var(--mr-body, #3c4a55); font-size: 1.02rem; }
.mr-plugin-wrapper .mr-project-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.mr-plugin-wrapper .mr-project-meta li { display: inline-flex; align-items: center; gap: 9px; color: var(--mr-body, #3c4a55); font-size: .92rem; font-weight: 600; }
.mr-plugin-wrapper .mr-project-meta svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--mr-accent, #ef3a35); }
.mr-plugin-wrapper .mr-project-card-intro { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; color: var(--mr-body, #3c4a55); font-size: .88rem; }
.mr-plugin-wrapper .mr-project-card-location { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--mr-muted, #6a7883); font-size: .82rem; }
.mr-plugin-wrapper .mr-project-card-location svg { width: 14px; height: 14px; color: var(--mr-accent, #ef3a35); flex: 0 0 auto; }

/* Single project page */
/* The full-bleed hero is 100vw; on a page with a vertical scrollbar that is a few pixels
   wider than the content area. Clipping the x-overflow removes the stray horizontal
   scrollbar. Safe here because project single pages carry no sticky elements. The :has()
   rule reaches the scrolling root (html); the body rule is the fallback for older engines. */
html:has(body.mr-single-project), html.mr-single-project-root { overflow-x: hidden; }
body.mr-single-project { overflow-x: hidden; }
.mr-plugin-wrapper .mr-project-hero { padding: 22px 0 30px; margin-bottom: var(--mr-space); border-bottom: 1px solid var(--mr-border, #e4e9ed); }
.mr-plugin-wrapper .mr-project-hero-inner { width: 100%; }

/* Photo or solid-colour hero: breaks out to the full viewport width for an immersive
   banner, while the text/info stay aligned to the page grid via the inner wrapper.
   The breadcrumb sits at the top of the hero and the content is centred below it. */
.mr-plugin-wrapper :where(.mr-project-hero-cover, .mr-project-hero-filled) {
	position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
	margin-bottom: var(--mr-space); padding-block: clamp(26px, 4vw, 52px);
	border-bottom: 0; border-radius: 0; overflow: hidden;
	display: flex;
}
.mr-plugin-wrapper .mr-project-hero-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.mr-plugin-wrapper :where(.mr-project-hero-cover, .mr-project-hero-filled) .mr-project-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }
.mr-plugin-wrapper :where(.mr-project-hero-cover, .mr-project-hero-filled) .mr-project-hero-content { margin-block: auto; }
/* Consistent vertical rhythm for the hero content: one gap value between the title,
   introduction, and info row (no reliance on each element's own margins). */
.mr-plugin-wrapper .mr-project-hero-content { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); }
.mr-plugin-wrapper .mr-project-hero-content > * { margin: 0; }
.mr-plugin-wrapper .mr-project-hero-content .mr-project-meta-panel { margin-top: clamp(6px, 1vw, 14px); }
/* Half-screen height (svh keeps mobile browser chrome from cropping it). */
.mr-plugin-wrapper .mr-project-hero-full { min-height: 50vh; min-height: 50svh; }
/* Readability overlay: darken under light text, lighten under dark text. */
.mr-plugin-wrapper .mr-project-hero-cover::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(15,20,26,.34), rgba(15,20,26,.66)); }
.mr-plugin-wrapper .mr-project-hero-cover.mr-project-hero-dark::before { background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.86)); }

/* Breadcrumb inside the hero, colours adapting to the chosen text colour. */
.mr-plugin-wrapper .mr-project-hero-breadcrumbs { margin: 0 0 6px; padding: 0; }
.mr-plugin-wrapper .mr-project-hero-light .mr-project-hero-breadcrumbs a { color: #fff; }
.mr-plugin-wrapper .mr-project-hero-light .mr-project-hero-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.mr-plugin-wrapper .mr-project-hero-light .mr-project-hero-breadcrumbs [aria-current="page"] { color: rgba(255,255,255,.72); }
.mr-plugin-wrapper .mr-project-hero-light .mr-project-hero-breadcrumbs .mr-breadcrumb-separator { color: rgba(255,255,255,.5); }

/* Light-text hero (over photos / dark colours). */
.mr-plugin-wrapper .mr-project-hero-light .mr-project-title, .mr-plugin-wrapper .mr-project-hero-light .mr-project-intro { color: #fff; }
.mr-plugin-wrapper .mr-project-hero-light .mr-project-meta-panel { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.mr-plugin-wrapper .mr-project-hero-light .mr-project-meta-text small { color: rgba(255,255,255,.82); }
.mr-plugin-wrapper .mr-project-hero-light .mr-project-meta-text strong { color: #fff; }
.mr-plugin-wrapper .mr-project-hero-light .mr-project-meta svg { color: #fff; }
.mr-plugin-wrapper .mr-project-title { margin: 0 0 12px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.mr-plugin-wrapper .mr-project-hero .mr-project-intro { max-width: 760px; font-size: 1.08rem; line-height: 1.55; }
/* The info row: one responsive line of location / industry / completion. */
.mr-plugin-wrapper .mr-project-meta-panel { margin-top: 20px; padding: 14px clamp(14px, 2vw, 24px); gap: 12px clamp(24px, 4vw, 56px); border: 1px solid var(--mr-border, #e4e9ed); border-radius: var(--mr-radius, 12px); background: var(--mr-table-head, #f6f7f9); }
.mr-plugin-wrapper .mr-project-meta-panel svg { width: 22px; height: 22px; }
.mr-plugin-wrapper .mr-project-meta-text { display: grid; gap: 1px; }
.mr-plugin-wrapper .mr-project-meta-text small { color: var(--mr-muted, #6a7883); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mr-plugin-wrapper .mr-project-meta-text strong { color: var(--mr-heading, #1f2933); font-size: .96rem; line-height: 1.25; }
.mr-plugin-wrapper .mr-project-section { margin-bottom: var(--mr-space); }
.mr-plugin-wrapper .mr-project-description { max-width: 900px; }
.mr-plugin-wrapper .mr-project-description img { max-width: 100%; height: auto; border-radius: 10px; }

/* Gallery mosaic: first photo hero-sized, the rest tiled; every tile opens the lightbox. */
.mr-plugin-wrapper .mr-project-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mr-plugin-wrapper .mr-project-gallery a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; border: 1px solid var(--mr-border, #e4e9ed); background: #f4f6f7; }
.mr-plugin-wrapper .mr-project-gallery a:first-child { grid-column: span 2; grid-row: span 2; }
.mr-plugin-wrapper .mr-project-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mr-plugin-wrapper .mr-project-gallery a:hover img { transform: scale(1.05); }
.mr-plugin-wrapper .mr-project-videos.mr-video-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mr-plugin-wrapper .mr-project-videos[data-mr-video-count="1"] { grid-template-columns: minmax(0, 720px); justify-content: center; }

/* ---------- Lightbox ---------- */
.mr-plugin-wrapper.mr-lightbox { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; max-width: none; padding: 60px; background: rgba(6,12,18,.93); }
.mr-plugin-wrapper .mr-lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.mr-plugin-wrapper .mr-lightbox-close { position: absolute; top: 16px; right: 20px; border: 0; background: #fff; color: #111; width: 46px; height: 46px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; }

/* ---------- Sticky mobile quote ---------- */
@media (max-width: 980px) {
	/* minmax(0, …) so wide tables scroll inside their own box instead of stretching the column past the phone screen. */
	.mr-plugin-wrapper .mr-product-header { grid-template-columns: minmax(0, 1fr); }
	.mr-plugin-wrapper .mr-product-header-details { position: static; }
	.mr-plugin-wrapper .mr-product-sections { grid-template-columns: minmax(0, 1fr); }
	.mr-plugin-wrapper .mr-product-section { grid-column: 1 / -1; }
	.mr-plugin-wrapper .mr-product-grid, .mr-plugin-wrapper .mr-category-grid { --mr-grid-columns: var(--mr-cols-tablet, 3) !important; }
	.mr-plugin-wrapper .mr-related-track { grid-auto-columns: minmax(230px, 46%); }
	.mr-plugin-wrapper .mr-featured-project { grid-template-columns: minmax(0, 1fr); }
	.mr-plugin-wrapper .mr-featured-project-image { aspect-ratio: 16 / 9; min-height: 0; }
	.mr-plugin-wrapper .mr-project-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mr-plugin-wrapper .mr-category-circles .mr-category-circles-track { grid-auto-columns: clamp(122px, 27%, 170px); }
}
@media (max-width: 600px) {
	.mr-plugin-wrapper { padding-inline: 14px; }
	.mr-plugin-wrapper .mr-product-title { font-size: 1.6rem; }
	.mr-plugin-wrapper .mr-product-grid, .mr-plugin-wrapper .mr-category-grid { --mr-grid-columns: var(--mr-cols-mobile, 2) !important; gap: 12px; }
	/* Compact cards: tighter padding and type so two columns stay readable on phones. */
	.mr-plugin-wrapper :where(.mr-product-card-body, .mr-category-card-body) { padding: 12px 12px 14px; gap: 5px; }
	.mr-plugin-wrapper .mr-product-card-title { font-size: .92rem; min-height: 0; }
	.mr-plugin-wrapper .mr-category-card-body h3 { font-size: 1rem; }
	.mr-plugin-wrapper .mr-category-card-body p:not(.mr-category-count) { font-size: .84rem; }
	.mr-plugin-wrapper .mr-product-card-category { font-size: .6rem; padding: 2px 8px; }
	.mr-plugin-wrapper .mr-product-card-actions { padding-top: 10px; }
	.mr-plugin-wrapper .mr-product-card-actions .mr-secondary-button { flex: 1 1 auto; min-height: 38px; padding: 7px 10px; font-size: .82rem; }
	/* Toolbar stacks: result count on its own line, then full-width controls. */
	.mr-plugin-wrapper .mr-filter-toolbar { padding: 12px; }
	.mr-plugin-wrapper .mr-filter-toolbar-main { align-items: stretch; }
	.mr-plugin-wrapper .mr-filter-controls { width: 100%; margin-left: 0; gap: 8px; }
	.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-field { flex: 1 1 100%; }
	.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-field :where(input, select) { width: 100%; min-width: 0; }
	.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-actions { flex: 1 1 100%; }
	.mr-plugin-wrapper .mr-filter-toolbar .mr-filter-actions .mr-primary-button { width: 100%; }
	.mr-plugin-wrapper .mr-project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.mr-plugin-wrapper .mr-project-meta-panel { gap: 10px 18px; }
	.mr-plugin-wrapper .mr-featured-project-body { padding: 16px 14px 18px; }
	/* Stack the info row on phones so long values (e.g. an industry name) never get cut. */
	.mr-plugin-wrapper .mr-project-meta-panel { flex-direction: column; align-items: stretch; gap: 12px; }
	.mr-plugin-wrapper .mr-project-meta-text strong { overflow-wrap: anywhere; }
	.mr-plugin-wrapper .mr-category-circles { padding-inline: 40px; }
	.mr-plugin-wrapper .mr-category-circles .mr-category-circles-track { grid-auto-columns: clamp(104px, 36%, 150px); gap: 12px; }
	.mr-plugin-wrapper .mr-category-circle-name { font-size: .86rem; gap: 6px; }
	.mr-plugin-wrapper .mr-category-circle-count { min-width: 21px; height: 21px; font-size: .66rem; }
	.mr-plugin-wrapper .mr-related-track { grid-auto-columns: 86%; }
	.mr-plugin-wrapper .mr-related-products { padding-inline: 40px; }
	.mr-plugin-wrapper .mr-download-item { flex-direction: column; align-items: stretch; text-align: center; }
	.mr-plugin-wrapper .mr-product-navigation { flex-direction: column; }
	.mr-plugin-wrapper.mr-has-sticky-quote { padding-bottom: 80px; }
	.mr-plugin-wrapper.mr-has-sticky-quote .mr-product-header-details > .mr-quote-buttons { position: fixed; z-index: 10000; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 14px; background: rgba(255,255,255,.97); box-shadow: 0 -8px 24px rgba(19,50,76,.16); }
	.mr-plugin-wrapper.mr-has-sticky-quote .mr-product-header-details > .mr-quote-buttons .mr-primary-button { flex: 1; }
	.mr-plugin-wrapper .mr-table-stack table { min-width: 0; }
	.mr-plugin-wrapper .mr-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mr-plugin-wrapper .mr-table-stack :where(tbody, tr, td, th) { display: block; width: 100%; }
	.mr-plugin-wrapper .mr-table-stack tr { padding: 6px 12px; border-bottom: 1px solid var(--mr-border, #e4e9ed); }
	.mr-plugin-wrapper .mr-table-stack :where(td, th) { display: grid; grid-template-columns: minmax(100px, 42%) 1fr; gap: 12px; border: 0; padding: 6px 0; }
	.mr-plugin-wrapper .mr-table-stack :where(td, th)::before { content: attr(data-mr-label); font-weight: 700; color: var(--mr-heading, #13324c); }
	.mr-plugin-wrapper.mr-lightbox { padding: 50px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.mr-plugin-wrapper *, .mr-plugin-wrapper *::before, .mr-plugin-wrapper *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- RTL ---------- */
/* WordPress sets dir="rtl" on <html> for right-to-left locales; only the few controls
   that are physically positioned need flipping — the layout otherwise uses logical
   properties (padding-inline / margin-inline) that mirror automatically. */
[dir="rtl"] .mr-plugin-wrapper .mr-section-heading::after { left: auto; right: 0; }
[dir="rtl"] .mr-plugin-wrapper .mr-gallery-prev { left: auto; right: 12px; }
[dir="rtl"] .mr-plugin-wrapper .mr-gallery-next { right: auto; left: 12px; }
[dir="rtl"] .mr-plugin-wrapper :where(.mr-gallery-expand, .mr-gallery-fullscreen) { right: auto; left: 12px; }
[dir="rtl"] .mr-plugin-wrapper .mr-slider-prev { left: auto; right: 0; }
[dir="rtl"] .mr-plugin-wrapper .mr-slider-next { right: auto; left: 0; }
[dir="rtl"] .mr-plugin-wrapper .mr-lightbox-close { right: auto; left: 20px; }
[dir="rtl"] .mr-plugin-wrapper .mr-marquee-toggle { right: auto; left: 0; }