/* Product pages — the approved standard sequence:
   banner + CTA, positioning + highlights, key features, data sheet + CTA, blogs, final CTA.
   Values come from the approved product designs (*.dc.html); fluid sizes reach the design
   value at 1280px, matching the rest of the site. Shared pieces (hero grid, breadcrumb,
   positioning, USP cards, news, CTA) come from components.css / product-detail.css. */

/* ---- 1. Banner stage: application image in a framed panel, product PNG in front ---- */
.pd-stage { position: relative; height: 600px; }
.pd-stage__outline {
  position: absolute; left: 7%; top: 5%; right: 0; bottom: 30%;
  border: 1px solid rgba(167, 33, 36, 0.75); border-radius: 16px; pointer-events: none;
}
.pd-stage__frame {
  position: absolute; left: 0; top: 0; right: 5%; bottom: 34%; overflow: hidden;
  border: 1px solid var(--line-4); border-radius: 16px; background: var(--color-surface);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.pd-stage__frame .product-stage__bg { top: -6%; height: 112%; }
.pd-stage__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6, 6, 7, 0) 55%, rgba(6, 6, 7, 0.55) 100%); }
.pd-stage__corner {
  position: absolute; right: 2%; bottom: 2%; width: 26%; height: 22%;
  border-right: 1px solid rgba(167, 33, 36, 0.75); border-bottom: 1px solid rgba(167, 33, 36, 0.75);
  border-bottom-right-radius: 16px; pointer-events: none;
}
.pd-stage .product-stage__product { z-index: 2; }
.pd-hero__text { margin: 24px 0 0; max-width: 420px; font-size: 15.5px; line-height: 1.64; color: var(--color-text-muted); font-weight: 300; }
.pd-hero__label {
  white-space: nowrap; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-text-dim);
}

/* ---- 3. Key features ---- */
.pd-features { padding-bottom: clamp(48px, 6.25vw, 80px); }
.pd-features__panel {
  position: relative; height: min(640px, calc(100vh - 210px)); min-height: 460px; overflow: hidden;
  border: 1px solid var(--line-1); border-radius: 2px;
  background: linear-gradient(150deg, var(--color-surface-raised) 0%, var(--color-surface) 60%, var(--color-surface-sunken) 100%);
}
.pd-features__panel .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pd-features__panel--cover .media { object-fit: cover; }
.pd-features__list { display: flex; flex-direction: column; }
.pd-feature {
  border-top: 1px solid var(--line-2); padding: clamp(36px, 4.06vw, 52px) 28px clamp(36px, 4.06vw, 52px) 0;
  transition: border-color 400ms ease, background 400ms ease, transform 500ms var(--ease-out);
}
.pd-feature:last-child { border-bottom: 1px solid var(--line-2); }
.pd-feature:hover {
  border-top-color: var(--brand); transform: translateX(6px);
  background: linear-gradient(90deg, rgba(167, 33, 36, 0.08) 0%, rgba(167, 33, 36, 0) 72%);
}
.pd-feature__num {
  font-family: var(--font-mono); font-size: clamp(30px, 2.97vw, 38px); letter-spacing: -0.02em;
  color: var(--brand-ink); opacity: 0.7; transition: opacity 500ms ease;
}
.pd-feature:hover .pd-feature__num { opacity: 1; }
.pd-feature__title { margin-top: 14px; font-size: clamp(22px, 2.19vw, 28px); line-height: 1.14; letter-spacing: -0.024em; font-weight: 500; color: var(--color-text-strong); }
.pd-feature__text { margin: 14px 0 0; max-width: 480px; font-size: 15px; line-height: 1.62; color: var(--color-text-muted); font-weight: 300; }

/* ---- 4. Data sheet ---- */
.pd-ds__grid {
  max-width: 1320px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(44px, 6.25vw, 80px); align-items: start;
}
.pd-ds__table { border-top: 1px solid rgba(208, 77, 80, 0.5); min-width: 0; }
.pd-ds__scroll { width: 100%; overflow-x: auto; padding: 30px 0; -webkit-overflow-scrolling: touch; }
.pd-spec { width: 100%; border-collapse: collapse; table-layout: fixed; color: #F5F5F5; font-family: Arial, sans-serif; font-size: 16px; }
.pd-spec--cols-s { min-width: 760px; }
.pd-spec--cols-m { min-width: 850px; }
.pd-spec--cols-l { min-width: 1000px; }
.pd-spec--cols-s .pd-spec__head, .pd-spec--cols-m .pd-spec__head { font-size: 18px; }
.pd-spec--cols-s .pd-spec__value { padding: 22px 12px; }
.pd-spec--cols-m .pd-spec__value { padding: 22px 8px; font-size: 18px; }
.pd-spec--cols-m .pd-spec__value--all { font-size: 20px; }
/* As rendered in the approved data sheet: equal-width columns. */
.pd-spec--single:not(.pd-spec--grouped) .pd-spec__col-label { width: 40%; }
.pd-spec th, .pd-spec td { font-weight: 400; vertical-align: middle; }
.pd-spec__head-label, .pd-spec__head {
  padding: 22px 8px; border-top: 1px solid #642A2A; border-bottom: 1px solid #202020;
}
.pd-spec__head-label { padding: 22px 12px; text-align: left; font-family: monospace; font-size: 11px; letter-spacing: 2px; color: #A5A5A5; }
.pd-spec__head { text-align: center; font-size: 16px; color: #F5F5F5; }
.pd-spec__group { padding: 22px 5px; text-align: center; border-bottom: 1px solid #202020; font-size: 13px; color: #F5F5F5; }
.pd-spec__label {
  padding: 22px 12px 22px 0; text-align: left; border-bottom: 1px solid #202020;
  font-family: monospace; font-size: 11px; letter-spacing: 1px; color: #A5A5A5;
}
.pd-spec__value { padding: 22px 5px; text-align: center; border-bottom: 1px solid #202020; }
.pd-spec__value--all { padding: 22px 12px; font-size: 18px; }
.pd-spec--single .pd-spec__value { text-align: left; padding-left: 18px; font-size: 16px; }
.pd-spec__row { transition: background 300ms ease; }
.pd-spec__row:hover { background: rgba(255, 255, 255, 0.02); }

.pd-ds__box {
  max-width: 1320px; margin: clamp(40px, 5vw, 64px) auto 0; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px 40px; padding: 34px clamp(24px, 3.125vw, 40px);
  background: var(--color-surface); border: 1px solid var(--line-2); border-radius: 2px; transition: border-color 500ms ease;
}
.pd-ds__box:hover { border-color: rgba(167, 33, 36, 0.6); }
.pd-ds__main { display: flex; align-items: center; gap: 22px; }
.pd-ds__icon {
  flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(167, 33, 36, 0.55); border-radius: 50%; color: var(--brand-ink);
}
.pd-ds__title { font-size: 20px; letter-spacing: -0.015em; color: var(--color-text-strong); font-weight: 500; }
.pd-ds__desc { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--color-text-subtle); font-weight: 300; }
.pd-ds__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pd-ds__download { display: inline-flex; align-items: center; gap: 11px; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .hero__grid:has(.pd-stage) { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pd-stage { height: 460px; }
  .pd-ds__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pd-features__panel { height: auto; min-height: clamp(392px, 50vw, 520px); }
}
@media (max-width: 767px) {
  .pd-stage { height: 360px; }
  .pd-stage .product-stage__product { left: 6%; right: 6%; top: 34%; }
  .pd-feature { padding-right: 0; }
  .pd-ds__main { align-items: flex-start; }
  .pd-hero__label { white-space: normal; }
  .pd-spec__head-label, .pd-spec__label { font-size: 11px; }
}
@media (hover: none) { .pd-feature:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pd-feature, .pd-feature__num { transition: none; }
  .pd-feature:hover { transform: none; }
}

/* ---- Data sheet table styles (Product → 4. Data sheet → Table style) ----
   "datasheet" is the default above; the others reproduce the remaining approved designs. */

/* Minimal list: site typography (MIO, XR, ASO & FSO, MCO, Media Pad, SPA designs) */
.pd-ds__table--minimal .pd-ds__scroll { padding: 0; }
.pd-ds__table--minimal .pd-spec { font-family: var(--font-sans); color: var(--color-text-soft); min-width: 0; }
.pd-ds__table--minimal .pd-spec--cols-m { min-width: 760px; }
.pd-ds__table--minimal .pd-spec--cols-l { min-width: 1040px; }
.pd-ds__table--minimal .pd-spec__col-label { width: 38%; }
.pd-ds__table--minimal .pd-spec--cols-m .pd-spec__col-label { width: 30%; }
.pd-ds__table--minimal .pd-spec--cols-l .pd-spec__col-label { width: 22%; }
.pd-ds__table--minimal .pd-spec__label,
.pd-ds__table--minimal .pd-spec__group {
  padding: 20px 18px 20px 0; border-bottom: 1px solid var(--line-1); text-align: left;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-subtle);
}
.pd-ds__table--minimal .pd-spec__value,
.pd-ds__table--minimal .pd-spec__value--all,
.pd-ds__table--minimal .pd-spec--single .pd-spec__value {
  padding: 20px 18px; border-bottom: 1px solid var(--line-1); text-align: left; font-size: 16px; color: var(--color-text-soft); font-variant-numeric: tabular-nums;
}
.pd-ds__table--minimal .pd-spec--cols-m .pd-spec__value { font-size: 15px; }
.pd-ds__table--minimal .pd-spec--cols-l .pd-spec__value { font-size: 14px; }
.pd-ds__table--minimal .pd-spec--multi .pd-spec__value--all { font-size: 15px; }
.pd-ds__table--minimal .pd-spec__head-label {
  padding: 26px 18px 22px 0; border-top: 0; border-bottom: 1px solid var(--line-3);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-dim);
}
.pd-ds__table--minimal .pd-spec__head {
  padding: 26px 18px 22px; border-top: 0; border-bottom: 1px solid var(--line-3); text-align: left;
  font-size: 22px; letter-spacing: -0.02em; font-weight: 500; color: var(--color-text-strong);
}
.pd-ds__table--minimal .pd-spec--cols-m .pd-spec__head { font-size: 24px; }

/* Bordered grid (MC Pro 1000 / 960 designs) */
.pd-ds__table--bordered .pd-ds__scroll { background: #080808; padding: 14px 0; }
.pd-ds__table--bordered .pd-spec { color: #E8E8E8; font-size: 13px; min-width: 1000px; }
.pd-ds__table--bordered .pd-spec th,
.pd-ds__table--bordered .pd-spec td {
  padding: 9px 4px; border: 1px solid #999; font-family: Arial, sans-serif; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: #E8E8E8; font-weight: 400;
}
.pd-ds__table--bordered .pd-spec .pd-spec__label, .pd-ds__table--bordered .pd-spec .pd-spec__head-label, .pd-ds__table--bordered .pd-spec .pd-spec__group { text-align: left; }
.pd-ds__table--bordered .pd-spec .pd-spec__value, .pd-ds__table--bordered .pd-spec .pd-spec__head { text-align: center; }

/* Bordered grid, large text (WallPad design) */
.pd-ds__table--bordered-light .pd-spec { min-width: 1000px; }
.pd-ds__table--bordered-light .pd-spec th,
.pd-ds__table--bordered-light .pd-spec td {
  padding: 12px 6px; border: 1px solid rgba(255, 255, 255, 0.65); font-family: Arial, sans-serif; font-size: 16px;
  letter-spacing: 0; text-transform: none; color: #F5F5F5; font-weight: 400; text-align: center;
}
.pd-ds__table--bordered-light .pd-spec .pd-spec__label, .pd-ds__table--bordered-light .pd-spec .pd-spec__head-label, .pd-ds__table--bordered-light .pd-spec .pd-spec__group { padding: 12px 10px; text-align: left; }

/* Compact (HDO design) */
.pd-ds__table--compact .pd-ds__scroll { background: #1C1C1C; padding: 12px 0; }
.pd-ds__table--compact .pd-spec { min-width: 620px; color: #E5E5E5; }
.pd-ds__table--compact .pd-spec th,
.pd-ds__table--compact .pd-spec td {
  padding: 5px 2px; border: 0; border-bottom: 1px solid #555; font-family: Arial, sans-serif; font-size: 11px;
  letter-spacing: 0; text-transform: none; color: #E5E5E5; font-weight: 400; text-align: center;
}
.pd-ds__table--compact .pd-spec .pd-spec__label { padding: 5px 4px; text-align: left; }
.pd-ds__table--compact .pd-spec .pd-spec__head, .pd-ds__table--compact .pd-spec .pd-spec__head-label { font-weight: 600; }

/* Product "News & Insights" heading is 52px in the approved product designs */
.page-product .news__heading { font-size: clamp(30px, 4.06vw, 52px); }
.pd-ds__download { padding-left: clamp(22px, 2.34vw, 30px); padding-right: clamp(22px, 2.34vw, 30px); }
.pd-ds__grid--stacked { grid-template-columns: minmax(0, 1fr); gap: clamp(33px, 4.69vw, 60px); }
.pd-ds__grid--stacked .pd-ds__table--minimal .pd-spec__head-label { padding-top: clamp(18px, 2.03vw, 26px); }
.pd-spec--cols-m .pd-spec__label { letter-spacing: 2px; }
.pd-ds__table--minimal .pd-spec--cols-m .pd-spec__label { letter-spacing: 0.18em; }
.pd-ds__table--minimal .pd-spec { table-layout: auto; }
.pd-ds__table--minimal .pd-spec.pd-spec--single .pd-spec__col-label { width: 38%; }
.pd-ds__table--compact .pd-spec tbody tr:first-child td.pd-spec__value { font-weight: 600; }

/* Highlights row sized to the number of highlights when there are fewer than four */
.positioning__usps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.positioning__usps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) { .positioning__usps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .positioning__usps--3, .positioning__usps--2 { grid-template-columns: minmax(0, 1fr); } }

/* Banner style "compact" (Quatro / Rental design) */
.pd-hero--compact .product-hero__heading { font-size: clamp(28px, 3.3vw, 54px); line-height: 1; letter-spacing: -0.034em; text-wrap: pretty; }
.pd-hero--compact .pd-hero__text { margin-top: 28px; max-width: 460px; font-size: 16.5px; line-height: 1.62; }
/* USP number sits inline in the approved design (its line box sets the card height). */
.positioning .usp-card__num { display: inline; }
.pd-ds__grid--stacked { gap: 0; }
.pd-ds__grid .product-specifications__label { justify-self: start; }