/* GENERATED by tools/build/css-bundles.php from assets/css/metusoft.css — do not edit. Bundle "product": sections 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 14, 15, 20, 29, 30, 31. */
/* ==========================================================================
   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;
}

/* ---------- 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);
  }
}

/* ---------- 29. Legal documents, checkout pre-information, consent-gated map (PayTR compliance) ---------- */
.ms-legal-doc {
  max-height: 22rem;
  overflow: auto;
  font-size: var(--ms-font-size-sm);
}

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

.ms-checkout__group .ms-disclosure + .ms-disclosure {
  margin-top: var(--ms-space-3);
}

.ms-legal-missing {
  padding: 0 var(--ms-space-1);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-warning-subtle);
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
}

.ms-legal-note {
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px dashed var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text-secondary);
}

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

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

.ms-legal-order :where(td, th):last-child {
  text-align: right;
  white-space: nowrap;
}

.ms-legal-order small {
  color: var(--ms-color-text-secondary);
}

.ms-checkout__consent .ms-check + .ms-check {
  margin-top: var(--ms-space-3);
}

.ms-map-gate {
  display: grid;
  place-items: center;
  gap: var(--ms-space-3);
  min-height: 240px;
  padding: var(--ms-space-6);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-bg-subtle);
  text-align: center;
}

.ms-map-gate p {
  max-width: 46ch;
  margin: 0;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

/* ---------- 30. Product gallery and lightbox (UI refresh 2026-10) ---------------- */
/* Gallery (.ms-pgal): a browser-framed stage with a sliding track, prev/next on hover, a counter, a hover
   magnifier on fine pointers and thumbnails below. Lightbox (.ms-lightbox, built by metusoft.js on a native
   <dialog>): opens in the page instead of a new tab, keyboard (←/→, Esc, +/−) and swipe, zoom and pan by
   scrolling. Used by software product pages and enterprise solution screenshots. */
.ms-pgal {
  display: grid;
  gap: var(--ms-space-3);
  min-width: 0;
}

.ms-pgal__stage {
  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);
}

.ms-pgal__viewport {
  position: relative;
  overflow: hidden;
  background: var(--ms-color-bg-tint);
}

.ms-pgal__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 520ms var(--ms-ease-out);
  will-change: transform;
}

.ms-pgal__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.ms-pgal__open {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}

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

.ms-pgal__open img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top center;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform 240ms var(--ms-ease-out);
}

.ms-pgal__open.is-magnified img {
  transform: scale(1.9);
  transition-duration: 120ms;
}

.ms-pgal__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--ms-radius-full);
  background: rgb(255 255 255 / 0.92);
  color: var(--ms-color-text);
  box-shadow: var(--ms-shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--ms-duration-base) var(--ms-ease-out), background-color var(--ms-duration-fast) var(--ms-ease-out);
}

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

.ms-pgal__nav--prev {
  left: var(--ms-space-3);
}

.ms-pgal__nav--next {
  right: var(--ms-space-3);
}

.ms-pgal__viewport:hover .ms-pgal__nav,
.ms-pgal__nav:focus-visible {
  opacity: 1;
}

.ms-pgal__nav:hover {
  background: #fff;
}

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

@media (hover: none) {
  .ms-pgal__nav {
    opacity: 1;
    width: 36px;
    height: 36px;
  }
}

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

.ms-pgal__hud {
  position: absolute;
  right: var(--ms-space-3);
  bottom: var(--ms-space-3);
  z-index: 1;
  display: flex;
  gap: var(--ms-space-2);
  pointer-events: none;
}

.ms-pgal__count,
.ms-pgal__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--ms-radius-full);
  background: rgb(11 16 51 / 0.78);
  color: #fff;
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ms-pgal__hint {
  opacity: 0;
  transition: opacity var(--ms-duration-base) var(--ms-ease-out);
}

.ms-pgal__viewport:hover .ms-pgal__hint {
  opacity: 1;
}

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

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

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

.ms-pgal__thumbs {
  display: flex;
  flex: 1;
  gap: var(--ms-space-2);
  min-width: 0;
  margin: 0;
  padding: 2px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

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

.ms-pgal__thumbs li {
  flex: none;
}

.ms-pgal__thumb {
  display: block;
  width: 88px;
  aspect-ratio: 2 / 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-tint);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 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-pgal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.ms-pgal__thumb:hover {
  opacity: 1;
}

.ms-pgal__thumb[aria-current="true"] {
  border-color: var(--ms-color-primary);
  box-shadow: 0 0 0 1px var(--ms-color-primary);
  opacity: 1;
}

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

.ms-pgal__pause {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  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-secondary);
  cursor: pointer;
}

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

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

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

.ms-pgal__pause svg:nth-of-type(2),
.ms-pgal__pause[aria-pressed="true"] svg:nth-of-type(1) {
  display: none;
}

.ms-pgal__pause[aria-pressed="true"] svg:nth-of-type(2) {
  display: block;
}

.ms-pgal__empty {
  display: grid;
  place-items: center;
  gap: var(--ms-space-2);
  aspect-ratio: 2 / 1;
  border: 1px dashed var(--ms-color-border-strong);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  align-content: center;
}

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

/* In-page navigation (product + enterprise solution): sticky under the header, active section underlined */
.ms-subnav {
  position: sticky;
  top: var(--ms-header-h);
  z-index: var(--ms-z-sticky);
  border-block: 1px solid var(--ms-color-border);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.ms-subnav ul {
  display: flex;
  gap: var(--ms-space-1);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.ms-subnav ul::-webkit-scrollbar {
  display: none;
}

.ms-subnav li {
  flex: none;
}

.ms-subnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--ms-space-3);
  color: var(--ms-color-text-secondary) !important;
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
  text-decoration: none !important;
  transition: color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-subnav a::after {
  content: "";
  position: absolute;
  left: var(--ms-space-3);
  right: var(--ms-space-3);
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ms-color-primary);
  transform: scaleX(0);
  transition: transform var(--ms-duration-base) var(--ms-ease-out);
}

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

.ms-subnav a[aria-current="true"] {
  color: var(--ms-color-primary-text) !important;
}

.ms-subnav a[aria-current="true"]::after {
  transform: scaleX(1);
}

/* "✓ Var" value in fact lists (product and solution pages) */
.ms-yes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ms-color-success);
}

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

/* Lightbox */
body.ms-lightbox-open {
  overflow: hidden;
}

.ms-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(7 10 34 / 0.94);
  color: #fff;
  font-family: var(--ms-font-sans);
  overscroll-behavior: contain;
}

.ms-lightbox::backdrop {
  background: rgb(7 10 34 / 0.7);
}

.ms-lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: ms-lightbox-in 220ms var(--ms-ease-out);
}

@keyframes ms-lightbox-in {
  from {
    opacity: 0;
  }
}

.ms-lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-height: 56px;
  padding: var(--ms-space-2) var(--ms-space-3) var(--ms-space-2) var(--ms-space-5);
}

.ms-lightbox__count {
  flex: none;
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ms-lightbox__caption {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #c9d2ee;
  font-size: var(--ms-font-size-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-lightbox__btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--ms-radius-full);
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-lightbox__btn:hover {
  background: rgb(255 255 255 / 0.16);
}

.ms-lightbox__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(142 187 255 / 0.7);
}

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

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

.ms-lightbox__stage {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(255 255 255 / 0.3) transparent;
}

.ms-lightbox__img {
  display: block;
  max-width: calc(100vw - 2 * var(--ms-space-4));
  max-height: 100%;
  margin: auto;
  border-radius: var(--ms-radius-md);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6);
  cursor: zoom-in;
  object-fit: contain;
  user-select: none;
}

.ms-lightbox.is-zoomed .ms-lightbox__img {
  max-width: none;
  max-height: none;
  width: var(--ms-lightbox-w, auto);
  cursor: zoom-out;
}

@media (min-width: 768px) {
  .ms-lightbox__img {
    max-width: calc(100vw - 160px);
  }
}

.ms-lightbox__nav {
  position: fixed;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

.ms-lightbox__nav--prev {
  left: var(--ms-space-3);
}

.ms-lightbox__nav--next {
  right: var(--ms-space-3);
}

@media (max-width: 767px) {
  .ms-lightbox__nav {
    top: auto;
    bottom: var(--ms-space-3);
    transform: none;
  }
}

.ms-lightbox__thumbs {
  display: flex;
  justify-content: center;
  gap: var(--ms-space-2);
  margin: 0;
  padding: var(--ms-space-3) var(--ms-space-4) var(--ms-space-4);
  overflow-x: auto;
  list-style: none;
}

.ms-lightbox__thumbs button {
  display: block;
  width: 72px;
  aspect-ratio: 2 / 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--ms-radius-sm);
  background: rgb(255 255 255 / 0.06);
  opacity: 0.55;
  cursor: pointer;
}

.ms-lightbox__thumbs button[aria-current="true"] {
  border-color: #8ebbff;
  opacity: 1;
}

.ms-lightbox__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

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

  .ms-lightbox[open] {
    grid-template-rows: auto minmax(0, 1fr) 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-pgal__track,
  .ms-pgal__open img,
  .ms-lightbox[open] {
    transition: none;
    animation: none;
  }
}

/* ---------- 31. Product detail (UI refresh 2026-10) --------------------------------- */
/* /yazilim/{seo}: gallery + "Bir bakışta" on the left; tags, title, lead, demo links and the purchase card on
   the right (sticky on desktop). Purchase card order: price → old price + real discount → saving → VAT →
   options → amount to pay → [Sepete Ekle | WhatsApp] / [Teklif Al] → short trust lines. */
.ms-pdp {
  position: relative;
  isolation: isolate;
  padding-block: var(--ms-space-5) var(--ms-space-9);
  background: linear-gradient(180deg, #f4f8ff 0, var(--ms-color-bg) 460px);
}

.ms-pdp::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 460px;
  background-image: linear-gradient(rgb(26 102 229 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(26 102 229 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 90% at 30% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 0%, #000 10%, transparent 70%);
  pointer-events: none;
}

.ms-pdp__grid {
  display: grid;
  gap: var(--ms-space-6);
  margin-top: var(--ms-space-5);
}

.ms-pdp__gallery,
.ms-pdp__summary {
  min-width: 0;
}

@media (min-width: 1024px) {
  .ms-pdp__grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(360px, 0.86fr);
    gap: clamp(28px, 3vw, 48px);
    align-items: start;
  }

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

  /* both columns are sticky: whichever is shorter stays in view while the other scrolls */
  .ms-pdp__gallery {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-4));
    display: grid;
    gap: var(--ms-space-5);
  }
}

/* below 1024 px: gallery → title & purchase → facts (the facts must not push the price down) */
@media (max-width: 1023px) {
  .ms-pdp__gallery {
    display: contents;
  }

  .ms-pdp__summary {
    order: 1;
  }

  .ms-pdp-facts {
    order: 2;
  }
}

.ms-pdp__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin-bottom: var(--ms-space-3);
}

.ms-pdp__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  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-xs);
  font-weight: var(--ms-font-weight-medium);
}

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

a.ms-pdp__tag:hover {
  border-color: var(--ms-color-primary);
}

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

.ms-pdp__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem);
  line-height: 1.15;
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-heading);
  color: var(--ms-color-text);
}

.ms-pdp__lead {
  margin-top: var(--ms-space-3);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-md);
  line-height: 1.6;
}

.ms-pdp__demos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-4);
}

/* Purchase card */
.ms-buy {
  margin-top: var(--ms-space-5);
  overflow: hidden;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-lg);
  scroll-margin-top: calc(var(--ms-header-h) + var(--ms-space-4));
}

.ms-buy:focus {
  outline: none;
}

.ms-buy__head {
  padding: var(--ms-space-5) var(--ms-space-5) var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  background: linear-gradient(180deg, var(--ms-blue-50) 0%, var(--ms-color-surface) 100%);
}

.ms-buy__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ms-space-1) var(--ms-space-3);
}

.ms-buy__now {
  color: var(--ms-color-text);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-heading);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ms-buy__was {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-md);
  font-variant-numeric: tabular-nums;
}

/* V3: the discount supports the price instead of competing with it — a quiet tag and one plain saving line */
.ms-buy__pct {
  align-self: center;
  padding: 2px 8px;
  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);
}

.ms-price__save {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--ms-space-1-5);
  color: var(--ms-color-savings);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  font-variant-numeric: tabular-nums;
}

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

.ms-buy__vat {
  margin-top: var(--ms-space-2);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

.ms-buy__vat a {
  color: var(--ms-color-primary-text) !important;
  text-decoration: underline;
}

.ms-buy__transfer {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-3);
  padding: var(--ms-space-2) var(--ms-space-3);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  border: 1px dashed var(--ms-color-border-strong);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
}

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

.ms-buy__form {
  display: grid;
  gap: var(--ms-space-4);
  padding: var(--ms-space-4) var(--ms-space-5) var(--ms-space-5);
}

.ms-buy .ms-options {
  margin: 0;
  padding: 0;
  border: 0;
}

.ms-buy .ms-option {
  min-height: 42px;
  margin-top: var(--ms-space-1-5);
  padding: var(--ms-space-2) var(--ms-space-3);
  border-color: var(--ms-color-border);
  justify-content: space-between;
}

.ms-buy .ms-option > span:first-of-type {
  flex: 1 1 auto;
}

.ms-buy .ms-option:hover {
  border-color: var(--ms-color-primary-border);
}

.ms-buy__note {
  font-size: var(--ms-font-size-xs);
}

.ms-buy__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-2);
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-primary-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
}

.ms-buy__total strong {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-xl);
  font-variant-numeric: tabular-nums;
  transition: color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-buy__total.is-updated strong {
  color: var(--ms-color-primary-text);
}

.ms-buy__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ms-space-2);
}

.ms-buy__actions .ms-btn {
  min-height: 50px;
  padding-inline: var(--ms-space-3);
  font-size: var(--ms-font-size-sm);
}

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

.ms-buy__quote,
.ms-buy__actions--solo .ms-buy__cart {
  grid-column: 1 / -1;
}

.ms-buy__quote {
  min-height: 46px !important;
}

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

.ms-buy__trust {
  display: grid;
  gap: var(--ms-space-2);
  margin: 0;
  padding: var(--ms-space-4) var(--ms-space-5);
  border-top: 1px solid var(--ms-color-border);
  background: var(--ms-gray-25);
  list-style: none;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

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

.ms-buy__trust a {
  color: var(--ms-color-primary-text) !important;
  font-weight: var(--ms-font-weight-semibold);
}

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

/* "Bir bakışta" + requirements beside the gallery */
.ms-pdp-facts {
  display: grid;
  gap: var(--ms-space-5);
  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);
}

@media (min-width: 640px) {
  .ms-pdp-facts {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ms-space-7);
  }
}

.ms-pdp-facts h2 {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin-bottom: var(--ms-space-2);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-scope .ms-pdp-facts h2 svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-primary);
}

.ms-pdp-facts dl {
  margin: 0;
}

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

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

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

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

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

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

.ms-pdp-facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-2);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
}

.ms-scope .ms-pdp-facts li svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--ms-color-success);
}

.ms-pdp-facts__more {
  display: inline-block;
  margin-top: var(--ms-space-3);
  color: var(--ms-color-primary-text) !important;
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-semibold);
}

/* Body (UI V3): full-width bands instead of one long text column beside an empty aside. The admin's description
   is split by MetuSoft\View\ProductStory: overview (+ feature list or section index) → audience chips →
   description sections as cards → requirements | packages → licence / delivery / support / payment → FAQ | custom
   work → reviews. Bands alternate white / tint so a long page keeps its rhythm. */
.ms-pdx {
  padding-block: var(--ms-section-y-tight);
  scroll-margin-top: calc(var(--ms-header-h) + 56px);
}

.ms-pdx--tint {
  background: var(--ms-color-bg-tint);
  border-block: 1px solid var(--ms-color-border);
}

.ms-pdx [id] {
  scroll-margin-top: calc(var(--ms-header-h) + 64px);
}

.ms-pdp__h {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  margin-bottom: var(--ms-space-5);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-2xl);
  line-height: 1.25;
  letter-spacing: var(--ms-tracking-heading);
}

.ms-pdp__h::before {
  content: "";
  flex: none;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--ms-blue-600), var(--ms-cyan-500));
}

.ms-pdx-note {
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

/* overview: intro text | feature list (or the index of the description sections) */
.ms-pdx-overview {
  display: grid;
  gap: var(--ms-space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .ms-pdx-overview {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 4vw, 64px);
  }

  .ms-pdx-overview--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ms-pdx-overview__intro {
  font-size: var(--ms-font-size-lg);
  line-height: 1.7;
}

.ms-pdx-overview__intro > p:first-child {
  color: var(--ms-color-text);
}

.ms-pdx-feats {
  padding: var(--ms-space-5) var(--ms-space-6) var(--ms-space-6);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
}

.ms-pdx-feats__title {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin-bottom: var(--ms-space-4);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-lg);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-scope .ms-pdx-feats__title svg {
  width: 20px;
  height: 20px;
  color: var(--ms-color-primary);
}

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

@media (min-width: 560px) {
  .ms-pdx-feats:not(.ms-pdx-feats--index) .ms-pdx-feats__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-pdx-feats__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-2);
  padding-block: var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-border);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
  line-height: 1.5;
}

.ms-pdx-feats__list a {
  color: var(--ms-color-text) !important;
  font-weight: var(--ms-font-weight-medium);
}

.ms-pdx-feats__list a:hover {
  color: var(--ms-color-primary-text) !important;
  text-decoration: underline;
}

.ms-scope .ms-pdx-feats__list svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--ms-color-success);
}

.ms-scope .ms-pdx-feats--index .ms-pdx-feats__list svg {
  color: var(--ms-color-primary);
}

.ms-pdx-feats .ms-pdx-note {
  margin-block: var(--ms-space-3) 0;
}

/* audience: heading + note | sector chips */
.ms-pdx-aud {
  display: grid;
  gap: var(--ms-space-5);
}

@media (min-width: 1024px) {
  .ms-pdx-aud {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}

.ms-pdx-aud__head .ms-eyebrow {
  margin-bottom: var(--ms-space-2);
}

.ms-pdx-aud__head .ms-pdx-note {
  margin-top: var(--ms-space-3);
}

.ms-pdx-aud__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-pdx-aud__list li {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-height: 48px;
  padding: var(--ms-space-2) 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);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  line-height: 1.35;
}

.ms-scope .ms-pdx-aud__list svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ms-color-primary);
}

.ms-pdx-aud__list + .ms-pdx-note {
  margin-top: var(--ms-space-3);
}

@media (min-width: 1024px) {
  .ms-pdx-aud__list {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

/* description sections as cards; two balanced columns on wide screens (each card reads on its own) */
.ms-pdx-story {
  columns: 1;
  column-gap: var(--ms-space-5);
}

@media (min-width: 900px) {
  .ms-pdx-story {
    columns: 2;
  }
}

.ms-pdx-story__item {
  break-inside: avoid;
  margin-bottom: var(--ms-space-5);
  padding: var(--ms-space-5) var(--ms-space-6) 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-xs);
}

.ms-pdx-story__item h3 {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  margin-bottom: var(--ms-space-3);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-lg);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.35;
}

.ms-pdx-story__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

.ms-scope .ms-pdx-story__icon svg {
  width: 18px;
  height: 18px;
}

.ms-pdx-story .ms-prose {
  max-width: none;
  font-size: var(--ms-font-size-sm);
  line-height: 1.7;
}

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

/* lists inside a section (services, sectors…) read as compact two-column check lists */
.ms-pdx-story .ms-prose ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: var(--ms-space-1) var(--ms-space-4);
  padding: 0;
  list-style: none;
}

.ms-pdx-story .ms-prose ul li {
  position: relative;
  margin: 0;
  padding-left: 22px;
}

.ms-pdx-story .ms-prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--ms-color-success);
  border-bottom: 2px solid var(--ms-color-success);
  transform: rotate(-45deg);
}

/* requirements | packages */
.ms-pdx-split {
  display: grid;
  gap: var(--ms-space-5);
  align-items: start;
}

@media (min-width: 1024px) {
  .ms-pdx-split {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}

.ms-pdx-panel {
  min-width: 0;
  padding: var(--ms-space-5) var(--ms-space-6) var(--ms-space-6);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
}

.ms-pdx-panel__title {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-xl);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-scope .ms-pdx-panel__title svg {
  width: 20px;
  height: 20px;
  color: var(--ms-color-primary);
}

.ms-pdx-panel__lead {
  margin: var(--ms-space-1) 0 var(--ms-space-4);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

.ms-pdx-panel .ms-checklist li {
  padding: var(--ms-space-2) var(--ms-space-3);
  background: var(--ms-gray-25);
}

.ms-table__num {
  white-space: nowrap;
  font-weight: var(--ms-font-weight-semibold);
  color: var(--ms-color-text);
}

/* licence, delivery, support, payment */
.ms-pdx-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--ms-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-pdx-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
  line-height: 1.6;
}

.ms-pdx-info__item h3 {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
}

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

.ms-pdx-info__item a:not(.ms-link) {
  color: var(--ms-color-primary-text) !important;
  text-decoration: underline;
}

.ms-pdx-info__item .ms-link {
  margin-top: auto;
  padding-top: var(--ms-space-1);
  font-size: var(--ms-font-size-sm);
}

.ms-pdx-info__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

.ms-scope .ms-pdx-info__icon svg {
  width: 20px;
  height: 20px;
}

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

.ms-pdx-info__list span {
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-pdx-info__list span::after {
  content: ":";
}

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

/* FAQ | custom-work card */
.ms-pdx-help {
  display: grid;
  gap: var(--ms-space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .ms-pdx-help {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(32px, 4vw, 64px);
  }

  .ms-pdx-help--solo {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
  }
}

.ms-pdx-reviews > * {
  max-width: 880px;
}

/* Customisation card */
.ms-custom {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--ms-space-3);
  padding: var(--ms-space-6);
  border-radius: var(--ms-radius-xl);
  background: linear-gradient(150deg, var(--ms-navy-900) 0%, #142d6b 100%);
  color: var(--ms-color-text-inverse-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.6;
  isolation: isolate;
}

.ms-custom::after {
  content: "";
  position: absolute;
  inset: -30% -30% auto auto;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(47 120 240 / 0.45), transparent);
}

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

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

.ms-custom__title {
  color: var(--ms-color-text-inverse) !important;
  font-size: var(--ms-font-size-lg) !important;
  line-height: 1.3;
}

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

.ms-custom__list li {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  color: #d5dcf2;
}

.ms-scope .ms-custom__list svg {
  width: 16px;
  height: 16px;
  color: #8ebbff;
}

.ms-custom__alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  min-height: 40px;
  color: #d5dcf2 !important;
  font-weight: var(--ms-font-weight-medium);
}

.ms-custom__alt:hover {
  color: #fff !important;
  text-decoration: underline;
}

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

/* related software: three columns at most */
.ms-pgrid--3 {
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 264px), calc((100% - 2 * var(--_gap)) / 3)), 1fr));
}

/* Mobile purchase bar (after scrolling past the purchase card) */
.ms-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950; /* above the floating WhatsApp button and cookie card */
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding: var(--ms-space-2) var(--ms-gutter) calc(var(--ms-space-2) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ms-color-border);
  background: rgb(255 255 255 / 0.96);
  box-shadow: 0 -8px 24px -12px rgb(11 16 51 / 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

.ms-buybar__price {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.ms-buybar__name {
  overflow: hidden;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-buybar__price strong {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-lg);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .ms-buybar {
    display: none !important;
  }
}

/* V5: chosen paid add-ons under the total, feature descriptions, product notes, card group labels */
.ms-buy__picked {
  margin-top: var(--ms-space-2);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  line-height: 1.5;
}

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

.ms-pdx-info__note {
  padding-left: var(--ms-space-3);
  border-left: 2px solid var(--ms-color-primary-border);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

.ms-pdx-story__group {
  margin-bottom: 4px;
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}