/* ==========================================================================
   MACROPLAST — Product pages
   Page-header band, product layout, and `.mpl-prose` — which restyles the
   ORIGINAL Bootstrap content markup in the theme's language.

   The prose layer exists so product copy, spec tables and image markup stay
   byte-identical to the source pages (SEO safe) while still looking native to
   the theme. It includes a small 12-column grid shim so the original
   col-*-N layouts survive without loading Bootstrap.
   ========================================================================== */

/* ---------- Page header band ---------- */
.mpl-page-head {
  position: relative;
  background: var(--mpl-surface);
  border-bottom: 1px solid var(--mpl-border);
  padding: calc(var(--mpl-nav-h) + 4.5rem) 0 3.5rem;
  overflow: hidden;
}
/* Same treatment as the homepage hero: the banner photo stays as a pale
   grayscale texture behind ink-on-white type. */
.mpl-page-head__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .12;
  filter: grayscale(1) contrast(1.08);
}
.mpl-page-head__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 400px at 78% 0%, rgba(230, 57, 70, .07), transparent 62%),
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 40%, rgba(255, 255, 255, .6) 100%);
}
.mpl-page-head__shell { position: relative; z-index: 2; }
.mpl-page-head h1 { color: var(--mpl-ink); max-width: 22ch; }
.mpl-page-head__lead { color: var(--mpl-ink-soft); margin-top: 1.1rem; max-width: 46rem; }

/* Breadcrumb trail */
.mpl-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mpl-ink-soft);
  margin-bottom: 1.25rem;
}
.mpl-crumbs a { color: var(--mpl-ink-soft); }
.mpl-crumbs a:hover { color: var(--mpl-red); }
.mpl-crumbs span[aria-current] { color: var(--mpl-red); }
.mpl-crumbs .sep { opacity: .4; }

/* ---------- Product layout: sticky media + content ---------- */
.mpl-product { display: grid; grid-template-columns: 420px 1fr; gap: 3.5rem; align-items: start; }
.mpl-product__aside { position: sticky; top: calc(var(--mpl-nav-h) + 1.5rem); }

.mpl-product__figure {
  background: var(--mpl-surface);
  border: 1px solid var(--mpl-border);
  border-top: 3px solid var(--mpl-red);
  padding: 1.75rem;
}
.mpl-product__figure img {
  width: 100%; height: auto;
  max-height: 300px; object-fit: contain;
  margin: 0 auto;
}
.mpl-product__figcap {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--mpl-border);
  font-family: "IBM Plex Mono", monospace;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mpl-ink-soft);
}

/* Enquiry card under the image */
.mpl-product__cta {
  margin-top: 1.25rem;
  background: var(--mpl-surface-muted);
  border: 1px solid var(--mpl-border);
  border-left: 2px solid var(--mpl-red);
  padding: 1.5rem;
}
.mpl-product__cta h3 {
  color: var(--mpl-ink); font-size: 1.0625rem; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: .5rem;
}
.mpl-product__cta p { color: var(--mpl-ink-soft); font-size: .8125rem; margin-bottom: 1.1rem; }
.mpl-product__cta .mpl-btn-primary { width: 100%; justify-content: center; }
.mpl-product__phone {
  display: block; margin-top: .85rem; text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: .6875rem; letter-spacing: .12em;
  color: var(--mpl-ink-soft);
}
.mpl-product__phone:hover { color: var(--mpl-red); }

/* ==========================================================================
   PROSE — original markup, theme styling
   ========================================================================== */
.mpl-prose { color: var(--mpl-ink-soft); }
.mpl-prose > *:first-child { margin-top: 0; }

.mpl-prose h2,
.mpl-prose h3,
.mpl-prose h4 {
  font-family: "Cabinet Grotesk", "IBM Plex Sans", sans-serif;
  color: var(--mpl-ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 2.5rem 0 1rem;
}
.mpl-prose h2 { font-size: 1.75rem; font-weight: 900; }
.mpl-prose h3 { font-size: 1.3125rem; font-weight: 800; }
.mpl-prose h4 { font-size: 1.0625rem; font-weight: 700; }
.mpl-prose h2 span,
.mpl-prose h3 span,
.mpl-prose h4 span { color: var(--mpl-red); }

.mpl-prose p { margin: 0 0 1.1rem; line-height: 1.8; color: var(--mpl-ink-soft); }
.mpl-prose strong, .mpl-prose b { color: var(--mpl-ink); font-weight: 600; }
.mpl-prose a { color: var(--mpl-indigo); text-decoration: underline; text-underline-offset: 3px; }
.mpl-prose a:hover { color: var(--mpl-red); }

/* Bullet lists — red tick rules, replacing the fa-angle icons */
.mpl-prose ul { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .55rem; }
.mpl-prose ul li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.7;
  color: var(--mpl-ink-soft);
}
.mpl-prose ul li::before {
  content: "";
  position: absolute; left: 0; top: .68em;
  width: 9px; height: 1px; background: var(--mpl-red);
}
.mpl-prose ul li i { display: none; }   /* legacy fa-angle-double-right markers */
.mpl-prose ol { margin: 0 0 1.5rem 1.25rem; display: grid; gap: .55rem; }
.mpl-prose ol li { line-height: 1.7; }

/* Images inside content */
.mpl-prose img {
  max-width: 100%; height: auto;
  background: var(--mpl-surface);
  border: 1px solid var(--mpl-border);
  padding: .75rem;
}

/* Legacy section title blocks — de-centre them inside prose */
.mpl-prose .title { text-align: left; margin: 0 0 1.5rem; width: auto; display: block; position: static; }
.mpl-prose .title h2 { margin: 0; }
.mpl-prose .title h2::after { display: none; }
.mpl-prose .title-border-color { display: none; }
.mpl-prose .pdtx { margin: 0; }

/* ---------- Tables ---------- */
.mpl-prose .mpl-tablewrap,
.mpl-tablewrap { overflow-x: auto; margin: 0 0 1.75rem; border: 1px solid var(--mpl-border); background: var(--mpl-surface); }
.mpl-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  background: var(--mpl-surface);
}
.mpl-prose thead th,
.mpl-prose .thead-1 th {
  background: var(--mpl-indigo);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  text-align: left;
  padding: .9rem .85rem;
  border: 1px solid var(--mpl-indigo-deep);
}
.mpl-prose td {
  padding: .8rem .85rem;
  border: 1px solid var(--mpl-border);
  color: var(--mpl-ink-soft);
  vertical-align: top;
}
.mpl-prose td:first-child { color: var(--mpl-ink); font-weight: 500; }
.mpl-prose tbody tr:nth-child(odd) { background: var(--mpl-surface-muted); }
.mpl-prose tbody tr:hover { background: rgba(58, 58, 140, .06); }

/* ---------- 12-column shim ----------
   Keeps the source pages' col-*-N layouts working without Bootstrap. */
.mpl-prose .row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  margin: 0 0 1.5rem;
}
.mpl-prose .row > * { grid-column: span 12; min-width: 0; }
.mpl-prose [class*="col-lg-"],
.mpl-prose [class*="col-md-"] { min-width: 0; }

@media (min-width: 900px) {
  .mpl-prose .col-md-1,  .mpl-prose .col-lg-1  { grid-column: span 1; }
  .mpl-prose .col-md-2,  .mpl-prose .col-lg-2  { grid-column: span 2; }
  .mpl-prose .col-md-3,  .mpl-prose .col-lg-3  { grid-column: span 3; }
  .mpl-prose .col-md-4,  .mpl-prose .col-lg-4  { grid-column: span 4; }
  .mpl-prose .col-md-5,  .mpl-prose .col-lg-5  { grid-column: span 5; }
  .mpl-prose .col-md-6,  .mpl-prose .col-lg-6  { grid-column: span 6; }
  .mpl-prose .col-md-7,  .mpl-prose .col-lg-7  { grid-column: span 7; }
  .mpl-prose .col-md-8,  .mpl-prose .col-lg-8  { grid-column: span 8; }
  .mpl-prose .col-md-9,  .mpl-prose .col-lg-9  { grid-column: span 9; }
  .mpl-prose .col-md-10, .mpl-prose .col-lg-10 { grid-column: span 10; }
  .mpl-prose .col-md-11, .mpl-prose .col-lg-11 { grid-column: span 11; }
  .mpl-prose .col-md-12, .mpl-prose .col-lg-12 { grid-column: span 12; }
}

/* Legacy wrappers that should not add their own chrome inside prose */
.mpl-prose .about-wrapper,
.mpl-prose .add-data,
.mpl-prose .news-wrapper,
.mpl-prose .quality-assurance,
.mpl-prose section { padding: 0; background: none; }
.mpl-prose .container { width: auto; max-width: none; padding: 0; margin: 0; }
.mpl-prose .about-text-area { padding: 0 !important; }
.mpl-prose .display-table { display: block; }
.mpl-prose .display-table-cell { display: block; width: auto; }

/* ---------- Related products ---------- */
.mpl-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

@media (max-width: 1100px) {
  .mpl-product { grid-template-columns: 340px 1fr; gap: 2.5rem; }
  .mpl-related__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .mpl-product { grid-template-columns: 1fr; }
  .mpl-product__aside { position: static; max-width: 460px; }
  .mpl-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mpl-page-head { padding: calc(var(--mpl-nav-h) + 3rem) 0 2.5rem; }
  .mpl-related__grid { grid-template-columns: 1fr; }
  .mpl-prose h2 { font-size: 1.4rem; }
}