/* MODULAB UI DESIGN SYSTEM v0.5.11.1
 * Single source for typography and semantic palette across the platform.
 * Loaded LAST from the four Laravel layouts. Does not apply to separate WordPress demos.
 * Do not change status/warning/success colors or demo branding here.
 */
:root {
  --ml-brand: #345bff;
  --ml-brand-hover: #2146db;
  --ml-text: #161a24;
  --ml-text-muted: #667387;
  --ml-background: #f7f9fc;
  --ml-surface: #ffffff;
  --ml-border: #e4e9f1;
  --ml-focus: #8aa7ff;
  --ml-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ml-font-display: var(--ml-font-ui);
  /* Compatibility tokens from previous releases: preserve existing layouts. */
  --font-sans: var(--ml-font-ui);
  --font-serif: var(--ml-font-display);
  --blue: var(--ml-brand);
  --ml40-blue: var(--ml-brand);
  --ml42-blue: var(--ml-brand);
  --ml43-blue: var(--ml-brand);
  --p-blue: var(--ml-brand);
}
/* The legacy page families set these custom properties locally. Rebind them
 * to the same shared token so a palette change propagates everywhere. */
html body :is(.ml40-home, .ml42-catalog, .ml42-detail, .ml43-pro, .ml43-page) {
  --ml40-blue: var(--ml-brand);
  --ml42-blue: var(--ml-brand);
  --ml43-blue: var(--ml-brand);
}
/* Normalise typography without changing components' size, weights or spacing. */
html body,
html body.admin-body,
html body :is(button, input, select, textarea),
html body :is(.ml40-home, .ml42-catalog, .ml42-detail, .ml43-pro, .ml43-page),
html body :is(.ml40-button, .ml42-button, .ml43-button, .ml53-theme-toggle, .ml53-lang-form select) {
  font-family: var(--ml-font-ui);
}
/* Keep decorative serif from legacy site from appearing in only some sections. */
html body :is(h1, h2, h3, h4, h5, h6) { font-family: var(--ml-font-display); }
/* Brand marks, branded links and common primary actions. */
html body :is(.brand, .portal-brand) > span { color: var(--ml-brand); }
html body :is(.ml40-button--primary, .ml42-button--primary, .ml43-button--primary, .ml42-mobile-purchase__cta) {
  background: var(--ml-brand);
  color: #fff;
}
html body :is(.ml40-button--primary, .ml42-button--primary, .ml43-button--primary, .ml42-mobile-purchase__cta):hover {
  background: var(--ml-brand-hover);
  color: #fff;
}
html body :is(.portal-nav a[aria-current="page"], .ml42-card h3 a:hover) { color: var(--ml-brand); }
html body :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--ml-focus);
  outline-offset: 3px;
}
/* Template gallery: original arrows/swipe remain the fallback without JS. */
.ml511-gallery-thumbs {
  display: none;
  align-items: stretch;
  gap: 10px;
  padding: 14px 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  background: var(--ml-surface);
  border-top: 1px solid var(--ml-border);
}
.ml511-gallery-thumbs.is-ready { display: flex; }
.ml511-gallery-thumb {
  position: relative;
  flex: 0 0 108px;
  display: grid;
  gap: 5px;
  padding: 6px;
  border: 2px solid var(--ml-border);
  border-radius: 11px;
  text-align: left;
  cursor: pointer;
  background: var(--ml-surface);
  color: var(--ml-text);
  font: inherit;
}
.ml511-gallery-thumb[aria-pressed="true"] {
  border-color: var(--ml-brand);
  box-shadow: 0 0 0 1px var(--ml-brand);
}
.ml511-gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: var(--ml-background);
  border-radius: 6px;
}
.ml511-gallery-thumb span {
  overflow: hidden;
  max-width: 96px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 650;
}
@media (max-width: 620px) {
  .ml511-gallery-thumbs { padding: 10px 12px; gap: 7px; }
  .ml511-gallery-thumb { flex-basis: 80px; padding: 4px; }
  .ml511-gallery-thumb span { max-width: 68px; font-size: 9px; }
}
/* Public and customer portal dark mode keep the SAME palette semantics. */
html[data-theme="dark"] {
  --ml-brand: #9ab0ff;
  --ml-brand-hover: #c2cfff;
  --ml-text: #e9edf6;
  --ml-text-muted: #aebbd0;
  --ml-background: #111722;
  --ml-surface: #1d2736;
  --ml-border: #354253;
  --ml-focus: #b6c7ff;
}
html[data-theme="dark"] body :is(.ml40-button--primary, .ml42-button--primary, .ml43-button--primary, .ml42-mobile-purchase__cta) {
  color: #111b30;
}
html[data-theme="dark"] .ml511-gallery-thumbs { background: #1d2736; border-color: var(--ml-border); }
html[data-theme="dark"] .ml511-gallery-thumb { background: #1d2736; color: #e9edf6; border-color: var(--ml-border); }
html[data-theme="dark"] .ml511-gallery-thumb[aria-pressed="true"] { border-color: var(--ml-brand); }
@media (prefers-reduced-motion: reduce) {
  .ml511-gallery-thumb { transition: none; }
}