/* ============================================================================
   Maskin-modulet (brugte maskiner fra Maskinportalen).
   Alt er prefikset mpx- for ikke at kollidere med Delrs vm-* eller MaskinParkens
   egne mp-*. Strukturen er den samme for alle forhandlere; UDSEENDET kommer fra
   et tema-blok af custom properties. Nyt tema = ny .mpx-theme-* nedenfor,
   ingen ændring i markup.

   Serveres som _content/Comito.CMS.FrontEndShared/css/machines.css
   ============================================================================ */

.mpx {
  /* Fallback-tema, så modulet aldrig står helt ustylet. */
  --mpx-primary: #2d6a2e;
  --mpx-primary-dark: #1e4d1f;
  --mpx-primary-light: #3d8b3e;
  --mpx-accent: #f5a623;
  --mpx-price: #1e4d1f;
  --mpx-bg: #f3f5fa;
  --mpx-surface: #fff;
  --mpx-surface-2: #f8f9fa;
  --mpx-line: #e9ecef;
  --mpx-ink: #1a1a1a;
  --mpx-ink-muted: #6c757d;
  --mpx-ink-faint: #888;
  --mpx-radius: 6px;
  --mpx-radius-lg: 10px;
  --mpx-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  --mpx-shadow-hover: 0 4px 14px rgba(0, 0, 0, .12);
  --mpx-font-display: "Poppins", system-ui, sans-serif;
  --mpx-font-body: "Open Sans", system-ui, sans-serif;
  --mpx-tap-min: 2.75rem;

  color: var(--mpx-ink);
  font-family: var(--mpx-font-body);
}

/* MaskinParken — værdierne er hentet fra maskinparken.dk/assets/MaskinParken/css/overrides.css,
   så demo-forhandleren står i den rigtige grønne. */
.mpx-theme-maskinparken {
  --mpx-primary: #2d6a2e;
  --mpx-primary-dark: #1e4d1f;
  --mpx-primary-light: #3d8b3e;
  --mpx-accent: #f5a623;
  --mpx-price: #1e4d1f;
  --mpx-bg: #f3f5fa;
}

.mpx h1, .mpx h2, .mpx h3, .mpx h4 {
  font-family: var(--mpx-font-display);
  font-weight: 600;
  color: var(--mpx-ink);
}

/* Tal i kolonner skal kunne sammenlignes lodret: priser, timer, årstal, antal. */
.mpx-tabular { font-variant-numeric: tabular-nums lining-nums; }

.mpx-muted { color: var(--mpx-ink-muted); }

/* ---- Knapper --------------------------------------------------------------- */

.mpx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--mpx-tap-min);
  padding: .55rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--mpx-radius);
  font-family: var(--mpx-font-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mpx-btn--primary { background: var(--mpx-primary); border-color: var(--mpx-primary); color: #fff; }
.mpx-btn--primary:hover { background: var(--mpx-primary-dark); border-color: var(--mpx-primary-dark); color: #fff; }

.mpx-btn--ghost { background: transparent; border-color: var(--mpx-line); color: var(--mpx-ink); }
.mpx-btn--ghost:hover { background: var(--mpx-surface-2); color: var(--mpx-primary-dark); }

/* Ring-knappen er sidens vigtigste handling på en telefon i en gårdsplads. */
.mpx-btn--cta { background: var(--mpx-accent); border-color: var(--mpx-accent); color: #1a1a1a; }
.mpx-btn--cta:hover { background: #e0940f; border-color: #e0940f; color: #1a1a1a; }

.mpx-btn--block { width: 100%; }
.mpx-btn--sm { min-height: 2.25rem; padding: .35rem .8rem; font-size: .85rem; }

/* ---- Felter ---------------------------------------------------------------- */

.mpx-input, .mpx-select {
  width: 100%;
  min-height: var(--mpx-tap-min);
  padding: .5rem .75rem;
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius);
  background: var(--mpx-surface);
  color: var(--mpx-ink);
  font-family: var(--mpx-font-body);
  font-size: .95rem;
}

.mpx-input:focus, .mpx-select:focus {
  outline: none;
  border-color: var(--mpx-primary);
  box-shadow: 0 0 0 3px rgba(45, 106, 46, .15);
}

/* ---- Badges ---------------------------------------------------------------- */

.mpx-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.mpx-badge--accent { background: var(--mpx-accent); color: #1a1a1a; }
.mpx-badge--outline { background: transparent; border: 1px solid var(--mpx-line); color: var(--mpx-ink-muted); }
.mpx-badge--neutral { background: var(--mpx-surface-2); color: var(--mpx-ink-muted); }

/* ---- Brødkrummer ----------------------------------------------------------- */

.mpx-crumbs { margin: 0 0 1rem; font-size: .85rem; color: var(--mpx-ink-muted); }
.mpx-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.mpx-crumbs li::after { content: "/"; margin-left: .35rem; color: #c8cdd3; }
.mpx-crumbs li:last-child::after { content: none; }
.mpx-crumbs a { color: var(--mpx-primary); text-decoration: none; }
.mpx-crumbs a:hover { text-decoration: underline; }

/* ---- Sidehoved på listen --------------------------------------------------- */

.mpx-head { margin-bottom: 1.25rem; }
.mpx-head__eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mpx-primary);
  margin-bottom: .2rem;
}
.mpx-head h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
.mpx-head__count { font-size: .9rem; color: var(--mpx-ink-muted); }

@media (min-width: 56rem) { .mpx-head h1 { font-size: 2rem; } }

/* ---- Listelayout: rail + resultater ---------------------------------------- */

.mpx-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

@media (min-width: 64rem) {
  .mpx-layout { grid-template-columns: 19rem 1fr; align-items: start; }
  .mpx-layout__rail { position: sticky; top: 1rem; }
}

.mpx-layout--single { grid-template-columns: 1fr; }

.mpx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.mpx-toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---- Facetter -------------------------------------------------------------- */

.mpx-facets {
  background: var(--mpx-surface);
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius-lg);
  padding: 1rem;
  box-shadow: var(--mpx-shadow);
}

.mpx-facets__title { font-size: 1rem; margin: 0 0 .75rem; }

.mpx-facets__group { border: 0; margin: 0 0 1rem; padding: 0; }
.mpx-facets__group:last-of-type { margin-bottom: .5rem; }

.mpx-facets__legend {
  font-family: var(--mpx-font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--mpx-ink-muted);
  padding: 0;
  margin-bottom: .45rem;
}

.mpx-facets__options { display: flex; flex-direction: column; gap: .1rem; }

/* Et valg er et LINK til den færdige ToggleQuery — ikke en kontrol. Så virker
   facetterne uden JavaScript, kan crawles, og kan åbnes i en ny fane. */
.mpx-facets__option {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--mpx-tap-min);
  padding: .25rem .4rem;
  border-radius: var(--mpx-radius);
  color: var(--mpx-ink);
  text-decoration: none;
  font-size: .9rem;
}

.mpx-facets__option:hover { background: var(--mpx-surface-2); color: var(--mpx-ink); }

.mpx-facets__box {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid #b9c0c7;
  border-radius: 3px;
  background: #fff;
  position: relative;
}

.mpx-facets__option--on .mpx-facets__box { background: var(--mpx-primary); border-color: var(--mpx-primary); }
.mpx-facets__option--on .mpx-facets__box::after {
  content: "";
  position: absolute;
  left: .28rem;
  top: .08rem;
  width: .3rem;
  height: .6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mpx-facets__label { flex: 1 1 auto; min-width: 0; }
.mpx-facets__count { color: var(--mpx-ink-faint); font-size: .8rem; font-variant-numeric: tabular-nums; }

.mpx-facets__range { display: flex; align-items: center; gap: .4rem; }
.mpx-facets__dash { color: var(--mpx-ink-faint); }
.mpx-facets__unit { color: var(--mpx-ink-muted); font-size: .85rem; white-space: nowrap; }

.mpx-facets__more {
  background: none;
  border: 0;
  padding: .3rem .4rem;
  color: var(--mpx-primary);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.mpx-facets__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }

.mpx-facets__clear { font-size: .85rem; color: var(--mpx-primary); text-align: center; text-decoration: none; }
.mpx-facets__clear:hover { text-decoration: underline; }

/* ---- Chips ----------------------------------------------------------------- */

.mpx-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.mpx-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--mpx-primary);
  border-radius: 999px;
  background: rgba(45, 106, 46, .08);
  color: var(--mpx-primary-dark);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}

.mpx-chip:hover { background: var(--mpx-primary); color: #fff; }
.mpx-chip__x { font-size: 1rem; line-height: 1; }
.mpx-chip--clear { border-style: dashed; background: transparent; }

/* ---- Kortgitter ------------------------------------------------------------ */

.mpx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpx-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mpx-surface);
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius);
  overflow: hidden;
  box-shadow: var(--mpx-shadow);
  color: var(--mpx-ink);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.mpx-card:hover { box-shadow: var(--mpx-shadow-hover); transform: translateY(-2px); color: var(--mpx-ink); }

@media (prefers-reduced-motion: reduce) {
  .mpx-card:hover { transform: none; }
}

.mpx-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--mpx-surface-2); overflow: hidden; }
.mpx-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mpx-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7bec5;
  font-size: 2.5rem;
  background: linear-gradient(135deg, #f1f3f5, #dfe4e8);
}

.mpx-card__body { display: flex; flex-direction: column; gap: .4rem; padding: .85rem; flex: 1; }

.mpx-card__kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--mpx-primary);
  margin: 0;
}

.mpx-card__title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Varenr. er et KRAV fra JMA og må ikke kunne forsvinde i et layout. */
.mpx-card__productno { font-size: .78rem; color: var(--mpx-ink-faint); margin: 0; }

/* Fast tre-cellet strip. En manglende værdi bliver en tankestreg, ikke en
   sammenklappet celle: ellers flytter kolonnerne sig fra kort til kort. */
.mpx-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: .15rem 0 0;
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius);
  background: var(--mpx-surface-2);
  overflow: hidden;
}

.mpx-card__meta > div { padding: .35rem .25rem; text-align: center; border-left: 1px solid var(--mpx-line); }
.mpx-card__meta > div:first-child { border-left: 0; }
.mpx-card__meta dt { font-size: .64rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mpx-ink-faint); margin: 0; }
.mpx-card__meta dd { margin: 0; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }

.mpx-card__price {
  margin: auto 0 0;
  padding-top: .35rem;
  font-family: var(--mpx-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--mpx-price);
  font-variant-numeric: tabular-nums lining-nums;
}

.mpx-card__price--onrequest { font-size: 1rem; font-weight: 600; color: var(--mpx-ink-muted); }

.mpx-card__dealer { margin: 0; font-size: .8rem; color: var(--mpx-ink-faint); }

/* ---- Pager ----------------------------------------------------------------- */

.mpx-pager { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 1.5rem 0; }
.mpx-pager__label { font-size: .85rem; color: var(--mpx-ink-muted); }
.mpx-pager__items { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }

.mpx-pager__btn {
  min-width: 2.375rem;
  height: 2.375rem;
  padding: 0 .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mpx-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--mpx-primary);
  font-weight: 500;
  font-size: .9rem;
  text-decoration: none;
}

.mpx-pager__btn:hover { background: rgba(45, 106, 46, .12); color: var(--mpx-primary); }
.mpx-pager__btn--active { background: var(--mpx-primary); border-color: var(--mpx-primary); color: #fff; cursor: default; }
.mpx-pager__btn--off { color: #adb5bd; border-color: var(--mpx-line); pointer-events: none; }
.mpx-pager__gap { min-width: 1.5rem; text-align: center; color: var(--mpx-ink-muted); }

@media (max-width: 36rem) {
  .mpx-pager__btn--mid:not(.mpx-pager__btn--active) { display: none; }
}

/* ---- Tomt resultat --------------------------------------------------------- */

.mpx-empty {
  background: var(--mpx-surface);
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius-lg);
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.mpx-empty i { display: block; font-size: 2.5rem; color: #c8cdd3; margin-bottom: .75rem; }
.mpx-empty h2, .mpx-empty h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
.mpx-empty p { color: var(--mpx-ink-muted); margin: 0 0 1rem; }

/* ---- Besked (fejl, solgt) -------------------------------------------------- */

.mpx-alert {
  border-radius: var(--mpx-radius);
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid var(--mpx-primary);
  background: #e8f5e9;
  color: var(--mpx-ink);
}

.mpx-alert--warn { border-left-color: var(--mpx-accent); background: #fff8e6; }
.mpx-alert--error { border-left-color: #c5221f; background: #fdecea; }
.mpx-alert h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.mpx-alert p { margin: 0; }

/* ---- Detaljen -------------------------------------------------------------- */

.mpx-detail__hero { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.mpx-detail__body { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

@media (min-width: 56rem) {
  .mpx-detail__hero { grid-template-columns: 1.5fr 1fr; }
  .mpx-detail__body { grid-template-columns: 1.5fr 1fr; }
}

.mpx-detail__kicker { font-size: .82rem; color: var(--mpx-ink-faint); margin: 0 0 .3rem; }
.mpx-detail__title { font-size: 1.5rem; margin: 0 0 .5rem; }

@media (min-width: 56rem) { .mpx-detail__title { font-size: 2rem; } }

.mpx-detail__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .85rem; }

.mpx-detail__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1rem;
  margin: 1rem 0 0;
  font-size: .92rem;
}

.mpx-detail__facts dt { color: var(--mpx-ink-muted); }
.mpx-detail__facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }

.mpx-block {
  background: var(--mpx-surface);
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--mpx-shadow);
}

.mpx-block h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.mpx-block p:last-child { margin-bottom: 0; }

/* ---- Pris på detaljen ------------------------------------------------------ */

.mpx-price-box {
  background: var(--mpx-surface);
  border: 1px solid var(--mpx-line);
  border-left: 4px solid var(--mpx-primary);
  border-radius: var(--mpx-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.mpx-price-box__amount {
  font-family: var(--mpx-font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mpx-price);
  font-variant-numeric: tabular-nums lining-nums;
}

.mpx-price-box__amount--onrequest { font-size: 1.4rem; color: var(--mpx-primary-dark); }
.mpx-price-box__qualifier { font-size: .85rem; color: var(--mpx-ink-muted); margin: .2rem 0 0; }
.mpx-price-box__secondary { font-size: .85rem; color: var(--mpx-ink-faint); margin: .1rem 0 0; font-variant-numeric: tabular-nums; }
.mpx-price-box__note { font-size: .78rem; color: var(--mpx-ink-faint); margin: .6rem 0 0; }
.mpx-price-box .mpx-btn { margin-top: .85rem; }

/* ---- Galleri --------------------------------------------------------------- */

.mpx-gallery {
  background: var(--mpx-surface);
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius-lg);
  padding: .75rem;
  box-shadow: var(--mpx-shadow);
}

.mpx-gallery__main { margin: 0; background: var(--mpx-surface-2); border-radius: var(--mpx-radius); overflow: hidden; }
.mpx-gallery__main img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

.mpx-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.mpx-gallery__thumb { display: block; width: 4.5rem; height: 4.5rem; border: 2px solid transparent; border-radius: var(--mpx-radius); overflow: hidden; }
.mpx-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpx-gallery__thumb:hover, .mpx-gallery__thumb--on { border-color: var(--mpx-primary); }

.mpx-gallery__count { font-size: .8rem; color: var(--mpx-ink-faint); margin: .5rem 0 0; }
.mpx-gallery__origin { font-size: .75rem; color: var(--mpx-ink-faint); margin: .25rem 0 0; }

/* ---- Specifikationer ------------------------------------------------------- */

.mpx-specs { margin: 0; }
.mpx-specs__group { margin-bottom: 1.1rem; }
.mpx-specs__group:last-child { margin-bottom: 0; }
.mpx-specs__group h3 { font-size: .85rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--mpx-ink-muted); margin: 0 0 .4rem; }

.mpx-specs__table { display: grid; grid-template-columns: 1fr; margin: 0; }

@media (min-width: 40rem) { .mpx-specs__table { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }

.mpx-specs__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--mpx-line); }
.mpx-specs__row dt { color: var(--mpx-ink-muted); font-size: .88rem; margin: 0; }
.mpx-specs__row dd { margin: 0; font-weight: 600; font-size: .9rem; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.mpx-specs__row--highlight dd { color: var(--mpx-primary-dark); }

/* ---- Kontakt --------------------------------------------------------------- */

.mpx-contact { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 56rem) { .mpx-contact { position: sticky; top: 1rem; } }

.mpx-contact__group { border-top: 1px solid var(--mpx-line); padding-top: .85rem; }
.mpx-contact__group:first-child { border-top: 0; padding-top: 0; }
.mpx-contact__role { font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mpx-ink-faint); margin: 0 0 .2rem; }
.mpx-contact__name { font-family: var(--mpx-font-display); font-weight: 600; margin: 0 0 .3rem; }
.mpx-contact__name a { color: var(--mpx-primary-dark); text-decoration: none; }
.mpx-contact__name a:hover { text-decoration: underline; }
.mpx-contact address { font-style: normal; font-size: .88rem; color: var(--mpx-ink-muted); margin: 0 0 .35rem; }
.mpx-contact__line { display: block; font-size: .9rem; margin-bottom: .2rem; }
.mpx-contact__line a { color: var(--mpx-primary); text-decoration: none; }
.mpx-contact__line a:hover { text-decoration: underline; }

/* ---- Kategorinavigation ---------------------------------------------------- */

.mpx-catnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; padding: 0; list-style: none; }

.mpx-catnav a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: .3rem .85rem;
  border: 1px solid var(--mpx-line);
  border-radius: 999px;
  background: var(--mpx-surface);
  color: var(--mpx-ink);
  font-size: .88rem;
  text-decoration: none;
}

.mpx-catnav a:hover { border-color: var(--mpx-primary); color: var(--mpx-primary-dark); }
.mpx-catnav span { color: var(--mpx-ink-faint); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* ---- Søgefelt -------------------------------------------------------------- */

.mpx-search { display: flex; gap: 0; max-width: 34rem; }
.mpx-search .mpx-input { border-radius: var(--mpx-radius) 0 0 var(--mpx-radius); border-right: 0; }
.mpx-search .mpx-btn { border-radius: 0 var(--mpx-radius) var(--mpx-radius) 0; white-space: nowrap; }

/* ---- Sammenligning -------------------------------------------------------- */

.mpx-compare { overflow-x: auto; background: var(--mpx-surface); border: 1px solid var(--mpx-line); border-radius: var(--mpx-radius-lg); box-shadow: var(--mpx-shadow); }

.mpx-compare__table { width: 100%; border-collapse: collapse; min-width: 44rem; }
.mpx-compare__table th, .mpx-compare__table td { padding: .6rem .8rem; border-bottom: 1px solid var(--mpx-line); text-align: left; vertical-align: top; }

/* Foerste kolonne er etiketten. Sticky, saa raekkenavnet foelger med naar tabellen
   scrolles vandret paa en telefon — ellers ved man ikke hvad tallene betyder. */
.mpx-compare__table tbody th {
  position: sticky;
  left: 0;
  background: var(--mpx-surface-2);
  font-weight: 600;
  font-size: .85rem;
  color: var(--mpx-ink-muted);
  white-space: nowrap;
}

.mpx-compare__table thead th { border-bottom-width: 2px; vertical-align: bottom; background: var(--mpx-surface); }
.mpx-compare__table thead th:first-child { width: 12rem; }
.mpx-compare__table td { font-size: .9rem; font-weight: 500; }
.mpx-compare__row--diff td { background: rgba(245, 166, 35, .1); }
.mpx-compare__table .mpx-card { box-shadow: none; }

/* ---- Kategoritræ ---------------------------------------------------------- */

.mpx-cattree__title { font-size: 1.15rem; margin: 0 0 .75rem; }

.mpx-cattree { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }

.mpx-cattree__group {
  background: var(--mpx-surface);
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius);
  padding: .85rem 1rem;
  box-shadow: var(--mpx-shadow);
}

.mpx-cattree__root {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--mpx-font-display);
  font-weight: 600;
  color: var(--mpx-primary-dark);
  text-decoration: none;
}

.mpx-cattree__root:hover { color: var(--mpx-primary); text-decoration: underline; }
.mpx-cattree__root span { font-size: .8rem; font-weight: 400; color: var(--mpx-ink-faint); font-variant-numeric: tabular-nums; }

.mpx-cattree__children { margin: .5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mpx-line); }
.mpx-cattree__children li { border-bottom: 1px solid var(--mpx-line); }
.mpx-cattree__children li:last-child { border-bottom: 0; }

.mpx-cattree__children a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.25rem;
  padding: .35rem 0;
  font-size: .88rem;
  color: var(--mpx-ink);
  text-decoration: none;
}

.mpx-cattree__children a:hover { color: var(--mpx-primary); }
.mpx-cattree__children span { font-size: .78rem; color: var(--mpx-ink-faint); font-variant-numeric: tabular-nums; }

/* ---- Forhandler ----------------------------------------------------------- */

.mpx-dealer__prose { color: var(--mpx-ink-muted); line-height: 1.6; margin-bottom: 1rem; }
.mpx-dealer__prose p:last-child { margin-bottom: 0; }

.mpx-dealer__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem; }

.mpx-dealer__card { border-left: 3px solid var(--mpx-line); padding-left: .85rem; }
.mpx-dealer__card address { font-style: normal; font-size: .88rem; color: var(--mpx-ink-muted); margin: 0 0 .35rem; }

.mpx-dealer__count {
  font-family: var(--mpx-font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--mpx-primary);
  margin: 0 0 .6rem;
}

/* ---- Søgefelt med forslag ------------------------------------------------- */

.mpx-searchbox { position: relative; max-width: 34rem; }

.mpx-suggest {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + .25rem);
  max-height: 22rem;
  overflow-y: auto;
  background: var(--mpx-surface);
  border: 1px solid var(--mpx-line);
  border-radius: var(--mpx-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.mpx-suggest__heading {
  margin: 0;
  padding: .45rem .8rem .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mpx-ink-faint);
}

.mpx-suggest__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  min-height: var(--mpx-tap-min);
  padding: .45rem .8rem;
  color: var(--mpx-ink);
  text-decoration: none;
  font-size: .92rem;
}

.mpx-suggest__item:hover, .mpx-suggest__item.is-active { background: var(--mpx-surface-2); color: var(--mpx-primary-dark); }
.mpx-suggest__meta { font-size: .78rem; color: var(--mpx-ink-faint); white-space: nowrap; }

/* ---- Sammenlign-knap på kortet ------------------------------------------- */

/* Knappen ligger som SØSKENDE til kortets link, ikke inde i det: en <button> inde i
   et <a> er ugyldig HTML. Den shipper hidden og afsløres kun af scriptet, så der
   ikke står en kontrol der ikke kan virke. */
.mpx-card-shell { position: relative; height: 100%; }

.mpx-compare-toggle {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  width: var(--mpx-tap-min);
  height: var(--mpx-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 77, 31, .6);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

.mpx-compare-toggle:hover { background: var(--mpx-primary-dark); }
.mpx-compare-toggle[aria-pressed="true"] { background: var(--mpx-accent); color: #1a1a1a; }

/* ---- Sammenlign-bakke ---------------------------------------------------- */

.mpx-tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--mpx-primary-dark);
  color: #fff;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .2);
}

.mpx-tray__inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: .7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.mpx-tray__chips { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 auto; min-width: 0; }

.mpx-tray__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 14rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  font-size: .82rem;
}

.mpx-tray__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mpx-tray__chip button {
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 .2rem;
}

.mpx-tray__hint { font-size: .82rem; opacity: .85; }
.mpx-tray .mpx-btn--cta.is-off { opacity: .5; pointer-events: none; }

body.mpx-has-tray { padding-bottom: 5rem; }