/* =========================================================
   Shared PDP design system — match machine details page
   Loaded on every product detail type (machine, abrasive,
   wire, spare, powder). Type CSS can still add layout.
   ========================================================= */

:root {
  --pdp-green: #0b5d4b;
  --pdp-green-dark: #084a3c;
  --pdp-amber: #f59e0b;
  --pdp-amber-hover: #d97706;
  --pdp-wa: #128c7e;
  --pdp-ink: #1a2422;
  --pdp-muted: #5b6b67;
  --pdp-border: #e3e8e6;
  --pdp-fill: #eef6f3;
  --pdp-bg: #f4f6f5;
  --pdp-card: #ffffff;
  --pdp-focus: rgba(11, 93, 75, 0.28);
  --pdp-fs-h1: 24px;
  --pdp-fs-h2: 18px;
  --pdp-fs-body: 14px;
  --pdp-fs-table: 13px;
  --pdp-fs-label: 12px;
  --pdp-fs-btn: 14px;
  --pdp-fs-btn-sm: 13px;
  --pdp-btn-h: 44px;
  --pdp-btn-h-sm: 36px;
  --pdp-radius: 8px;
}

/* Remap legacy tokens used by older PDP skins */
.pdm,
.pdp,
.pd-wire,
.pd-spare,
.pd-powder,
.pdp-sheet-overlay,
.pdp-mobile-bar,
.pdw-sheet,
.pds-sheet,
.pdpw-sheet {
  --brand: var(--pdp-green);
  --navy: #0a1f2e;
  --navy2: var(--pdp-green-dark);
  --brand-light: var(--pdp-fill);
  --teal: var(--pdp-green);
  --amber: var(--pdp-amber);
  --ink: var(--pdp-ink);
  --muted: var(--pdp-muted);
  --line: var(--pdp-border);
  --bg: var(--pdp-bg);
  --wa: var(--pdp-wa);
  --pdm-green: var(--pdp-green);
  --pdm-amber: var(--pdp-amber);
  --pdm-amber-hover: var(--pdp-amber-hover);
  --pdm-wa: var(--pdp-wa);
  --pdm-ink: var(--pdp-ink);
  --pdm-muted: var(--pdp-muted);
  --pdm-border: var(--pdp-border);
  --pdm-chip-bg: var(--pdp-fill);
  --pdm-focus: var(--pdp-focus);
  --pdm-card: var(--pdp-card);

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--pdp-fs-body);
  line-height: 1.45;
  color: var(--pdp-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typography ---------- */
.pdm-h1,
.pdp-hero h1,
.pdp-info h1,
.pdw-hero h1,
.pds-hero h1,
.pdpw-hero h1,
.pd-machine h1,
.pd-wire h1,
.pd-spare h1,
.pd-powder h1,
.pdp h1 {
  font-size: var(--pdp-fs-h1) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

.pdm-h2,
.pdp-block-head h2,
.pdp-sec h2,
.pdw-sec-h h2,
.pdw-cta h2,
.pds-sec-h h2,
.pds-cta h2,
.pdpw-sec-h h2,
.pdpw-cta h2,
.pdm-enquire-title,
.pdw-lead-h,
.pds-lead-h,
.pdpw-lead-h,
.pdp-lead-card h3 {
  font-size: var(--pdp-fs-h2) !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.pdm,
.pdp,
.pd-wire,
.pd-spare,
.pd-powder {
  font-size: var(--pdp-fs-body);
}

.pdm-compare,
.pdm-spec,
.pdm-quick-spec,
.pdp-quick-spec,
.pdw-table,
.pdw-spec,
.pds-table,
.pds-spec,
.pdpw-table,
.pdpw-spec,
.pdp-spec-table,
.pdp-grade-table {
  font-size: var(--pdp-fs-table) !important;
}

.pdm-field label,
.pdp-field label,
.pdw-f > label,
.pdw-lbl,
.pds-f > label,
.pds-lbl,
.pdpw-f > label,
.pdpw-lbl {
  font-size: var(--pdp-fs-label) !important;
  font-weight: 600 !important;
}

/* ---------- Shared button system ---------- */
.pdm-btn,
.pdp-btn-primary,
.pdp-btn-wa,
.pdp-btn-call,
.pdp-btn-outline,
.pdp-btn-sm,
.pdw-btn,
.pdw-mini,
.pdw-alt a,
.pds-btn,
.pds-mini,
.pds-alt a,
.pdpw-btn,
.pdpw-mini,
.pdpw-alt a,
.pdp-mb-quote,
.pdm-mb-quote,
.pdw-mb-quote,
.pds-mb-quote,
.pdpw-mb-quote {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: var(--pdp-btn-h) !important;
  padding: 0 16px !important;
  border-radius: var(--pdp-radius) !important;
  border: 1px solid transparent !important;
  font-family: inherit !important;
  font-size: var(--pdp-fs-btn) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  background-image: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s !important;
}

.pdm-btn:hover,
.pdp-btn-primary:hover,
.pdw-btn:hover,
.pds-btn:hover,
.pdpw-btn:hover,
.pdw-mini:hover,
.pds-mini:hover,
.pdpw-mini:hover {
  transform: none !important;
  box-shadow: none !important;
}

.pdm-btn:focus-visible,
.pdp-btn-primary:focus-visible,
.pdp-btn-wa:focus-visible,
.pdp-btn-call:focus-visible,
.pdw-btn:focus-visible,
.pds-btn:focus-visible,
.pdpw-btn:focus-visible {
  outline: 3px solid var(--pdp-focus) !important;
  outline-offset: 2px !important;
}

/* Primary = amber enquiry */
.pdm-btn-amber,
.pdp-btn-primary,
.pdw-btn,
.pds-btn,
.pdpw-btn,
.pdw-btn.is-auto,
.pds-btn.is-auto,
.pdpw-btn.is-auto,
.pdp-mb-quote,
.pdm-mb-quote,
.pdw-mb-quote,
.pds-mb-quote,
.pdpw-mb-quote,
.pdw-mini,
.pds-mini,
.pdpw-mini,
.pdp-btn-sm[data-open],
.pdm-btn-sm {
  background: var(--pdp-amber) !important;
  color: #1a1408 !important;
  border-color: var(--pdp-amber) !important;
}

.pdm-btn-amber:hover,
.pdp-btn-primary:hover,
.pdw-btn:hover,
.pds-btn:hover,
.pdpw-btn:hover,
.pdw-mini:hover,
.pds-mini:hover,
.pdpw-mini:hover,
.pdp-mb-quote:hover {
  background: var(--pdp-amber-hover) !important;
  border-color: var(--pdp-amber-hover) !important;
  color: #1a1408 !important;
}

/* WhatsApp = green fill */
.pdm-btn-wa,
.pdp-btn-wa,
.pdw-alt a[href*="wa.me"],
.pds-alt a[href*="wa.me"],
.pdpw-alt a[href*="wa.me"],
.pdm-mobile-bar .pdm-btn-wa,
.pdp-mobile-bar .pdp-btn-wa,
.pdw-mb-wa,
.pds-mb-wa,
.pdpw-mb-wa {
  background: var(--pdp-wa) !important;
  color: #fff !important;
  border-color: var(--pdp-wa) !important;
}

/* Call / secondary outline = green border */
.pdm-btn-call,
.pdp-btn-call,
.pdw-alt a[href^="tel:"],
.pds-alt a[href^="tel:"],
.pdpw-alt a[href^="tel:"],
.pdw-mb-call,
.pds-mb-call,
.pdpw-mb-call {
  background: transparent !important;
  color: var(--pdp-green) !important;
  border: 1.5px solid var(--pdp-green) !important;
}

.pdm-btn-outline,
.pdp-btn-outline,
.pdw-btn.is-outline,
.pds-btn.is-outline,
.pdpw-btn.is-outline {
  background: transparent !important;
  color: var(--pdp-ink) !important;
  border: 1px solid var(--pdp-border) !important;
}

.pdm-btn-outline:hover,
.pdp-btn-outline:hover {
  border-color: var(--pdp-green) !important;
  color: var(--pdp-green) !important;
}

/* Teal fill variant → brand green (no gradient) */
.pdw-btn.is-teal,
.pds-btn.is-teal,
.pdpw-btn.is-teal,
.pdp-btn-teal {
  background: var(--pdp-green) !important;
  color: #fff !important;
  border-color: var(--pdp-green) !important;
}

/* Compact table CTAs */
.pdm-btn-sm,
.pdp-btn-sm,
.pdw-mini,
.pds-mini,
.pdpw-mini {
  min-height: var(--pdp-btn-h-sm) !important;
  padding: 0 12px !important;
  font-size: var(--pdp-fs-btn-sm) !important;
}

/* Full-width lead submit */
.pdm-btn-block,
.pdw-btn:not(.is-auto),
.pds-btn:not(.is-auto),
.pdpw-btn:not(.is-auto),
.pdp-lead-form [data-submit-lead],
.pdp-lead-form [data-continue],
.pdm-form [data-submit] {
  width: 100%;
}

/* Inputs — consistent height / radius (exclude phone prefix group inner input) */
.pdm-field > input,
.pdm-field > select,
.pdm-mobile,
.pdp-field > input,
.pdp-field > select,
.pdw-in,
.pdw-sel,
.pdw-phone,
.pds-in,
.pds-sel,
.pds-phone,
.pdpw-in,
.pdpw-sel,
.pdpw-phone {
  min-height: 42px !important;
  border-radius: var(--pdp-radius) !important;
  font-size: var(--pdp-fs-body) !important;
  border-color: var(--pdp-border) !important;
}

.pdm-field > input:focus,
.pdm-field > select:focus,
.pdp-field > input:focus,
.pdp-field > select:focus,
.pdw-in:focus,
.pdw-sel:focus,
.pds-in:focus,
.pds-sel:focus,
.pdpw-in:focus,
.pdpw-sel:focus {
  border-color: var(--pdp-green) !important;
  box-shadow: 0 0 0 3px var(--pdp-focus) !important;
  outline: none !important;
}

/* Phone group: one outer shell only — no nested input chrome */
.pdm-mobile input,
.pdw-phone input,
.pds-phone input,
.pdpw-phone input,
.pdp-mobile-wrap input {
  min-height: 0 !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

.pdm-mobile:focus-within,
.pdw-phone:focus-within,
.pds-phone:focus-within,
.pdpw-phone:focus-within {
  border-color: var(--pdp-green) !important;
  box-shadow: 0 0 0 3px var(--pdp-focus) !important;
  outline: none !important;
}

/* Required / optional flags (shared) */
.pdm-req,
.pdp-req,
.pdw-req,
.pds-req,
.pdpw-req {
  color: #b42318;
  font-weight: 700;
}

.pdm-opt,
.pdp-opt,
.pdw-opt,
.pds-opt,
.pdpw-opt {
  color: var(--pdp-muted);
  font-weight: 500;
  font-size: 11px;
}

/* Hero accent colour — align gradient end to machine green */
.pdp-hero,
.pdw-hero,
.pds-hero,
.pdpw-hero,
header.pdw-hero,
header.pds-hero,
header.pdpw-hero {
  background: linear-gradient(135deg, #0a1f2e, #084a3c 60%, #0b5d4b) !important;
}

.pdp-hero h1 em,
.pdw-hero h1 em,
.pds-hero h1 em,
.pdpw-hero h1 em {
  color: var(--pdp-amber) !important;
}

/* Lead form primary submit (abrasive / shared mounts) */
.pdp-lead-form .pdp-btn-primary,
.pdp-lead-card .pdp-btn-primary,
.pdm-lead-form .pdm-btn-primary,
[data-lead-card] button[type="submit"],
[data-lead-card] [data-submit],
[data-lead-card] [data-submit-lead],
[data-lead-card] [data-continue] {
  min-height: var(--pdp-btn-h) !important;
  border-radius: var(--pdp-radius) !important;
  font-size: var(--pdp-fs-btn) !important;
  font-weight: 700 !important;
  background: var(--pdp-amber) !important;
  color: #1a1408 !important;
  border: 1px solid var(--pdp-amber) !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Mobile bars */
.pdp-mobile-bar,
.pdm-mobile-bar,
.pdw-mobile-bar,
.pds-mobile-bar,
.pdpw-mobile-bar {
  gap: 8px;
}

.pdp-mobile-bar .pdp-btn-primary,
.pdp-mobile-bar .pdp-mb-quote,
.pdm-mobile-bar .pdm-btn-amber,
.pdw-mobile-bar .pdw-mb-quote,
.pds-mobile-bar .pds-mb-quote,
.pdpw-mobile-bar .pdpw-mb-quote {
  flex: 1;
  background: var(--pdp-amber) !important;
  color: #1a1408 !important;
}

.pdp-mobile-bar .pdp-btn-wa,
.pdm-mobile-bar .pdm-btn-wa,
.pdw-mobile-bar a[href*="wa.me"],
.pds-mobile-bar a[href*="wa.me"],
.pdpw-mobile-bar a[href*="wa.me"] {
  flex: 1;
  background: var(--pdp-wa) !important;
  color: #fff !important;
}