/* Design system bundle: fonts + Figma tokens + Tailwind layers.
   Build: npm run build  →  ../dist/index.css */

/* =============================================================
   The Part Market — Self-hosted font faces
   Load before tokens so --pm-core-font-family-* resolve to real files.
   Primary: woff2. Fallback: opentype / truetype (per Jason’s review).
   ============================================================= */

/* ── HongKong (hero / display) ───────────────────────────────── */

@font-face {
  font-family: 'HongKong';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/hongkong/hongkong-light.woff2') format('woff2'),
    url('../../fonts/hongkong/hongkong-light.otf') format('opentype');
}

@font-face {
  font-family: 'HongKong';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/hongkong/hongkong-regular.woff2') format('woff2'),
    url('../../fonts/hongkong/hongkong-regular.otf') format('opentype');
}

@font-face {
  font-family: 'HongKong';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/hongkong/hongkong-medium.woff2') format('woff2'),
    url('../../fonts/hongkong/hongkong-medium.otf') format('opentype');
}

@font-face {
  font-family: 'HongKong';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/hongkong/hongkong-bold.woff2') format('woff2'),
    url('../../fonts/hongkong/hongkong-bold.otf') format('opentype');
}

@font-face {
  font-family: 'HongKong';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/hongkong/hongkong-black.woff2') format('woff2'),
    url('../../fonts/hongkong/hongkong-black.otf') format('opentype');
}

/* ── Karla (headings) ──────────────────────────────────────── */

@font-face {
  font-family: 'Karla';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/karla/Karla-Regular.woff2') format('woff2'),
    url('../../fonts/karla/Karla-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Karla';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/karla/Karla-Bold.woff2') format('woff2'),
    url('../../fonts/karla/Karla-Bold.ttf') format('truetype');
}

/* ── Roboto (body) ─────────────────────────────────────────── */

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/roboto/Roboto-Regular.woff2') format('woff2'),
    url('../../fonts/roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/roboto/Roboto-Medium.woff2') format('woff2'),
    url('../../fonts/roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    url('../../fonts/roboto/Roboto-Bold.woff2') format('woff2'),
    url('../../fonts/roboto/Roboto-Bold.ttf') format('truetype');
}

/* =============================================================
   The Part Market — Core Tokens
   Layer 1: Raw design primitives. Semantic and component tokens
   reference these via var(--pm-core-...). Never use these
   directly in component CSS — always go through the semantic layer.

   Source: tokens/source/core.tokens.json
   ============================================================= */

:root {

  /* ── Colors: Base ────────────────────────────────────── */

  --pm-core-colour-base-white: #ffffff;
  --pm-core-colour-base-black: #222328;

  /* ── Colors: Neutral ─────────────────────────────────── */

  --pm-core-colour-neutral-100: #f4f5f7;
  --pm-core-colour-neutral-200: #e3e6eb;
  --pm-core-colour-neutral-300: #c3c8cf;
  --pm-core-colour-neutral-400: #a4aab4;
  --pm-core-colour-neutral-500: #848c98;
  --pm-core-colour-neutral-600: #6a707a;
  --pm-core-colour-neutral-700: #4f545b;
  --pm-core-colour-neutral-800: #35383d;
  --pm-core-colour-neutral-900: #282a2e;

  /* ── Colors: Yellow ──────────────────────────────────── */

  --pm-core-colour-primary-yellow-100: #fff2cd;
  --pm-core-colour-primary-yellow-200: #ffebb4;
  --pm-core-colour-primary-yellow-300: #ffe59b;
  --pm-core-colour-primary-yellow-400: #ffe59b;
  --pm-core-colour-primary-yellow-500: #ffd768;
  --pm-core-colour-primary-yellow-600: #ffbd04;
  --pm-core-colour-primary-yellow-700: #ba8b2d;
  --pm-core-colour-primary-yellow-800: #997102;
  --pm-core-colour-primary-yellow-900: #664c02;

  /* ── Colors: Blue ────────────────────────────────────── */

  --pm-core-colour-primary-blue-100: #d8e6f8;
  --pm-core-colour-primary-blue-200: #a9c7eb;
  --pm-core-colour-primary-blue-300: #92b7e5;
  --pm-core-colour-primary-blue-400: #6498d8;
  --pm-core-colour-primary-blue-500: #3578cc;
  --pm-core-colour-primary-blue-600: #0759bf;
  --pm-core-colour-primary-blue-700: #064799;
  --pm-core-colour-primary-blue-800: #043573;
  --pm-core-colour-primary-blue-900: #03244c;

  /* ── Colors: Highlight Blue ──────────────────────────── */

  --pm-core-colour-primary-highlight-blue-100: #e6f1ff;
  --pm-core-colour-primary-highlight-blue-200: #b5d6ff;
  --pm-core-colour-primary-highlight-blue-300: #9dc9ff;
  --pm-core-colour-primary-highlight-blue-400: #6badff;
  --pm-core-colour-primary-highlight-blue-500: #3a92ff;
  --pm-core-colour-primary-highlight-blue-600: #0977ff;
  --pm-core-colour-primary-highlight-blue-700: #075fcc;
  --pm-core-colour-primary-highlight-blue-800: #054799;
  --pm-core-colour-primary-highlight-blue-900: #043066;

  /* ── Colors: Validation Green ────────────────────────── */

  --pm-core-colour-primary-validation-green-100: #ecfbf3;
  --pm-core-colour-primary-validation-green-200: #dff9eb;
  --pm-core-colour-primary-validation-green-300: #a8edc6;
  --pm-core-colour-primary-validation-green-400: #61db96;
  --pm-core-colour-primary-validation-green-500: #32cf76;
  --pm-core-colour-primary-validation-green-600: #03c356;
  --pm-core-colour-primary-validation-green-700: #029c45;
  --pm-core-colour-primary-validation-green-800: #027534;
  --pm-core-colour-primary-validation-green-900: #014e22;

  /* ── Colors: Validation Red ──────────────────────────── */

  --pm-core-colour-primary-validation-red-100: #ffe1e6;
  --pm-core-colour-primary-validation-red-200: #ffb4c2;
  --pm-core-colour-primary-validation-red-300: #ff9bad;
  --pm-core-colour-primary-validation-red-400: #ff6885;
  --pm-core-colour-primary-validation-red-500: #ff365c;
  --pm-core-colour-primary-validation-red-600: #ff0433;
  --pm-core-colour-primary-validation-red-700: #cc0329;
  --pm-core-colour-primary-validation-red-800: #99021f;
  --pm-core-colour-primary-validation-red-900: #660214;

  /* ── Colors: Validation Orange ───────────────────────── */

  --pm-core-colour-primary-validation-orange-100: #ffded5;
  --pm-core-colour-primary-validation-orange-200: #ffcec1;
  --pm-core-colour-primary-validation-orange-300: #ffbeac;
  --pm-core-colour-primary-validation-orange-400: #ff9d82;
  --pm-core-colour-primary-validation-orange-500: #ff7d59;
  --pm-core-colour-primary-validation-orange-600: #ff5c2f;
  --pm-core-colour-primary-validation-orange-700: #cd4a26;
  --pm-core-colour-primary-validation-orange-800: #9b381c;
  --pm-core-colour-primary-validation-orange-900: #6a2513;

  /* ── Colors: Purple ──────────────────────────────────── */

  --pm-core-colour-primary-purple-100: #f6d2f2;
  --pm-core-colour-primary-purple-200: #f2bbec;
  --pm-core-colour-primary-purple-300: #eda4e6;
  --pm-core-colour-primary-purple-400: #e577d9;
  --pm-core-colour-primary-purple-500: #dc49cd;
  --pm-core-colour-primary-purple-600: #d31cc0;
  --pm-core-colour-primary-purple-700: #a9169a;
  --pm-core-colour-primary-purple-800: #7f1173;
  --pm-core-colour-primary-purple-900: #540b4d;

  /* ── Colors: Payment Green ───────────────────────────── */

  --pm-core-colour-primary-payment-green-100: #d3f4ed;
  --pm-core-colour-primary-payment-green-200: #bdeee4;
  --pm-core-colour-primary-payment-green-300: #a7e8db;
  --pm-core-colour-primary-payment-green-400: #7cddca;
  --pm-core-colour-primary-payment-green-500: #50d1b8;
  --pm-core-colour-primary-payment-green-600: #24c6a6;
  --pm-core-colour-primary-payment-green-700: #1d9e85;
  --pm-core-colour-primary-payment-green-800: #167764;
  --pm-core-colour-primary-payment-green-900: #0e4f42;

  /* ── Typography ─────────────────────────────────────────── */

  --pm-core-font-family-hero: 'HongKong', sans-serif;
  --pm-core-font-family-heading: 'Karla', sans-serif;
  --pm-core-font-family-body: 'Roboto', sans-serif;

  --pm-core-font-size-h1: 45px;
  --pm-core-font-size-h2: 31px;
  --pm-core-font-size-h3: 26px;
  --pm-core-font-size-h4: 21px;
  --pm-core-font-size-body-large: 18px;
  --pm-core-font-size-body-small: 16px;
  --pm-core-font-size-caption-large: 14px;
  --pm-core-font-size-caption-small: 12px;
  --pm-core-font-size-tiny: 10px;

  --pm-core-line-height-h1: 56px;
  --pm-core-line-height-h2: 42px;
  --pm-core-line-height-h3: 35px;
  --pm-core-line-height-h4: 31px;
  --pm-core-line-height-body-large: 30px;
  --pm-core-line-height-body-small: 24px;
  --pm-core-line-height-caption-large: 18px;
  --pm-core-line-height-caption-small: 16px;
  --pm-core-line-height-tiny: 16px;

  --pm-core-font-weight-regular: 400;
  --pm-core-font-weight-bold: 700;

  /* ── Spacing ────────────────────────────────────────────── */

  --pm-core-space-0000: 0px;
  --pm-core-space-0050: 2px;
  --pm-core-space-0100: 4px;
  --pm-core-space-0150: 6px;
  --pm-core-space-0200: 8px;
  --pm-core-space-0300: 12px;
  --pm-core-space-0400: 16px;
  --pm-core-space-0500: 20px;
  --pm-core-space-0600: 24px;
  --pm-core-space-0700: 32px;
  --pm-core-space-0800: 40px;
  --pm-core-space-900: 48px;
  --pm-core-space-0900: 48px;
  --pm-core-space-1000: 52px;
  --pm-core-space-1100: 64px;
  --pm-core-space-1200: 72px;
  --pm-core-space-1300: 80px;

  /* ── Size ───────────────────────────────────────────────── */

  --pm-core-size-0000: 0px;
  --pm-core-size-0050: 2px;
  --pm-core-size-0100: 4px;
  --pm-core-size-0150: 6px;
  --pm-core-size-0200: 8px;
  --pm-core-size-0300: 12px;
  --pm-core-size-0400: 16px;
  --pm-core-size-0500: 20px;
  --pm-core-size-0600: 24px;
  --pm-core-size-0700: 32px;
  --pm-core-size-0800: 40px;
  --pm-core-size-900: 48px;
  --pm-core-size-0900: 48px;
  --pm-core-size-1000: 52px;
  --pm-core-size-1100: 64px;
  --pm-core-size-1200: 72px;
  --pm-core-size-1300: 80px;

  /* ── Border Radius ──────────────────────────────────────── */

  --pm-core-border-radius-xxs: 2px;
  --pm-core-border-radius-xs: 4px;
  --pm-core-border-radius-sm: 8px;
  --pm-core-border-radius-md: 12px;
  --pm-core-border-radius-lg: 16px;
  --pm-core-border-radius-xl: 360px;

  /* ── Stroke Weight ──────────────────────────────────────── */

  --pm-core-stroke-weight-xs: 1px;
  --pm-core-stroke-weight-sm: 2px;
  --pm-core-stroke-weight-md: 4px;

}

/* =============================================================
   The Part Market — Semantic Tokens
   Layer 2: Intent-level aliases. These give meaning to core values.
   e.g. --pm-text-colour-link → var(--pm-core-colour-primary-blue-600)

   Use these in component CSS. Never reference core tokens directly.
   Source: tokens/source/semantic.tokens.json
   ============================================================= */

:root {

  /* ── shadow ──────────────────────────────────────────────── */

  --pm-shadow-colour: rgba(34, 35, 40, 0.25);
  --pm-shadow-position-x: 0px;
  --pm-shadow-position-y: 2px;
  --pm-shadow-blur: 4px;
  --pm-shadow-spread: 0px;
  --pm-shadow-default: var(--pm-shadow-position-x) var(--pm-shadow-position-y) var(--pm-shadow-blur) var(--pm-shadow-spread) var(--pm-shadow-colour);

  /* ── color ───────────────────────────────────────────────── */

  --pm-color-neutral: #ffffff;
  --pm-color-disabled: #ffffff;
  --pm-color-fitment: var(--pm-core-colour-primary-validation-green-600);
  --pm-color-no-fitment: var(--pm-core-colour-primary-validation-red-700);
  --pm-color-more-info: var(--pm-core-colour-primary-yellow-600);

  /* ── icon-size ───────────────────────────────────────────── */

  --pm-icon-size-xs: var(--pm-core-size-0300);
  --pm-icon-size-sm: var(--pm-core-size-0400);
  --pm-icon-size-md: var(--pm-core-size-0600);
  --pm-icon-size-lg: var(--pm-core-size-0700);
  --pm-icon-size-xl: var(--pm-core-size-0800);

  /* ── border-color ────────────────────────────────────────── */

  --pm-border-color-default: var(--pm-core-colour-primary-blue-600);
  --pm-border-color-hover: var(--pm-core-colour-base-black);
  --pm-border-color-press: #ffffff;
  --pm-border-color-focus: #ffffff;
  --pm-border-color-disabled: var(--pm-core-colour-neutral-400);
  --pm-border-color-error: var(--pm-core-colour-primary-validation-red-600);

  /* ── background ──────────────────────────────────────────── */

  --pm-background-default: var(--pm-core-colour-base-white);
  --pm-background-faint: var(--pm-core-colour-neutral-100);
  --pm-background-disabled: var(--pm-core-colour-neutral-200);

  /* ── icon-colour ─────────────────────────────────────────── */

  --pm-icon-colour-default: var(--pm-core-colour-base-black);
  --pm-icon-colour-hover: var(--pm-core-colour-primary-blue-600);
  --pm-icon-colour-active: var(--pm-core-colour-primary-yellow-800);
  --pm-icon-colour-error: var(--pm-core-colour-primary-validation-red-600);
  --pm-icon-colour-disabled: var(--pm-core-colour-neutral-600);
  --pm-icon-colour-inverted: #ffffff;

  /* ── text-colour ─────────────────────────────────────────── */

  --pm-text-colour-default: var(--pm-core-colour-base-black);
  --pm-text-colour-link: var(--pm-core-colour-primary-blue-600);
  --pm-text-colour-disabled: var(--pm-core-colour-neutral-600);
  --pm-text-colour-error: var(--pm-core-colour-primary-validation-red-800);
  --pm-text-colour-invert: var(--pm-core-colour-base-white);
  --pm-text-colour-success-payment: var(--pm-core-colour-primary-payment-green-800);
  --pm-text-colour-success-validation: var(--pm-core-colour-primary-validation-green-700);
  --pm-text-colour-warning: var(--pm-core-colour-primary-yellow-800);

  /* ── illustration ────────────────────────────────────────── */

  --pm-illustration-yellow: var(--pm-core-colour-primary-yellow-600);
  --pm-illustration-black: var(--pm-core-colour-base-black);
  --pm-illustration-size: 92px;

  /* ── divider ─────────────────────────────────────────────── */

  --pm-divider-colour-blue: var(--pm-core-colour-primary-highlight-blue-500);
  --pm-divider-colour-grey: var(--pm-core-colour-neutral-200);
  --pm-divider-stroke-weight: var(--pm-core-stroke-weight-xs);

  /* ── motion ──────────────────────────────────────────────── */

  --pm-motion-duration-fast:    100ms;
  --pm-motion-duration-base:    150ms;
  --pm-motion-duration-slow:    250ms;
  --pm-motion-easing-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --pm-motion-easing-enter:     cubic-bezier(0, 0, 0.2, 1);
  --pm-motion-easing-exit:      cubic-bezier(0.4, 0, 1, 1);

}

/* =============================================================
   The Part Market — Component Tokens
   Layer 3: Component-specific values. Reference semantic tokens.
   e.g. --pm-checkbox-border-colour-default → var(--pm-border-color-default)

   Source: tokens/source/component.tokens.json
   ============================================================= */

:root {

  /* ── checkbox ──────────────────────────────────────────────── */

  --pm-checkbox-border-colour--default: var(--pm-border-color-default);
  --pm-checkbox-border-colour--hover: var(--pm-border-color-hover);
  --pm-checkbox-border-colour--disabled: var(--pm-border-color-disabled);
  --pm-checkbox-border-colour--error: var(--pm-border-color-error);
  --pm-checkbox-icon-colour--disabled: var(--pm-icon-colour-disabled);
  --pm-checkbox-icon-colour-default: var(--pm-icon-colour-hover);
  --pm-checkbox-background--disabled: var(--pm-background-disabled);
  --pm-checkbox-lg-radius: var(--pm-core-border-radius-xs);
  --pm-checkbox-lg-height: var(--pm-core-size-0600);
  --pm-checkbox-lg-width: var(--pm-core-size-0600);
  --pm-checkbox-lg-stroke-weight: var(--pm-core-stroke-weight-sm);
  --pm-checkbox-lg-icon-size: var(--pm-icon-size-md);
  --pm-checkbox-sm-radius: var(--pm-core-border-radius-xxs);
  --pm-checkbox-sm-height: var(--pm-core-size-0400);
  --pm-checkbox-sm-width: var(--pm-core-size-0400);
  --pm-checkbox-sm-stroke-weight: var(--pm-core-stroke-weight-xs);
  --pm-checkbox-sm-icon-size: var(--pm-icon-size-sm);

  /* ── radio-btn ─────────────────────────────────────────────── */

  --pm-radio-btn-border-colour--default: var(--pm-border-color-default);
  --pm-radio-btn-border-colour--hover: var(--pm-border-color-hover);
  --pm-radio-btn-border-colour--disabled: var(--pm-border-color-disabled);
  --pm-radio-btn-border-colour--error: var(--pm-border-color-error);
  --pm-radio-btn-icon-colour--disabled: var(--pm-icon-colour-disabled);
  --pm-radio-btn-icon-colour-default: var(--pm-icon-colour-hover);
  --pm-radio-btn-background--disabled: var(--pm-background-disabled);
  --pm-radio-btn-lg-radius: var(--pm-core-border-radius-xl);
  --pm-radio-btn-lg-height: var(--pm-core-size-0600);
  --pm-radio-btn-lg-width: var(--pm-core-size-0600);
  --pm-radio-btn-lg-stroke-weight: var(--pm-core-stroke-weight-sm);
  --pm-radio-btn-lg-dot-size: var(--pm-icon-size-xs);
  --pm-radio-btn-sm-radius: var(--pm-core-border-radius-xl);
  --pm-radio-btn-sm-height: var(--pm-core-size-0400);
  --pm-radio-btn-sm-width: var(--pm-core-size-0400);
  --pm-radio-btn-sm-stroke-weight: var(--pm-core-stroke-weight-xs);
  --pm-radio-btn-sm-dot-size: 8px;

  /* ── toggle ────────────────────────────────────────────────── */

  --pm-toggle-track-width: 53px;
  --pm-toggle-height: var(--pm-core-size-0600);
  --pm-toggle-background-on: var(--pm-core-colour-primary-validation-green-600);
  --pm-toggle-background-off: var(--pm-background-disabled);
  --pm-toggle-background-radius: var(--pm-core-border-radius-xs);
  --pm-toggle-padding: var(--pm-core-space-0100);
  --pm-toggle-gap: var(--pm-core-space-0200);
  --pm-toggle-text-colour--on: var(--pm-text-colour-invert);
  --pm-toggle-text-colour--off: var(--pm-text-colour-default);
  --pm-toggle-text-size: var(--pm-core-font-size-body-small);
  --pm-toggle-switch-colour--on: var(--pm-core-colour-base-white);
  --pm-toggle-switch-colour--off: var(--pm-icon-colour-disabled);
  --pm-toggle-switch-radius: var(--pm-core-border-radius-xxs);
  --pm-toggle-switch-size: var(--pm-icon-size-sm);

  /* ── toast ─────────────────────────────────────────────────── */

  --pm-toast-height: 56px;
  --pm-toast-gap: var(--pm-core-space-0200);
  --pm-toast-stroke-weight: var(--pm-core-stroke-weight-sm);
  --pm-toast-border-radius: var(--pm-core-border-radius-xs);
  --pm-toast-icon-size: var(--pm-icon-size-md);
  --pm-toast-icon-size--close: var(--pm-icon-size-xs);
  --pm-toast-icon-colour: var(--pm-icon-colour-default);
  --pm-toast-padding: var(--pm-core-space-0400);
  --pm-toast-success-background-colour: var(--pm-core-colour-primary-payment-green-100);
  --pm-toast-success-border-colour: var(--pm-core-colour-primary-payment-green-200);
  --pm-toast-success-text-colour: var(--pm-text-colour-success-payment);
  --pm-toast-error-background-colour: var(--pm-core-colour-primary-validation-red-100);
  --pm-toast-error-border-colour: var(--pm-core-colour-primary-validation-red-200);
  --pm-toast-error-text-colour: var(--pm-text-colour-error);
  --pm-toast-warn-background-colour: var(--pm-core-colour-primary-yellow-100);
  --pm-toast-warn-border-colour: var(--pm-core-colour-primary-yellow-200);
  --pm-toast-warn-text-colour: var(--pm-text-colour-warning);

  /* ── tabs ──────────────────────────────────────────────────── */

  --pm-tabs-background-default: var(--pm-background-default);
  --pm-tabs-background-active: var(--pm-core-colour-primary-highlight-blue-100);
  --pm-tabs-background-disabled: var(--pm-background-disabled);
  --pm-tabs-text-colour-body: var(--pm-text-colour-default);
  --pm-tabs-text-colour-subtext: var(--pm-text-colour-disabled);
  --pm-tabs-text-colour-disabled: var(--pm-text-colour-disabled);
  --pm-tabs-text-colour-active: var(--pm-text-colour-link);
  --pm-tabs-border-radius: var(--pm-core-border-radius-xs);
  --pm-tabs-corner-radius: 0px;
  --pm-tabs-stroke-colour-active: var(--pm-core-colour-primary-yellow-600);
  --pm-tabs-stroke-colour-hover: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-tabs-stroke-weight-active: var(--pm-core-stroke-weight-md);
  --pm-tabs-stroke-weight-hover: var(--pm-core-stroke-weight-sm);
  --pm-tabs-icon-colour: var(--pm-icon-colour-default);
  --pm-tabs-icon-size: var(--pm-icon-size-sm);
  --pm-tabs-gap: 0px;
  --pm-tabs-ui-padding-x: var(--pm-core-space-0400);
  --pm-tabs-ui-padding-y: var(--pm-core-space-0200);
  --pm-tabs-ui-height: 46px;
  --pm-tabs-brand-padding-x: var(--pm-core-space-0300);
  --pm-tabs-brand-padding-y: var(--pm-core-space-0200);
  --pm-tabs-brand-height-active: 86px;
  --pm-tabs-brand-height-default: 80px;

  /* ── large-tabs ────────────────────────────────────────────── */

  --pm-large-tabs-height-active:        var(--pm-tabs-brand-height-active, 86px);
  --pm-large-tabs-height-default:       var(--pm-tabs-brand-height-active, 86px); /* All states use 86px — Figma updated */
  --pm-large-tabs-padding-x:            var(--pm-tabs-brand-padding-x, 12px);
  --pm-large-tabs-padding-y:            var(--pm-tabs-brand-padding-y, 8px);
  --pm-large-tabs-gap:                  var(--pm-core-space-0200, 8px);
  --pm-large-tabs-content-gap:          var(--pm-tabs-gap, 0px);
  --pm-large-tabs-info-icon-size:       var(--pm-tabs-icon-size, 16px);
  --pm-large-tabs-label-font-size:      var(--pm-core-font-size-body-small, 16px);
  --pm-large-tabs-label-line-height:    var(--pm-core-line-height-body-small, 24px);
  --pm-large-tabs-subtext-font-size:    var(--pm-core-font-size-tiny, 10px);
  --pm-large-tabs-subtext-line-height:  var(--pm-core-line-height-tiny, 16px);
  --pm-large-tabs-selected-extra-pb:    var(--pm-core-space-0150, 6px);
  --pm-large-tabs-stroke-weight:        var(--pm-tabs-stroke-weight-hover, 2px);

  /* ── chips ─────────────────────────────────────────────────── */

  --pm-chips-stroke-weight: var(--pm-core-stroke-weight-xs);
  --pm-chips-radius: var(--pm-core-border-radius-xs);
  --pm-chips-small-height: 20px;
  --pm-chips-small-padding-x: var(--pm-core-space-0100);
  --pm-chips-small-padding-y: var(--pm-core-space-0050);
  --pm-chips-small-error-background: var(--pm-core-colour-primary-validation-red-100);
  --pm-chips-small-error-stroke-colour: var(--pm-core-colour-primary-validation-red-200);
  --pm-chips-small-error-text-colour: var(--pm-text-colour-error);
  --pm-chips-small-success-background: var(--pm-core-colour-primary-validation-green-100);
  --pm-chips-small-success-stroke-colour: var(--pm-core-colour-primary-validation-green-200);
  --pm-chips-small-success-text-colour: var(--pm-text-colour-success-validation);
  --pm-chips-small-highlight-background: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-chips-small-highlight-text-colour: var(--pm-text-colour-invert);
  --pm-chips-large-height: 24px;
  --pm-chips-large-padding-x: var(--pm-core-space-0150);
  --pm-chips-large-gap: var(--pm-core-space-0150);
  --pm-chips-large-padding-y: var(--pm-core-space-0100);
  --pm-chips-large-icon-size: var(--pm-icon-size-xs);
  --pm-chips-large-attribute-stroke-colour: var(--pm-core-colour-primary-highlight-blue-200);
  --pm-chips-large-attribute-text-colour: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-chips-large-attribute-icon-colour: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-chips-large-filter-background-colour: var(--pm-core-colour-primary-highlight-blue-100);
  --pm-chips-large-filter-stroke-colour: var(--pm-core-colour-primary-highlight-blue-200);
  --pm-chips-large-filter-text-colour: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-chips-large-filter-icon-colour: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-chips-large-best-match-background-colour: var(--pm-core-colour-primary-yellow-100);
  --pm-chips-large-best-match-stroke-colour: var(--pm-core-colour-primary-yellow-200);
  --pm-chips-large-best-match-text-colour: var(--pm-text-colour-warning);
  --pm-chips-large-best-match-icon-colour: var(--pm-icon-colour-active);
  --pm-chips-large-preset-background-colour: var(--pm-core-colour-primary-validation-orange-100);
  --pm-chips-large-preset-stroke-colour: var(--pm-core-colour-primary-validation-orange-200);
  --pm-chips-large-preset-text-colour: var(--pm-core-colour-primary-validation-orange-700);
  --pm-chips-large-preset-icon-colour: var(--pm-core-colour-primary-validation-orange-700);
  --pm-chips-large-status-background-colour: var(--pm-core-colour-primary-validation-green-100);
  --pm-chips-large-status-stroke-colour: var(--pm-core-colour-primary-validation-green-200);
  --pm-chips-large-status-text-colour: var(--pm-text-colour-success-validation);
  --pm-chips-large-status-icon-colour: var(--pm-core-colour-primary-validation-green-700);
  --pm-chips-large-account-type-background-colour: var(--pm-core-colour-primary-purple-100);
  --pm-chips-large-account-type-stroke-colour: var(--pm-core-colour-primary-purple-200);
  --pm-chips-large-account-type-text-colour: var(--pm-core-colour-primary-purple-700);
  --pm-chips-large-account-type-icon-colour: var(--pm-core-colour-primary-purple-700);
  --pm-chips-cart-height: 40px;
  --pm-chips-cart-padding-x: var(--pm-core-space-0300);
  --pm-chips-cart-padding-y: var(--pm-core-space-0200);
  --pm-chips-cart-text-colour: var(--pm-text-colour-default);
  --pm-chips-cart-text-link-colour: var(--pm-text-colour-link);
  --pm-chips-cart-gap: var(--pm-core-space-0300);
  --pm-chips-cart-icon-size: var(--pm-icon-size-md);
  --pm-chips-cart-success-background: var(--pm-core-colour-primary-validation-green-100);
  --pm-chips-cart-success-stroke-colour: var(--pm-core-colour-primary-validation-green-200);
  --pm-chips-cart-error-background: var(--pm-core-colour-primary-validation-red-100);
  --pm-chips-cart-error-stroke-colour: var(--pm-core-colour-primary-validation-red-200);
  --pm-chips-cart-warn-background: var(--pm-core-colour-primary-yellow-100);
  --pm-chips-cart-warn-stroke-colour: var(--pm-core-colour-primary-yellow-200);
  --pm-chips-homepage-height: 40px;
  --pm-chips-homepage-padding-x: var(--pm-core-space-0300);
  --pm-chips-homepage-padding-y: var(--pm-core-space-0200);
  --pm-chips-homepage-text-colour: var(--pm-text-colour-default);
  --pm-chips-homepage-gap: var(--pm-core-space-0300);
  --pm-chips-homepage-icon-size: var(--pm-icon-size-md);
  --pm-chips-homepage-background: var(--pm-core-colour-primary-highlight-blue-100);
  --pm-chips-homepage-stroke-colour: var(--pm-core-colour-primary-highlight-blue-200);
  --pm-chips-homepage-icon-colour: var(--pm-icon-colour-default);

  /* ── indicator ─────────────────────────────────────────────── */

  --pm-indicator-colour-default: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-indicator-colour-message: var(--pm-core-colour-primary-yellow-600);
  --pm-indicator-colour-error: var(--pm-core-colour-primary-validation-red-700);
  --pm-indicator-colour-success: var(--pm-core-colour-primary-payment-green-700);
  --pm-indicator-text-invert: var(--pm-text-colour-invert);
  --pm-indicator-text-colour: var(--pm-text-colour-default);
  --pm-indicator-radius: var(--pm-core-border-radius-xl);
  --pm-indicator-sm-padding-x: var(--pm-core-space-0150);
  --pm-indicator-sm-padding-y: var(--pm-core-space-0100);
  --pm-indicator-sm-size: var(--pm-core-size-0400);
  --pm-indicator-sm-text-size: 7px;
  --pm-indicator-lg-padding-x: 9px;
  --pm-indicator-lg-padding-y: var(--pm-core-size-0100);
  --pm-indicator-lg-size: var(--pm-core-size-0600);
  --pm-indicator-lg-text-size: var(--pm-core-font-size-tiny);

  /* ── text-field ────────────────────────────────────────────── */

  --pm-text-field-background-colour--default: var(--pm-background-default);
  --pm-text-field-background-colour--disabled: var(--pm-background-disabled);
  --pm-text-field-border-colour--hover: var(--pm-border-color-hover);
  --pm-text-field-border-colour--error: var(--pm-border-color-error);
  --pm-text-field-border-colour--default: var(--pm-border-color-disabled);
  --pm-text-field-icon-size: var(--pm-icon-size-md);
  --pm-text-field-icon-size-close: var(--pm-icon-size-xs);
  --pm-text-field-radius: var(--pm-core-border-radius-xs);
  --pm-text-field-icon-colour: var(--pm-icon-colour-default);
  --pm-text-field-stroke-weight: var(--pm-core-stroke-weight-xs);
  --pm-text-field-gap: var(--pm-core-space-0200);
  --pm-text-field-text-colour--default: var(--pm-text-colour-default);
  --pm-text-field-text-colour--muted: var(--pm-text-colour-disabled);
  --pm-text-field-height: var(--pm-core-size-0800);
  --pm-text-field-padding-x: var(--pm-core-space-0300);
  --pm-text-field-padding-y: var(--pm-core-space-0200);
  --pm-text-field-sub-text-icon-size: var(--pm-icon-size-sm);
  --pm-text-field-sub-text-icon-top-gap: var(--pm-core-space-0100);

  /* ── dropdown-select ───────────────────────────────────────── */

  --pm-dropdown-select-background-colour--default: var(--pm-background-default);
  --pm-dropdown-select-background-colour--disabled: var(--pm-background-disabled);
  --pm-dropdown-select-border-colour--hover: var(--pm-border-color-hover);
  --pm-dropdown-select-border-colour--error: var(--pm-border-color-error);
  --pm-dropdown-select-border-colour--default: var(--pm-border-color-disabled);
  --pm-dropdown-select-icon-size-left: var(--pm-icon-size-md);
  --pm-dropdown-select-icon-size-right: var(--pm-icon-size-md);
  --pm-dropdown-select-icon-size-close: var(--pm-icon-size-xs);
  --pm-dropdown-select-radius: var(--pm-core-border-radius-xs);
  --pm-dropdown-select-icon-colour: var(--pm-icon-colour-default);
  --pm-dropdown-select-stroke-weight: var(--pm-core-stroke-weight-xs);
  --pm-dropdown-select-gap: var(--pm-core-space-0200);
  --pm-dropdown-select-text-colour--default: var(--pm-text-colour-default);
  --pm-dropdown-select-text-colour--muted: var(--pm-text-colour-disabled);
  --pm-dropdown-select-padding-x: var(--pm-core-space-0300);
  --pm-dropdown-select-sm-height: var(--pm-core-size-0800);
  --pm-dropdown-select-sm-padding-y: var(--pm-core-space-0200);
  --pm-dropdown-select-lg-height: 54px;
  --pm-dropdown-select-lg-padding-y: var(--pm-core-space-0300);

  /* ── button ────────────────────────────────────────────────── */

  --pm-button-radius: var(--pm-core-border-radius-xs);
  --pm-button-background-colour--disabled: var(--pm-background-disabled);
  --pm-button-icon-colour--disabled: var(--pm-icon-colour-disabled);
  --pm-button-icon-colour--default: var(--pm-icon-colour-default);
  --pm-button-border-colour--disabled: var(--pm-border-color-disabled);
  --pm-button-gap: var(--pm-core-space-0200);
  --pm-button-stroke-weight: var(--pm-core-stroke-weight-sm);
  --pm-button-text-colour--default: var(--pm-text-colour-default);
  --pm-button-text-colour--disabled: var(--pm-text-colour-disabled);
  --pm-button-primary-colour-background--default: var(--pm-core-colour-primary-yellow-600);
  --pm-button-primary-colour-background--hover: var(--pm-core-colour-primary-yellow-500);
  --pm-button-primary-icon-size: var(--pm-icon-size-md);
  --pm-button-primary-border-colour: var(--pm-core-colour-primary-yellow-600);
  --pm-button-primary-sm-height: var(--pm-core-size-0800);
  --pm-button-primary-sm-padding-x: var(--pm-core-space-0200);
  --pm-button-primary-sm-padding-y: var(--pm-core-space-0200);
  --pm-button-primary-lg-height: 54px;
  --pm-button-primary-lg-padding-x: var(--pm-core-space-0300);
  --pm-button-primary-lg-padding-y: var(--pm-core-space-0300);
  --pm-button-payment-colour-background--default: var(--pm-core-colour-primary-payment-green-600);
  --pm-button-payment-colour-background--hover: var(--pm-core-colour-primary-payment-green-400);
  --pm-button-payment-icon-size: var(--pm-icon-size-md);
  --pm-button-payment-border-colour: var(--pm-core-colour-primary-payment-green-600);
  --pm-button-payment-sm-height: var(--pm-core-size-0800);
  --pm-button-payment-sm-padding-x: var(--pm-core-space-0200);
  --pm-button-payment-sm-padding-y: var(--pm-core-space-0200);
  --pm-button-payment-lg-height: 54px;
  --pm-button-payment-lg-padding-x: var(--pm-core-space-0300);
  --pm-button-payment-lg-padding-y: var(--pm-core-space-0300);
  --pm-button-tiny-padding-y: var(--pm-core-space-0100);
  --pm-button-tiny-padding-x: var(--pm-core-space-0100);
  --pm-button-tiny-icon-size: var(--pm-icon-size-sm);
  --pm-button-tiny-icon-colour--invert: var(--pm-icon-colour-inverted);
  --pm-button-tiny-background-colour--default: var(--pm-background-default);
  --pm-button-tiny-background-colour--hover: var(--pm-core-colour-primary-highlight-blue-500);
  --pm-button-tiny-background-colour--highlight: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-button-tiny-background-colour--error: var(--pm-core-colour-primary-validation-red-600);
  --pm-button-tiny-background-colour--error-hover: var(--pm-core-colour-primary-validation-red-400);
  --pm-button-tiny-height: var(--pm-core-size-0600);
  --pm-button-tiny-width: var(--pm-core-size-0600);
  --pm-button-part-id-size: 100px;
  --pm-button-part-id-stroke-weight: var(--pm-core-stroke-weight-md);
  --pm-button-part-id-padding-x: 30px;
  --pm-button-part-id-padding-y: 20px;
  --pm-button-part-id-icon-size: var(--pm-icon-size-xl);
  --pm-button-part-id-background-colour: var(--pm-core-colour-base-white);
  --pm-button-part-id-border-colour: var(--pm-core-colour-primary-yellow-600);
  --pm-button-part-id-radius: var(--pm-core-border-radius-xl);
  --pm-button-part-id-gap: var(--pm-core-space-0100);
  --pm-button-part-id-text-colour: var(--pm-text-colour-default);
  --pm-button-part-id-shadow-colour: var(--pm-shadow-colour);
  --pm-button-part-id-shadow-y: var(--pm-shadow-position-y);
  --pm-button-part-id-shadow-blur: var(--pm-shadow-blur);
  --pm-button-part-id-shadow-x: var(--pm-shadow-position-y);
  --pm-button-icon-btn-colour-background--default: var(--pm-core-colour-primary-payment-green-100);
  --pm-button-icon-btn-colour-background--neutral: var(--pm-core-colour-base-white);
  --pm-button-icon-btn-colour-background--hover: var(--pm-core-colour-primary-payment-green-300);
  --pm-button-icon-btn-icon-size: var(--pm-icon-size-md);
  --pm-button-icon-btn-sm-height: var(--pm-core-size-0800);
  --pm-button-icon-btn-sm-width: var(--pm-core-size-0800);
  --pm-button-icon-btn-sm-padding-x: var(--pm-core-space-0200);
  --pm-button-icon-btn-sm-padding-y: var(--pm-core-space-0200);
  --pm-button-icon-btn-lg-height: var(--pm-core-size-0900);
  --pm-button-icon-btn-lg-width: var(--pm-core-size-0900);
  --pm-button-icon-btn-lg-padding-x: var(--pm-core-space-0300);
  --pm-button-icon-btn-lg-padding-y: var(--pm-core-space-0300);

  /* ── tooltip ───────────────────────────────────────────────── */

  --pm-tooltip-radius: var(--pm-core-border-radius-xs);
  --pm-tooltip-part-info-background-colour: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-tooltip-part-info-gap: var(--pm-core-space-0200);
  --pm-tooltip-part-info-padding-x: var(--pm-core-space-0300);
  --pm-tooltip-part-info-padding-y: var(--pm-core-space-0200);
  --pm-tooltip-part-info-tooltip-tooltip-text-gap: var(--pm-core-space-0050);
  --pm-tooltip-part-info-tooltip-tooltip-text-price-gap: var(--pm-core-space-0200);
  --pm-tooltip-part-info-tooltip-tooltip-text-text-colour: var(--pm-text-colour-invert);
  --pm-tooltip-part-info-tooltip-tooltip-text-max-width: 186px;
  --pm-tooltip-part-info-tooltip-tooltip-text-max-height: 34px;
  --pm-tooltip-part-info-triangle-triangle-width: 7px;
  --pm-tooltip-part-info-triangle-triangle-height: 13px;
  --pm-tooltip-list-padding-x: var(--pm-core-space-0300);
  --pm-tooltip-list-padding-y: var(--pm-core-space-0300);
  --pm-tooltip-list-max-width: 150px;
  --pm-tooltip-list-notify-background-colour: var(--pm-core-colour-primary-yellow-400);
  --pm-tooltip-list-notify-text-colour: var(--pm-text-colour-default);
  --pm-tooltip-list-product-info-background-colour: var(--pm-core-colour-primary-highlight-blue-200);
  --pm-tooltip-list-product-info-text-colour: var(--pm-text-colour-default);
  --pm-tooltip-list-cart-info-background-colour: var(--pm-core-colour-neutral-100);
  --pm-tooltip-list-cart-info-text-colour: var(--pm-text-colour-success-payment);
  --pm-tooltip-list-cart-info-stroke-colour: var(--pm-core-colour-neutral-200);
  --pm-tooltip-list-cart-info-stroke-weight: var(--pm-core-stroke-weight-xs);
  --pm-tooltip-list-status-background-colour: var(--pm-core-colour-neutral-200);
  --pm-tooltip-list-status-text-colour: var(--pm-text-colour-default);
  --pm-tooltip-list-remove-background-colour: var(--pm-core-colour-primary-validation-red-100);
  --pm-tooltip-list-remove-text-colour: var(--pm-text-colour-error);
  --pm-tooltip-list-remove-height: var(--pm-core-size-0800);
  --pm-tooltip-list-remove-width: 61px;
  --pm-tooltip-message-system-padding-x: var(--pm-core-space-0400);
  --pm-tooltip-message-system-padding-y: var(--pm-core-space-0400);
  --pm-tooltip-message-system-max-width: 300px;
  --pm-tooltip-message-system-error-background-colour: var(--pm-core-colour-primary-validation-red-100);
  --pm-tooltip-message-system-error-text-colour: var(--pm-text-colour-error);
  --pm-tooltip-message-system-error-icon-colour: var(--pm-text-colour-error);
  --pm-tooltip-message-system-error-icon-size: var(--pm-icon-size-md);
  --pm-tooltip-message-system-error-gap: var(--pm-core-size-0200);
  --pm-tooltip-message-system-info-background-colour: var(--pm-core-colour-primary-highlight-blue-200);
  --pm-tooltip-message-system-info-text-colour: var(--pm-text-colour-default);
  --pm-tooltip-message-system-neutral-background-colour: var(--pm-core-colour-neutral-200);
  --pm-tooltip-message-system-neutral-text-colour: var(--pm-text-colour-default);
  --pm-tooltip-message-system-info-icon-colour:    var(--pm-text-colour-default);
  --pm-tooltip-message-system-info-icon-size:      var(--pm-tooltip-message-system-error-icon-size);
  --pm-tooltip-message-system-info-gap:            var(--pm-tooltip-message-system-error-gap);
  --pm-tooltip-message-system-neutral-icon-colour: var(--pm-text-colour-default);
  --pm-tooltip-message-system-neutral-icon-size:   var(--pm-tooltip-message-system-error-icon-size);
  --pm-tooltip-message-system-neutral-gap:         var(--pm-tooltip-message-system-error-gap);

  /* ── vehicle-select ────────────────────────────────────────── */

  --pm-vehicle-select-radius: var(--pm-core-border-radius-xs);
  --pm-vehicle-select-searchbox-inputfields-background-colour: var(--pm-background-faint);
  --pm-vehicle-select-searchbox-inputfields-text-colour-default: var(--pm-text-colour-default);
  --pm-vehicle-select-searchbox-inputfields-text-colour-ghost: var(--pm-core-colour-neutral-600);
  --pm-vehicle-select-searchbox-inputfields-icon-colour: var(--pm-icon-colour-default);
  --pm-vehicle-select-searchbox-inputfields-gap: var(--pm-core-space-0200);
  --pm-vehicle-select-searchbox-inputfields-icon-size: var(--pm-icon-size-sm);
  --pm-vehicle-select-searchbox-inputfields-padding-x: var(--pm-core-space-0200);
  --pm-vehicle-select-searchbox-inputfields-padding-y: 23px;
  --pm-vehicle-select-searchbox-inputfields-height--divider: var(--pm-core-size-0800);
  --pm-vehicle-select-searchbox-inputfields-height: 86px;
  --pm-vehicle-select-searchbox-inputfields-width--number: 41px;
  --pm-vehicle-select-searchbox-inputfields-width--text: 113px;
  --pm-vehicle-select-text-block-max-height: 60px;
  --pm-vehicle-select-text-block-width: 245px;
  --pm-vehicle-select-text-block-gap: var(--pm-core-space-0100);
  --pm-vehicle-select-text-block-text-colour-main: var(--pm-text-colour-default);
  --pm-vehicle-select-text-block-text-colour-link: var(--pm-text-colour-link);
  --pm-vehicle-select-text-block-text-colour-subcopy: var(--pm-core-colour-neutral-600);
  --pm-vehicle-select-text-block-sub-copy-height: var(--pm-core-size-0700);
  --pm-vehicle-select-text-block-icon-size: var(--pm-icon-size-sm);
  --pm-vehicle-select-text-block-icon-colour: var(--pm-icon-colour-default);
  --pm-vehicle-select-car-profile-stroke-weight: var(--pm-core-stroke-weight-xs);
  --pm-vehicle-select-car-profile-height: var(--pm-core-size-0800);
  --pm-vehicle-select-car-profile-width: var(--pm-core-size-0800);
  --pm-vehicle-select-car-profile-icon-size: var(--pm-icon-size-md);
  --pm-vehicle-select-car-profile-padding-x: var(--pm-core-space-0200);
  --pm-vehicle-select-car-profile-padding-y: var(--pm-core-space-0200);
  --pm-vehicle-select-car-profile-icon-colour: var(--pm-icon-colour-default);
  --pm-vehicle-select-car-profile-background-colour: var(--pm-background-default);
  --pm-vehicle-select-car-profile-border-colour--default: var(--pm-core-colour-neutral-300);
  --pm-vehicle-select-car-profile-border-colour--fit: var(--pm-color-fitment);
  --pm-vehicle-select-car-profile-border-colour--nofit: var(--pm-color-no-fitment);
  --pm-vehicle-select-car-profile-border-colour--moreinfo: var(--pm-color-more-info);
  --pm-vehicle-select-module-closed-width: 330px;
  --pm-vehicle-select-module-closed-background-colour--default: var(--pm-background-faint);
  --pm-vehicle-select-module-closed-background-colour--active: var(--pm-core-colour-primary-highlight-blue-100);
  --pm-vehicle-select-module-closed-gap: var(--pm-core-space-0300);
  --pm-vehicle-select-module-closed-padding-x: var(--pm-core-space-0400);
  --pm-vehicle-select-module-closed-padding-y: var(--pm-core-space-0400);
  --pm-vehicle-select-module-open-background-colour--default: var(--pm-background-default);
  --pm-vehicle-select-module-open-gap: var(--pm-core-space-0400);
  --pm-vehicle-select-module-open-padding-x: var(--pm-core-space-0400);
  --pm-vehicle-select-module-open-padding-y: var(--pm-core-space-0400);

  /* ── fitment-check-banner ──────────────────────────────────── */
  /* Figma: node 115:1064, frame "This part fits", confirmed via Figma MCP */

  --pm-fitment-check-banner-height:                40px;
  --pm-fitment-check-banner-padding-x:             var(--pm-core-space-0400);
  --pm-fitment-check-banner-padding-y:             var(--pm-core-space-0200);
  --pm-fitment-check-banner-gap:                   var(--pm-core-space-0300);
  --pm-fitment-check-banner-radius:                var(--pm-core-border-radius-xs);
  --pm-fitment-check-banner-stroke-weight:         var(--pm-core-stroke-weight-xs);
  --pm-fitment-check-banner-stroke-colour:         var(--pm-core-colour-neutral-200);
  --pm-fitment-check-banner-icon-size:             var(--pm-icon-size-md);
  --pm-fitment-check-banner-icon-size-sm:          var(--pm-icon-size-sm);
  --pm-fitment-check-banner-text-colour:           var(--pm-text-colour-default);
  --pm-fitment-check-banner-link-colour:           var(--pm-text-colour-link);
  --pm-fitment-check-banner-icon-colour--more:     var(--pm-icon-colour-default);
  --pm-fitment-check-banner-icon-colour--connect:  var(--pm-core-colour-primary-validation-green-800);
  /* Background per state — fitment uses green-200 (#dff9eb) per Figma MCP (not green-100) */
  --pm-fitment-check-banner-background-fitment:    var(--pm-core-colour-primary-validation-green-200);
  --pm-fitment-check-banner-background-no-fitment: var(--pm-core-colour-primary-validation-red-100);
  --pm-fitment-check-banner-background-moreinfo:   var(--pm-core-colour-primary-yellow-100);

  /* ── vehicle-fitment-selector ──────────────────────────────── */
  /* Figma: node 115:1032 "Vehicle fitment selector", confirmed via Figma MCP */

  --pm-vehicle-fitment-selector-width:         var(--pm-vehicle-select-module-closed-width);
  --pm-vehicle-fitment-selector-radius:        var(--pm-vehicle-select-radius);
  --pm-vehicle-fitment-selector-shadow--hover: var(--pm-shadow-default);

  /* ── list-item ─────────────────────────────────────────────── */
  --pm-list-item-icon-colour-default: var(--pm-icon-colour-default);
  --pm-list-item-border-colour: var(--pm-divider-colour-grey);
  --pm-list-item-text-colour--validation: var(--pm-text-colour-success-validation);
  --pm-list-item-icon-colour-disabled: var(--pm-icon-colour-disabled);
  --pm-list-item-radius: var(--pm-core-border-radius-xs);
  --pm-list-item-max-width--price: 69px;
  --pm-list-item-menu-background--disabled: var(--pm-background-disabled);
  --pm-list-item-menu-padding-x--level2: var(--pm-core-space-900);
  --pm-list-item-menu-height: var(--pm-core-size-900);
  --pm-list-item-notify-me-background-section--active: var(--pm-core-colour-primary-highlight-blue-100);
  --pm-list-item-notify-me-background-section--inactive: var(--pm-background-faint);
  --pm-list-item-notify-me-width: 392px;
  --pm-list-item-notify-me-height--section: 76px;
  --pm-list-item-notify-me-height--content: 80px;
  --pm-list-item-notify-me-gap: var(--pm-core-space-0200);
  --pm-list-item-notify-me-gap--text: var(--pm-core-space-0100);
  --pm-list-item-notify-me-padding-x: var(--pm-core-space-0400);
  --pm-list-item-notify-me-icon-size: var(--pm-icon-size-md);
  --pm-list-item-notify-me-padding-y: var(--pm-core-space-0400);
  --pm-list-item-notify-me-button-height: var(--pm-button-tiny-height);
  --pm-list-item-notify-me-button-width:  var(--pm-button-tiny-width);
  --pm-list-item-more-offers-height: 64px;
  --pm-list-item-more-offers-gap--text: var(--pm-core-space-0600);
  --pm-list-item-more-offers-gap--button: var(--pm-core-space-0100);
  --pm-list-item-more-offers-padding-x: var(--pm-core-space-0300);
  --pm-list-item-more-offers-padding-y: var(--pm-core-space-0300);
  --pm-list-item-more-offers-max-width--vendor: 266px;
  --pm-list-item-more-offers-max-width--shipping: 138px;
  --pm-list-item-more-offers-icon-size: var(--pm-icon-size-sm);
  --pm-list-item-more-offers-button-height: var(--pm-button-tiny-height);
  --pm-list-item-more-offers-button-width:  var(--pm-button-tiny-width);
  --pm-list-item-more-offers-background--hover:    var(--pm-list-item-background--hover);
  --pm-list-item-more-offers-text-colour--default: var(--pm-list-item-text-colour--default);
  --pm-list-item-checkout-width: 1166px;
  --pm-list-item-checkout-height: 188px;
  --pm-list-item-checkout-image-height: 64px;
  --pm-list-item-checkout-image-width: 64px;
  --pm-list-item-checkout-gap: var(--pm-core-space-0500);
  --pm-list-item-checkout-gap--internal: var(--pm-core-space-0200);
  --pm-list-item-product-listing-height: 70px;
  --pm-list-item-product-listing-image-height: 100px;
  --pm-list-item-product-listing-image-width: 100px;
  --pm-list-item-product-listing-gap: var(--pm-core-space-0200);
  --pm-list-item-product-listing-gap--with-image: var(--pm-core-space-0400);
  --pm-list-item-product-listing-gap--internal: var(--pm-core-space-0100);
  --pm-list-item-product-listing-max-width--number: var(--pm-core-size-0400);
  --pm-list-item-product-listing-max-width--text: 120px;

  /* ── card ──────────────────────────────────────────────────── */

  --pm-card-background-colour: var(--pm-background-faint);
  --pm-card-text-colour--default: var(--pm-text-colour-default);
  --pm-card-radius: var(--pm-core-border-radius-xs);
  --pm-card-text-colour--link: var(--pm-text-colour-link);
  --pm-card-icon-colour: var(--pm-icon-colour-default);
  --pm-card-text-colour--subtext: var(--pm-text-colour-disabled);
  --pm-card-text-colour--validation: var(--pm-text-colour-success-validation);
  --pm-card-postcode-gap: var(--pm-core-space-0200);
  --pm-card-postcode-icon-size: var(--pm-icon-size-md);
  --pm-card-postcode-width: 255px;
  --pm-card-promo-width: 314px;
  --pm-card-postcode-border-colour: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-card-postcode-stroke-weight: var(--pm-core-stroke-weight-sm);
  --pm-card-postcode-padding-x: var(--pm-core-space-0400);
  --pm-card-postcode-padding-y: var(--pm-core-space-0400);
  --pm-card-postcode-background-colour: var(--pm-background-faint);
  --pm-card-add-to-cart-gap: var(--pm-core-space-0200);
  --pm-card-add-to-cart-padding-x: var(--pm-core-space-0600);
  --pm-card-add-to-cart-padding-y: var(--pm-core-space-0600);
  --pm-card-related-products-padding-x: var(--pm-core-space-0400);
  --pm-card-related-products-padding-y: var(--pm-core-space-0400);
  --pm-card-related-products-image-width: 190px;
  --pm-card-related-products-image-height: 190px;
  --pm-card-related-products-gap: var(--pm-core-space-0400);
  --pm-card-related-products-background-colour: var(--pm-background-default);
  --pm-card-related-products-stroke-colour: var(--pm-divider-colour-grey);
  --pm-card-related-products-stroke-weight: var(--pm-core-stroke-weight-xs);
  --pm-card-related-products-gap--text: var(--pm-core-space-0100);
  --pm-card-related-products-text-box--height: 48px;
  --pm-card-related-products-card-width: 222px;
  --pm-card-related-products-card-height: 382px;
  --pm-card-preview-card-panels-width: 264px;
  --pm-card-preview-card-height: 438px;
  --pm-card-preview-card-image-panel-padding: var(--pm-core-space-0400);
  --pm-card-preview-card-image-panel-height-mobile: 146px;

  /* ── card — point of sale ───────────────────────────────────── */

  --pm-card-pos-regional-info-background: var(--pm-background-default);
  --pm-card-pos-regional-info-padding: var(--pm-core-space-0400);
  --pm-card-pos-regional-info-radius: var(--pm-core-border-radius-xs);

  /* ── footer ────────────────────────────────────────────────── */

  --pm-footer-text-colour--default: var(--pm-text-colour-default);
  --pm-footer-text-colour--link: var(--pm-text-colour-link);
  --pm-footer-text-colour--subtext: var(--pm-text-colour-disabled);
  --pm-footer-icon-size: var(--pm-icon-size-xl);
  --pm-footer-gap: var(--pm-core-space-0600);
  --pm-footer-icon-colour: var(--pm-icon-colour-default);
  --pm-footer-gap-internal: var(--pm-core-space-0400);
  --pm-footer-margin-sm: var(--pm-core-layout-margin-sm);
  --pm-footer-margin-md: var(--pm-core-layout-margin-md);
  --pm-footer-margin-lg: var(--pm-core-layout-margin-lg);

  /* ── modal ─────────────────────────────────────────────────── */

  --pm-modal-background-colour: var(--pm-background-default);
  --pm-modal-gap: var(--pm-core-space-0600);
  --pm-modal-padding-x: var(--pm-core-space-0600);
  --pm-modal-padding-y: var(--pm-core-space-0600);
  --pm-modal-gap--internal: var(--pm-core-space-0400);
  --pm-modal-icon-size--close: var(--pm-icon-size-lg);
  --pm-modal-icon-colour: var(--pm-icon-colour-default);
  --pm-modal-text-colour--default: var(--pm-text-colour-default);
  --pm-modal-text-colour--link: var(--pm-text-colour-link);
  --pm-modal-text-colour--subtext: var(--pm-text-colour-disabled);
  --pm-modal-radius: var(--pm-core-border-radius-xs);
  --pm-modal-continue-with-background-colour: var(--pm-background-faint);
  --pm-modal-width-default: 365px;
  --pm-modal-width-account: 265px;
  --pm-modal-width-medium: 550px;
  --pm-modal-width-large: 795px;
  --pm-modal-overlay-colour: var(--pm-core-colour-base-black, #222328);
  --pm-modal-overlay-opacity: 0.6;

  /* ── list-item ─────────────────────────────────────────────── */

  --pm-list-item-menu-height:              48px;
  --pm-list-item-menu-gap:                 var(--pm-core-space-0200);
  --pm-list-item-menu-padding-y:           var(--pm-core-space-0300);
  --pm-list-item-menu-padding-x--level1:   var(--pm-core-space-0400);
  --pm-list-item-menu-padding-x--level2:   var(--pm-core-space-0900);
  --pm-list-item-menu-icon-size:           var(--pm-icon-size-md);
  --pm-list-item-stroke-weight:            var(--pm-core-stroke-weight-xs);
  --pm-list-item-border-colour:            var(--pm-core-colour-neutral-200);
  --pm-list-item-background--default:      var(--pm-background-default);
  --pm-list-item-background--hover:        var(--pm-core-colour-primary-highlight-blue-100);
  --pm-list-item-background--disabled:     var(--pm-core-colour-neutral-200);
  --pm-list-item-text-colour--link:        var(--pm-text-colour-link);
  --pm-list-item-text-colour--default:     var(--pm-text-colour-default);
  --pm-list-item-text-colour--subtext:     var(--pm-text-colour-disabled);
  --pm-list-item-icon-colour--default:     var(--pm-icon-colour-default);
  --pm-list-item-icon-colour--disabled:    var(--pm-icon-colour-disabled);

  /* ── list-item my-cart ──────────────────────────────────────── */

  --pm-list-item-my-cart-height:        188px;
  --pm-list-item-my-cart-height--undo:  48px;
  --pm-list-item-my-cart-padding-x:     var(--pm-core-space-0400);
  --pm-list-item-my-cart-padding-y:     var(--pm-core-space-0400);
  --pm-list-item-my-cart-gap:           var(--pm-core-space-0200);
  --pm-list-item-my-cart-gap--text:     var(--pm-core-space-0100);
  --pm-list-item-my-cart-image-size:    var(--pm-core-size-0800);

  /* ── list-item title ────────────────────────────────────────── */

  --pm-list-item-title-padding-x:          var(--pm-core-space-0600);
  --pm-list-item-title-padding-y:          var(--pm-core-space-0600);
  --pm-list-item-title-text-colour:        var(--pm-list-item-text-colour--default);
  --pm-list-item-title-background:         var(--pm-list-item-background--default);

  /* ── vendor-badge ──────────────────────────────────────────── */

  --pm-vendor-badge-gap:         var(--pm-core-space-0200);
  --pm-vendor-badge-icon-size:   var(--pm-icon-size-md);
  --pm-vendor-badge-text-colour: var(--pm-text-colour-link);
  --pm-vendor-badge-icon-colour: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-vendor-badge-font-size:   var(--pm-core-font-size-body-small);
  --pm-vendor-badge-font-weight: var(--pm-core-font-weight-bold);
  --pm-vendor-badge-line-height: var(--pm-core-line-height-body-small);

  /* ── rating-bubble ─────────────────────────────────────────── */

  --pm-rating-bubble-size:          12px;
  --pm-rating-bubble-gap:           var(--pm-core-space-0100);    /* 4px — between bubbles in a group */
  --pm-rating-bubble-fill-colour:   var(--pm-core-colour-primary-yellow-600);
  --pm-rating-bubble-empty-colour:  var(--pm-core-colour-neutral-200);
  --pm-rating-bubble-stroke-colour: var(--pm-core-colour-neutral-300);
  --pm-rating-bubble-stroke-weight: var(--pm-core-stroke-weight-xs);

  /* ── rating-display ────────────────────────────────────────── */

  --pm-rating-display-gap:                 var(--pm-core-space-0400); /* 16px — between rating group and count */
  --pm-rating-display-inner-gap:           var(--pm-core-space-0200); /* 8px — between numeric and bubble group */
  --pm-rating-display-numeric-colour:      var(--pm-text-colour-default);
  --pm-rating-display-count-colour:        var(--pm-text-colour-link);
  --pm-rating-display-font-size:           var(--pm-core-font-size-body-small);
  --pm-rating-display-font-weight-numeric: var(--pm-core-font-weight-regular);
  --pm-rating-display-font-weight-count:   var(--pm-core-font-weight-bold);
  --pm-rating-display-line-height:         var(--pm-core-line-height-body-small);

  /* ── categories ────────────────────────────────────────────── */

  --pm-categories-background-colour--default: var(--pm-background-default);
  --pm-categories-height--default: 140px;
  --pm-categories-height--diagrams: 303px;
  --pm-categories-min-width: 260px;
  --pm-categories-max-width: 320px;
  --pm-categories-background-colour--hover: var(--pm-background-faint);
  --pm-categories-text-colour: var(--pm-text-colour-link);
  --pm-categories-padding-y: var(--pm-core-space-0300);
  --pm-categories-padding-x: var(--pm-core-space-0300);
  --pm-categories-radius: var(--pm-core-border-radius-xs);
  --pm-categories-border-colour: var(--pm-core-colour-neutral-200);
  --pm-categories-stroke-weight: var(--pm-core-stroke-weight-sm);
  --pm-categories-illustration-size: var(--pm-illustration-size);
  --pm-categories-background-colour--active: var(--pm-background-faint);
  --pm-categories-outline-colour--focus: var(--pm-core-colour-primary-highlight-blue-600);
  --pm-categories-outline-offset--focus: 2px;

}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.list-item {
  display: list-item;
}

.hidden {
  display: none;
}

.h-\[86px\] {
  height: 86px;
}

.h-\[var\(--tabs\/brand\/height-active\2c 86px\)\] {
  height: var(--tabs/brand/height-active,86px);
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink {
  flex-shrink: 1;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.rounded {
  border-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

.border-\[2px\] {
  border-width: 2px;
}

.border-b-\[4px\] {
  border-bottom-width: 4px;
}

.border-solid {
  border-style: solid;
}

.py-\[8px\] {
  padding-top: 8px;
  padding-bottom: 8px;
}

.font-body {
  font-family: Roboto, sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration-line: underline;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}