/*
Define all the required self hosted .woff and .woff2 font family weights here.
Each @font-face rule defines a new font-family/weight combination, and adds that
weight's availability to the font-family when we call the var later.
*/

@font-face {
  font-family: "Rubik";
  src:
    url("/assets/rubik/rubik-light-1065cc78.woff2") format("woff2"),
    url("/assets/rubik/rubik-light-132bf119.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src:
    url("/assets/rubik/rubik-regular-b315a803.woff2") format("woff2"),
    url("/assets/rubik/rubik-regular-45ca8345.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src:
    url("/assets/rubik/rubik-medium-53e05d42.woff2") format("woff2"),
    url("/assets/rubik/rubik-medium-9fdd1979.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src:
    url("/assets/rubik/rubik-bold-1d5aa065.woff2") format("woff2"),
    url("/assets/rubik/rubik-bold-d44160e8.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src:
    url("/assets/bebas_neue/bebas_neue-regular-12a98e88.woff2") format("woff2"),
    url("/assets/bebas_neue/bebas_neue-regular-473ba126.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
Size adjusted local fallback font
=================================
- To minimise CLS when the self-hosted font file loads in
- Use this link to determine the "web-safe" local fallback font
- size adjustments to match whichever google font is in use.
- https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback
- Then assign a custom font-family name,
- And add it as the second font-family name in the `--font-stack`
*/

@font-face {
  font-family: "rubik-fallback-arial";
  size-adjust: 102%;
  ascent-override: 105%;
  src: local("Arial");
}

@font-face {
  font-family: "bebas-neue-fallback-impact";
  size-adjust: 77.6%;
  ascent-override: 105%;
  src: local("Impact");
}

:root {
  /* Standard Colors */
  --black: #000000;
  --white: #ffffff;

  /* Greys */
  --grey-20: #f8f8f8;
  --grey-50: #f5f5f5;
  --grey-100: #ededed;
  --grey-125: #e7e7e7;
  --grey-150: #e0e0e2;
  --grey-175: #e2e2e2;
  --grey-200: #ddd;
  --grey-250: #cfcfd0;
  --grey-300: #ccc;
  --grey-325: #c3c3c3;
  --grey-350: #bcbcbc;
  --grey-400: #a3a3a3;
  --grey-450: #979797;
  --grey-500: #707070;
  --grey-600: #535659;
  --grey-700: #4e4e4e;
  --grey-750: #333333;
  --grey-800: #292929;
  --grey-900: #2b2b2b;
  --grey-950: #222223;
  --grey-1000: #1b1b1b;

  /* COLOUR SCALES */
  --pink-100: #fce8ea;
  --orange-100: #faf0e8;
  --red-400: #E81111;
  --red-500: #cb2027;
  --green-100: #dbf0df;
  --green-300: #a7f192;
  --green-700: #215F23;
  --teal-500: #00C19F;
  --blue-100: #daeaf1;
  --blue-200: #22AAE2;
  --blue-300: #0d76df;
  --blue-500: #1169C3;
  --blue-700: #153486;
  --brown-500: #603B00;
  --yellow-50: #F8F7EC;
  --yellow-300: #f5c445;
  --yellow-350: #FED258;
  --yellow-400: #fccc2f;
  --yellow-500: #FDC715;
  --yellow-700: #EBB604;

  /* BRAND COLOURS */
  --color-primary: var(--yellow-500);
  --color-primary-tint: var(--yellow-400); /* Lighter */
  --color-primary-shade: var(--yellow-700); /* Darker */
  --color-secondary: var(--color-primary);
  --color-secondary-tint: var(--color-primary-tint); /* Lighter */
  --color-secondary-shade: var(--color-primary-shade); /* Darker */
  --color-primary-gradient: linear-gradient(90deg, var(--color-primary) 30%, var(--teal-500) 30%, var(--teal-500) 70%, var(--blue-200) 70%, var(--blue-200) 100%);

  /* BRANDED PRODUCT COLOURS */
  --color-product-green: var(--green-700);
  --color-product-dark-blue: var(--blue-700);
  --color-product-light-blue: var(--blue-500);
  --color-product-brown: var(--brown-500);
  --color-product-white: var(--grey-150);
  --color-product-various: var(--color-primary-gradient);

  /* MESSAGES */
  --color-success: var(--green-700);
  --surface-success: #dff0d8;
  --color-alert: #963b3b;
  --surface-alert: #f2dede;
  --color-error: #c31a1a;
  --color-info: #1c3348;
  --surface-info: #E0F0FB;
  --color-warning: #9a5d00;
  --surface-warning: #fff0e0;

  /* FONT COLOURS */
  --base-font-color: var(--grey-1000); /* Body text */
  --text-primary-color: var(--color-primary); /* First text colour override */
  --text-secondary-color: var(--color-secondary); /* Second text colour override */
  --base-heading-color: var(--base-font-color);
  --base-spacing-unit: 1.25rem; /* Probably not needed anymore */

  /* FONTS */
  --base-font-size: 16;
  /* // Set the font-family declarations ie. 'Open Sans' from @font-face rules to vars
  // And define their font fallback stack by testing web-safe fallback fonts for similar x,y, and kerning values */
  --font-stack: 'Rubik', 'rubik-fallback-arial', trebuchet ms, helvetica, arial, sans-serif;
  --font-stack-bebas: 'Bebas Neue', 'bebas-neue-fallback-impact', impact, arial narrow, arial, sans-serif;

  /* Fonts */
  --font-family-base: var(--font-stack);
  --font-family-heading: var(--font-stack-bebas); /*system-ui;*/
  --font-family-code: monospace;

  --line-height-heading: 1.4;

  /* Typography
  --body-max-width: 65ch; /* ch = characters. Larger text = wider in px */

  /* Lists */
  --list-line-height: 1.6;
  --list-indent-mobile: 1.5rem;
  --list-indent-tablet: 1.5rem;
  --list-indent: var(--list-indent-mobile);
  /* --ol-style-type: decimal; */

  /* FORMS */
  --form-input-border-color: var(--grey-400);
  --form-input-bg-color: var(--white);
  --form-input-height-mobile: 3rem; /* 48px */
  --form-input-height-tablet: 3.25rem; /* 52px */
  --form-input-height: var(--form-input-height-mobile);
  --form-input-text-size: 1rem; /* Should NEVER be smaller than 16px */
  --form-input-text-color: var(--base-font-color);
  --form-input-padding: 0.75rem;
  --form-grid-gap: 2rem;
  --form-grid-gap-small: 1rem;
  --form-label-margin: 0.5rem;
  --form-label-text-color: var(--base-font-color);
  --form-required-icon-color: var(--red-500);

  /* BUTTONS */
  --btn-surface: var(--color-primary);
  --btn-surface-dark: var(--grey-1000);
  --btn-surface-dark-hover: var(--grey-900);
  --btn-surface-secondary: var(--grey-150);
  --btn-surface-secondary-hover: var(--grey-250);
  --btn-text-color: var(--grey-1000);
  --btn-text-color-hover: var(--grey-1000);
  --btn-height-mobile: 3rem; /* 48px */
  --btn-height-tablet: 3.25rem; /* 52px */
  --btn-height: var(--btn-height-mobile);
  --btn-padding-inline-mobile: 1.5rem; /* 24px */
  --btn-padding-inline-tablet: 1.5rem; /* 24px */
  --btn-padding-inline: var(--btn-padding-inline-mobile);
  --btn-font-size-mobile: 1.0625rem; /* 17px */
  --btn-font-size-tablet: 1.125rem; /* 18px */
  --btn-font-size-desktop: 1.1875rem; /* 19px */
  --btn-font-size: var(--btn-font-size-mobile);

  /* SURFACES (PANEL COLOURS MAINLY) */
  --surface-color: var(--white);
  --surface-grey: var(--grey-20);
  --surface-pink: var(--pink-100);
  --surface-blue: var(--blue-100);
  --surface-green: var(--green-100);
  --surface-yellow: var(--color-primary);
  --surface-black: var(--grey-1000);
  --surface-pale-yellow: var(--yellow-50);
  --surface-contrast-text-color: var(--white);

  /* IMAGE PLACEHOLDERS */
  --placeholder-image-bg: var(--grey-150);

  /* CONTENT WIDTHS */
  --content-small: 960px;
  --content-medium: 1170px;
  --content-large: 1440px;
  --content-xl: 1660px;
  --content-width: none;

  /* PAGE TOP/BOTTOM SPACING */
  --page-block-margin-mobile: 1.5rem 2.5rem; /* 24px 40px*/
  --page-block-margin-tablet: 2.25rem 3.75rem; /* 36px 60px*/
  --page-block-margin-desktop: 2.5rem 5.5rem; /* 40px 88px*/
  --page-block-margin: var(--page-block-margin-mobile);

  /* MODULE SPACING */
  --module-spacing-mobile: 2rem; /* 32px*/
  --module-spacing-tablet: 2.75rem; /* 44px*/
  --module-spacing-desktop: 5.5rem; /* 88px*/
  --module-spacing: var(--module-spacing-mobile);

  --module-spacing-sm-mobile: 1.5rem; /* 24px*/
  --module-spacing-sm-tablet: 2.25rem; /* 36px*/
  --module-spacing-sm-desktop: 2.5rem; /* 40px*/
  --module-spacing-sm: var(--module-spacing-sm-mobile);

  --module-spacing-md-desktop: 3.75rem; /* 60px*/


  /* BODY GUTTER */
  --body-gutter-mobile: 1.25rem;
  --body-gutter-tablet: 2rem;
  --body-gutter: var(--body-gutter-mobile);

  --body-gutter-small-mobile: 0.5rem;
  --body-gutter-small-tablet: 1.25rem;
  --body-gutter-small-desktop: var(--body-gutter-tablet);
  --body-gutter-small: var(--body-gutter-small-mobile);

  /* BOXED TEXT */
  --boxed-text-padding-block-mobile: 2rem;
  --boxed-text-padding-block-tablet: 2.25rem;
  --boxed-text-padding-block-desktop: 2.75rem;
  --boxed-text-padding-inline-mobile: 1.5rem;
  --boxed-text-padding-inline-tablet: 2rem;
  --boxed-text-padding-inline-desktop: 2.5rem;
  --boxed-text-padding-inline: var(--boxed-text-padding-inline-mobile);
  --boxed-text-padding-block: var(--boxed-text-padding-block-mobile);

  /* CONTENT MAX WIDTHS */
  --site-content-max-width: 30000px; /* Overridden to 2500px if header-desktop.scss is loaded */
  --body-text-max-width: 850px;

  /* GRID GAPS */
  --grid-gap: 1.25rem; /* 20px */
  --card-grid-gap: var(--grid-gap);
  --grid-gap-large: 2.5rem; /* 40px */

  /* BORDER RADIUS */
  --border-radius-mobile: 0px; /* Make sure to add the same value to `$base-border-radius` inside `sass-vars.scss` */
  --border-radius-tablet: 0px; /* Make sure to add the same value to `$base-border-radius-tablet` inside `sass-vars.scss` */
  --border-radius: var(--border-radius-mobile);

  /* CARDS */
  --card-text-padding-inline: var(--body-gutter);
  --card-text-padding-block: 1.5rem;

  /* GRID CELLS WITH BACKGROUNDS */
  --cell-background-border-radius-mobile: var(--border-radius-mobile);
  --cell-background-border-radius-tablet: var(--border-radius-tablet);
  --cell-background-border-radius-desktop: var(--border-radius-tablet);
  --cell-background-padding-mobile: 1.5rem 1.5rem;
  --cell-background-padding-tablet: 1.5rem 1.5rem;
  --cell-background-padding-desktop: 2rem 2rem;

  --cell-background-padding: var(--cell-background-padding-mobile);
  --cell-background-border-radius: var(--cell-background-border-radius-mobile);


  /* TEXT EXTRA SPACING INSIDE GRID CELLS */
  --grid-cell-text-padding-right-tablet: 1.25rem;
  --grid-cell-text-padding-right-desktop: 2.5rem;
  --grid-cell-text-padding-right: var(--grid-cell-text-padding-right-tablet);


  /* CUSTOM SCROLLBARS */
  --scrollbar-base-color: var(--grey-150);
  --scrollbar-face-color: var(--color-primary);
  --scrollbar-shadow-color: var(--grey-500);
  --slider-scrollbar-height: 0.75rem;


  /* Z-INDEXING */
  --z-index-image-caption: 1;
  --z-index-figcaption: 1;
  --z-index-grid-cell-icon-overlay: 1;
  --z-index-glide-arrow: 2;
  --z-index-glide-bullets: 2;
  --z-index-subnav-toggle: 10;
  --z-index-banner-messages: 13;
  --z-index-floating-action-button: 14;
  --z-index-floating-ui: 15;
  --z-index-in-page-nav: 16;
  --z-index-alert: 17;
  --z-index-sticky-header: 18;
  --z-index-desktop-subnav: 19;
  --z-index-search-bar: 20;
  --z-index-product-page-buttons: 21;
  --z-index-mobile-sticky-footer: 21;
  --z-index-nav-slide-in-ovelay: 22;
  --z-index-nav-slide-in: 23;
  --z-index-transparent-header: 24;
  --z-index-modal-window: 30;
  --z-index-modal-close-btn: 40;
  --z-index-modal-pulsing-loader: 50;
  --z-index-toast-notifications: 50;
  --z-index-skip-content: 100;


  /* HEADER */
  --header-background: var(--color-primary);
  --header-lower-height-mobile: 4.75rem; /* 76px;*/
  --header-lower-height-tablet: 5.75rem; /* 92px;*/
  --header-lower-height-desktop: 7.5rem; /* 120px;*/
  --header-lower-height: var(--header-lower-height-mobile);

  --header-lower-height-sticky-mobile: 4.25rem; /* 68px;*/
  --header-lower-height-sticky-tablet: 5rem; /* 92px;*/
  --header-lower-height-sticky: var(--header-lower-height-sticky-mobile);

  --header-upper-height: 0px;

  --header-height: calc(var(--header-lower-height) + var(--header-upper-height));

  --header-logo-width: 8.75rem; /* 140px;*/
  --header-slide-in-nav-offset-mobile: 0px;
  --header-slide-in-nav-offset-tablet: 0px;
  --header-slide-in-nav-offset: var(--header-slide-in-nav-offset-mobile);

  --sliding-nav-width: 30.5rem; /* 488px;*/
  --nav-item-padding-block: 0.5rem;
  --subnav-max-height-desktop: calc(90vh - var(--header-lower-height) - var(--header-upper-height));
  --subnav-bg-color-desktop: var(--grey-1000);

  /* BOX-SHADOWS */
  --box-shadow: 0px 5px 7px -4px  rgba(0,0,0,0.3);
  --box-shadow-header: 0px 5px 7px 0 rgba(0,0,0,0.1);
  --box-shadow-header-mobile: 0px 2px 6px 0 rgba(0,0,0,0.1);
  --box-shadow-slide-in-nav: 1px 11px 7px 3px rgba(0,0,0,0.15);
  --box-shadow-cards: 0 2px 10px 0px rgba(0,0,0,0.15);
  --box-shadow-modal: 0 0 10px rgba(0,0,0,0.15);

  /* Animations */
  --hover-transition-short-rotate: transform .2s ease-in-out;

  /* SCROLL PADDING */
  --page-scroll-padding-top: calc(var(--header-lower-height-sticky) + 2rem); /* Add offset to mitigate sticky header */

  /* TEXT ELEMENTS */
  --snippet-line-distance-mobile: 1.25rem;
  --snippet-line-distance-tablet: 1.5rem;
  --snippet-line-distance-desktop: 1.5rem;
  --snippet-line-distance: var(--snippet-line-distance-mobile);

  /* MODULE TITLES */
  --module-title-spacing-bottom-mobile: 1.25rem;
  --module-title-spacing-bottom-tablet: 2rem;
  --module-title-spacing-bottom-desktop: 2.25rem;
  --module-title-spacing-bottom: var(--module-title-spacing-bottom-mobile);

  /* FONT SIZES FOR EACH BP - DEFINED IN UNITLESS PX VALUES */
  --fs-h1-mobile: 40;
  --fs-h1-tablet: 50;
  --fs-h1-desktop: 60;

  --fs-h2-mobile: 33;
  --fs-h2-tablet: 38;
  --fs-h2-desktop: 42;

  --fs-h3-mobile: 27;
  --fs-h3-tablet: 32;
  --fs-h3-desktop: 35;

  --fs-h4-mobile: 23;
  --fs-h4-tablet: 26;
  --fs-h4-desktop: 29;

  --fs-h5-mobile: 21;
  --fs-h5-tablet: 24;
  --fs-h5-desktop: 26;

  --fs-h6-mobile: 19;
  --fs-h6-tablet: 22;
  --fs-h6-desktop: 24;

  --fs-p-mobile: 15;
  --fs-p-tablet: 16;
  --fs-p-desktop: 17;

  --fs-intro-mobile: 18;
  --fs-intro-tablet: 21;
  --fs-intro-desktop: 22;

  --fs-intro-large-mobile: 24;
  --fs-intro-large-tablet: 30;
  --fs-intro-large-desktop: 35;

  --fs-snippet-mobile: 19;
  --fs-snippet-tablet: 22;
  --fs-snippet-desktop: 24;

  --fs-blockquote-mobile: 19;
  --fs-blockquote-tablet: 22;
  --fs-blockquote-desktop: 24;


  /* FONT SIZES (IN UNITLESS PX VALUES) */
  /* These variables are used to re-define the `--text-font-size` variable on an element which is part of the selectors list in `CSS calc() math for fonts` in `typescale.scss`. We can apply this variable once and have it apply across all BPs.

  Use these vars with `--text-font-size:` inside the selector to define a new font size, eg. `p{--text-font-size: var(-fs-h2-px)}`, and all the other margin & line-height values will be calculated from it, across BPs. */

  --fs-p-px: var(--fs-p-mobile);
  --fs-h2-px: var(--fs-h2-mobile);
  --fs-h3-px: var(--fs-h3-mobile);
  --fs-h4-px: var(--fs-h4-mobile);
  --fs-h5-px: var(--fs-h5-mobile);
  --fs-h6-px: var(--fs-h6-mobile);


  /* FONT SIZES (IN REMS) */
  /* Sometimes we need to style certain element's which are not part of the selectors list in `CSS calc() math for fonts` in `typescale.scss` to match the same font size as e.g a H2 across BPs. We use these vars to do that.

  Because the element's these vars will be added to are not part of the selectors list in `CSS calc() math for fonts` in `typescale.scss`, we need to define them in rems, so that they can be used in the `font-size` property of the element's CSS e.g `font-size: var(--fs-h2)`.
  Not being part of the selectors list means the line-height and margin values will not be calculated from the font size, but we can still use these vars to set the font size of the element to match e.g. a H2 across BPs.

  NB: WE DON'T USE THESE VARS WHEN SETTING THE ACTUAL ELEMENT'S FONT SIZES, instead we group changes across BPs in `Typescale.scss` */
  --fs-p: calc((var(--fs-p-mobile) / var(--base-font-size)) * 1rem);
  --fs-h1: calc((var(--fs-h1-mobile) / var(--base-font-size)) * 1rem);
  --fs-h2: calc((var(--fs-h2-mobile) / var(--base-font-size)) * 1rem);
  --fs-h3: calc((var(--fs-h3-mobile) / var(--base-font-size)) * 1rem);
  --fs-h4: calc((var(--fs-h4-mobile) / var(--base-font-size)) * 1rem);
  --fs-h5: calc((var(--fs-h5-mobile) / var(--base-font-size)) * 1rem);


  @media (min-width: 768px) {
    /* MODULE TITLES */
    --module-title-spacing-bottom: var(--module-title-spacing-bottom-tablet);

    /* FONT SIZES (IN UNITLESS PX VALUES) */
    --fs-p-px: var(--fs-p-tablet);
    --fs-h2-px: var(--fs-h2-tablet);
    --fs-h3-px: var(--fs-h3-tablet);
    --fs-h4-px: var(--fs-h4-tablet);
    --fs-h5-px: var(--fs-h5-tablet);
    --fs-h6-px: var(--fs-h6-tablet);

    /* FONT SIZES (IN REMS) */
    --fs-p: calc((var(--fs-p-tablet) / var(--base-font-size)) * 1rem);
    --fs-h1: calc((var(--fs-h1-tablet) / var(--base-font-size)) * 1rem);
    --fs-h2: calc((var(--fs-h2-tablet) / var(--base-font-size)) * 1rem);
    --fs-h3: calc((var(--fs-h3-tablet) / var(--base-font-size)) * 1rem);
    --fs-h4: calc((var(--fs-h4-tablet) / var(--base-font-size)) * 1rem);
    --fs-h5: calc((var(--fs-h5-tablet) / var(--base-font-size)) * 1rem);

    /* TEXT ELEMENTS */
    --snippet-line-distance: var(--snippet-line-distance-tablet);

    /* SPACING */
    --page-block-margin: var(--page-block-margin-tablet);
    --module-spacing: var(--module-spacing-tablet);
    --module-spacing-sm: var(--module-spacing-sm-tablet);
    --body-gutter: var(--body-gutter-tablet);
    --body-gutter-small: var(--body-gutter-small-tablet);

    /* BOXED TEXT */
    --boxed-text-padding-block: var(--boxed-text-padding-block-tablet);
    --boxed-text-padding-inline: var(--boxed-text-padding-inline-tablet);

    /* BORDER RADIUS */
    --border-radius: var(--border-radius-tablet);

    /* LISTS */
    --list-indent: var(--list-indent-tablet);

    /* BUTTONS */
    --btn-height: var(--btn-height-tablet);
    --btn-padding-inline: var(--btn-padding-inline-tablet);
    --btn-font-size: var(--btn-font-size-tablet);

    /* FORMS */
    --form-input-height: var(--form-input-height-tablet);

    /* HEADER */
    --header-lower-height: var(--header-lower-height-tablet);
    --header-lower-height-sticky: var(--header-lower-height-sticky-tablet);
    --header-slide-in-nav-offset: var(--header-slide-in-nav-offset-tablet);
    --header-logo-width: 9.375rem; /* 150px;*/

    /* CARDS */
    --card-text-padding-inline: 1rem;
    --card-text-padding-block: 2rem 1.25rem;

    /* GRID CELLS WITH BACKGROUNDS */
    --cell-background-padding: var(--cell-background-padding-tablet);
    --cell-background-border-radius: var(--cell-background-border-radius-tablet);
  }

  @media (min-width: 960px) {
    /* MODULE TITLES */
    --module-title-spacing-bottom: var(--module-title-spacing-bottom-desktop);

    /* FONT SIZES (IN UNITLESS PX VALUES) */
    --fs-p-px: var(--fs-p-desktop);
    --fs-h2-px: var(--fs-h2-desktop);
    --fs-h3-px: var(--fs-h3-desktop);
    --fs-h4-px: var(--fs-h4-desktop);
    --fs-h5-px: var(--fs-h5-desktop);
    --fs-h6-px: var(--fs-h6-desktop);

    /* FONT SIZES (IN REMS) */
    --fs-p: calc((var(--fs-p-desktop) / var(--base-font-size)) * 1rem);
    --fs-h1: calc((var(--fs-h1-desktop) / var(--base-font-size)) * 1rem);
    --fs-h2: calc((var(--fs-h2-desktop) / var(--base-font-size)) * 1rem);
    --fs-h3: calc((var(--fs-h3-desktop) / var(--base-font-size)) * 1rem);
    --fs-h4: calc((var(--fs-h4-desktop) / var(--base-font-size)) * 1rem);
    --fs-h5: calc((var(--fs-h5-desktop) / var(--base-font-size)) * 1rem);

    /* TEXT ELEMENTS */
    --snippet-line-distance: var(--snippet-line-distance-desktop);

     /* SPACING */
    --body-gutter-small: var(--body-gutter-small-desktop);

    /* BUTTONS */
    --btn-font-size: var(--btn-font-size-desktop);

    /* GRID GAPS */
    --card-grid-gap: 2.25rem;

    /* CARDS */
    --card-text-padding-inline: 1.25rem;

    /* GRID CELLS WITH BACKGROUNDS */
    --cell-background-padding: var(--cell-background-padding-desktop);
    --cell-background-border-radius: var(--cell-background-border-radius-desktop);
  }

  @media (min-width: 1080px) {
    /* SPACING */
    --page-block-margin: var(--page-block-margin-desktop);

    /* BOXED TEXT */
    --boxed-text-padding-block: var(--boxed-text-padding-block-desktop);
    --boxed-text-padding-inline: var(--boxed-text-padding-inline-desktop);

    /* HEADER */
    --header-logo-width: 11.25rem; /* 180px;*/
    --header-lower-height: var(--header-lower-height-desktop);

    /* TEXT EXTRA SPACING INSIDE GRID CELLS */
    --grid-cell-text-padding-right: var(--grid-cell-text-padding-right-desktop);
  }

  @media (min-width: 1200px) {
    /* SPACING */
    --module-spacing: var(--module-spacing-desktop);
    --module-spacing-sm: var(--module-spacing-sm-desktop);
  }
}