/* =========================================================
   MONDO TONER — DESIGN TOKENS & GLOBAL STYLES
   Business-tech 2026 — antracite + blu royal + ciano accent
   ========================================================= */

:root {
  /* ---- Neutrals ---- */
  --mt-bg: #f7f9fc;
  --mt-surface: #ffffff;
  --mt-surface-2: #f1f4f9;
  --mt-surface-3: #e6ebf2;
  --mt-line: #e2e7ef;
  --mt-line-strong: #cbd3df;
  --mt-ink: #0b1220;
  --mt-ink-2: #1f2a3d;
  --mt-ink-3: #475569;
  --mt-ink-4: #6b7689;
  --mt-ink-5: #98a2b3;

  /* ---- Brand ---- */
  --mt-primary: #1d4ed8;
  --mt-primary-600: #1e40af;
  --mt-primary-700: #1d3aa8;
  --mt-primary-50: #eef2ff;
  --mt-primary-100: #dbe4ff;
  --mt-accent: #06b6d4;
  --mt-accent-600: #0891b2;
  --mt-accent-50: #ecfeff;

  /* ---- Status ---- */
  --mt-success: #16a34a;
  --mt-success-50: #ecfdf5;
  --mt-warning: #d97706;
  --mt-warning-50: #fffbeb;
  --mt-danger: #dc2626;
  --mt-danger-50: #fef2f2;
  --mt-info: #0284c7;
  --mt-info-50: #f0f9ff;

  /* ---- Badge tones ---- */
  --mt-badge-promo-bg: #fef3c7; --mt-badge-promo-fg: #92400e;
  --mt-badge-eco-bg: #dcfce7;   --mt-badge-eco-fg: #166534;
  --mt-badge-orig-bg: #e0e7ff;  --mt-badge-orig-fg: #3730a3;
  --mt-badge-comp-bg: #cffafe;  --mt-badge-comp-fg: #155e75;
  --mt-badge-new-bg: #fce7f3;   --mt-badge-new-fg: #9d174d;

  /* ---- Typography ---- */
  --mt-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mt-fs-xs: 0.75rem;
  --mt-fs-sm: 0.8125rem;
  --mt-fs-base: 0.9375rem;
  --mt-fs-md: 1rem;
  --mt-fs-lg: 1.125rem;
  --mt-fs-xl: 1.25rem;
  --mt-fs-2xl: 1.5rem;
  --mt-fs-3xl: 2rem;
  --mt-fs-4xl: 2.75rem;
  --mt-fs-display: 3.75rem;

  /* ---- Spacing ---- */
  --mt-space-1: 0.25rem;
  --mt-space-2: 0.5rem;
  --mt-space-3: 0.75rem;
  --mt-space-4: 1rem;
  --mt-space-5: 1.25rem;
  --mt-space-6: 1.5rem;
  --mt-space-8: 2rem;
  --mt-space-10: 2.5rem;
  --mt-space-12: 3rem;
  --mt-space-16: 4rem;
  --mt-space-20: 5rem;
  --mt-space-24: 6rem;

  /* ---- Radius ---- */
  --mt-radius-sm: 6px;
  --mt-radius: 10px;
  --mt-radius-md: 12px;
  --mt-radius-lg: 16px;
  --mt-radius-xl: 22px;
  --mt-radius-pill: 999px;

  /* ---- Shadows ---- */
  --mt-shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.04);
  --mt-shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.05), 0 1px 2px rgba(11, 18, 32, 0.04);
  --mt-shadow: 0 4px 12px -2px rgba(11, 18, 32, 0.06), 0 2px 4px -1px rgba(11, 18, 32, 0.04);
  --mt-shadow-md: 0 12px 24px -8px rgba(11, 18, 32, 0.10), 0 4px 8px -2px rgba(11, 18, 32, 0.05);
  --mt-shadow-lg: 0 24px 48px -12px rgba(11, 18, 32, 0.18);
  --mt-shadow-focus: 0 0 0 4px rgba(29, 78, 216, 0.18);

  /* ---- Misc ---- */
  --mt-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --mt-container-max: 1320px;
  --mt-header-h: 132px;
  --mt-header-h-mobile: 108px;

  /* ---- Bootstrap overrides ---- */
  --bs-body-bg: var(--mt-bg);
  --bs-body-color: var(--mt-ink-2);
  --bs-body-font-family: var(--mt-font-sans);
  --bs-body-font-size: var(--mt-fs-base);
  --bs-primary: var(--mt-primary);
  --bs-primary-rgb: 29, 78, 216;
  --bs-border-color: var(--mt-line);
  --bs-border-radius: var(--mt-radius);
  --bs-link-color: var(--mt-primary);
  --bs-link-hover-color: var(--mt-primary-700);
}

/* ============= Base ============= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--mt-font-sans);
  font-size: var(--mt-fs-base);
  font-feature-settings: "cv11", "ss01", "ss03";
  color: var(--mt-ink-2);
  background: var(--mt-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mt-ink);
  line-height: 1.18;
}
h1 { font-size: var(--mt-fs-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--mt-fs-3xl); letter-spacing: -0.02em; }
h3 { font-size: var(--mt-fs-xl); }
.display-hero {
  font-size: var(--mt-fs-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
@media (max-width: 768px) {
  :root { --mt-fs-display: 2.5rem; --mt-fs-4xl: 2rem; --mt-fs-3xl: 1.5rem; }
}
a { color: var(--mt-primary); text-decoration: none; transition: color var(--mt-transition); }
a:hover { color: var(--mt-primary-700); }
.text-muted-mt { color: var(--mt-ink-4); }
.eyebrow {
  display: inline-block;
  font-size: var(--mt-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mt-primary);
}

/* ============= Container ============= */
.container, .container-xxl, .container-xl, .container-lg {
  max-width: var(--mt-container-max);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ============= Buttons ============= */
.btn {
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-font-size: var(--mt-fs-base);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--mt-radius);
  letter-spacing: -0.005em;
  transition: all var(--mt-transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}
.btn-lg { --bs-btn-padding-y: 0.875rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: var(--mt-fs-md); }
.btn-sm { --bs-btn-padding-y: 0.4rem; --bs-btn-padding-x: 0.75rem; --bs-btn-font-size: var(--mt-fs-sm); }

.btn-primary {
  --bs-btn-bg: var(--mt-primary);
  --bs-btn-border-color: var(--mt-primary);
  --bs-btn-hover-bg: var(--mt-primary-600);
  --bs-btn-hover-border-color: var(--mt-primary-600);
  --bs-btn-active-bg: var(--mt-primary-700);
  --bs-btn-active-border-color: var(--mt-primary-700);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 12px -4px rgba(29,78,216,0.4);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(29,78,216,0.45); }

.btn-dark {
  --bs-btn-bg: var(--mt-ink);
  --bs-btn-border-color: var(--mt-ink);
  --bs-btn-hover-bg: var(--mt-ink-2);
  --bs-btn-hover-border-color: var(--mt-ink-2);
}

.btn-outline-mt {
  background: transparent;
  border: 1px solid var(--mt-line-strong);
  color: var(--mt-ink);
}
.btn-outline-mt:hover { background: var(--mt-surface); border-color: var(--mt-ink); color: var(--mt-ink); }

.btn-soft {
  background: var(--mt-primary-50);
  color: var(--mt-primary);
  border: 1px solid transparent;
}
.btn-soft:hover { background: var(--mt-primary-100); color: var(--mt-primary-700); }

.btn-ghost { background: transparent; color: var(--mt-ink-2); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--mt-surface-2); color: var(--mt-ink); }

.btn-cta {
  background: var(--mt-ink);
  color: #fff;
}
.btn-cta:hover { background: var(--mt-primary); color: #fff; }

.btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--mt-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============= Cards ============= */
.mt-card {
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius-lg);
  transition: all var(--mt-transition);
  overflow: hidden;
}
.mt-card:hover { box-shadow: var(--mt-shadow-md); border-color: var(--mt-line-strong); }
.mt-card-flat { background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius-lg); }

/* ============= Product card ============= */
.product-card {
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius-lg);
  overflow: hidden;
  transition: all var(--mt-transition);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card:hover {
  border-color: var(--mt-line-strong);
  box-shadow: var(--mt-shadow-md);
  transform: translateY(-2px);
}
.product-card .pc-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--mt-surface-2);
  overflow: hidden;
}
.product-card .pc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .pc-media img { transform: scale(1.04); }
.product-card .pc-badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 60px);
}
.product-card .pc-wishlist {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--mt-line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mt-ink-3);
  cursor: pointer;
  transition: all var(--mt-transition);
}
.product-card .pc-wishlist:hover { color: var(--mt-danger); border-color: var(--mt-danger); }
.product-card .pc-wishlist.active { color: var(--mt-danger); }
.product-card .pc-body {
  padding: 1rem 1.125rem 1.125rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  flex: 1;
}
.product-card .pc-brand {
  font-size: var(--mt-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mt-ink-4);
}
.product-card .pc-title {
  font-size: var(--mt-fs-md);
  font-weight: 600;
  color: var(--mt-ink);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.product-card .pc-compat {
  font-size: var(--mt-fs-xs);
  color: var(--mt-ink-4);
  display: flex; align-items: center; gap: 0.35rem;
}
.product-card .pc-rating {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: var(--mt-fs-xs);
  color: var(--mt-ink-4);
}
.product-card .pc-rating .stars { color: #f59e0b; letter-spacing: 1px; }
.product-card .pc-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.product-card .pc-price {
  display: flex; flex-direction: column; gap: 0.1rem;
}
.product-card .pc-price-now {
  font-size: var(--mt-fs-xl);
  font-weight: 700;
  color: var(--mt-ink);
  letter-spacing: -0.015em;
}
.product-card .pc-price-old {
  font-size: var(--mt-fs-xs);
  color: var(--mt-ink-5);
  text-decoration: line-through;
}
.product-card .pc-vat { font-size: 0.7rem; color: var(--mt-ink-5); }
.product-card .pc-add {
  width: 40px; height: 40px;
  background: var(--mt-ink);
  color: #fff;
  border: none;
  border-radius: var(--mt-radius);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--mt-transition);
  flex-shrink: 0;
}
.product-card .pc-add:hover { background: var(--mt-primary); transform: scale(1.06); }
.product-card .pc-stock {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--mt-fs-xs);
  font-weight: 500;
}
.product-card .pc-stock .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mt-success);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}
.product-card .pc-stock.low .dot { background: var(--mt-warning); box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.product-card .pc-stock.out .dot { background: var(--mt-ink-5); box-shadow: none; }
.product-card .pc-stock.low { color: var(--mt-warning); }
.product-card .pc-stock.out { color: var(--mt-ink-5); }
.product-card.dense .pc-body { padding: 0.85rem 0.95rem 1rem; }
.product-card.dense .pc-title { font-size: var(--mt-fs-base); min-height: 2.5em; }

/* ============= Badges ============= */
.mt-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--mt-radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.mt-badge i { font-size: 0.75rem; }
.mt-badge-promo { background: var(--mt-badge-promo-bg); color: var(--mt-badge-promo-fg); }
.mt-badge-eco { background: var(--mt-badge-eco-bg); color: var(--mt-badge-eco-fg); }
.mt-badge-orig { background: var(--mt-badge-orig-bg); color: var(--mt-badge-orig-fg); }
.mt-badge-comp { background: var(--mt-badge-comp-bg); color: var(--mt-badge-comp-fg); }
.mt-badge-new { background: var(--mt-badge-new-bg); color: var(--mt-badge-new-fg); }
.mt-badge-cap { background: #fae8ff; color: #6b21a8; }
.mt-badge-best { background: var(--mt-ink); color: #fff; }
.mt-badge-soft-primary { background: var(--mt-primary-50); color: var(--mt-primary); }

/* ============= Chip ============= */
.mt-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--mt-radius-pill);
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  font-size: var(--mt-fs-sm);
  font-weight: 500;
  color: var(--mt-ink-2);
  cursor: pointer;
  transition: all var(--mt-transition);
}
.mt-chip:hover { border-color: var(--mt-line-strong); background: var(--mt-surface-2); }
.mt-chip.active { background: var(--mt-ink); color: #fff; border-color: var(--mt-ink); }
.mt-chip .x { opacity: 0.6; }
.mt-chip .x:hover { opacity: 1; }

/* ============= Section ============= */
.mt-section { padding: var(--mt-space-16) 0; }
.mt-section-sm { padding: var(--mt-space-10) 0; }
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 1rem; margin-bottom: var(--mt-space-8);
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .sub { color: var(--mt-ink-4); margin-top: 0.4rem; }

/* ============= Trust strip ============= */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius-lg);
  padding: 1.25rem;
}
.trust-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.trust-item .ic {
  width: 40px; height: 40px;
  border-radius: var(--mt-radius);
  background: var(--mt-primary-50);
  color: var(--mt-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.trust-item h6 { margin: 0; font-size: var(--mt-fs-sm); font-weight: 600; color: var(--mt-ink); }
.trust-item p { margin: 0; font-size: var(--mt-fs-xs); color: var(--mt-ink-4); }
@media (max-width: 768px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ============= Forms ============= */
.form-control, .form-select {
  border-color: var(--mt-line);
  background: var(--mt-surface);
  color: var(--mt-ink);
  font-size: var(--mt-fs-base);
  padding: 0.625rem 0.875rem;
  border-radius: var(--mt-radius);
  transition: all var(--mt-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mt-primary);
  box-shadow: var(--mt-shadow-focus);
}
.form-label {
  font-size: var(--mt-fs-sm);
  font-weight: 600;
  color: var(--mt-ink-2);
  margin-bottom: 0.4rem;
}
.input-group-text {
  background: var(--mt-surface);
  border-color: var(--mt-line);
  color: var(--mt-ink-3);
}
.form-check-input:checked {
  background-color: var(--mt-primary);
  border-color: var(--mt-primary);
}
.form-check-input:focus { box-shadow: var(--mt-shadow-focus); border-color: var(--mt-primary); }

/* ============= Skeleton ============= */
@keyframes mt-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--mt-surface-2) 25%, var(--mt-surface-3) 50%, var(--mt-surface-2) 75%);
  background-size: 800px 100%;
  animation: mt-shimmer 1.4s infinite linear;
  border-radius: var(--mt-radius);
}

/* ============= Toast ============= */
.mt-toast-stack {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 1080;
  display: flex; flex-direction: column; gap: 0.5rem;
  max-width: 360px;
}
.mt-toast {
  background: var(--mt-ink);
  color: #fff;
  padding: 0.85rem 1rem;
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-lg);
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--mt-fs-sm);
  animation: mt-toast-in 200ms ease-out;
}
@keyframes mt-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.mt-toast.success { background: var(--mt-success); }

/* ============= Breadcrumb ============= */
.mt-breadcrumb {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.4rem;
  font-size: var(--mt-fs-sm);
  color: var(--mt-ink-4);
  padding: 1rem 0;
}
.mt-breadcrumb a { color: var(--mt-ink-4); }
.mt-breadcrumb a:hover { color: var(--mt-primary); }
.mt-breadcrumb .sep { color: var(--mt-ink-5); }
.mt-breadcrumb .current { color: var(--mt-ink); font-weight: 500; }

/* ============= Utility ============= */
.bg-mt-surface { background: var(--mt-surface) !important; }
.bg-mt-bg { background: var(--mt-bg) !important; }
.bg-mt-ink { background: var(--mt-ink) !important; color: #fff; }
.text-mt-ink { color: var(--mt-ink) !important; }
.text-mt-mute { color: var(--mt-ink-4) !important; }
.border-mt { border-color: var(--mt-line) !important; }
.rounded-mt-lg { border-radius: var(--mt-radius-lg) !important; }
.rounded-mt-xl { border-radius: var(--mt-radius-xl) !important; }
.shadow-mt-sm { box-shadow: var(--mt-shadow-sm) !important; }
.shadow-mt { box-shadow: var(--mt-shadow) !important; }
.shadow-mt-md { box-shadow: var(--mt-shadow-md) !important; }
.shadow-mt-lg { box-shadow: var(--mt-shadow-lg) !important; }

/* ============= Density modifiers (toggleable via tweaks) ============= */
[data-density="compact"] .mt-section { padding: var(--mt-space-12) 0; }
[data-density="compact"] .product-card .pc-body { padding: 0.85rem 0.95rem 1rem; }
[data-density="compact"] .product-card .pc-title { min-height: 2.5em; font-size: var(--mt-fs-base); }
[data-density="spacious"] .mt-section { padding: var(--mt-space-20) 0; }
[data-density="spacious"] .product-card .pc-body { padding: 1.25rem 1.25rem 1.5rem; }