/* ########## SPACING ########## */

.spacing-mt-small { margin-top: var(--spacing-sm); }
.spacing-mt-medium { margin-top: var(--spacing-md); }
.spacing-mt-large { margin-top: var(--spacing-lg); }

.spacing-mb-small { margin-bottom: var(--spacing-sm); }
.spacing-mb-medium { margin-bottom: var(--spacing-md); }
.spacing-mb-large { margin-bottom: var(--spacing-lg); }

.spacing-p-small { padding: var(--spacing-sm); }
.spacing-p-medium { padding: var(--spacing-md); }
.spacing-p-large { padding: var(--spacing-lg); }


/* ########## LAYOUT ########## */

/*  OLD  */
.fullwidth-padding {
  padding-top: var(--default-padding-top);
  padding-right: 10em;
  padding-bottom: var(--default-padding-bottom);
  padding-left: 10em;
  box-sizing: border-box;
}

.default-padding {
  padding-top: var(--default-padding-top);
  padding-right: var(--default-padding-right);
  padding-bottom: var(--default-padding-bottom);
  padding-left: var(--default-padding-left);
  box-sizing: border-box;
}

.gcwpadding {
  padding-right: var(--gutter-size-4);
  padding-left: var(--gutter-size-4);
}

.small-padding {
  padding-top: var(--small-padding-top);
  padding-right: var(--small-padding-right);
  padding-bottom: var(--small-padding-bottom);
  padding-left: var(--small-padding-left);
  box-sizing: border-box;
}

.contentwidth {
  width: 100%;
  max-width: var(--site-width);
  margin-left: auto;
  margin-right: auto;
}

.contentwidthhalf {
  max-width: calc(var(--site-width) / 2);
}

.guttercontentwidth {
  padding-left: var(--gutter-size-1);
  padding-right: var(--gutter-size-1);
}

.guttercontentwidthhalf {
  padding-left: var(--gutter-size-2);
  padding-right: var(--gutter-size-2);
}


/*  NEW  */

.layout-container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.layout-flex { display: flex; }

.layout-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-grid { 
  display: grid; 
  gap: var(--spacing-md); 
}
.layout-grid-2 { grid-template-columns: repeat(2, 1fr); }
.layout-grid-3 { grid-template-columns: repeat(3, 1fr); }
.layout-grid-4 { grid-template-columns: repeat(4, 1fr); }


/* ########## UTILITIES ########## */

.utils-hidden { display: none; }
.utils-radius { border-radius: var(--radius-md); }
.utils-shadow { box-shadow: var(--shadow-md); }
.utils-bg-white { background-color: var(--colour-white); }/* ########## BUTTONS ########## */
.button {
  display: inline-flex;
  align-items: centre;
  justify-content: centre;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

/* Primary */
.button--primary {
  background-color: var(--colour-primary);
  color: var(--colour-white);
}

.button--primary:hover {
  background-color: var(--colour-primary-hover);
}

/* Secondary */
.button--secondary {
  background-color: var(--colour-secondary);
  color: var(--colour-black);
}


/* ########## CARDS ########## */

.card {
  background-color: var(--colour-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.card__body {
  padding: var(--spacing-md);
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.card__price {
  color: var(--colour-primary);
  font-weight: var(--font-weight-bold);
}


/* ########## FORMS ########## */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.input {
  padding: var(--spacing-sm);
  border: 1px solid var(--colour-grey-300);
  border-radius: var(--radius-md);
}

.input:focus {
  border-color: var(--colour-primary);
  outline: none;
}:root {

  /* =========================
     COLOURS
  ========================= */

  /* Primary */
  --colour-primary: #0b5cff;
  --colour-primary-hover: #094bcc;
  --colour-primary-light: #e6efff;

  /* Secondary */
  --colour-secondary: #ffb400;
  --colour-secondary-hover: #e6a200;
  --colour-secondary-light: #fff4cc;

  /* Neutral palette */
  --colour-white: #ffffff;
  --colour-black: #000000;

  --colour-grey-100: #f5f5f5;
  --colour-grey-200: #e5e5e5;
  --colour-grey-300: #d4d4d4;
  --colour-grey-400: #a3a3a3;
  --colour-grey-500: #737373;
  --colour-grey-600: #525252;
  --colour-grey-700: #404040;
  --colour-grey-800: #262626;
  --colour-grey-900: #171717;

  /* Semantic colours */
  --colour-success: #16a34a;
  --colour-warning: #f59e0b;
  --colour-error: #dc2626;
  --colour-info: #0284c7;

  /* =========================
     TYPOGRAPHY
  ========================= */

  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
  --font-family-heading: inherit;

  --font-size-xsmall: 0.75rem;   /* 12px */
  --font-size-small: 0.875rem;  /* 14px */
  --font-size-medium: 1rem;      /* 16px */
  --font-size-large: 1.25rem;   /* 20px */
  --font-size-xlarge: 1.5rem;    /* 24px */
  --font-size-xxlarge: 2rem;     /* 32px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-base: 1.5;
  --line-height-heading: 1.2;

  /* =========================
     SPACING (8px system)
  ========================= */

  --spacing-xxsmall: 0.25rem; /* 4px */
  --spacing-xsmall: 0.5rem;   /* 8px */
  --spacing-small: 0.75rem;  /* 12px */
  --spacing-medium: 1rem;     /* 16px */
  --spacing-large: 1.5rem;   /* 24px */
  --spacing-xlarge: 2rem;     /* 32px */
  --spacing-xxlarge: 3rem;    /* 48px */

  /* =========================
     BORDER RADIUS
  ========================= */

  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
  --radius-pill: 999px;

  /* =========================
     SHADOWS
  ========================= */
  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-large: 0 8px 16px rgba(0, 0, 0, 0.12);

  /* =========================
     LAYOUT
  ========================= */
  --container-width: 1400px;
  --container-padding: 1rem;

  /* =========================
     Z-INDEX SCALE
  ========================= */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 2000;

  /* =========================
     TRANSITIONS
  ========================= */
  --transition-fast: 0.2s ease-in-out;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}html {
  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  line-height: 1.5;
  /* font-size: var(--body); */
  font-size: 1em;
  font-weight: normal; 
  /* need to find optimal letter spacing 
  letter-spacing: .018em;  */
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizespeed; 
  text-rendering: optimizeLegibility; 
  -webkit-font-feature-settings: "kern"; 
  -moz-font-feature-settings: "kern"; 
  font-feature-settings: "kern"; 
  -webkit-font-kerning: normal; 
  -moz-font-kerning: normal; 
  font-kerning: normal; 
  -webkit-font-variant-ligatures: common-ligatures; 
  -moz-font-variant-ligatures: common-ligatures; 
  font-variant-ligatures: common-ligatures; 
} 
p {
  margin: 0 0 1.125em 0;
}
.heading-xl {
  font-size: 36px;
  font-size: 2.25rem;
}
.heading-lg {
  font-size: 28px;
  font-size: 1.75rem;
}
.heading-md {
  font-size: 24px;
  font-size: 1.5rem;
}
.heading-sm {
  font-size: 22px;
  font-size: 1.375;
} 
.heading-xsm {
  font-size: 20px;
  font-size: 1.25rem;
}
.heading-xxxl, .heading-xxl, .heading-xl, .heading-lg, .heading-md, .heading-sm, .heading-xsm {
  font-weight: inherit;
}
.heading-overlay {
  color: var(--white);
  font-size: 40px;
  font-size: 2.5rem;
}
.subheading-sm {
  font-size: 28px;
  font-size: 1.75rem;
  font-weight: 300;
  display: block;
}
.subheading-sm {
  font-size: 22px;
  font-size: 1.375rem;
}
.price-preview {
  color: var(--yellow);
  font-size: 36px;
  font-size: 2.25rem;
}
.black {
  font-weight: 900;
}
.bold {
  font-weight: bold;
}
.medium {
  font-weight: 500;
}
.light {
  font-weight: 300;
}
.thin {
  font-weight: 100;
}
.uppercase {
  text-transform: uppercase;
}
.white {
  color: var(--white);
}

/* ====== FONT VARIABLES ====== */
/* converting these to classes, CSS variables in size tabs
 * could make maintaning difficult, like being scattered
 * within different resolution tabs 

  --secondary-font: 'PT Sans', sans-serif;
  --body-sm: 0.8125em;
  --body-md: 1.25em;
  --body-lg: 1.125em; */

  /* ====== FONT VARIABLES ====== */

  h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  margin-bottom: 2rem; /* ~32px */
}

h2 { 
  font-size: clamp(1.5rem, 3vw, 1.65rem);
  font-weight: 600;
  margin-bottom: 1.5rem; /* ~24px */
}

h3 { 
  font-size: clamp(1.25rem, 2.2vw, 1.375rem);
  font-weight: 600;
  margin-bottom: 1.25rem; /* ~20px */
}

h4 { 
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  font-weight: 500;
  margin-bottom: 0.75rem; /* ~12px */
}

.secondary-font {
  font-family: 'PT Sans', sans-serif;
}
.body-sm {
  font-size: 0.8125em;
}
.body-md {
  font-size: 1.25em;
}
.body-lg {
  font-size: 1.125em;
}
/* CSS for V3 */
.bodyheading {
  font-size: 50px;
}
.bodyheading, .subheading.bold, .titlelarge, #nbf_pagecontent_area .title, .price {
  font-weight: 800;
}
.bodyheading, .subheading.bold {
  text-transform: uppercase;
}
.subheading {
  font-size: 32px;
  font-weight: 500;
}
.bodyheading, .subheading, .headline {
  color: %palette01%;
  cursor: default;
}
.subheading.guttercontentwidth {
  text-align: center;
  margin-bottom: 10px;
}
.top_offers .titlelarge {
  margin: 0;
}
.titlelarge {
  font-size: 24px;
  line-height: 36px;
  box-sizing: box-sizing;
}

.title_header {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.2em;
}
.title_header span {
  white-space: nowrap;
}