.mp-product-content.mp-theme {
  --mp-color-bg: #ffffff;
  --mp-color-surface: #f7f8fa;
  --mp-color-surface-strong: #eef2f6;
  --mp-color-text: #1f2937;
  --mp-color-text-soft: #4b5563;
  --mp-color-border: #d8e0e8;
  --mp-color-primary: #0f4c81;
  --mp-color-primary-contrast: #ffffff;
  --mp-color-accent: #d6a700;
  --mp-color-success: #1f7a4d;
  --mp-color-warning-bg: #fff6db;
  --mp-color-warning-border: #efc24f;
  --mp-color-warning-text: #5f4a00;
  --mp-radius-sm: 6px;
  --mp-radius-md: 10px;
  --mp-radius-lg: 16px;
  --mp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --mp-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --mp-space-1: 8px;
  --mp-space-2: 12px;
  --mp-space-3: 16px;
  --mp-space-4: 24px;
  --mp-space-5: 32px;
  --mp-space-6: 40px;
  color: var(--mp-color-text);
  font-size: 16px;
  line-height: 1.6;
  background: var(--mp-color-bg);
}

.mp-theme--ampack {
  --mp-color-primary: #006cb8;
  --mp-color-primary-contrast: #ffffff;
  --mp-color-accent: #ffd24a;
  --mp-color-surface: #f2f8fc;
  --mp-color-surface-strong: #e7f1f8;
}

.mp-theme--blaugelb {
  --mp-color-primary: #004b87;
  --mp-color-primary-contrast: #ffffff;
  --mp-color-accent: #f2c200;
  --mp-color-surface: #f5f8fc;
  --mp-color-surface-strong: #e9f0f7;
}

.mp-theme--bestwood {
  --mp-color-primary: #536b2d;
  --mp-color-primary-contrast: #ffffff;
  --mp-color-accent: #b18a4a;
  --mp-color-surface: #f6f5ef;
  --mp-color-surface-strong: #eeede3;
}

.mp-theme--hevadex {
  --mp-color-primary: rgb(5, 27, 63);
  --mp-color-primary-contrast: #ffffff;
  --mp-color-accent: #c7d4e6;
  --mp-color-surface: #f4f7fb;
  --mp-color-surface-strong: #e6edf6;
}

.mp-product-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.mp-product-content *,
.mp-product-content *::before,
.mp-product-content *::after {
  box-sizing: border-box;
}

.mp-product-content section + section {
  margin-top: var(--mp-space-4);
}

.mp-product-content h2,
.mp-product-content h3,
.mp-product-content p,
.mp-product-content ul,
.mp-product-content ol,
.mp-product-content table {
  margin: 0;
}

.mp-product-content h2,
.mp-product-content h3 {
  color: var(--mp-color-text);
  line-height: 1.25;
}

.mp-product-content h2 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
}

.mp-product-content h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 700;
}

.mp-product-content p,
.mp-product-content li,
.mp-product-content td,
.mp-product-content th,
.mp-product-content a,
.mp-product-content span {
  font-size: 1rem;
}

.mp-product-content p,
.mp-product-content li,
.mp-product-content td {
  color: var(--mp-color-text-soft);
}

.mp-product-content a {
  color: var(--mp-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mp-product-content a:hover {
  opacity: 0.85;
}

.mp-hero {
  padding: var(--mp-space-4);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-lg);
  background:
    linear-gradient(135deg, var(--mp-color-surface) 0%, var(--mp-color-bg) 100%);
  box-shadow: var(--mp-shadow-sm);
}

.mp-hero h2 + p {
  margin-top: var(--mp-space-2);
}

.mp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-1);
  margin-top: var(--mp-space-3);
}

.mp-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--mp-color-primary);
  color: var(--mp-color-primary-contrast);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.mp-section {
  padding: var(--mp-space-4);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-sm);
}

.mp-section-header + .mp-section-body {
  margin-top: var(--mp-space-3);
}

.mp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-2);
}

.mp-section-header h3 {
  position: relative;
  padding-left: 14px;
}

.mp-section-header h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 999px;
  background: var(--mp-color-primary);
}

.mp-section-body > * + * {
  margin-top: var(--mp-space-3);
}

.mp-grid,
.mp-variants,
.mp-cross-sell,
.mp-compatibility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mp-space-3);
}

.mp-card,
.mp-note,
.mp-highlight {
  padding: var(--mp-space-3);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-bg);
}

.mp-callout {
  border-left: 4px solid var(--mp-color-primary);
}

.mp-warning {
  background: var(--mp-color-warning-bg);
  border-color: var(--mp-color-warning-border);
}

.mp-warning h3,
.mp-warning p,
.mp-warning li {
  color: var(--mp-color-warning-text);
}

.mp-benefits,
.mp-applications,
.mp-documents,
.mp-faq,
.mp-steps {
  padding-left: 1.2rem;
}

.mp-benefits li + li,
.mp-applications li + li,
.mp-documents li + li,
.mp-faq li + li,
.mp-steps li + li {
  margin-top: 0.55rem;
}

.mp-specs-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-bg);
}

.mp-specs-table th,
.mp-specs-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--mp-color-border);
}

.mp-specs-table tr:last-child th,
.mp-specs-table tr:last-child td {
  border-bottom: 0;
}

.mp-specs-table th {
  width: 34%;
  color: var(--mp-color-text);
  font-weight: 600;
  background: var(--mp-color-surface-strong);
}

.mp-specs-table td {
  background: var(--mp-color-bg);
}

.mp-video a,
.mp-documents a {
  font-weight: 600;
}

.mp-faq li strong,
.mp-note strong,
.mp-highlight strong {
  color: var(--mp-color-text);
}

.mp-product-content img,
.mp-product-content iframe,
.mp-product-content video {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .mp-product-content.mp-theme {
    font-size: 15px;
  }

  .mp-hero,
  .mp-section {
    padding: var(--mp-space-3);
    border-radius: var(--mp-radius-md);
  }

  .mp-grid,
  .mp-variants,
  .mp-cross-sell,
  .mp-compatibility {
    grid-template-columns: 1fr;
  }

  .mp-specs-table,
  .mp-specs-table tbody,
  .mp-specs-table tr,
  .mp-specs-table th,
  .mp-specs-table td {
    display: block;
    width: 100%;
  }

  .mp-specs-table tr + tr {
    border-top: 1px solid var(--mp-color-border);
  }

  .mp-specs-table th {
    border-bottom: 0;
    padding-bottom: 6px;
  }

  .mp-specs-table td {
    padding-top: 0;
  }
}