/* GENERATED by tools/build/css-bundles.php from assets/css/metusoft.css — do not edit. Bundle "catalog": sections 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 20. */
/* ==========================================================================
   MetuSoft Design System — V2 (public site)
   Tokens: assets/css/tokens.css (loaded first). Documentation: docs/design/DESIGN_SYSTEM.md.
   All components use the "ms-" prefix so they can coexist with the legacy Bootstrap/theme CSS
   on pages that have not been migrated yet (strangler approach).
   ========================================================================== */

/* ---------- 1. Compatibility aliases --------------------------------------
   V1 token names used by page sections written before V2. They resolve to V2 semantic tokens,
   so every page picks up the V2 palette and scale. New code uses the V2 names directly. */
:root {
  --ms-brand-50: var(--ms-color-primary-subtle);
  --ms-brand-100: var(--ms-blue-100);
  --ms-brand-500: var(--ms-blue-500);
  --ms-brand-600: var(--ms-color-primary);
  --ms-brand-700: var(--ms-color-primary-text);
  --ms-brand-800: var(--ms-blue-800);
  --ms-accent-500: var(--ms-color-accent);
  --ms-ink-900: var(--ms-color-text);
  --ms-ink-700: var(--ms-color-text-body);
  --ms-ink-500: var(--ms-color-text-secondary);
  --ms-ink-300: var(--ms-color-text-placeholder);
  --ms-line: var(--ms-color-border);
  --ms-line-strong: var(--ms-color-border-strong);
  --ms-surface: var(--ms-color-surface);
  --ms-canvas: var(--ms-color-bg-subtle);
  --ms-night: var(--ms-color-surface-inverse);
  --ms-night-2: var(--ms-color-surface-inverse-2);
  --ms-success-600: var(--ms-color-success);
  --ms-success-50: var(--ms-color-success-subtle);
  --ms-warning-600: var(--ms-color-warning);
  --ms-warning-50: var(--ms-color-warning-subtle);
  --ms-danger-600: var(--ms-color-danger);
  --ms-danger-50: var(--ms-color-danger-subtle);
  --ms-gradient-brand: linear-gradient(135deg, var(--ms-blue-600), var(--ms-cyan-500));
  --ms-text-display: var(--ms-font-size-6xl);
  --ms-text-h1: var(--ms-font-size-5xl);
  --ms-text-h2: var(--ms-font-size-4xl);
  --ms-text-h3: var(--ms-font-size-xl);
  --ms-text-body-lg: var(--ms-font-size-lg);
  --ms-text-body: var(--ms-font-size-md);
  --ms-text-sm: var(--ms-font-size-sm);
  --ms-text-xs: var(--ms-font-size-2xs);
  --ms-radius-pill: var(--ms-radius-full);
  --ms-shadow-1: var(--ms-shadow-xs);
  --ms-shadow-2: var(--ms-shadow-md);
  --ms-shadow-3: var(--ms-shadow-xl);
  --ms-focus: var(--ms-ring-focus);
  --ms-ease: var(--ms-ease-out);
  --ms-dur-fast: var(--ms-duration-fast);
  --ms-dur: var(--ms-duration-base);
}

/* ---------- 2. Base ------------------------------------------------------ */
/* The legacy theme made <body> a second scroll container (height:100% + overflow:auto) and hid
   its scrollbar. That breaks position:sticky, scroll restoration and keyboard/AT scrolling.
   Restore a single document scroller. */
html,
body {
  height: auto !important;
}

body {
  overflow: visible !important;
  min-height: 100vh;
  scrollbar-width: auto !important;
}

html {
  overflow-x: clip !important;
  scroll-padding-top: calc(var(--ms-header-h) + 16px);
}

body {
  font-family: var(--ms-font-sans);
  color: var(--ms-color-text-body);
  background: var(--ms-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(.ms-scope) *,
:where(.ms-scope) *::before,
:where(.ms-scope) *::after {
  box-sizing: border-box;
}

.ms-scope {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-md);
  line-height: var(--ms-line-height-body);
  color: var(--ms-color-text-body);
}

.ms-scope :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ms-font-sans);
  font-weight: var(--ms-font-weight-semibold);
  color: var(--ms-color-text);
  margin: 0;
  letter-spacing: var(--ms-tracking-tight);
  text-wrap: balance;
}

.ms-scope :where(p) {
  margin: 0;
  text-wrap: pretty;
}

.ms-scope :where(ul, ol) {
  margin: 0;
  padding: 0;
}

.ms-scope :where(a) {
  color: inherit;
  text-decoration: none;
}

.ms-scope :where(figure, blockquote) {
  margin: 0;
}

.ms-scope :where(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.ms-scope :where(strong, b) {
  font-weight: var(--ms-font-weight-semibold);
}

/* Default icon size; components below override it with more specific rules. */
.ms-scope svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.ms-eyebrow svg {
  width: 14px;
  height: 14px;
}

.ms-scope :where(a, button, summary, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ms-ring-focus);
  border-radius: var(--ms-radius-sm);
}

.ms-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ms-skip-link {
  position: absolute;
  left: var(--ms-space-4);
  top: -100px;
  z-index: var(--ms-z-toast);
  padding: var(--ms-space-3) var(--ms-space-5);
  background: var(--ms-color-text);
  color: var(--ms-color-text-inverse) !important;
  border-radius: var(--ms-radius-md);
  font-weight: var(--ms-font-weight-semibold);
  transition: top var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-skip-link:focus {
  top: var(--ms-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .ms-scope *,
  .ms-scope *::before,
  .ms-scope *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Layout & type --------------------------------------------- */
.ms-container {
  width: 100%;
  max-width: calc(var(--ms-container) + 2 * var(--ms-gutter));
  margin-inline: auto;
  padding-inline: var(--ms-gutter);
}

.ms-container--wide {
  max-width: calc(var(--ms-container-wide) + 2 * var(--ms-gutter));
}

.ms-section {
  padding-block: var(--ms-section-y);
}

.ms-section--canvas {
  background: var(--ms-color-bg-subtle);
  border-block: 1px solid var(--ms-color-border);
}

.ms-section--night {
  background: var(--ms-color-surface-inverse);
  color: var(--ms-color-text-inverse-secondary);
}

.ms-section--night :where(h1, h2, h3) {
  color: var(--ms-color-text-inverse);
}

.ms-section-head {
  max-width: 680px;
  margin-bottom: var(--ms-space-7);
}

.ms-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.ms-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin-bottom: var(--ms-space-4);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  line-height: var(--ms-line-height-snug);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ms-color-primary-text);
}

.ms-section--night .ms-eyebrow {
  color: var(--ms-color-link-inverse);
}

.ms-h1 {
  font-size: var(--ms-font-size-5xl);
  line-height: var(--ms-line-height-heading);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-display);
}

.ms-h2 {
  font-size: var(--ms-font-size-4xl);
  line-height: var(--ms-line-height-heading);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-heading);
}

.ms-h3 {
  font-size: var(--ms-font-size-xl);
  line-height: 1.35;
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
}

.ms-lead {
  margin-top: var(--ms-space-4);
  font-size: var(--ms-font-size-lg);
  line-height: var(--ms-line-height-body);
  color: var(--ms-color-text-secondary);
}

.ms-section--night .ms-lead {
  color: var(--ms-color-text-inverse-secondary);
}

.ms-muted {
  color: var(--ms-color-text-secondary);
}

.ms-grid {
  display: grid;
  gap: var(--ms-space-6);
}

@media (min-width: 640px) {
  .ms-grid--2,
  .ms-grid--3,
  .ms-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ms-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ms-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Scroll reveal (UI refresh 2026-10): metusoft.js adds .ms-reveal-on to <html> only when IntersectionObserver
   exists and the visitor has not asked for reduced motion; elements already on screen are marked revealed
   first, so nothing above the fold ever blinks. Without JavaScript everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .ms-reveal-on [data-ms-reveal] {
    transition: opacity 520ms var(--ms-ease-out), transform 520ms var(--ms-ease-out),
      box-shadow var(--ms-duration-base) var(--ms-ease-out), border-color var(--ms-duration-base) var(--ms-ease-out);
  }

  .ms-reveal-on [data-ms-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---------- 4. Buttons --------------------------------------------------- */
/* One button family: primary (one per view), secondary (outlined), ghost (tertiary), and two
   variants for dark surfaces. Sizes sm 36 / md 44 / lg 52; icons 16–18px. */
.ms-btn {
  --_bg: var(--ms-color-primary);
  --_fg: var(--ms-color-on-primary);
  --_bd: var(--ms-color-primary);
  --_shadow: var(--ms-shadow-primary), inset 0 1px 0 rgb(255 255 255 / 0.16);
  /* UI refresh 2026-10: the primary action carries a faint top light so it reads first on every page */
  --_sheen: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-control-md);
  padding: 0 var(--ms-space-5);
  border: 1px solid var(--_bd);
  border-radius: var(--ms-radius-md);
  background: var(--_sheen, none), var(--_bg) !important; /* legacy theme forces .btn backgrounds */
  color: var(--_fg) !important;
  box-shadow: var(--_shadow);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), border-color var(--ms-duration-fast) var(--ms-ease-out),
    color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out),
    transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-btn:hover {
  --_bg: var(--ms-color-primary-hover);
  --_bd: var(--ms-color-primary-hover);
  transform: translateY(-1px);
}

.ms-btn:active {
  --_bg: var(--ms-color-primary-active);
  --_bd: var(--ms-color-primary-active);
  transform: none;
}

.ms-btn:focus-visible {
  outline: none;
  box-shadow: var(--_shadow), var(--ms-ring-focus);
}

.ms-btn[disabled],
.ms-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.ms-btn--secondary {
  --_bg: var(--ms-color-surface);
  --_fg: var(--ms-color-text);
  --_bd: var(--ms-color-border-strong);
  --_shadow: var(--ms-shadow-xs);
  --_sheen: none;
}

.ms-btn--secondary:hover,
.ms-btn--ghost:hover,
.ms-btn--on-dark:hover,
.ms-btn--outline-dark:hover {
  transform: none;
}

/* WhatsApp order (product page): the recognisable green, kept to one button per view */
.ms-btn--whatsapp {
  --_bg: var(--ms-color-whatsapp);
  --_bd: var(--ms-color-whatsapp);
  --_shadow: 0 1px 2px rgb(11 97 57 / 0.3), 0 6px 16px -6px rgb(14 122 74 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.ms-btn--whatsapp:hover {
  --_bg: var(--ms-color-whatsapp-hover);
  --_bd: var(--ms-color-whatsapp-hover);
}

.ms-btn--whatsapp:active {
  --_bg: var(--ms-green-700);
  --_bd: var(--ms-green-700);
}

.ms-btn--secondary:hover {
  --_bg: var(--ms-color-bg-subtle);
  --_bd: var(--ms-gray-400);
}

.ms-btn--secondary:active {
  --_bg: var(--ms-color-bg-muted);
  --_bd: var(--ms-gray-400);
}

.ms-btn--ghost {
  --_bg: transparent;
  --_fg: var(--ms-color-text);
  --_bd: transparent;
  --_shadow: none;
  --_sheen: none;
}

.ms-btn--ghost:hover,
.ms-btn--ghost:active {
  --_bg: var(--ms-color-bg-muted);
  --_bd: transparent;
}

.ms-btn--on-dark {
  --_bg: var(--ms-gray-0);
  --_fg: var(--ms-color-text);
  --_bd: var(--ms-gray-0);
  --_shadow: none;
  --_sheen: none;
}

.ms-btn--on-dark:hover,
.ms-btn--on-dark:active {
  --_bg: var(--ms-blue-50);
  --_bd: var(--ms-blue-50);
}

.ms-btn--outline-dark {
  --_bg: transparent;
  --_fg: var(--ms-color-text-inverse);
  --_bd: rgb(255 255 255 / 0.28);
  --_shadow: none;
  --_sheen: none;
}

.ms-btn--outline-dark:hover,
.ms-btn--outline-dark:active {
  --_bg: rgb(255 255 255 / 0.08);
  --_bd: rgb(255 255 255 / 0.5);
}

.ms-btn--sm {
  min-height: var(--ms-control-sm);
  padding: 0 var(--ms-space-3);
  font-size: var(--ms-font-size-sm);
}

.ms-btn--lg {
  min-height: var(--ms-control-lg);
  padding: 0 var(--ms-space-6);
  font-size: var(--ms-font-size-md);
}

.ms-btn--block {
  width: 100%;
}

.ms-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.ms-btn--lg svg {
  width: 18px;
  height: 18px;
}

.ms-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  color: var(--ms-color-primary-text) !important;
  font-weight: var(--ms-font-weight-medium);
  text-decoration: none;
}

.ms-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ms-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-link:hover svg {
  transform: translateX(2px);
}

/* ---------- 5. Forms ----------------------------------------------------- */
.ms-field {
  display: grid;
  gap: var(--ms-space-1-5);
}

.ms-label {
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  line-height: var(--ms-line-height-snug);
  color: var(--ms-color-text);
}

.ms-label .ms-required {
  color: var(--ms-color-danger);
  margin-left: 2px;
}

.ms-optional {
  color: var(--ms-color-text-tertiary);
  font-weight: var(--ms-font-weight-regular);
}

.ms-scope .ms-input,
.ms-scope input.ms-input,
.ms-scope select.ms-input,
.ms-scope textarea.ms-input {
  width: 100%;
  height: var(--ms-control-md) !important; /* legacy CSS forces 50px on inputs */
  padding: 0 var(--ms-space-3) !important;
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  box-shadow: var(--ms-shadow-xs);
  font: var(--ms-font-weight-regular) var(--ms-font-size-md) / 1.4 var(--ms-font-sans);
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-scope select.ms-input {
  appearance: none;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525a6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.ms-scope textarea.ms-input {
  height: auto !important;
  min-height: 132px;
  padding: var(--ms-space-3) !important;
  resize: vertical;
}

.ms-scope .ms-input::placeholder {
  color: var(--ms-color-text-placeholder);
}

.ms-scope .ms-input:hover {
  border-color: var(--ms-gray-400);
}

.ms-scope .ms-input:focus {
  outline: none;
  border-color: var(--ms-color-primary);
  box-shadow: var(--ms-ring-focus);
}

.ms-scope .ms-input[aria-invalid="true"] {
  border-color: var(--ms-color-danger);
}

.ms-scope .ms-input[aria-invalid="true"]:focus {
  box-shadow: var(--ms-ring-danger);
}

.ms-scope .ms-input:disabled {
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-tertiary);
  cursor: not-allowed;
}

.ms-help {
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
  color: var(--ms-color-text-secondary);
}

.ms-error {
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
  color: var(--ms-color-danger);
  font-weight: var(--ms-font-weight-medium);
}

.ms-input-group {
  display: flex;
  gap: var(--ms-space-2);
}

.ms-input-group .ms-input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 639px) {
  .ms-input-group {
    flex-direction: column;
  }

  /* UI V4 fix: in a column, flex: 1 (basis 0) squeezed the input to ~20px (footer newsletter on phones) */
  .ms-input-group .ms-input {
    flex: none;
  }
}

.ms-check {
  display: flex;
  gap: var(--ms-space-3);
  align-items: flex-start;
  font-size: var(--ms-font-size-sm);
}

.ms-check input {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px;
  accent-color: var(--ms-color-primary);
}

/* ---------- 6. Badges & alerts ------------------------------------------- */
.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  min-height: 24px;
  padding: 0 var(--ms-space-2);
  border: 1px solid var(--ms-color-primary-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-blue-800);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.ms-badge--neutral {
  border-color: var(--ms-color-border);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-body);
}

.ms-badge--success {
  border-color: var(--ms-color-success-border);
  background: var(--ms-color-success-subtle);
  color: var(--ms-green-700);
}

.ms-badge--warning {
  border-color: var(--ms-color-warning-border);
  background: var(--ms-color-warning-subtle);
  color: var(--ms-amber-700);
}

.ms-badge--danger {
  border-color: var(--ms-color-danger-border);
  background: var(--ms-color-danger-subtle);
  color: var(--ms-red-700);
}

.ms-alert {
  display: flex;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
}

.ms-alert--success {
  background: var(--ms-color-success-subtle);
  border-color: var(--ms-color-success-border);
  color: var(--ms-green-700);
}

.ms-alert--warning {
  background: var(--ms-color-warning-subtle);
  border-color: var(--ms-color-warning-border);
  color: var(--ms-amber-700);
}

.ms-alert--danger {
  background: var(--ms-color-danger-subtle);
  border-color: var(--ms-color-danger-border);
  color: var(--ms-red-700);
}

/* ---------- 7. Header & navigation --------------------------------------- */
.ms-header {
  position: sticky;
  top: 0;
  z-index: var(--ms-z-header);
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ms-color-border);
  transition: box-shadow var(--ms-duration-base) var(--ms-ease-out);
}

.ms-header.is-scrolled {
  box-shadow: 0 1px 0 rgb(11 16 51 / 0.02), 0 8px 24px -16px rgb(11 16 51 / 0.18);
}

.ms-header__bar {
  display: flex;
  align-items: center;
  gap: var(--ms-space-8);
  height: var(--ms-header-h);
}

.ms-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.ms-header__logo img {
  width: auto;
  height: 34px;
  object-fit: contain;
}

.ms-nav {
  display: none;
  flex: 1;
}

.ms-nav__list {
  display: flex;
  align-items: center;
  gap: var(--ms-space-0-5);
  list-style: none;
}

.ms-nav__item {
  position: relative;
}

.ms-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  height: 36px;
  padding: 0 var(--ms-space-3);
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-text-body) !important;
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1 var(--ms-font-sans);
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-nav__link:hover,
.ms-nav__item.is-open > .ms-nav__link {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ms-nav__link[aria-current="page"] {
  color: var(--ms-color-text) !important;
  box-shadow: inset 0 -2px 0 var(--ms-color-primary);
  border-radius: 0;
}

.ms-nav__link svg {
  width: 14px;
  height: 14px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-nav__item.is-open > .ms-nav__link svg {
  transform: rotate(180deg);
}

.ms-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 0; /* aligned with the trigger; widths stay inside the viewport from 1024px up */
  width: min(760px, calc(100vw - 2 * var(--ms-gutter)));
  padding: var(--ms-space-3);
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--ms-duration-fast) var(--ms-ease-out), transform var(--ms-duration-fast) var(--ms-ease-out),
    visibility 0s linear var(--ms-duration-fast);
}

.ms-mega::before {
  /* hover bridge between trigger and panel */
  content: "";
  position: absolute;
  inset: -14px 0 auto;
  height: 14px;
}

.ms-nav__item.is-open > .ms-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.ms-mega--narrow {
  width: min(400px, calc(100vw - 2 * var(--ms-gutter)));
}

.ms-mega__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 236px;
  gap: 0 var(--ms-space-2);
}

.ms-mega--narrow .ms-mega__grid {
  grid-template-columns: 1fr;
}

.ms-mega__title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ms-space-2) var(--ms-space-3) var(--ms-space-3);
  margin-bottom: var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-border);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
  color: var(--ms-color-text-tertiary);
}

.ms-mega__list {
  display: grid;
  gap: 1px;
  list-style: none;
  align-content: start;
}

.ms-mega__link {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-2) var(--ms-space-3);
  min-height: 40px;
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text-body) !important;
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-mega__link:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ms-mega__link small {
  display: block;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-regular);
  margin-top: 2px;
  line-height: var(--ms-line-height-snug);
}

.ms-mega__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-primary);
  box-shadow: var(--ms-shadow-xs);
}

.ms-mega__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ms-mega__icon svg {
  width: 18px;
  height: 18px;
}

.ms-mega__feature {
  grid-row: 2;
  grid-column: 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
  padding: var(--ms-space-5);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface-inverse);
  color: var(--ms-color-text-inverse-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
}

.ms-mega__feature strong {
  color: var(--ms-color-text-inverse);
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-mega__feature .ms-btn {
  margin-top: auto;
  align-self: flex-start;
}

.ms-mega__title .ms-mega__all {
  color: var(--ms-color-primary-text) !important;
  font-size: var(--ms-font-size-xs);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--ms-font-weight-medium);
}

.ms-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ms-space-1);
  margin-left: auto;
}

.ms-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-text-body) !important;
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-icon-btn:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ms-icon-btn svg {
  width: 20px;
  height: 20px;
}

.ms-icon-btn__count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--ms-color-surface);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-primary);
  color: var(--ms-color-on-primary);
  font-size: 10px;
  font-weight: var(--ms-font-weight-semibold);
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}

.ms-header__account-label {
  display: none;
}

.ms-header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .ms-nav {
    display: block;
  }

  .ms-header__cta {
    display: inline-flex;
    min-height: var(--ms-control-sm);
    margin-left: var(--ms-space-2);
  }

  .ms-header__burger {
    display: none !important;
  }

  .ms-header__actions {
    margin-left: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .ms-header__bar {
    gap: var(--ms-space-5);
  }
}

@media (min-width: 1280px) {
  .ms-header__account-label {
    display: inline;
  }

  .ms-header__account {
    width: auto;
    padding: 0 var(--ms-space-3);
    gap: var(--ms-space-2);
    display: inline-flex;
    align-items: center;
    font-size: var(--ms-font-size-sm);
    font-weight: var(--ms-font-weight-medium);
  }

  .ms-header__account svg {
    width: 18px;
    height: 18px;
  }
}

/* Member avatar (UI V4): initials on the brand gradient; an icon when the record has no name */
.ms-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--ms-radius-full);
  background: linear-gradient(135deg, var(--ms-blue-500), var(--ms-navy-800));
  color: #fff;
  font-size: 12px;
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--ms-color-surface), 0 0 0 3px var(--ms-color-primary-border);
}

.ms-avatar svg {
  width: 16px;
  height: 16px;
}

.ms-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

/* Header user menu (UI V4): name + avatar button, click-to-open panel with the member pages and sign-out */
.ms-usermenu {
  position: relative;
}

.ms-usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  height: 44px;
  padding: 0 var(--ms-space-1-5, 6px);
  border: 1px solid transparent;
  border-radius: var(--ms-radius-full);
  background: transparent;
  color: var(--ms-color-text) !important;
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1 var(--ms-font-sans);
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), border-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-usermenu__trigger:hover,
.ms-usermenu.is-open .ms-usermenu__trigger {
  border-color: var(--ms-color-border);
  background: var(--ms-color-bg-muted);
}

.ms-usermenu__trigger > svg {
  display: none;
  width: 14px;
  height: 14px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-usermenu.is-open .ms-usermenu__trigger > svg {
  transform: rotate(180deg);
}

.ms-usermenu__name {
  display: none;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-usermenu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: calc(var(--ms-z-header) + 1);
  width: min(300px, calc(100vw - 2 * var(--ms-gutter)));
  padding: var(--ms-space-2);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-lg);
  transform-origin: top right;
}

.ms-usermenu.is-open .ms-usermenu__panel {
  animation: ms-usermenu-in var(--ms-duration-fast) var(--ms-ease-out);
}

@keyframes ms-usermenu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

.ms-usermenu__panel[hidden] {
  display: none;
}

/* phones/tablets: the avatar is not at the screen edge (cart and menu buttons follow it), so the panel is
   pinned to the viewport's right gutter under the header instead of the button */
@media (max-width: 1023px) {
  .ms-usermenu__panel {
    position: fixed;
    top: calc(var(--ms-header-h) + 6px);
    right: var(--ms-gutter);
    max-height: calc(100dvh - var(--ms-header-h) - 24px);
    overflow-y: auto;
  }
}

.ms-usermenu__head {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  margin-bottom: var(--ms-space-2);
  padding: var(--ms-space-3);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
}

.ms-usermenu__who {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ms-usermenu__who strong,
.ms-usermenu__who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-usermenu__who strong {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-sm);
}

.ms-usermenu__who small {
  color: var(--ms-color-text-secondary);
  font-size: 12px;
}

.ms-usermenu__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-usermenu .ms-usermenu__link { /* beats body.ms-lean :where(button) { font: inherit } */
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--ms-space-3);
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-text-body) !important;
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1.2 var(--ms-font-sans);
  text-align: left;
  cursor: pointer;
}

.ms-usermenu__link svg {
  width: 18px;
  height: 18px;
  color: var(--ms-color-text-tertiary);
}

.ms-usermenu__link:hover,
.ms-usermenu__link:focus-visible {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ms-usermenu__link[aria-current="page"] {
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text) !important;
}

.ms-usermenu__link[aria-current="page"] svg {
  color: var(--ms-color-primary);
}

.ms-usermenu__foot {
  margin: var(--ms-space-2) 0 0;
  padding-top: var(--ms-space-2);
  border-top: 1px solid var(--ms-color-border);
}

.ms-usermenu__logout:hover,
.ms-usermenu__logout:focus-visible,
.ms-usermenu__logout:hover svg {
  background: var(--ms-color-danger-subtle);
  color: var(--ms-color-danger) !important;
}

@media (min-width: 1280px) {
  .ms-usermenu__trigger {
    padding: 0 var(--ms-space-3) 0 6px;
  }

  .ms-usermenu__name,
  .ms-usermenu__trigger > svg {
    display: inline-block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-usermenu.is-open .ms-usermenu__panel {
    animation: none;
  }
}

/* Mobile drawer */
.ms-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000; /* above the legacy cookie banner (9999) */
  visibility: hidden;
}

.ms-drawer.is-open {
  visibility: visible;
}

.ms-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(7 10 34 / 0.48);
  opacity: 0;
  transition: opacity var(--ms-duration-base) var(--ms-ease-out);
}

.ms-drawer.is-open .ms-drawer__backdrop {
  opacity: 1;
}

.ms-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xl);
  transform: translateX(100%);
  transition: transform var(--ms-duration-slow) var(--ms-ease-out);
}

.ms-drawer.is-open .ms-drawer__panel {
  transform: translateX(0);
}

.ms-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ms-header-h);
  padding: 0 var(--ms-space-3) 0 var(--ms-gutter);
  border-bottom: 1px solid var(--ms-color-border);
}

.ms-drawer__head img {
  height: 30px;
  width: auto;
}

.ms-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ms-space-2) var(--ms-gutter) var(--ms-space-6);
  overscroll-behavior: contain;
}

.ms-drawer__group {
  border-bottom: 1px solid var(--ms-color-border);
}

.ms-drawer__group > summary,
.ms-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-weight: var(--ms-font-weight-medium);
  font-size: var(--ms-font-size-md);
  color: var(--ms-color-text) !important;
  cursor: pointer;
  list-style: none;
}

.ms-drawer__group > summary::-webkit-details-marker {
  display: none;
}

.ms-drawer__group > summary svg {
  width: 18px;
  height: 18px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-drawer__group[open] > summary svg {
  transform: rotate(180deg);
}

.ms-drawer__sub {
  display: grid;
  gap: 1px;
  padding-bottom: var(--ms-space-3);
  list-style: none;
}

.ms-drawer__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--ms-space-3);
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text-body) !important;
  font-size: var(--ms-font-size-sm);
}

.ms-drawer__sub a:hover {
  background: var(--ms-color-bg-muted);
}

.ms-drawer__link {
  border-bottom: 1px solid var(--ms-color-border);
}

/* signed-in member in the drawer (UI V4): name + avatar, member pages, sign-out form */
.ms-drawer__who {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-width: 0;
}

.ms-drawer__who > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-drawer__account > summary .ms-avatar svg {
  width: 16px;
  height: 16px;
  color: #fff;
  transform: none !important;
}

.ms-drawer__sub form {
  margin: 0;
}

.ms-drawer .ms-drawer__logout {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ms-space-3);
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-danger);
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1 var(--ms-font-sans);
  cursor: pointer;
}

.ms-drawer__logout svg {
  width: 18px;
  height: 18px;
}

.ms-drawer__logout:hover {
  background: var(--ms-color-danger-subtle);
}

.ms-drawer__foot {
  display: grid;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4) var(--ms-gutter) calc(var(--ms-space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ms-color-border);
  background: var(--ms-color-bg-subtle);
}

.ms-drawer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2) var(--ms-space-5);
  font-size: var(--ms-font-size-sm);
}

.ms-drawer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--ms-color-text-body) !important;
  font-weight: var(--ms-font-weight-medium);
}

body.ms-no-scroll {
  overflow: hidden !important;
}

/* ---------- 8. Cards ----------------------------------------------------- */
.ms-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-xs);
  transition: border-color var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out);
}

.ms-card:hover {
  border-color: var(--ms-color-border-strong);
  box-shadow: var(--ms-shadow-md);
}

/* Product card (UI refresh 2026-10, default/partials/product-card.php): one stretched title link, one
   primary action ("Satın Al"), a quiet link row (demo · details · quote). Compact: 2:1 screenshot (the real
   capture ratio, no side cropping), 16 px body padding, two-line title and summary. */
.ms-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out),
    border-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-pcard:hover {
  transform: translateY(-3px);
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-card-hover);
}

.ms-pcard:focus-within {
  border-color: var(--ms-color-primary-border);
}

.ms-pcard__media {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-bottom: 1px solid var(--ms-color-border);
  background: var(--ms-color-bg-tint);
}

.ms-pcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 600ms var(--ms-ease-out);
}

.ms-pcard:hover .ms-pcard__media img {
  transform: scale(1.04);
}

.ms-pcard__media--empty {
  display: grid;
  place-items: center;
  color: var(--ms-color-text-placeholder);
}

.ms-scope .ms-pcard__media--empty > svg {
  width: 32px;
  height: 32px;
}

/* V3: real discount as a quiet tag beside the old price — the screenshot and the price lead, not the badge */
.ms-pcard__was {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
}

.ms-pcard__deal {
  padding: 1px 6px;
  border: 1px solid var(--ms-color-success-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-success-subtle);
  color: var(--ms-color-savings);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.4;
}

.ms-pcard__peek {
  position: absolute;
  right: var(--ms-space-2);
  bottom: var(--ms-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  padding: 6px 10px;
  border-radius: var(--ms-radius-full);
  background: rgb(11 16 51 / 0.82);
  color: #fff;
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--ms-duration-base) var(--ms-ease-out), transform var(--ms-duration-base) var(--ms-ease-out);
}

.ms-scope .ms-pcard__peek svg {
  width: 14px;
  height: 14px;
}

.ms-pcard:hover .ms-pcard__peek {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .ms-pcard__peek {
    display: none;
  }
}

.ms-pcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ms-space-1-5);
  padding: var(--ms-space-3) var(--ms-space-4) var(--ms-space-4);
}

.ms-pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--ms-space-2);
  font-size: var(--ms-font-size-2xs);
  line-height: 1.4;
  color: var(--ms-color-text-secondary);
}

.ms-pcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ms-color-primary-text);
  font-weight: var(--ms-font-weight-medium);
}

.ms-scope .ms-pcard__cat svg {
  width: 14px;
  height: 14px;
}

.ms-pcard__cat + .ms-pcard__lic::before {
  content: "·";
  margin-right: var(--ms-space-2);
  color: var(--ms-color-text-placeholder);
}

.ms-pcard__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--ms-tracking-tight);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ms-pcard__title a {
  color: var(--ms-color-text) !important;
}

.ms-pcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.ms-pcard__title a:focus-visible {
  box-shadow: none;
}

.ms-pcard__title a:focus-visible::after {
  box-shadow: inset 0 0 0 3px var(--ms-color-focus);
}

.ms-pcard__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ms-pcard__buy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ms-space-3);
  margin-top: auto;
  padding-top: var(--ms-space-3);
}

.ms-pcard .ms-price__now {
  font-size: var(--ms-font-size-xl);
}

.ms-pcard__action {
  position: relative;
  z-index: 2; /* above the stretched title link */
}

.ms-pcard__links {
  position: relative;
  z-index: 2;
  display: flex;
  border-top: 1px solid var(--ms-color-border);
  background: var(--ms-gray-25);
}

.ms-pcard__links a {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  padding: 0 var(--ms-space-2);
  color: var(--ms-color-text-secondary) !important;
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-pcard__links a + a {
  border-left: 1px solid var(--ms-color-border);
}

.ms-pcard__links a:hover {
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text) !important;
}

.ms-pcard__links a:focus-visible {
  border-radius: 0;
  box-shadow: inset var(--ms-ring-focus);
}

.ms-scope .ms-pcard__links svg {
  width: 15px;
  height: 15px;
}

/* Price display — shared by cards, the showcase and the purchase box */
.ms-price {
  display: grid;
  gap: 2px;
}

.ms-price__old {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.ms-price__now {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-xl);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ms-price__note {
  color: var(--ms-color-text-secondary); /* also sits on gray-50 (total row): tertiary would be 4.4:1 */
  font-size: var(--ms-font-size-2xs);
}

/* Service card */
.ms-service {
  padding: var(--ms-space-6);
  gap: var(--ms-space-2);
}

.ms-service__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-primary);
  box-shadow: var(--ms-shadow-xs);
}

.ms-service__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.ms-service__icon svg {
  width: 20px;
  height: 20px;
}

.ms-service h3 {
  font-size: var(--ms-font-size-lg);
}

.ms-service p {
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.6;
}

.ms-service .ms-link {
  margin-top: auto;
  padding-top: var(--ms-space-3);
  font-size: var(--ms-font-size-sm);
}

.ms-service--cta {
  background: var(--ms-color-surface-inverse);
  border-color: var(--ms-color-surface-inverse);
  color: var(--ms-color-text-inverse-secondary);
}

.ms-service--cta .ms-service__icon {
  border-color: var(--ms-color-border-inverse);
  background: rgb(255 255 255 / 0.06);
  color: var(--ms-color-link-inverse);
  box-shadow: none;
}

.ms-service--cta h3 {
  color: var(--ms-color-text-inverse);
}

.ms-service--cta p {
  color: var(--ms-color-text-inverse-secondary);
}

.ms-service--cta .ms-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 9. Footer ---------------------------------------------------- */
.ms-footer {
  background: var(--ms-navy-950);
  color: var(--ms-color-text-inverse-secondary);
  font-size: var(--ms-font-size-sm);
}

.ms-footer a {
  color: var(--ms-color-text-inverse-secondary) !important;
  transition: color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-footer a:hover {
  color: var(--ms-color-text-inverse) !important;
}

.ms-footer__newsletter {
  display: grid;
  gap: var(--ms-space-5);
  padding-block: var(--ms-space-9);
  border-bottom: 1px solid var(--ms-color-border-inverse);
}

@media (min-width: 1024px) {
  .ms-footer__newsletter {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.ms-footer__newsletter h2 {
  color: var(--ms-color-text-inverse);
  font-size: var(--ms-font-size-xl);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
}

.ms-footer__newsletter p {
  margin-top: var(--ms-space-2);
}

.ms-footer.ms-scope .ms-input {
  background: rgb(255 255 255 / 0.04);
  border-color: rgb(255 255 255 / 0.16);
  color: var(--ms-color-text-inverse);
  box-shadow: none;
}

.ms-footer.ms-scope .ms-input:hover {
  border-color: rgb(255 255 255 / 0.3);
}

.ms-footer.ms-scope .ms-input::placeholder {
  color: #8a94b4;
}

.ms-footer__consent {
  margin-top: var(--ms-space-2);
  font-size: var(--ms-font-size-2xs);
  color: #8a94b4; /* 5.6:1 on navy-950 */
}

.ms-footer__consent a {
  text-decoration: underline;
}

/* newsletter result after the Post/Redirect/Get (dark footer: light text, coloured left rule) */
.ms-footer__notice {
  margin-top: var(--ms-space-3);
  padding: var(--ms-space-2) var(--ms-space-3);
  border-left: 3px solid #4ade80;
  background: rgb(255 255 255 / 0.06);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-color-text-inverse);
  font-size: var(--ms-font-size-sm);
}

.ms-footer__notice--error {
  border-left-color: #f87171;
}

.ms-footer__main {
  display: grid;
  gap: var(--ms-space-8);
  padding-block: var(--ms-space-10);
}

@media (min-width: 768px) {
  .ms-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ms-footer__main {
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  }
}

.ms-footer__brand img {
  /* The uploaded logo is a non-transparent PNG, so it sits on a light plate instead of being inverted.
     Replace with an SVG/transparent logo when available (DESIGN_SYSTEM §1). */
  height: 44px;
  width: auto;
  padding: 6px 10px;
  border-radius: var(--ms-radius-md);
  background: var(--ms-gray-0);
}

.ms-footer__brand p {
  margin-top: var(--ms-space-5);
  max-width: 340px;
  line-height: var(--ms-line-height-body);
}

.ms-footer__contact {
  display: grid;
  gap: var(--ms-space-1);
  margin-top: var(--ms-space-5);
  list-style: none;
}

.ms-footer__contact li {
  display: flex;
  gap: var(--ms-space-2);
  align-items: center;
}

.ms-footer__contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ms-color-link-inverse);
}

.ms-footer__heading {
  color: var(--ms-color-text-inverse) !important;
  font-size: var(--ms-font-size-sm) !important;
  font-weight: var(--ms-font-weight-semibold) !important;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--ms-space-4) !important;
}

.ms-footer__list {
  display: grid;
  gap: var(--ms-space-0-5);
  list-style: none;
}

/* WCAG 2.5.8: list links get at least a 24px tall target */
.ms-footer__list a,
.ms-footer__legal a,
.ms-footer__consent a,
.ms-footer__contact a {
  display: inline-block;
  min-height: 24px;
  padding-block: 4px;
}

.ms-footer__social {
  display: flex;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-5);
}

.ms-footer__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ms-color-border-inverse);
  border-radius: var(--ms-radius-md);
}

.ms-footer__social a:hover {
  border-color: rgb(255 255 255 / 0.32);
}

.ms-footer__social svg {
  width: 16px;
  height: 16px;
}

.ms-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-4) var(--ms-space-7);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--ms-space-6);
  border-top: 1px solid var(--ms-color-border-inverse);
  font-size: var(--ms-font-size-xs);
}

.ms-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-1) var(--ms-space-5);
  list-style: none;
}

.ms-footer__payments {
  height: 24px;
  width: auto;
  opacity: 0.8;
}

/* Floating WhatsApp */
.ms-fab {
  position: fixed;
  right: var(--ms-space-5);
  bottom: calc(var(--ms-space-5) + env(safe-area-inset-bottom));
  z-index: 890;
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  height: 48px;
  padding: 0 var(--ms-space-5) 0 var(--ms-space-4);
  border-radius: var(--ms-radius-full);
  background: #0f7a41; /* WhatsApp green darkened to 5.4:1 with white text */
  color: #fff !important;
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-semibold);
  box-shadow: var(--ms-shadow-lg);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-fab:hover {
  transform: translateY(-1px);
}

.ms-fab svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 767px) {
  .ms-fab {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }

  .ms-fab span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

/* Non-modal promo card (replaces the blocking pop-up) */
.ms-promo {
  position: fixed;
  left: var(--ms-space-5);
  bottom: var(--ms-space-5);
  z-index: 890;
  width: 300px;
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xl);
  border: 1px solid var(--ms-color-border);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--ms-duration-base) var(--ms-ease-out), transform var(--ms-duration-base) var(--ms-ease-out);
}

.ms-promo.is-visible {
  opacity: 1;
  transform: none;
}

.ms-promo[hidden] {
  display: none;
}

.ms-promo img {
  display: block;
  width: 100%;
  height: auto;
}

.ms-promo__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--ms-radius-full);
  background: rgb(7 10 34 / 0.65);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 767px) {
  .ms-promo {
    display: none;
  }
}

/* Legacy cookie consent banner: keep it clear of the floating button */
.cc-window.cc-floating {
  max-width: 360px !important;
  bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}

/* UI V4: the banner speaks the site's language — white card, border, card shadow, Inter, primary button
   (colours come from the palette in index.php; the library sets them inline-class) */
.cc-window.cc-floating.cc-theme-classic {
  gap: var(--ms-space-3);
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-xl);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-sm);
  line-height: 1.55;
}

.cc-window.cc-floating .cc-message {
  margin: 0 !important;
}

.cc-window .cc-link {
  padding: 0;
  font-weight: var(--ms-font-weight-semibold);
  text-underline-offset: 2px;
  opacity: 1;
}

.cc-window.cc-theme-classic .cc-btn {
  min-height: 40px;
  padding: 0 var(--ms-space-5);
  border: 0;
  border-radius: var(--ms-radius-md);
  font: var(--ms-font-weight-semibold) var(--ms-font-size-sm) / 40px var(--ms-font-sans);
  box-shadow: var(--ms-shadow-primary);
}

.cc-window.cc-theme-classic .cc-btn:hover {
  filter: brightness(0.94);
}

@media (max-width: 414px) {
  .cc-window.cc-floating {
    right: var(--ms-gutter) !important;
    left: var(--ms-gutter) !important;
    max-width: none !important;
  }
}

/* ---------- 10. Home page + shared section components ----------------------- */
/* UI refresh 2026-10. Hero: message on the left, a product showcase on the right — real screenshots in
   browser windows stacked as a deck (front = active), rotating slowly with pause/prev/next/dots and swipe
   (metusoft.js). Without JS the first slide simply stands in front. Decoration is limited to a hairline
   grid and two soft azure lights behind the deck (no gradient text, no moving backgrounds). */
.ms-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(36px, 4.5vw, 72px) clamp(56px, 6vw, 96px);
  background: linear-gradient(180deg, #f4f8ff 0%, var(--ms-color-bg) 78%);
}

.ms-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(26 102 229 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(26 102 229 / 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 72%);
  pointer-events: none;
}

.ms-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38% 46% at 76% 46%, rgb(47 120 240 / 0.16), transparent 70%),
    radial-gradient(26% 34% at 96% 8%, rgb(15 176 236 / 0.14), transparent 70%);
  pointer-events: none;
}

.ms-hero__inner {
  position: relative;
  display: grid;
  gap: var(--ms-space-9);
  align-items: center;
}

@media (min-width: 1024px) {
  .ms-hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 4vw, 72px);
  }
}

.ms-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 30px;
  margin-bottom: var(--ms-space-5);
  padding: 0 var(--ms-space-3) 0 var(--ms-space-1);
  border: 1px solid var(--ms-color-primary-border);
  border-radius: var(--ms-radius-full);
  background: rgb(255 255 255 / 0.8);
  box-shadow: var(--ms-shadow-xs);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-medium);
}

.ms-hero__badge b {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--ms-space-2);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-primary);
  color: var(--ms-color-on-primary);
  font-weight: var(--ms-font-weight-semibold);
  white-space: nowrap;
}

@media (max-width: 479px) {
  .ms-hero__badge {
    padding-left: var(--ms-space-3);
  }

  .ms-hero__badge b {
    display: none !important;
  }
}

.ms-hero__title {
  font-size: clamp(2.25rem, 1.15rem + 3.5vw, 3.625rem);
  line-height: 1.06;
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-display);
  color: var(--ms-color-text);
}

.ms-hero__title em {
  font-style: normal;
  color: var(--ms-color-primary);
}

.ms-hero__lead {
  max-width: 540px;
  margin-top: var(--ms-space-5);
  font-size: var(--ms-font-size-lg);
  line-height: var(--ms-line-height-body);
  color: var(--ms-color-text-secondary);
}

.ms-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-7);
}

@media (max-width: 479px) {
  .ms-hero__actions .ms-btn {
    flex: 1 1 100%;
  }
}

.ms-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2) var(--ms-space-5);
  margin-top: var(--ms-space-6);
  list-style: none;
  font-size: var(--ms-font-size-sm);
  color: var(--ms-color-text-secondary);
}

.ms-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
}

.ms-scope .ms-hero__points svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

/* Product showcase */
.ms-showcase {
  position: relative;
  min-width: 0;
}

.ms-showcase__deck {
  position: relative;
  display: grid;
}

.ms-showcase--deck .ms-showcase__deck {
  padding: 7% 8% 0 0; /* room for the windows stacked behind (up-right) */
}

.ms-showcase__slide {
  grid-area: 1 / 1;
  margin: 0;
  transform-origin: 100% 0;
  transition: transform 700ms var(--ms-ease-out), opacity 700ms var(--ms-ease-out);
}

.ms-showcase__slide[data-pos="0"] {
  z-index: 4;
}

.ms-showcase__slide[data-pos="1"] {
  z-index: 3;
  transform: translate(4.5%, -6%) scale(0.93);
  opacity: 0.92;
}

.ms-showcase__slide[data-pos="2"] {
  z-index: 2;
  transform: translate(9%, -12%) scale(0.86);
  opacity: 0.6;
}

.ms-showcase__slide:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) {
  z-index: 1;
  transform: translate(13%, -18%) scale(0.8);
  opacity: 0;
}

/* a window whose screenshot is not loaded yet stays invisible (no empty frames; without JS only the front shows) */
.ms-showcase__slide:has(img[data-ms-src]) {
  visibility: hidden;
  opacity: 0;
}

.ms-showcase__slide[data-pos="out"] {
  z-index: 5;
  transform: translate(-5%, 5%) scale(0.97);
  opacity: 0;
}

.ms-showcase__window {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgb(11 16 51 / 0.08);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-media);
  text-decoration: none !important;
}

.ms-showcase__slide:not([data-pos="0"]) .ms-showcase__window {
  cursor: pointer;
}

.ms-showcase__slide:not([data-pos="0"]) .ms-showcase__window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(11 16 51 / 0.06);
}

.ms-showcase__window img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top center;
  transition: transform 900ms var(--ms-ease-out);
}

.ms-showcase__slide[data-pos="0"] .ms-showcase__window:hover img {
  transform: scale(1.02);
}

.ms-showcase__window:focus-visible {
  outline: none;
  box-shadow: var(--ms-shadow-media), var(--ms-ring-focus);
}

.ms-showcase__panel {
  position: relative;
  z-index: 6;
  margin-top: calc(var(--ms-space-6) * -1);
  margin-left: 4%;
  width: 92%;
}

.ms-showcase__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3) var(--ms-space-4);
  padding: var(--ms-space-3) var(--ms-space-3) var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: rgb(255 255 255 / 0.94);
  box-shadow: var(--ms-shadow-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ms-fade-up 420ms var(--ms-ease-out);
}

.ms-showcase__caption[hidden] {
  display: none;
}

.ms-showcase__text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 200px;
}

.ms-showcase__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1-5);
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
}

.ms-scope .ms-showcase__cat svg {
  width: 14px;
  height: 14px;
}

.ms-showcase__name {
  overflow: hidden;
  color: var(--ms-color-text) !important;
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-showcase__name:hover {
  color: var(--ms-color-primary-text) !important;
}

.ms-showcase__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
}

.ms-showcase__price {
  display: grid;
  margin-right: var(--ms-space-2);
  line-height: 1.15;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ms-showcase__price s {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
}

.ms-showcase__price strong {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-lg);
}

.ms-showcase__controls {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-3);
}

.ms-showcase__controls[hidden] {
  display: none;
}

.ms-showcase__ctrl {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  box-shadow: var(--ms-shadow-xs);
  cursor: pointer;
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-showcase__ctrl:hover {
  border-color: var(--ms-color-primary-border);
  background: var(--ms-color-primary-subtle);
}

.ms-scope .ms-showcase__ctrl svg {
  width: 16px;
  height: 16px;
}

.ms-showcase__pause {
  margin-left: auto;
}

.ms-showcase__pause svg:last-child,
.ms-showcase__pause[aria-pressed="true"] svg:first-child {
  display: none;
}

.ms-showcase__pause[aria-pressed="true"] svg:last-child {
  display: block;
}

.ms-showcase__dots {
  display: flex;
  align-items: center;
}

.ms-showcase__dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ms-showcase__dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-gray-300);
  transition: width var(--ms-duration-base) var(--ms-ease-out), background-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-showcase__dot:hover span {
  background: var(--ms-gray-400);
}

.ms-showcase__dot[aria-current="true"] span {
  width: 22px;
  background: var(--ms-color-primary);
}

@media (max-width: 639px) {
  .ms-showcase--deck .ms-showcase__deck {
    padding: 6% 6% 0 0;
  }

  .ms-showcase__panel {
    width: 100%;
    margin-left: 0;
    margin-top: calc(var(--ms-space-3) * -1);
  }

  .ms-showcase__buy {
    width: 100%;
  }

  .ms-showcase__price {
    margin-right: auto;
    text-align: left;
  }
}

@keyframes ms-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.ms-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--ms-space-3);
  background: var(--ms-gray-50);
  border-bottom: 1px solid var(--ms-color-border);
}

.ms-browser__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ms-gray-300);
}

.ms-browser__bar i:nth-child(1) {
  background: #ff6159;
}

.ms-browser__bar i:nth-child(2) {
  background: #ffbd2e;
}

.ms-browser__bar i:nth-child(3) {
  background: #28c941;
}

.ms-browser__url {
  flex: 1;
  max-width: 300px;
  height: 20px;
  margin-inline: auto;
  padding: 0 var(--ms-space-3);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-border);
  color: var(--ms-color-text-tertiary);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* What we offer: three compact entry cards overlapping the hero's lower edge */
.ms-offer {
  position: relative;
  z-index: 1;
  padding-bottom: var(--ms-section-y-tight);
}

@media (min-width: 1024px) {
  .ms-offer {
    margin-top: calc(var(--ms-space-7) * -1);
  }
}

.ms-offer__list {
  display: grid;
  gap: var(--ms-space-4);
  list-style: none;
}

@media (min-width: 900px) {
  .ms-offer__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ms-space-5);
  }
}

.ms-offer__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ms-space-4);
  align-items: start;
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out), border-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-offer__item:hover {
  transform: translateY(-2px);
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-card-hover);
}

.ms-offer__item:focus-within {
  box-shadow: var(--ms-shadow-card-hover), var(--ms-ring-focus);
}

.ms-offer__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ms-radius-md);
  background: linear-gradient(135deg, var(--ms-blue-600), var(--ms-blue-500));
  color: #fff;
  box-shadow: var(--ms-shadow-primary);
}

.ms-offer__icon--navy {
  background: linear-gradient(135deg, var(--ms-navy-800), var(--ms-navy-700));
  box-shadow: 0 6px 16px -6px rgb(11 16 51 / 0.5);
}

.ms-offer__icon--cyan {
  background: linear-gradient(135deg, #0c8fc4, var(--ms-cyan-500));
  box-shadow: 0 6px 16px -6px rgb(15 176 236 / 0.55);
}

.ms-scope .ms-offer__icon svg {
  width: 22px;
  height: 22px;
}

.ms-offer__item h3 {
  font-size: var(--ms-font-size-md);
  line-height: 1.35;
}

.ms-offer__item h3 a {
  color: var(--ms-color-text) !important;
}

.ms-offer__item h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ms-offer__item h3 a:focus-visible {
  box-shadow: none;
}

.ms-offer__item p {
  margin-top: var(--ms-space-1);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.55;
}

.ms-offer__stat {
  display: inline-block;
  margin-top: var(--ms-space-2);
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ms-scope .ms-offer__item > svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-offer__item:hover > svg {
  transform: translateX(3px);
  color: var(--ms-color-primary);
}

/* Section with the heading on the left and content on the right (≥1024px) */
.ms-section-split {
  display: grid;
  gap: var(--ms-space-8);
}

@media (min-width: 1024px) {
  .ms-section-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: var(--ms-space-11);
    align-items: start;
  }

  .ms-section-split__head {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-7));
    margin-bottom: 0;
  }
}

.ms-section-split__action {
  margin-top: var(--ms-space-6);
}

/* Services: a 2-column grid of quiet cells; the whole cell is the link */
.ms-service-grid {
  display: grid;
  gap: var(--ms-space-4);
  list-style: none;
}

@media (min-width: 640px) {
  .ms-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-service-grid > .ms-service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ms-space-5) var(--ms-space-6);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out), border-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-service-grid > .ms-service:hover {
  transform: translateY(-2px);
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-card-hover);
}

.ms-service-grid > .ms-service:focus-within {
  box-shadow: var(--ms-shadow-card-hover), var(--ms-ring-focus);
}

.ms-service-grid .ms-service h3 a {
  color: var(--ms-color-text) !important;
}

.ms-service-grid .ms-service h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ms-service-grid .ms-service h3 a:focus-visible {
  box-shadow: none;
}

.ms-service-grid .ms-service:hover .ms-link svg {
  transform: translateX(3px);
}

@media (min-width: 640px) {
  .ms-service-grid > .ms-service:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Section header with actions */
.ms-section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ms-space-4) var(--ms-space-5);
  margin-bottom: var(--ms-space-7);
}

.ms-section-bar .ms-section-head {
  margin-bottom: 0;
}

.ms-section-bar__link {
  padding-bottom: var(--ms-space-1);
  font-size: var(--ms-font-size-sm);
}

.ms-section--tint {
  background: linear-gradient(180deg, var(--ms-color-bg-tint) 0%, var(--ms-color-bg) 100%);
  border-top: 1px solid var(--ms-color-border);
}

.ms-search {
  display: flex;
  gap: var(--ms-space-2);
  width: min(100%, 360px);
}

.ms-search--center {
  width: min(100%, 460px);
  margin-top: var(--ms-space-3);
}

/* Chips — one family for sector/category navigation and filters (home, catalogue, enterprise solutions).
   Links carry aria-current="page" for the active one; buttons use aria-pressed. */
.ms-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1-5);
  min-height: 36px;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body) !important;
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1 var(--ms-font-sans);
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out),
    border-color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-scope .ms-chip svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-primary);
  transition: color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-chip:hover {
  border-color: var(--ms-color-primary-border);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-text) !important;
}

.ms-chip[aria-pressed="true"],
.ms-chip[aria-current="page"] {
  border-color: var(--ms-color-text);
  background: var(--ms-color-text);
  color: var(--ms-color-text-inverse) !important;
  box-shadow: 0 4px 12px -4px rgb(11 16 51 / 0.45);
}

.ms-scope .ms-chip[aria-pressed="true"] svg,
.ms-scope .ms-chip[aria-current="page"] svg {
  color: var(--ms-color-link-inverse);
}

.ms-chip:focus-visible {
  outline: none;
  box-shadow: var(--ms-ring-focus);
}

.ms-chip__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ms-chip[aria-pressed="true"] .ms-chip__count,
.ms-chip[aria-current="page"] .ms-chip__count {
  background: rgb(255 255 255 / 0.16);
  color: var(--ms-color-text-inverse);
}

/* A chip row that scrolls sideways instead of wrapping (phones; long sector lists) */
.ms-chipset--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}

.ms-chipset--scroll::-webkit-scrollbar {
  display: none;
}

.ms-chipset--scroll > li {
  flex: none;
  scroll-snap-align: start;
}

/* Home: sector chips + search in one bar */
.ms-catbar {
  display: grid;
  gap: var(--ms-space-3);
  margin-bottom: var(--ms-space-6);
}

@media (min-width: 900px) {
  .ms-catbar {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    align-items: start;
  }
}

.ms-catbar__nav {
  min-width: 0;
}

@media (max-width: 899px) {
  .ms-catbar__nav .ms-chipset {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--ms-gutter) * -1);
    padding: 2px var(--ms-gutter) var(--ms-space-1);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .ms-catbar__nav .ms-chipset::-webkit-scrollbar {
    display: none;
  }

  .ms-catbar__nav .ms-chipset > li {
    flex: none;
    scroll-snap-align: start;
  }
}

.ms-catbar__search {
  position: relative;
  display: flex;
  gap: var(--ms-space-2);
}

.ms-scope .ms-catbar__search > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--ms-color-text-tertiary);
  pointer-events: none;
}

.ms-scope .ms-catbar__search .ms-input {
  flex: 1;
  min-width: 0;
  height: 36px !important;
  padding-left: 36px !important;
  border-radius: var(--ms-radius-full);
  font-size: var(--ms-font-size-sm);
}

.ms-catbar__search .ms-btn {
  border-radius: var(--ms-radius-full);
}

/* Product grid — shared by the home page, the catalogue and "related software". Columns appear when each
   card keeps ≥ 264 px, never more than four (wide screens get larger cards, not a fifth narrow column). */
.ms-pgrid {
  --_gap: var(--ms-space-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 280px), calc((100% - 3 * var(--_gap)) / 4)), 1fr)); /* V3: 280px keeps names and prices readable; 4 columns only when they fit */
  gap: var(--_gap);
}

@media (max-width: 639px) {
  .ms-pgrid {
    --_gap: var(--ms-space-4);
  }
}

/* Process: a numbered timeline on the dark band */
.ms-section--night {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(50% 80% at 85% 0%, rgb(26 102 229 / 0.22), transparent 70%),
    var(--ms-color-surface-inverse);
}

.ms-steps {
  display: grid;
  gap: var(--ms-space-2);
  counter-reset: ms-step;
  list-style: none;
}

@media (min-width: 768px) {
  .ms-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ms-space-5);
  }
}

@media (min-width: 1024px) {
  .ms-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
}

.ms-step {
  position: relative;
  padding: var(--ms-space-4) 0 var(--ms-space-4) var(--ms-space-10);
}

.ms-step::before {
  counter-increment: ms-step;
  content: "0" counter(ms-step);
  position: absolute;
  left: 0;
  top: var(--ms-space-4);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(142 187 255 / 0.4);
  border-radius: var(--ms-radius-full);
  background: rgb(26 102 229 / 0.18);
  font: var(--ms-font-weight-semibold) var(--ms-font-size-xs) / 1 var(--ms-font-mono);
  color: var(--ms-color-link-inverse);
}

@media (min-width: 1024px) {
  .ms-step {
    padding: 0 var(--ms-space-6) 0 0;
  }

  .ms-step::before {
    position: relative;
    top: 0;
    margin-bottom: var(--ms-space-5);
  }

  .ms-step::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 48px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg, rgb(142 187 255 / 0.45), rgb(255 255 255 / 0.04));
  }

  .ms-step:last-child::after {
    display: none;
  }
}

.ms-step h3 {
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-step p {
  margin-top: var(--ms-space-2);
  font-size: var(--ms-font-size-sm);
  line-height: 1.6;
  color: var(--ms-color-text-inverse-secondary);
}

/* Feature list (why us): small cards with an icon tile */
.ms-features {
  display: grid;
  gap: var(--ms-space-3);
  list-style: none;
}

@media (min-width: 640px) {
  .ms-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-features--stacked {
  margin-top: var(--ms-space-7);
}

.ms-feature {
  display: flex;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ms-feature h3 {
  font-size: var(--ms-font-size-sm);
  line-height: 1.4;
}

.ms-feature p {
  margin-top: var(--ms-space-1);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  line-height: 1.55;
}

.ms-split {
  display: grid;
  gap: var(--ms-space-9);
}

@media (min-width: 1024px) {
  .ms-split {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--ms-space-11);
    align-items: start;
  }

  .ms-split__sticky {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-7));
  }
}

/* FAQ accordion — one look on every page */
.ms-faq {
  display: grid;
  gap: var(--ms-space-2);
}

.ms-faq details {
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-faq details:hover {
  border-color: var(--ms-color-border-strong);
}

.ms-faq details[open] {
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-card);
}

.ms-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-4);
  min-height: 56px;
  padding: var(--ms-space-3) var(--ms-space-5);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-medium);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}

.ms-faq summary::-webkit-details-marker {
  display: none;
}

.ms-faq summary:hover,
.ms-faq details[open] summary {
  color: var(--ms-color-primary-text);
}

.ms-faq summary svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  flex: none;
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-secondary);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), background-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-faq details[open] summary svg {
  transform: rotate(180deg);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

.ms-faq__answer {
  padding: 0 var(--ms-space-5) var(--ms-space-5);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.7;
}

.ms-faq__answer p + p {
  margin-top: var(--ms-space-3);
}

.ms-faq__title {
  margin-bottom: var(--ms-space-4);
}

.ms-faq__more {
  margin-top: var(--ms-space-5);
}

/* CTA band */
.ms-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--ms-space-6);
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: var(--ms-radius-xl);
  background: linear-gradient(120deg, var(--ms-navy-900) 0%, var(--ms-navy-800) 55%, #13307a 100%);
  color: var(--ms-color-text-inverse-secondary);
  box-shadow: 0 24px 48px -24px rgb(11 16 51 / 0.5);
  isolation: isolate;
}

.ms-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, #000, transparent 70%);
}

.ms-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -10% auto 55%;
  height: 140%;
  background: radial-gradient(closest-side, rgb(47 120 240 / 0.45), transparent);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .ms-cta {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
}

.ms-cta h2 {
  color: var(--ms-color-text-inverse);
}

.ms-cta .ms-lead {
  color: var(--ms-color-text-inverse-secondary);
}

.ms-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
}

@media (min-width: 1024px) {
  .ms-cta__actions {
    justify-content: flex-end;
  }
}

/* Empty state */
.ms-empty {
  display: grid;
  justify-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-10) var(--ms-space-5);
  border: 1px dashed var(--ms-color-border-strong);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-bg-subtle);
  text-align: center;
  color: var(--ms-color-text-secondary);
}

.ms-empty svg {
  width: 32px;
  height: 32px;
  color: var(--ms-color-text-placeholder);
}

/* UI V4 fix: icons inside buttons keep the button's size and colour (the 404 "Ara" glyph was 32px grey) */
.ms-scope .ms-empty .ms-btn svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.ms-empty h1,
.ms-empty h2 {
  color: var(--ms-color-text);
}

.ms-empty p {
  max-width: 520px;
}

.ms-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-3);
}

.ms-empty--page {
  padding-block: var(--ms-space-11);
}

/* UI V4: in-panel empty state (member lists): icon, message and the one useful action in a row */
.ms-scope .ms-empty--compact {
  justify-items: start;
  padding: var(--ms-space-5);
  text-align: left;
}

.ms-empty--compact h2 {
  margin: 0;
  font-size: var(--ms-text-body);
}

.ms-empty--compact p {
  margin: var(--ms-space-1) 0 0;
  font-size: var(--ms-text-sm);
}

@media (min-width: 640px) {
  .ms-scope .ms-empty--compact {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ms-space-4);
  }

  .ms-empty--compact .ms-quote__done-icon {
    width: 48px;
    height: 48px;
  }
}

.ms-section-more {
  display: flex;
  justify-content: center;
  margin-top: var(--ms-space-8);
}

/* ---------- 11. Inner pages: hero, breadcrumb, sections ------------------- */
.ms-section--tight {
  padding-block: var(--ms-section-y-tight);
}

.ms-section--flush-top {
  padding-top: 0;
}

/* Page head (FAZ 1): every inner page uses the catalog head's language — white ground with the home
   page's fading hairline grid, a compact title and a short lead — instead of the old full-width grey
   band. Pages vary the composition (aside media, facts, actions), not the visual system. */
.ms-page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--ms-space-7) var(--ms-space-7);
  background: linear-gradient(180deg, #f4f8ff 0%, var(--ms-color-bg) 100%); /* UI refresh 2026-10: same light azure ground as the catalogue / product heads */
}

.ms-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(26 102 229 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(26 102 229 / 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 70% 90% at 15% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 15% 0%, #000 10%, transparent 70%);
  pointer-events: none;
}

.ms-page-hero > * {
  position: relative;
}

@media (min-width: 1024px) {
  .ms-page-hero {
    padding-block: var(--ms-space-9) var(--ms-space-8);
  }
}

.ms-page-hero__title {
  margin-top: var(--ms-space-5);
  max-width: 24ch;
  font-size: var(--ms-font-size-4xl);
  line-height: var(--ms-line-height-heading);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-heading);
  color: var(--ms-color-text);
}

.ms-page-hero .ms-lead {
  max-width: 62ch;
  margin-top: var(--ms-space-3);
  font-size: var(--ms-font-size-md);
}

/* the first section after a page head continues it (no second band of empty space) */
.ms-page-hero + .ms-section,
.ms-page-hero + .ms-section--tight {
  padding-top: var(--ms-space-4);
}

@media (min-width: 1024px) {
  .ms-page-hero + .ms-section,
  .ms-page-hero + .ms-section--tight {
    padding-top: var(--ms-space-6);
  }
}

/* Breadcrumb — one component on every page (UI refresh 2026-10): 13 px, home glyph on the first link,
   chevron separators, underline on hover. On phones the trail stays on one line and only the current
   (last) item is shortened with an ellipsis; its full text is still read by assistive technology and the
   page title (h1) shows it in full. `.ms-breadcrumb--inverse` is the same trail on dark heads. */
.ms-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-1) var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ms-font-size-xs);
  line-height: 1.4;
  color: var(--ms-color-text-secondary);
}

.ms-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 24px;
  min-width: 0;
}

.ms-breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
}

.ms-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--ms-color-text-secondary) !important;
  text-decoration: none;
  border-radius: var(--ms-radius-xs);
  transition: color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-breadcrumb li:first-child a::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ms-breadcrumb a:hover {
  color: var(--ms-color-primary-text) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ms-breadcrumb [aria-current="page"] {
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
}

@media (max-width: 639px) {
  .ms-breadcrumb ol {
    flex-wrap: nowrap;
  }

  .ms-breadcrumb li {
    flex: none;
  }

  .ms-breadcrumb li[aria-current="page"] {
    display: block;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ms-breadcrumb li[aria-current="page"]::before {
    display: inline-block;
    margin-right: 10px;
    vertical-align: 1px;
  }
}

.ms-breadcrumb--inverse ol,
.ms-breadcrumb--inverse a {
  color: var(--ms-color-text-inverse-secondary) !important;
}

.ms-breadcrumb--inverse a:hover {
  color: var(--ms-color-text-inverse) !important;
}

.ms-breadcrumb--inverse [aria-current="page"] {
  color: var(--ms-color-text-inverse);
}

/* Pagination (catalogue, order history) — moved here from section 12 so every page type gets it */
.ms-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-8);
}

.ms-pagination ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-surface);
  color: var(--ms-ink-900) !important;
  font-weight: var(--ms-font-weight-semibold);
  text-decoration: none !important;
}

.ms-pagination a:hover {
  background: var(--ms-canvas);
}

.ms-pagination a[aria-current="page"] {
  background: var(--ms-ink-900);
  border-color: var(--ms-ink-900);
  color: var(--ms-gray-0) !important;
}

.ms-pagination__gap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ms-ink-500);
}



/* V5: administrator preview notice (product ?onizleme=1, solution drafts) — shown to signed-in admins only */
.ms-preview-note {
  border-bottom: 1px solid var(--ms-color-primary-border);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-sm);
}

.ms-preview-note p {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-2);
  padding-block: var(--ms-space-3);
}

.ms-scope .ms-preview-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* ---------- 12. Catalog (listing) ----------------------------------------- */
/* UI refresh 2026-10: /yazilimlar/, /kategori/*, /arama/. A compact head (breadcrumb, title, lead, three real
   facts as pills), then a sticky sector panel next to the results. The sector list turns into a swipeable
   chip row below 1024 px. Search, sort and paging stay plain GET links/forms (work without JavaScript). */
.ms-cathead {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--ms-space-6) var(--ms-space-7);
  background: linear-gradient(180deg, #f4f8ff 0%, var(--ms-color-bg) 100%);
  border-bottom: 1px solid var(--ms-color-border);
}

.ms-cathead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(26 102 229 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(26 102 229 / 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 100% at 20% 0%, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 20% 0%, #000 15%, transparent 70%);
  pointer-events: none;
}

.ms-cathead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(32% 90% at 92% 0%, rgb(47 120 240 / 0.12), transparent 70%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .ms-cathead {
    padding-block: var(--ms-space-7) var(--ms-space-8);
  }
}

.ms-cathead__inner {
  display: grid;
  gap: var(--ms-space-5);
}

.ms-cathead__eyebrow {
  margin: var(--ms-space-5) 0 0;
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
}

.ms-cathead__title {
  margin-top: var(--ms-space-2);
  font-size: var(--ms-font-size-4xl);
  line-height: 1.15;
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-heading);
  color: var(--ms-color-text);
}

.ms-cathead__title--spaced {
  margin-top: var(--ms-space-5);
}

.ms-cathead__lead {
  max-width: 68ch;
  margin-top: var(--ms-space-3);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-md);
  line-height: var(--ms-line-height-body);
}

.ms-cathead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-cathead__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 32px;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-full);
  background: rgb(255 255 255 / 0.85);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-medium);
}

.ms-scope .ms-cathead__facts svg {
  width: 15px;
  height: 15px;
  color: var(--ms-color-primary);
}

.ms-cathead__facts strong {
  color: var(--ms-color-text);
}

@media (max-width: 639px) {
  /* phones: keep the catalogue count, drop the generic selling points so the cards start sooner */
  .ms-cathead__facts li:not(.ms-cathead__fact--count) {
    display: none;
  }
}

.ms-cathead + .ms-section {
  padding-top: var(--ms-space-6);
}

/* Layout: sector panel + results */
.ms-catalog {
  display: grid;
  gap: var(--ms-space-5);
}

@media (min-width: 1024px) {
  .ms-catalog {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--ms-space-7);
    align-items: start;
  }

  .ms-catalog__nav {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-4));
  }
}

.ms-catalog__nav,
.ms-catalog__main {
  min-width: 0;
}

.ms-catalog__panel {
  min-width: 0;
}

.ms-catalog__nav-title {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
}

.ms-scope .ms-catalog__nav-title svg {
  width: 14px;
  height: 14px;
}

.ms-catnav {
  display: flex;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-catnav__link {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 38px;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body) !important;
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), border-color var(--ms-duration-fast) var(--ms-ease-out),
    color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-scope .ms-catnav__link svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-text-tertiary);
  transition: color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-catnav__link:hover {
  border-color: var(--ms-color-primary-border);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-text) !important;
}

.ms-catnav__link:hover svg {
  color: var(--ms-color-primary);
}

.ms-catnav__name {
  min-width: 0;
}

.ms-catnav__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ms-catnav__link[aria-current="page"] {
  border-color: var(--ms-color-text);
  background: var(--ms-color-text);
  color: var(--ms-color-text-inverse) !important;
}

.ms-catnav__link[aria-current="page"] svg {
  color: var(--ms-color-link-inverse);
}

.ms-catnav__link[aria-current="page"] .ms-catnav__count {
  background: rgb(255 255 255 / 0.16);
  color: var(--ms-color-text-inverse);
}

/* phones/tablets: one swipeable chip row above the results */
@media (max-width: 1023px) {
  .ms-catalog__nav-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .ms-catnav {
    overflow-x: auto;
    margin-inline: calc(var(--ms-gutter) * -1);
    padding: 2px var(--ms-gutter) var(--ms-space-1);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .ms-catnav::-webkit-scrollbar {
    display: none;
  }

  .ms-catnav li {
    flex: none;
    scroll-snap-align: start;
  }

  .ms-catalog__help {
    display: none;
  }
}

/* desktop: a quiet panel with full-width rows; the active sector gets a tint and an accent bar */
@media (min-width: 1024px) {
  .ms-catalog__panel {
    padding: var(--ms-space-2);
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-lg);
    background: var(--ms-color-surface);
    box-shadow: var(--ms-shadow-card);
  }

  .ms-catalog__nav-title {
    padding: var(--ms-space-2) var(--ms-space-3) var(--ms-space-3);
    margin-bottom: var(--ms-space-1);
    border-bottom: 1px solid var(--ms-color-border);
  }

  .ms-catnav {
    flex-direction: column;
    gap: 2px;
  }

  .ms-catnav__link {
    position: relative;
    min-height: 40px;
    border-color: transparent;
    border-radius: var(--ms-radius-md);
    background: transparent;
    white-space: normal;
    line-height: 1.3;
  }

  .ms-catnav__link:hover {
    border-color: transparent;
    background: var(--ms-color-bg-subtle);
  }

  .ms-catnav__link[aria-current="page"] {
    border-color: transparent;
    background: var(--ms-color-primary-subtle);
    color: var(--ms-color-primary-text) !important;
    font-weight: var(--ms-font-weight-semibold);
  }

  .ms-catnav__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ms-color-primary);
  }

  .ms-catnav__link[aria-current="page"] svg {
    color: var(--ms-color-primary);
  }

  .ms-catnav__link[aria-current="page"] .ms-catnav__count {
    background: var(--ms-color-primary);
    color: var(--ms-color-on-primary);
  }

  .ms-catalog__help {
    position: relative;
    display: grid;
    gap: var(--ms-space-2);
    margin-top: var(--ms-space-3);
    padding: var(--ms-space-5);
    overflow: hidden;
    border-radius: var(--ms-radius-lg);
    background: linear-gradient(140deg, var(--ms-navy-900), #15306f);
    color: var(--ms-color-text-inverse-secondary);
    font-size: var(--ms-font-size-xs);
    line-height: 1.55;
  }

  .ms-catalog__help strong {
    color: var(--ms-color-text-inverse);
    font-size: var(--ms-font-size-sm);
  }

  .ms-catalog__help .ms-btn {
    margin-top: var(--ms-space-2);
  }
}

.ms-catalog__help-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ms-radius-md);
  background: rgb(47 120 240 / 0.3);
  color: #fff;
}

.ms-scope .ms-catalog__help-icon svg {
  width: 18px;
  height: 18px;
}

/* Toolbar: search, sort and the submit in one bar */
.ms-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ms-space-2);
  padding: var(--ms-space-2);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
}

.ms-toolbar__search {
  position: relative;
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .ms-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .ms-toolbar__search {
    grid-column: auto;
  }
}

.ms-toolbar__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ms-color-text-tertiary);
  pointer-events: none;
}

.ms-scope .ms-toolbar__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.ms-scope .ms-toolbar .ms-input {
  border-color: transparent;
  background-color: var(--ms-color-bg-subtle);
  box-shadow: none;
}

.ms-scope .ms-toolbar .ms-input:hover {
  border-color: var(--ms-color-border-strong);
}

.ms-scope .ms-toolbar .ms-input:focus {
  border-color: var(--ms-color-primary);
  background-color: var(--ms-color-surface);
  box-shadow: var(--ms-ring-focus);
}

.ms-scope .ms-toolbar__search .ms-input {
  padding-left: 42px !important;
}

.ms-toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-width: 0;
}

.ms-toolbar__label {
  padding-left: var(--ms-space-2);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
}

.ms-scope .ms-toolbar__sort select.ms-input {
  flex: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .ms-scope .ms-toolbar__sort select.ms-input {
    min-width: 200px;
  }
}

.ms-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  margin-block: var(--ms-space-4);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

.ms-results-bar strong {
  color: var(--ms-color-text);
}

.ms-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 32px;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-primary-border);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-blue-800) !important;
  font-weight: var(--ms-font-weight-semibold);
  text-decoration: none !important;
}

.ms-filter-chip:hover {
  border-color: var(--ms-color-primary);
}

.ms-scope .ms-filter-chip svg {
  width: 14px;
  height: 14px;
}

/* ---------- 13. Product detail ------------------------------------------- */
.ms-options {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-height: 48px;
  margin-top: var(--ms-space-2);
  padding: var(--ms-space-2) var(--ms-space-4);
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  font-size: var(--ms-font-size-sm);
  cursor: pointer;
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-option:hover {
  border-color: var(--ms-gray-400);
}

.ms-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--ms-color-primary);
}

.ms-option:has(input:checked) {
  border-color: var(--ms-color-primary);
  background: var(--ms-color-primary-subtle);
  box-shadow: 0 0 0 1px var(--ms-color-primary);
}

.ms-option:has(input:focus-visible) {
  box-shadow: var(--ms-ring-focus);
}

.ms-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ms-option__price {
  margin-left: auto;
  font-weight: var(--ms-font-weight-medium);
  color: var(--ms-color-text);
  font-variant-numeric: tabular-nums;
}

/* Long-form content written in the admin editor */
.ms-prose {
  max-width: 72ch;
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-md);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.ms-prose > * + * {
  margin-top: var(--ms-space-4);
}

.ms-prose :where(h3, h4, h5) {
  margin-top: var(--ms-space-8);
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--ms-tracking-tight);
}

.ms-prose h3 {
  font-size: var(--ms-font-size-xl);
}

.ms-prose h4 {
  font-size: var(--ms-font-size-lg);
}

.ms-prose :where(ul, ol) {
  padding-left: 1.25rem;
}

.ms-prose ul {
  list-style: disc;
}

.ms-prose ol {
  list-style: decimal;
}

.ms-prose li::marker {
  color: var(--ms-color-text-tertiary);
}

.ms-prose li + li {
  margin-top: var(--ms-space-1);
}

.ms-prose li p {
  margin: 0;
}

.ms-prose a {
  color: var(--ms-color-primary-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ms-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-color-border);
}

.ms-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ms-font-size-sm);
}

.ms-prose :where(td, th) {
  padding: var(--ms-space-2) var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
}

.ms-checklist {
  display: grid;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ms-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
}

.ms-scope .ms-checklist svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--ms-color-success);
  flex: none;
}

.ms-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ms-font-size-sm);
}

.ms-table :where(th, td) {
  padding: var(--ms-space-3) var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  text-align: left;
  vertical-align: top;
}

.ms-table thead th {
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-medium);
}

.ms-table tbody th {
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
}

.ms-table td {
  font-variant-numeric: tabular-nums;
}

.ms-table tbody tr:last-child :where(th, td) {
  border-bottom: 0;
}

.ms-disclosure {
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ms-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  min-height: 52px;
  padding: 0 var(--ms-space-5);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  color: var(--ms-color-text);
  cursor: pointer;
  list-style: none;
}

.ms-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ms-scope .ms-disclosure > summary svg {
  width: 18px;
  height: 18px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-base) var(--ms-ease-out);
}

.ms-disclosure[open] > summary {
  border-bottom: 1px solid var(--ms-color-border);
  margin-bottom: var(--ms-space-5);
}

.ms-disclosure[open] > summary svg {
  transform: rotate(180deg);
}

.ms-disclosure > :not(summary) {
  padding: 0 var(--ms-space-5) var(--ms-space-5);
}

.ms-reviews {
  display: grid;
  gap: var(--ms-space-3);
  margin: 0 0 var(--ms-space-5);
  padding: 0;
  list-style: none;
}

.ms-review {
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  font-size: var(--ms-font-size-sm);
}

.ms-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-3);
  margin-bottom: var(--ms-space-2);
}

.ms-review__head strong {
  color: var(--ms-color-text);
}

.ms-review__date {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ms-stars {
  color: var(--ms-amber-600);
  letter-spacing: 1px;
}

.ms-review__reply {
  margin-top: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border-left: 2px solid var(--ms-color-primary);
  border-radius: 0 var(--ms-radius-md) var(--ms-radius-md) 0;
  background: var(--ms-color-bg-subtle);
}

.ms-review-form {
  margin-top: var(--ms-space-5);
}

.ms-form-grid {
  display: grid;
  gap: var(--ms-space-5);
}

@media (min-width: 640px) {
  .ms-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-field--full {
    grid-column: 1 / -1;
  }
}

.ms-rating {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ms-rating legend {
  width: 100%;
  margin-bottom: var(--ms-space-2);
}

.ms-rating__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-control-md);
  padding: 0 var(--ms-space-4);
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  font-size: var(--ms-font-size-sm);
  cursor: pointer;
}

.ms-rating__item:has(input:checked) {
  border-color: var(--ms-color-primary);
  background: var(--ms-color-primary-subtle);
}

.ms-rating__item input {
  accent-color: var(--ms-color-primary);
}

.ms-facts {
  padding: var(--ms-space-6);
}

.ms-facts h2 {
  font-size: var(--ms-font-size-md);
}

.ms-facts dl {
  display: grid;
  gap: 0;
  margin: var(--ms-space-3) 0 0;
}

.ms-facts dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--ms-space-4);
  padding-block: var(--ms-space-3);
  border-bottom: 1px solid var(--ms-color-border);
  font-size: var(--ms-font-size-sm);
}

.ms-facts dl > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ms-facts dt {
  color: var(--ms-color-text-secondary);
}

.ms-facts dd {
  margin: 0;
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
  text-align: right;
}

.ms-facts dd a {
  color: var(--ms-color-primary-text) !important;
}

@media (max-width: 1023px) {
  body:has(.ms-buybar:not([hidden])) .ms-fab {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}
/* Legacy "added to cart" notice printed by func/global.php (markup unchanged, re-skinned). */
.notification-wrapper-center {
  background: rgb(7 10 34 / 0.45);
  pointer-events: auto;
  padding: var(--ms-gutter);
}

.notification-wrapper-center .notification.notification-cart {
  width: min(100%, 460px) !important;
  max-width: none !important;
  padding: var(--ms-space-6) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: var(--ms-radius-xl) !important;
  background: var(--ms-surface) !important;
  box-shadow: var(--ms-shadow-3) !important;
  font-family: var(--ms-font-sans);
  color: var(--ms-ink-700);
}

.notification-cart .notification-content {
  gap: var(--ms-space-4);
  align-items: flex-start;
}

.notification-cart .notification-content img {
  flex: none !important;
  width: 96px !important;
  border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-line);
}

.notification-cart .notification-title {
  padding-right: 40px;
  overflow-wrap: anywhere;
  color: var(--ms-ink-900);
  font-size: var(--ms-text-body);
  line-height: 1.4;
}

.notification-cart .notification-text {
  font-size: var(--ms-text-sm);
  color: var(--ms-success-600);
}

.notification-cart .notification-buttons {
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-5);
}

.notification-cart .notification-buttons .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--ms-space-4) !important;
  border-radius: var(--ms-radius-md) !important;
  font-weight: var(--ms-font-weight-semibold);
  font-size: var(--ms-text-sm);
  text-decoration: none !important;
}

.notification-wrapper .notification-cart .notification-buttons a.notification-view-cart {
  background: var(--ms-brand-600) !important;
  color: var(--ms-gray-0) !important;
}

.notification-wrapper .notification-cart .notification-buttons a.notification-checkout {
  background: var(--ms-surface) !important;
  color: var(--ms-ink-900) !important;
  border: 1px solid var(--ms-line-strong) !important;
}

.notification-cart .notification-close.btn {
  top: var(--ms-space-3) !important;
  right: var(--ms-space-3) !important;
  width: 36px;
  height: 36px;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border-radius: var(--ms-radius-pill) !important;
  background: var(--ms-canvas) !important;
  color: var(--ms-ink-700) !important;
}

@media (max-width: 1023px) {
  body:has(.ms-buybar:not([hidden])) .cc-window.cc-floating {
    bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 767px) {
  .ms-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ms-toolbar__search {
    grid-column: 1 / -1;
  }

  .ms-toolbar__sort {
    min-width: 0;
  }

  .ms-toolbar__sort select {
    flex: 1;
    min-width: 0;
  }
}

/* ---------- 14. Quote request (WG-6) -------------------------------------- */
.ms-quote {
  display: grid;
  gap: var(--ms-space-7);
}

@media (min-width: 1024px) {
  .ms-quote {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }

  .ms-quote__aside {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-5));
  }
}

.ms-quote__main,
.ms-quote__aside {
  display: grid;
  gap: var(--ms-space-5);
  min-width: 0;
}

.ms-quote__form {
  display: grid;
  gap: var(--ms-space-7);
  padding: var(--ms-space-7);
}

@media (max-width: 479px) {
  .ms-quote__form {
    padding: var(--ms-space-5) var(--ms-space-4);
  }
}

.ms-quote__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ms-quote__group legend {
  margin-bottom: var(--ms-space-5);
}

.ms-optional {
  color: var(--ms-ink-500);
  font-weight: var(--ms-font-weight-regular);
}

.ms-quote__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border-radius: var(--ms-radius-md);
  background: var(--ms-brand-50);
  color: var(--ms-brand-800);
  font-size: var(--ms-text-sm);
}

.ms-quote__context a {
  color: var(--ms-brand-800) !important;
  font-weight: var(--ms-font-weight-semibold);
}

.ms-quote__context-remove {
  margin-left: auto;
  font-weight: var(--ms-font-weight-medium) !important;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.ms-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ms-quote__consent {
  display: grid;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-md);
  background: var(--ms-canvas);
}

.ms-quote__consent a {
  color: var(--ms-brand-700) !important;
  text-decoration: underline;
}

.ms-quote__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-4);
}

@media (max-width: 479px) {
  .ms-quote__submit .ms-btn {
    width: 100%;
  }
}

.ms-quote__summary ul {
  margin: var(--ms-space-2) 0 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.ms-quote__summary a {
  color: var(--ms-danger-600) !important;
  text-decoration: underline;
}

.ms-quote__summary:focus {
  outline: none;
  box-shadow: var(--ms-focus);
}

.ms-quote__done {
  display: grid;
  justify-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-10) var(--ms-space-6);
  text-align: center;
}

.ms-quote__done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ms-success-50);
  color: var(--ms-success-600);
}

.ms-scope .ms-quote__done-icon svg {
  width: 32px;
  height: 32px;
}

.ms-quote__ref {
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-body-lg);
  color: var(--ms-ink-900);
  letter-spacing: 0.04em;
}

.ms-quote__steps {
  display: grid;
  gap: var(--ms-space-4);
  margin: var(--ms-space-4) 0 0;
  padding-left: 1.25rem;
  list-style: decimal;
  font-size: var(--ms-text-sm);
  color: var(--ms-ink-700);
}

.ms-quote__steps strong {
  display: block;
  color: var(--ms-ink-900);
}

.ms-quote__contact {
  display: grid;
  gap: var(--ms-space-3);
  margin: var(--ms-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.ms-quote__contact li {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
}

.ms-quote__contact a {
  color: var(--ms-ink-900) !important;
  font-weight: var(--ms-font-weight-semibold);
}

.ms-scope .ms-quote__contact svg {
  width: 18px;
  height: 18px;
  color: var(--ms-brand-600);
}

.ms-quote__context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ms-quote__context-remove {
  margin-left: 0;
}

/* WCAG 2.5.8: at least 24×24px targets */
.ms-quote__context a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.ms-quote__consent .ms-check input {
  width: 24px !important;
  height: 24px !important;
  margin-top: 0;
  flex: none;
}

.ms-rating__item input {
  width: 24px;
  height: 24px;
  margin: 0;
}

/* The floating WhatsApp button lives inside the footer landmark; keep its own colours. */
.ms-footer a.ms-fab,
.ms-footer a.ms-fab:hover {
  color: var(--ms-gray-0) !important;
  text-decoration: none;
}

/* ---------- 15. Lean pages (no legacy theme CSS loaded) -------------------- */
body.ms-lean {
  margin: 0;
  background: var(--ms-surface);
  font-size: var(--ms-text-body);
  line-height: 1.6;
}

/* UI V4: zero specificity — the reset only replaces the browser default. At (0,1,1) it beat .ms-btn, so every
   <button class="ms-btn"> rendered 16px/400 while <a class="ms-btn"> rendered 14px/600 */
:where(body.ms-lean) :where(button, input, select, textarea) {
  font: inherit;
}

/* Base of the legacy add-to-cart notice (normally from default/style.css). */
body.ms-lean .notification-wrapper {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
}

body.ms-lean .notification-wrapper-center {
  align-items: center;
  justify-content: center;
}

body.ms-lean .notification {
  position: relative;
}

body.ms-lean .notification-content,
body.ms-lean .notification-buttons {
  display: flex;
}

body.ms-lean .notification-close.btn .fa,
body.ms-lean .notification-buttons .fa {
  display: none;
}

body.ms-lean .notification-close.btn::after {
  content: "\2715";
  font-size: var(--ms-font-size-sm);
  line-height: 1;
}

/* ---------- 20. Header navigation fit (WG-13) -------------------------------- */
/* (The enterprise-solution components that used to live here moved to section 33, UI refresh 2026-10.)
   WG-13: a fifth top-level item ("Kurumsal Çözümler") — keep every item on one line, and give
   buttons (menus) and links the same type (buttons used to inherit 16px/400 from the theme). */
.ms-scope .ms-nav .ms-nav__link {
  font: var(--ms-font-weight-medium) 15px/1 var(--ms-font-sans);
  white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .ms-scope .ms-nav .ms-nav__link {
    padding: 0 var(--ms-space-2);
    font-size: var(--ms-font-size-sm);
  }
}