/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* stylelint-disable no-empty-source */

:root,
.dropin-design {
  /* ===========================================
    COLORS: PRIMITIVES — BARCO BLUE
    Primary = (Barco Blue 100)
    =========================================== */
  --color-blue-135: #003759;  /*color style guide*/
  --color-blue-130: #004B7B;
  --color-blue-120: #053b70;
  --color-blue-110: #064786;
  --color-blue-100: #004976;   /*color style guide*/
  --color-blue-80:  #336D91;   /*color style guide*/
  --color-blue-60:  #6692AD;   /*color style guide*/
  --color-blue-50:  #88accf;
  --color-blue-40:  #99B6C8;   /*color style guide*/
  --color-blue-20:  #C9DBE5;  /*color style guide*/
  --color-blue-10:  #d2e0ed; 

  /* ===========================================
    COLORS: PRIMITIVES — BARCO BROWN
    =========================================== */
  --color-brown-135: #261f1a;
  --color-brown-100: #322923;
  --color-brown-80:  #5b544f;
  --color-brown-60:  #847f7b;
  --color-brown-40:  #ada9a7;
  --color-brown-20:  #d6d4d3;

  /* ===========================================
    COLORS: PRIMITIVES — BARCO GREEN (Secondary)
    =========================================== */
  --color-green-135: #3b4425;
  --color-green-100: #4e5b31;
  --color-green-80:  #717c5a;
  --color-green-60:  #959d83;
  --color-green-40:  #b8bdad;
  --color-green-20:  #dcded6;

  /* ===========================================
    COLORS: PRIMITIVES — BARCO ORANGE (Accent)
    =========================================== */
  --color-orange-135: #844529;
  --color-orange-100: #b05c37;
  --color-orange-80:  #c07d5f;
  --color-orange-60:  #d09d87;
  --color-orange-40:  #dfbeaf;
  --color-orange-20:  #efded7;

  /* ===========================================
    COLORS: PRIMITIVES — NEUTRAL / GRAY
    =========================================== */
  --color-white:      #fff;
  --color-gray-body:  #3A3F41;
  --color-gray-150:   #3c3f41;
  --color-gray-135:   #5a5f62;
  --color-gray-100:   #787e82;
  --color-gray-80:    #93989b;
  --color-gray-60:    #aeb2b4;
  --color-gray-40:    #c9cbcd;
  --color-gray-20:    #e4e5e6;
  --color-gray-10:    #f5f5f5;   /*not in style guide*/

  /* ===========================================
    COLORS: PRIMITIVES — SURFACE TINTS
    =========================================== */
  --color-tint-cream: #f4edd0;

  /* ===========================================
    COLORS: PRIMITIVES — STATUS
    =========================================== */
  --color-success-500: #4cb648;
  --color-success-200: #dff3dc;
  --color-success-800: #0f7f1f;
  --color-warning-500: #d89b2b;
  --color-warning-200: #f2dfb0;
  --color-warning-800: #b86f00;
  --color-error-500:   #961615;
  --color-error-200:   #f2d8cf;
  --color-error-600:   #810f19;
  --color-error-700:   #6c091d;
  --color-error-800:   #58061c;
  --color-info-500:    var(--color-blue-80);
  --color-info-200:    #d8f0f8;
  --color-info-800:    #005b96;
  --color-kirby-by: #38281C;

  /* ===========================================
    COLORS: BRAND FOUNDATION
    All semantic tokens now reference primitives only — no hex values below this line.
    =========================================== */
  --color-primary:          var(--color-blue-100);
  --color-primary-hover:    var(--color-blue-80);
  --color-primary-active:   var(--color-blue-135);
  --color-primary-light:    var(--color-blue-40);
  --color-primary-contrast: var(--color-white);
  --color-secondary:        var(--color-green-100);
  --color-secondary-hover:  var(--color-green-135);
  --color-secondary-light:  var(--color-green-40);
  --color-accent:           var(--color-orange-100);
  --color-accent-hover:     var(--color-orange-135);
  --color-background:       var(--color-white);
  --color-surface:          var(--color-white);
  --color-surface-alt:      var(--color-gray-10);
  --color-border:           var(--color-gray-40);
  --color-border-strong:    var(--color-gray-80);
  --color-text:             var(--color-gray-150);
  --color-text-secondary:   var(--color-gray-135);
  --color-text-muted:       var(--color-gray-100);
  --color-text-inverse:     var(--color-white);
  --color-success:          var(--color-success-500);
  --color-warning:          var(--color-warning-500);
  --color-error:            var(--color-error-500);
  --color-body:              var(--color-gray-body);

  /* ===========================================
    COLORS: STOREFRONT MAPPING
    =========================================== */
  --color-brand-300: var(--color-blue-60);
  --color-brand-500: var(--color-primary);
  --color-brand-600: var(--color-primary-hover);
  --color-brand-700: var(--color-primary-active);
  --color-neutral-50:  var(--color-white);
  --color-neutral-100: var(--color-white);
  --color-neutral-200: var(--color-gray-10);
  --color-neutral-300: var(--color-gray-20);
  --color-neutral-400: var(--color-gray-40);
  --color-neutral-500: var(--color-gray-80);
  --color-neutral-600: var(--color-gray-60);
  --color-neutral-700: var(--color-text-muted);
  --color-neutral-800: var(--color-text-secondary);
  --color-neutral-900: var(--color-text);
  --color-positive-200: var(--color-success-200);
  --color-positive-500: var(--color-success);
  --color-positive-800: var(--color-success-800);
  --color-informational-200: var(--color-info-200);
  --color-informational-500: var(--color-info-500);
  --color-informational-800: var(--color-info-800);
  --color-alert-200: var(--color-error-200);
  --color-alert-500: var(--color-error);
  --color-alert-800: var(--color-error-800);
  --color-button-active:                var(--color-primary-active);
  --color-button-focus:                 var(--color-blue-10);
  --color-button-hover:                 var(--color-primary-hover);
  --color-button-secondary-bg:          transparent;
  --color-button-secondary-border:      var(--color-primary);
  --color-button-secondary-hover-bg:    #e1eaf3;
  --color-button-secondary-hover-border: var(--color-primary-hover);
  --color-button-secondary-text:        var(--color-primary);
  --color-button-tertiary-bg:           transparent;
  --color-button-tertiary-hover-bg:     color-mix(in srgb, var(--color-primary) 6%, transparent);
  --color-button-tertiary-text:         var(--color-primary);
  --color-action-button-active: var(--color-primary-contrast);
  --color-action-button-hover:  var(--color-primary-light);
  --color-focus-ring:        var(--color-blue-50);
  --color-focus-ring-strong: var(--color-blue-100);
  --color-field-background:       var(--color-white);
  --color-field-background-hover: var(--color-gray-10);
  --color-field-border:           var(--color-gray-40);
  --color-field-label:            var(--color-gray-body);
  --color-field-placeholder:      var(--color-text-muted);
  --color-section-subtle:   var(--color-gray-10);
  --color-section-emphasis: var(--color-tint-cream);
  --color-surface-card:        var(--color-white);
  --color-surface-card-muted:  var(--color-gray-10);
  --color-surface-header:      var(--color-white);
  --color-surface-footer:      var(--color-gray-150);
  --color-surface-footer-text: var(--color-gray-10);
  --color-surface-gradient: linear-gradient(180deg, var(--color-primary-contrast) 4.87%, var(--color-gray-20) 33.7%);
  --color-surface-gradient-gray-10: linear-gradient(0deg, var(--color-gray-20) 87.28%, var(--color-primary-contrast) 100%);
  --color-surface-gradient-grayscale: linear-gradient(181deg, var(--color-primary-contrast) 0.73%, var(--color-gray-20) 52.74%);
  --color-table-header:  var(--color-gray-20);
  --color-table-row-alt: var(--color-gray-10);
  --color-banner-info-bg:        var(--color-info-200);
  --color-banner-info-border:    var(--color-secondary);
  --color-banner-success-bg:     var(--color-success-200);
  --color-banner-success-border: var(--color-success-800);
  --color-banner-warning-bg:     var(--color-warning-200);
  --color-banner-warning-border: var(--color-warning-800);
  --color-banner-error-bg:       var(--color-error-200);
  --color-banner-error-border:   var(--color-orange-135);
  --color-link:         var(--color-primary);
  --color-link-hover:   var(--color-primary-hover);
  --color-link-visited: var(--color-gray-100);
  --color-link-on-dark: var(--color-blue-20);
  --color-link-subtle:  var(--color-blue-80);
  --color-overlay:       color-mix(in srgb, var(--color-gray-150) 72%, transparent);
  --color-overlay-brand: color-mix(in srgb, var(--color-primary) 78%, transparent);
  --color-overlay-soft:  color-mix(in srgb, var(--color-gray-150) 64%, transparent);
  --color-opacity-16:    color-mix(in srgb, var(--color-white) 16%, transparent);
  --color-opacity-24:    color-mix(in srgb, var(--color-white) 24%, transparent);
  --color-scrim-light:   color-mix(in srgb, var(--color-white) 88%, transparent);
  --color-scrim-brand:   color-mix(in srgb, var(--color-primary) 10%, transparent);

  /* ===========================================
    SPACING: LAYOUT / GRID
    =========================================== */
  --grid-1-columns: 4;
  --grid-1-margins: 0;
  --grid-1-gutters: 1rem;     /* 16px */
  --grid-2-columns: 12;
  --grid-2-margins: 0;
  --grid-2-gutters: 1rem;     /* 16px */
  --grid-3-columns: 12;
  --grid-3-margins: 0;
  --grid-3-gutters: 1.5rem;   /* 24px */
  --grid-4-columns: 12;
  --grid-4-margins: 0;
  --grid-4-gutters: 1.5rem;   /* 24px */
  --grid-5-columns: 12;
  --grid-5-margins: 0;
  --grid-5-gutters: 1.5rem;   /* 24px */

  /* ===========================================
    SPACING: SCALE
    =========================================== */
  --spacing-3xs: 0.0625rem;             /* 1px */
  --spacing-2xs: 0.125rem;              /* 2px */
  --spacing-xs: 0.25rem;                /* 4px */
  --spacing-s: 0.5rem;                  /* 8px */
  --spacing-xsmall: var(--spacing-s);   /* 8px */
  --spacing-2s: 0.625rem;               /* 10px */
  --spacing-2ss: 0.75rem;               /* 12px */
  --spacing-2sm: 0.8125rem;             /* 13px */
  --spacing-small: 1rem;                /* 16px */
  --spacing-m: var(--spacing-small);    /* 16px */
  --spacing-ml: 1.25rem;                /* 20px */
  --spacing-medium: 1.5rem;             /* 24px */
  --spacing-l: var(--spacing-medium);   /* 24px */
  --spacing-2l: 1.875rem;               /* 30px */
  --spacing-big: 2rem;                  /* 32px */
  --spacing-xl: var(--spacing-big);     /* 32px */
  --spacing-36: 2.25rem;                /* 36px */      
  --spacing-xbig: 2.5rem;               /* 40px */    
  --spacing-2xl: 3rem;                  /* 48px */
  --spacing-xxbig: var(--spacing-2xl);  /* 48px */
  --spacing-3xl: 3.75rem;               /* 60px */
  --spacing-large: 4rem;                /* 64px */
  --spacing-xlarge: 4.5rem;             /* 72px */
  --spacing-xxlarge: 5rem;              /* 80px */
  --spacing-huge: 5.5rem;               /* 88px */
  --spacing-xhuge: 6rem;                /* 96px */
  --spacing-xxhuge: 12.5rem;            /* 200px */
  --spacing-xxsmall: var(--spacing-xs); /* 4px */

  /* Line height */
  --line-height-xs: 0.875rem;  /* 14px */
  --line-height-s: 1.125rem;   /* 18px */
  --line-height-m: 1.25rem;    /* 20px */
  --line-height-l: 1.5rem;     /* 24px */
  --line-height-2l: 1.75rem;   /* 28px */
  --line-height-xl: 2rem;      /* 32px */
  --line-height-xxl: 2.25rem;  /* 36px */
  --line-height-xxxl: 2.5rem;  /* 40px */
  --line-height-xxxxl: 3rem;   /* 48px */
  --line-height-h1: 3.5rem;    /* 56px */

   /* Letter spacing  */
  --letter-spacing-0: 0;



  /* ===========================================
    TYPOGRAPHY: FAMILIES / SCALE
    =========================================== */
  --type-base-font-family: "basic-sans", "Aptos", "Segoe UI", arial, helvetica, sans-serif;
  --type-fixed-font-family: adobe-clean, "Roboto Mono", menlo, consolas, "Liberation Mono", monospace, system-ui, sans-serif;
  --font-family-base: "basic-sans", "Aptos", "Segoe UI", arial, helvetica, sans-serif;
  --font-family-heading: "Roboto Serif", georgia, "Times New Roman", times, serif;
  --font-family-serif: var(--font-family-heading);
  --font-family-ui: "basic-sans", "Aptos", "Segoe UI", arial, helvetica, sans-serif;
  
  /* --font-size-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);   
  --font-size-s: clamp(0.8rem, 0.75rem + 0.3vw, 0.875rem);      
  --font-size-m: clamp(0.9rem, 0.85rem + 0.4vw, 1rem);         
  --font-size-l: clamp(1rem, 0.95rem + 0.5vw, 1.125rem);       
  --font-size-xl: clamp(1.1rem, 1rem + 0.6vw, 1.25rem);        
  --font-size-xxl: clamp(1.3rem, 1.15rem + 0.8vw, 1.5rem);     
  --font-size-xxxl: clamp(1.5rem, 1.35rem + 1vw, 1.75rem);     
  --font-size-xxxxl: clamp(1.7rem, 1.55rem + 1.2vw, 2rem);      
  --font-size-h3: clamp(1.9rem, 1.7rem + 1.2vw, 2.25rem);       
  --font-size-h2: clamp(2.1rem, 1.9rem + 1.4vw, 2.5rem);        
  --font-size-h1: clamp(2.5rem, 2.2rem + 1.8vw, 3rem);          */

  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-s: 0.875rem;     /* 14px */
  --font-size-m: 1rem;         /* 16px */
  --font-size-l: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.375rem;   /* 22px */
  --font-size-xxl: 1.5rem;     /* 24px */
  --font-size-xxxl: 1.75rem;   /* 28px */
  --font-size-xxxxl: 2rem;     /* 32px */
  --font-size-h3: 2.25rem;     /* 36px */
  --font-size-h2: 2.5rem;      /* 40px */
  --font-size-h1: 3rem;        /* 48px */
  --font-family-roboto: "Roboto Serif", serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-style-normal: normal;
  --font-style-italic: italic;
  --font-family-sans: basic-sans, BasicSansFallback, Arial, Helvetica, sans-serif;
  --font-family-roboto: "Roboto Serif", serif;


  /* Font sans variables */
  /* Body - regular  */
  --font-sans-body-regular: var(--font-weight-regular) var(--font-style-normal) var(--font-size-m)/var(--line-height-l) var(--font-family-sans);       /* 400 normal 16px/24px */
  --font-sans-body-semibold: var(--font-weight-semibold) var(--font-style-normal) var(--font-size-m)/var(--line-height-l) var(--font-family-sans);     /* 600 normal 16px/24px */
  --font-sans-body-bold: var(--font-weight-bold) var(--font-style-normal) var(--font-size-m)/var(--line-height-l) var(--font-family-sans);     /* 700 normal 16px/24px */
  --font-sans-body-small: var(--font-weight-regular) var(--font-style-normal) var(--font-size-s)/var(--line-height-s) var(--font-family-sans);         /* 400 normal 14px/18px */
  --font-sans-body-small-bold: var(--font-weight-bold) var(--font-style-normal) var(--font-size-s)/var(--line-height-s) var(--font-family-sans);         /* 700 normal 14px/18px */

  /* Subtitles regular  */
  --font-sans-subtitle-mk: var(--font-weight-regular) var(--font-style-normal) var(--font-size-m)/var(--line-height-l) var(--font-family-sans);      /* 400 normal 16px/24px */
  --font-sans-subtitle-label: var(--font-weight-regular) var(--font-style-normal) var(--font-size-m)/var(--line-height-s) var(--font-family-sans);     /* 400 normal 16px/18px */
  --font-sans-subtitle-captid: var(--font-weight-regular) var(--font-style-normal) var(--font-size-l)/var(--line-height-m) var(--font-family-sans);        /* 400 normal 18px/20px */
  --font-sans-subtitle-captid-bold: var(--font-weight-bold) var(--font-style-normal) var(--font-size-l)/var(--line-height-m) var(--font-family-sans);        /* 700 normal 18px/20px */
  --font-sans-subtitle-lg: var(--font-weight-regular) var(--font-style-normal) var(--font-size-xl)/var(--line-height-l) var(--font-family-sans);       /* 400 normal 20px/24px */
  --font-sans-subtitle-linon: var(--font-weight-regular) var(--font-style-normal) var(--font-size-xs)/var(--line-height-xs) var(--font-family-sans); /* 400 normal 12px/14px */

  /* Subtitles bold  */
  --font-sans-subtitle-lg-bold: var(--font-weight-bold) var(--font-style-normal) var(--font-size-xl)/var(--line-height-l) var(--font-family-sans);       /* 700 normal 20px/24px */

  /* Roboto Serif - Headings*/
  --font-serif-h1-regular: var(--font-weight-regular) var(--font-style-normal) var(--font-size-h1)/var(--line-height-h1) var(--font-family-serif);   /* 400 normal 48px/56px */
  --font-serif-h1-light: var(--font-weight-light) var(--font-style-normal) var(--font-size-h1)/var(--line-height-h1) var(--font-family-serif);       /* 300 normal 48px/56px */
  --font-serif-h2-regular: var(--font-weight-regular) var(--font-style-normal) var(--font-size-h2)/var(--line-height-xxxxl) var(--font-family-serif); /* 400 normal 40px/48px */
  --font-serif-h2-regular-light: var(--font-weight-light) var(--font-style-normal) var(--font-size-h2)/var(--line-height-xxxxl) var(--font-family-serif); /* 300 normal 40px/48px */
  --font-serif-h3-regular: var(--font-weight-regular) var(--font-style-normal) var(--font-size-h3)/var(--line-height-xxxl) var(--font-family-serif); /* 400 normal 36px/40px */
  --font-serif-h3-regular-light: var(--font-weight-light) var(--font-style-normal) var(--font-size-h3)/var(--line-height-xxxl) var(--font-family-serif); /* 300 normal 36px/40px */
  --font-serif-h4-regular: var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxxxl)/var(--line-height-xxl) var(--font-family-serif); /* 400 normal 32px/36px */
  --font-serif-h4-regular-light: var(--font-weight-light) var(--font-style-normal) var(--font-size-xxxxl)/var(--line-height-xxl) var(--font-family-serif); /* 300 normal 32px/36px */
  --font-serif-h5-regular: var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxxl)/var(--line-height-xl) var(--font-family-serif);  /* 400 normal 28px/32px */
  --font-serif-h5-regular-light: var(--font-weight-light) var(--font-style-normal) var(--font-size-xxxl)/var(--line-height-xl) var(--font-family-serif);  /* 300 normal 28px/32px */
  --font-serif-h6-regular: var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxl)/var(--line-height-xl) var(--font-family-serif);   /* 400 normal 24px/32px */
  --font-serif-h6-regular-light: var(--font-weight-light) var(--font-style-normal) var(--font-size-xxl)/var(--line-height-xl) var(--font-family-serif);   /* 300 normal 24px/32px */
  --font-roboto-subtitle-lg: var(--font-weight-regular) var(--font-style-normal) var(--font-size-xl)/var(--line-height-l) var(--font-family-roboto);       /* 400 normal 20px/24px */
  --font-roboto-subtitle-lg-light: var(--font-weight-light) var(--font-style-normal) var(--font-size-xl)/var(--line-height-l) var(--font-family-roboto);       /* 300 normal 20px/24px */
  

   /* Roboto Serif - Sacled Headings for mobile and tablet*/
  --type-h1-m:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxxxl)/var(--line-height-xxxl) var(--font-family-serif); /* 400 normal 32px/40px */
  --type-h1-m-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-xxxxl)/var(--line-height-xxxl) var(--font-family-serif); /* 300 normal 32px/40px */
  --type-h2-m:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxxl)/var(--line-height-xxl) var(--font-family-serif); /* 400 normal 28px/36px */
  --type-h2-m-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-xxxl)/var(--line-height-xxl) var(--font-family-serif); /* 300 normal 28px/36px */
  --type-h3-m:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxl)/var(--line-height-xl) var(--font-family-serif); /* 400 normal 24px/32px */
  --type-h3-m-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-xxl)/var(--line-height-xl) var(--font-family-serif); /* 300 normal 24px/32px */
  --type-h4-m:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-2xl)/var(--line-height-2l) var(--font-family-serif); /* 400 normal 22px/28px */
  --type-h4-m-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-2xl)/var(--line-height-2l) var(--font-family-serif); /* 300 normal 22px/28px */
  --type-h5-m:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-xl)/var(--line-height-2l) var(--font-family-serif); /* 400 normal 20px/28px */
  --type-h5-m-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-xl)/var(--line-height-2l) var(--font-family-serif); /* 300 normal 20px/28px */
  --type-h6-m:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-l)/var(--line-height-l) var(--font-family-serif); /* 400 normal 18px/24px */
  --type-h6-m-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-l)/var(--line-height-l) var(--font-family-serif); /* 300 normal 18px/24px */

  --type-h1-t:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-h2)/var(--line-height-xxxxl) var(--font-family-serif); /* 400 normal 40px/48px */
  --type-h1-t-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-h2)/var(--line-height-xxxxl) var(--font-family-serif); /* 300 normal 40px/48px */
  --type-h2-t:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-h3)/var(--line-height-xxxl) var(--font-family-serif); /* 400 normal 36px/40px */
  --type-h2-t-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-h3)/var(--line-height-xxxl) var(--font-family-serif); /* 300 normal 36px/40px */
  --type-h3-t:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxxxl)/var(--line-height-xxl) var(--font-family-serif); /* 400 normal 32px/36px */
  --type-h3-t-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-xxxxl)/var(--line-height-xxl) var(--font-family-serif); /* 300 normal 32px/36px */
  --type-h4-t:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxxl)/var(--line-height-xl) var(--font-family-serif); /* 400 normal 28px/32px */
  --type-h4-t-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-xxxl)/var(--line-height-xl) var(--font-family-serif); /* 300 normal 28px/32px */
  --type-h5-t:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-xxl)/var(--line-height-xl) var(--font-family-serif); /* 400 normal 24px/32px */
  --type-h5-t-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-xxl)/var(--line-height-xl) var(--font-family-serif); /* 300 normal 24px/32px */
  --type-h6-t:       var(--font-weight-regular) var(--font-style-normal) var(--font-size-xl)/var(--line-height-2l) var(--font-family-serif); /* 400 normal 20px/28px */
  --type-h6-t-light: var(--font-weight-light)   var(--font-style-normal) var(--font-size-xl)/var(--line-height-2l) var(--font-family-serif); /* 300 normal 20px/28px */

  /* ===========================================
    TYPOGRAPHY: SEMANTIC TOKENS
    =========================================== */

  --type-display-1-font: normal normal 400 3rem/1.1667 var(--font-family-heading);
  --type-display-1-letter-spacing: 0;
  --type-display-2-font: normal normal 400 2.5rem/1.2 var(--font-family-heading);
  --type-display-2-letter-spacing: 0;
  --type-display-3-font: normal normal 400 2rem/1.125 var(--font-family-heading);
  --type-display-3-letter-spacing: 0;
  --type-headline-1-font: normal normal 400 1.5rem/1.3333 var(--font-family-heading);
  --type-headline-1-letter-spacing: 0;
  --type-headline-2-default-font: normal normal 400 1.125rem/1.7778 var(--font-family-heading);
  --type-headline-2-default-letter-spacing: 0;
  --type-headline-2-strong-font: normal normal 400 1.125rem/1.7778 var(--font-family-heading);
  --type-headline-2-strong-letter-spacing: 0;
  --type-body-1-default-font: normal normal 400 1rem/1.5 var(--font-family-base);
  --type-body-1-default-letter-spacing: 0;
  --type-body-1-strong-font: normal normal 600 1rem/1.5 var(--font-family-base);
  --type-body-1-strong-letter-spacing: 0;
  --type-body-1-emphasized-font: normal normal 600 1rem/1.5 var(--font-family-base);
  --type-body-1-emphasized-letter-spacing: 0;
  --type-body-2-default-font: normal normal 400 0.875rem/1.2857 var(--font-family-base);
  --type-body-2-default-letter-spacing: 0;
  --type-body-2-strong-font: normal normal 600 0.875rem/1.2857 var(--font-family-base);
  --type-body-2-strong-letter-spacing: 0;
  --type-body-2-emphasized-font: normal normal 600 0.875rem/1.2857 var(--font-family-base);
  --type-body-2-emphasized-letter-spacing: 0;
  --type-button-1-font: normal normal 600 1rem/1.5 var(--font-family-ui);
  --type-button-1-letter-spacing: 0;
  --type-button-2-font: normal normal 600 0.875rem/1.2857 var(--font-family-ui);
  --type-button-2-letter-spacing: 0;
  --type-details-caption-1-font: normal normal 400 0.75rem/1.1667 var(--font-family-base);
  --type-details-caption-1-letter-spacing: 0;
  --type-details-caption-2-font: normal normal 400 0.75rem/1.1667 var(--font-family-base);
  --type-details-caption-2-letter-spacing: 0;
  --type-details-overline-font: normal normal 600 0.75rem/1.1667 var(--font-family-ui);
  --type-details-overline-letter-spacing: 0;

  /* ===========================================
    COMPONENT ALIASES: SHAPE / ELEVATION
    =========================================== */
  --shape-border-radius-1: 0.25rem;
  --shape-border-radius-2: 0.5rem;
  --shape-border-radius-3: 12.5rem;
  --shape-border-width-1: 0.0625rem;
  --shape-border-width-2: 0.0938rem;
  --shape-border-width-3: 0.125rem;
  --shape-border-width-4: 0.25rem;
  --shape-shadow-1: 0 0 1rem 0 rgb(0 0 0 / 16%);
  --shape-shadow-2: 0 0.125rem 1rem 0 rgb(0 0 0 / 16%);
  --shape-shadow-3: 0 0.125rem 0.1875rem 0 rgb(0 0 0 / 16%);
  --shape-icon-stroke-1: 0.0625rem;
  --shape-icon-stroke-2: 0.0938rem;
  --shape-icon-stroke-3: 0.125rem;
  --shape-icon-stroke-4: 0.25rem;
  --shape-border-color: rgb(255 255 255 / 20%);

  /* ===========================================
    COMPONENT ALIASES: RADIUS / SHADOW / MOTION
    =========================================== */
  --radius-xs:  0.25rem;   /* 4px  */
  --radius-2xs: 0.375rem;  /* 6px  */
  --radius-s:   0.5rem;    /* 8px  */
  --radius-m:   1rem;      /* 16px */
  --radius-sm:  1.25rem;  /* 20px */
  --radius-ml:  1.5rem;    /* 24px */
  --radius-l:   2rem;      /* 32px */
  --radius-xl:  3rem;      /* 48px */
  --radius-2xl: 4rem;      /* 64px */
  --radius-3xl: 6.25rem;   /* 100px */
  --radius-4xl: 9.375rem;  /* 150px */
  --radius-5xl: 12.5rem;   /* 200px */
  --radius-pill: 62.5rem;  /* full pill/circle */
  --shadow-xs: 0 0.0625rem 0.125rem rgb(0 0 0 / 6%);
  --shadow-s: 0 0.125rem 0.375rem rgb(0 0 0 / 8%);
  --shadow-m: 0 0.375rem 1rem rgb(0 0 0 / 12%);
  --shadow-l: 0 0.75rem 2rem rgb(0 0 0 / 16%);
  --shadow-focus: 0 0 0 0.25rem rgb(8 83 156 / 18%);
  --transition-fast: 150ms ease-out;
  --transition-medium: 250ms ease-out;
  --transition-slow: 400ms ease-out;
  --background-color: var(--color-background);
  --nav-height: 6.4rem;
  --site-max-width: 90rem; /* ✅ 1440px */;
  --site-container-padding: 1.5rem;
  --site-container-gap: 0.625rem;
  --header-shell-padding-block: 0;
  --header-shell-padding-inline-start: 1.5rem;
  --header-shell-padding-inline-end: 1.5rem;
  --header-shell-padding-bottom: 2rem;
  --header-shell-gap: 2.5rem;
  --header-shell-radius: 1rem;
  --header-shell-min-height: 5.5rem;
  --header-shell-max-width: 57.5rem;
  --header-shell-top-padding: 0.9375rem;
  --header-shell-bottom-gap: 2.125rem;
  --header-search-max-width: 26.5rem;
  --header-search-offset-bottom: 1.625rem;
  --header-top-row-height: 3.125rem;
  --header-top-row-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  --header-top-row-gap: 1.25rem;
  --header-hero-max-width: 31rem;
  --header-contact-gap: 0.875rem;
  --header-contact-label-gap: 0.375rem;
  --header-browse-gap: 0.875rem;
  --header-brand-width: 7.375rem;
  --header-brand-offset-y: -0.1875rem;
  --header-tools-offset-y: 0.0625rem;
  --header-nav-items-offset-y: 0.0625rem;
  --header-submenu-trigger-offset-y: -0.125rem;
  --header-search-icon-offset-y: -0.0625rem;
  --header-cart-icon-offset-y: 0;
  --header-icon-button-size: 2.75rem;
  --header-hero-gap: 0.625rem;
  --header-hero-offset-top: 0.125rem;
  --header-hero-description-max-width: 29rem;
  --header-search-offset-top: -0.375rem;
  --header-search-input-height: 2.875rem;
  --header-search-input-padding-inline-start: 1.125rem;
  --header-search-input-padding-inline-end: 2.75rem;
  --content-max-width: var(--site-max-width);
  --content-max-readable: 48rem;
  --tap-target-min: 2.625rem;

  /* ===========================================
    COMPONENT TOKENS: BUTTON
    =========================================== */
  --button-primary-bg:              var(--color-primary);
  --button-primary-bg-hover:        var(--color-primary-hover);
  --button-primary-bg-active:       var(--color-primary-active);
  --button-primary-text:            var(--color-text-inverse);
  --button-secondary-bg:            var(--color-button-secondary-bg);
  --button-secondary-border:        var(--color-button-secondary-border);
  --button-secondary-text:          var(--color-button-secondary-text);
  --button-secondary-bg-hover:      var(--color-button-secondary-hover-bg);
  --button-secondary-border-hover:  var(--color-button-secondary-hover-border);
  --button-secondary-text-hover:    var(--color-brand-600);
  --button-tertiary-bg:             var(--color-button-tertiary-bg);
  --button-tertiary-text:           var(--color-button-tertiary-text);
  --button-tertiary-bg-hover:       var(--color-button-tertiary-hover-bg);
  --button-tertiary-text-hover:     var(--color-brand-600);
  --button-disabled-bg:             var(--color-neutral-300);
  --button-disabled-border:         var(--color-neutral-300);
  --button-disabled-text:           var(--color-neutral-700);
  --button-radius:                  var(--radius-3xl);
  --button-focus-shadow:            var(--shadow-focus);

  /* ===========================================
    COMPONENT TOKENS: CARD
    =========================================== */
  --card-bg:        var(--color-surface-card);
  --card-bg-muted:  var(--color-surface-card-muted);
  --card-border:    var(--color-neutral-300);
  --card-radius:    var(--radius-m);
  --card-shadow:    var(--shadow-s);

  /* ===========================================
    COMPONENT TOKENS: INPUT
    =========================================== */
  --input-bg:            var(--color-field-background);
  --input-bg-hover:      var(--color-field-background-hover);
  --input-border:        var(--color-field-border);
  --input-border-hover:  var(--color-primary);
  --input-border-focus:  var(--color-informational-500);
  --input-text:          var(--color-neutral-900);
  --input-label:         var(--color-field-label);
  --input-placeholder:   var(--color-field-placeholder);
  --input-radius:        var(--radius-s);
  --input-shadow:        var(--shadow-xs);
  --input-focus-ring:    var(--color-focus-ring);
  --input-disabled-bg:   var(--color-neutral-200);
  --input-disabled-text: var(--color-neutral-700);

  /* ===========================================
    COMPONENT TOKENS: LINK
    =========================================== */
  --link-color:         var(--color-link);
  --link-hover-color:   var(--color-link-hover);
  --link-visited-color: var(--color-link-visited);
  --link-on-dark-color: var(--color-link-on-dark);
  --link-focus-color:   var(--color-brand-700);



  /* Brand button colors — referenced via var() everywhere below */
  --button-brand-color: var(--color-blue-100);
  --button-clear-bg: var(--color-gray-20);

  /* Size scale (re-using existing spacing tokens, all in rem) */
  --btn-height-lg: var(--spacing-2xl);  /* 3rem   = 48px */
  --btn-height-md: var(--spacing-xbig); /* 2.5rem = 40px */
  --btn-height-sm: var(--spacing-big);  /* 2rem   = 32px */
  --btn-padding-y: 0.75rem;             /* 12px */
  --btn-padding-x: var(--spacing-medium); /* 1.5rem = 24px */
  --btn-gap: var(--site-container-gap); /* 0.625rem = 10px */

}



html, body {
  min-height: 100%;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font: var(--font-sans-body-regular);
  letter-spacing: var(--type-body-1-default-letter-spacing);
  margin: 0;
  color: var(--color-neutral-900);
  background-color: var(--background-color);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

body:not(.appear) {
  display: none;
}

header.header-wrapper {
  grid-row: 1;
  height: var(--nav-height);
  background-color: var(--color-surface-header);
}

main {
  grid-row: 2;
  width: 100%;
}

footer {
  grid-row: 3;
  background-color: var(--color-surface-footer);
  color: var(--color-surface-footer-text);
  margin: 0 auto;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1.25;
  color: var(--color-text);
  scroll-margin-top: calc(var(--nav-height) + 1rem);
}

h1 {
  font: var(--font-serif-h1-regular);
  letter-spacing: var(--letter-spacing-0);
}

h2 {
  font: var(--font-serif-h2-regular);
  letter-spacing: var(--letter-spacing-0);
}

h3 {
  font: var(--font-serif-h3-regular);
  letter-spacing: var(--letter-spacing-0);
}

h4 {
  font: var(--font-serif-h4-regular);
  letter-spacing: var(--letter-spacing-0);
}

h5 {
  font: var(--font-serif-h5-regular);
  letter-spacing: var(--letter-spacing-0);
}

h6 {
  font: var(--font-serif-h6-regular);
  letter-spacing: var(--letter-spacing-0);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

p:not(.yotpo-reviews-item),
li:not(.yotpo-reviews-item),
dd:not(.yotpo-reviews-item),
dt:not(.yotpo-reviews-item) {
  max-width: var(--content-max-readable);
}

.page-cms .cms-grid-gallery-row p
{
    max-width:100%;
}

ul,
ol {
  padding-left: 1.5rem;
}

li + li:not(.yotpo-smart-topics-item.smart-topic-wrapper) {
  margin-top: 0;
}
header.header-wrapper {
    /* min-height: 25.8125rem; */
    height: 100% !important;
    padding: var(--spacing-medium)   var(--spacing-medium)  var(--spacing-2xl)  var(--spacing-medium);
    max-width: var(--site-max-width);
    width: 100%;
    margin: 0 auto;
}
main .section.eds-cms-page-container {
  --content-max-readable: 100%;
  --para-max-width: var(--content-max-readable);
  
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-small);
  max-width: var(--site-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-ml) var(--spacing-medium) 0;
}
.section:not(.barco-dynamic-block-container) .default-content-wrapper h1 +  p {
  max-width: var(--para-max-width);
  margin: 0;
}
.section:not(.barco-dynamic-block-container) .default-content-wrapper h1 +  p > picture {
  display: flex;
}
.section:not(.barco-dynamic-block-container) .default-content-wrapper {
  max-width: var(--content-max-width);
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: var(--spacing-ml) var(--spacing-medium) 0; */
}
.default-content-container .default-content-wrapper h2,
.section:not(.barco-dynamic-block-container) .default-content-wrapper h1 {
  text-align: center;
}
.barco-generic-embed-container .generic-embed-form.block .barco-generic-embed__wrapper {
  height: auto;
  margin: auto 0;
  background: var(--color-gray-10);
  padding: var(--spacing-medium);
    
}
.barco-generic-embed-container .generic-embed-form.block .barco-generic-embed__wrapper iframe {
  color: var(--input-label);
  font: var(--font-sans-body-regular);
  letter-spacing: var(--letter-spacing-0);
}
/* No default outline on generic focus (avoids mouse-click ring) */
a:focus,
button:focus {
  outline: none !important;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-primary)) !important;
  outline-offset: 2px;
}


.page-homepage main .barco-pagebuilder-content-container {
    margin-bottom: 0 !important;
}

/* PLP: Category Image & Description */
.page-plp .barco-plp-additional-details-container .default-content-wrapper {
  display: grid !important;
  grid-template-columns: 25rem 1fr;
  gap: var(--spacing-medium);
  align-items: start;
  padding-bottom: var(--spacing-medium);
  padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
}

.page-plp .barco-plp-additional-details-container .default-content-wrapper p:has(picture) {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
}

.page-plp .barco-plp-additional-details-container .default-content-wrapper p:has(picture) img {
  width: 100%;
  aspect-ratio: 4/3;
  align-self: stretch;
  border-radius: 1rem;
}

.page-plp img[alt="Image Not Available"],
.page-plp img[data-image-type="placeholder image"] {
  object-fit: scale-down;
}

.page-plp .barco-plp-additional-details-container .default-content-wrapper h1 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  text-align: left !important;
  margin-bottom: var(--spacing-small);
  color: var(--color-primary);
  font:var(--font-serif-h1-regular);
}

.page-plp .barco-plp-additional-details-container .default-content-wrapper h1 + p {
  grid-column: 2;
  align-self: start;
  max-width: 100%;
  margin-top: 0;
  color: #3C3F41;
  font: var(--font-sans-body-regular);
  font-weight: 300;
  letter-spacing: -0.02rem;
}

.page-cms main .pagebuilder-column .pagebuilder-mobile-only,
.page-cms main .pagebuilder-column .pagebuilder-mobile-hidden {
    display: none;
}
.page-cms .bp-selector-guide td img {
  width: 100%;
}
.page-cms .full-width-text-content {
  width: 100%;
}
.section.heading-left-container .heading-left-wrapper,
.page-cms main .three-one-page-layout-container,
.page-cms .barco-dynamic-block-container:has(.three-one-page-layout),
.page-cms main .barco-cms-page-container {
  --content-max-readable: 100%;
  --para-max-width: var(--content-max-readable);

  max-width: var(--site-max-width);
  width: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}
.page-cms main .three-one-page-layout-container {
  padding: 0 var(--spacing-medium);
}
.page-cms .barco-cms-page-container:has(.blue-box-heading-section) .barco-cms-page-wrapper {
  padding: var(--spacing-medium);
  background: var(--color-primary);
  display: block;
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.page-cms .barco-cms-page-container:has(.blue-box-heading-section) * {
  background: transparent;
  color: var(--color-white);
}
.page-cms .barco-cms-page-container:has(.blue-box-heading-section) *:last-child {
  margin-bottom: 0;
}
.page-cms .even-odd-image-text-inner-section img,
.page-cms .equal-two-column-image-text-section img,
.page-cms .image-full-width img {
  width: 100%;
}
@media (min-width: 48rem) {
  .page-plp .product-list-page-container {
    padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) !important;
  }
  .page-cms main .pagebuilder-column .pagebuilder-mobile-hidden {
    display: block;
  }
}



.page-plp .barco-plp-additional-details-container
  .default-content-wrapper p:has(picture) {
  grid-column: 1;
  align-self: start;
  margin: 0;
}

/* To fix place for PLP cat image and text */
/*.page-plp .barco-plp-additional-details-container .default-content-wrapper {
  display: grid;
  grid-template-columns: 25rem 1fr;
  align-items: start;
}

.page-plp .barco-plp-additional-details-container > .default-content-wrapper:first-child:has(img) {
  min-height: 330.4px;
}

.page-plp .barco-plp-additional-details-container .default-content-wrapper p:has(picture) {
  grid-column: 1;
}

.page-plp .barco-plp-additional-details-container .default-content-wrapper :not(p:has(picture)) {
  grid-column: 2;
}*/

/* PLP hero container */
.barco-plp-additional-details-container .hero {
    padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) !important;
    max-width: var(--site-max-width) !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.barco-plp-additional-details-container .hero > div > div {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--spacing-medium);
  align-items: center;
}

.barco-plp-additional-details-container .hero > div > div > p:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
}

.barco-plp-additional-details-container .hero > div > div > h1 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;  
  text-align: left !important;
  margin-bottom: var(--spacing-small);
  color: var(--color-primary);
  font: var(--font-serif-h1-regular);
  align-self: end;
}

.barco-plp-additional-details-container .hero > div > div > p:last-child {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    align-self: start;
    max-width: 100%;
    margin-top: 0;
    color: #3C3F41;
    font: var(--font-sans-body-regular);
    font-weight: 300;
    letter-spacing: -0.02rem;
}

.barco-plp-additional-details-container .hero picture,
.barco-plp-additional-details-container .hero img {
    position: inherit;
    width: 100%;
    aspect-ratio: 4 / 3;
    align-self: stretch;
    border-radius: 1rem;
}

@media (max-width: 47.9375rem) {
    .barco-plp-additional-details-container .hero.block {
        padding: 0 0.5rem var(--spacing-medium) !important;
    }
    .barco-plp-additional-details-container .hero > div > div > h1 {
        font: var(--type-h1-m);
        margin-bottom: 0;
    }
}

@media ((min-width: 48rem) and (max-width: 63.938rem)) {
    .barco-plp-additional-details-container .hero.block {
        padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-small) var(--spacing-medium);
    }
}
@media ((min-width: 48rem) and (max-width: 56.25rem)) {
    .barco-plp-additional-details-container .hero > div > div > h1 {
        font: var(--type-h1-t);
        margin: 0;
        text-align: center;
    }
}
@media (max-width: 47.9375rem) {
  .barco-plp-additional-details-container .hero > div > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-medium);
  }

  .barco-plp-additional-details-container .hero > div > div > p:first-child,
  .barco-plp-additional-details-container .hero > div > div > h1,
  .barco-plp-additional-details-container .hero > div > div > p:last-child {
    width: 100%;
  }
   .barco-plp-additional-details-container .hero > div > div > p:last-child {
        color: var(--color-gray-150);
        line-height: var(--spacing-ml);
    }

  .barco-plp-additional-details-container .hero img {
    width: 100%;
    height: auto;
  }
}

.barco-plp-subcategory-navigation.block.plp-subcategory-nav.home-categories-section {
  min-height: 310px;
}

.barco-cms-page.contact-hero-container.block {
      min-height: 329px;
}

@media (min-width: 56.25rem) {

  .barco-cms-page.contact-hero-container.block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--spacing-2s);
    padding: 0 var(--spacing-medium);
    box-shadow: none;
    min-height: 329px;
  }

  .barco-cms-page.contact-hero-container.block>div {
    align-items: flex-start;
    gap: var(--spacing-xbig);
  }

  .barco-cms-page.contact-hero-container.block>div>div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-medium) var(--spacing-small);
    color: var(--color-text-inverse);
    max-width: 41.25rem;
  }

  .barco-cms-page.contact-hero-container.block>div>div:nth-of-type(1) h1 {
    align-items: flex-start;
  }

  .barco-cms-page.contact-hero-container.block>div>div:nth-of-type(1) p:not(:last-child) {
    max-width: 31.625rem;
  }

  .barco-cms-page.contact-hero-container.block>div>div:nth-of-type(1) p:nth-of-type(2) {
    margin-bottom: var(--spacing-xbig);
  }

  .barco-cms-page.contact-hero-container.block>div>div:nth-of-type(1) a {
    align-items: center;
  }
}

@media (max-width: 56.1875rem) {
  .h1-scale-tablet,
  .h1-scale-tablet > h1,
  .h1-scale-tablet h1 {
    font: var(--type-h1-t);
    letter-spacing: var(--letter-spacing-0);
  }

  .h2-scale-tablet,
  .h2-scale-tablet > h2,
  .h2-scale-tablet h2 {
    font: var(--type-h2-t);
    letter-spacing: var(--letter-spacing-0);
  }

  .h3-scale-tablet,
  .h3-scale-tablet > h3,
  .h3-scale-tablet h3 {
    font: var(--type-h3-t);
    letter-spacing: var(--letter-spacing-0);
  }

  .h4-scale-tablet,
  .h4-scale-tablet > h4,
  .h4-scale-tablet h4 {
    font: var(--type-h4-t);
    letter-spacing: var(--letter-spacing-0);
  }

  .h5-scale-tablet,
  .h5-scale-tablet > h5,
  .h5-scale-tablet h5 {
    font: var(--type-h5-t);
    letter-spacing: var(--letter-spacing-0);
  }

  .h6-scale-tablet,
  .h6-scale-tablet > h6,
  .h6-scale-tablet h6 {
    font: var(--type-h6-t);
    letter-spacing: var(--letter-spacing-0);
  }
}

@media (max-width: 47.9375rem) {
  .page-cms main .pagebuilder-column .pagebuilder-mobile-only {
    display: block;
  }

  .page-plp .barco-plp-additional-details-container .default-content-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-medium);
    padding: 0 0.5rem var(--spacing-medium) !important;
  }

  .page-plp .barco-plp-additional-details-container .default-content-wrapper p:has(picture) {
    order: -1;
    width: 100%;
    margin: 0;
    padding-bottom: var(--spacing-small);
  }

  .page-plp .barco-plp-additional-details-container .default-content-wrapper h1,  .page-plp .barco-plp-additional-details-container .default-content-wrapper h1 + p {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .page-plp .barco-plp-additional-details-container .default-content-wrapper h1 {
    font-size: 32px;
    font-weight: 300;
    line-height: 42px; /* 131.25% */
  }

  .page-plp .barco-plp-additional-details-container .default-content-wrapper h1 + p {
    color: var(--color-gray-150);
    line-height: var(--spacing-ml);
  }

  .h1-scale-mobile,
  .h1-scale-mobile > h1,
  .h1-scale-mobile h1 {
    font: var(--type-h1-m);
    letter-spacing: var(--letter-spacing-0);
  }

  .h2-scale-mobile,
  .h2-scale-mobile > h2,
  .h2-scale-mobile h2 {
    font: var(--type-h2-m);
    letter-spacing: var(--letter-spacing-0);
  }

  .h3-scale-mobile,
  .h3-scale-mobile > h3,
  .h3-scale-mobile h3 {
    font: var(--type-h3-m);
    letter-spacing: var(--letter-spacing-0);
  }

  .h4-scale-mobile,
  .h4-scale-mobile > h4,
  .h4-scale-mobile h4 {
    font: var(--type-h4-m);
    letter-spacing: var(--letter-spacing-0);
  }

  .h5-scale-mobile,
  .h5-scale-mobile > h5,
  .h5-scale-mobile h5 {
    font: var(--type-h5-m);
    letter-spacing: var(--letter-spacing-0);
  }

  .h6-scale-mobile,
  .h6-scale-mobile > h6,
  .h6-scale-mobile h6 {
    font: var(--type-h6-m);
    letter-spacing: var(--letter-spacing-0);
  }

}

@media (min-width: 56.25rem) {
    .section.columns-container.barco-dynamic-block-container {
        flex-direction: row;
        gap: 3.5rem;
        padding: var(--spacing-2xl) var(--spacing-medium);
        min-height: 879px;
    }
    .columns.barco-cms-page.contact-card-container.block.columns-3-cols > div > div
    {       
        min-height: 234px;
    }

    .columns.barco-cms-page.contact-card-container.block.columns-3-cols > div {
        gap: var(--spacing-big);
    }
    .section.columns-container.barco-dynamic-block-container .barco-dynamic-block.block {
        padding: var(--spacing-xbig) var(--spacing-2xl);
    }
}

.columns.barco-cms-page.contact-card-container.block.columns-3-cols > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--spacing-medium);
    flex: 1 0 0;
}
.barco-dynamic-block-container form .layout.container-fluid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
}
.barco-dynamic-block-container .form-caption {
    display: flex;
    flex-direction: row;
    font: var(--font-serif-h3-regular-light);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.barco-dynamic-block-container .cr-contact-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    padding: 0;
    min-height: 713px;
}
.section.columns-container.barco-dynamic-block-container .barco-dynamic-block.block section {
    padding: 0;
}
.section.columns-container.barco-dynamic-block-container .barco-dynamic-block.block {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--spacing-medium);
    border-radius: var(--spacing-small);
    background: var(--color-surface);
    flex: 1 0 0;
    padding: var(--spacing-xbig) var(--spacing-small);
}
main .barco-cms-page-container {
    padding: var(--spacing-medium) var(--spacing-medium) 0;
}
.page-cms main > .section.barco-cms-page-container:first-child {
    padding-top: 0;
}

/* Resource details */
.page-cms  .grid-hero-banner-caption-resource-detail-container {
  display: grid;
  grid-template-columns: 6fr 2fr 4fr;
  gap: var(--spacing-small);
  padding: 0 var(--spacing-s);
}
 
.page-cms .grid-hero-banner-caption-resource-detail-container .grid-hero-banner-img-resource-span-2-resource-detail-wrapper p > picture:last-of-type:not(:only-of-type) , .page-cms .grid-hero-banner-caption-resource-detail-container  .grid-hero-banner-img-resource-span-4-resource-detail-wrapper p > picture:last-of-type:not(:only-of-type) , .section.resource-detail-left-container.resource-detail-product-right-container .resource-detail-left-wrapper p  picture:last-of-type:not(:only-of-type) {
    display: none;
}
 
.page-cms .grid-hero-banner-caption-resource-detail-container .grid-hero-banner-caption-resource-detail-wrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-start;
   flex: 1 0 0;
   align-self: stretch;
   border-radius: var(--radius-m);
   background: var(--color-gray-20);
   padding: var(--spacing-xbig) var(--spacing-medium) 0 var(--spacing-medium);
}
.page-cms .grid-hero-banner-caption-resource-detail-container .grid-hero-banner-img-resource-span-2-resource-detail-wrapper p , .grid-hero-banner-img-resource-span-4-resource-detail-wrapper p {
   margin: 0;
}
.page-cms .grid-hero-banner-caption-resource-detail.barco-cms-page.block {
  background-color: transparent;
}
.page-cms .grid-hero-banner-caption-resource-detail-container .grid-hero-banner-img-resource-span-2-resource-detail-wrapper img , .grid-hero-banner-img-resource-span-4-resource-detail-wrapper img {
   height: 100%;
}
.page-cms .grid-hero-banner-caption-resource-detail.barco-cms-page.block h1{
  margin: 0;
    color: var(--color-primary);
    font: var(--font-serif-h1-regular);
}
.page-cms .grid-hero-banner-caption-resource-detail.barco-cms-page.block h1 h1+p {
    padding: 5.625rem 0 var(--spacing-medium) 0;
}
.page-cms .grid-hero-banner-caption-resource-detail.barco-cms-page.block p {
    display: flex;
    align-items: center;
    gap: var(--spacing-2s);
    font: var(--font-sans-subtitle-lg);
    padding: 5.625rem 0 var(--spacing-medium) 0;
    margin: 0;
}
.section.resource-detail-left-container.resource-detail-product-right-container , .section.resource-detail-bg-text-content-container.barco-cms-page-container {
   padding: var(--spacing-xbig) var(--spacing-s) var(--spacing-medium) 8.75rem;
}
.page-cms  .grid-hero-banner-caption-resource-detail-container .barco-cms-page , .page-cms  .grid-hero-banner-caption-resource-detail-container .barco-cms-page img {
   width: 100%;
}
 .page-cms  main .grid-hero-banner-caption-resource-detail-container , .resource-detail-left-container , .resource-detail-text-content-bg-grey-container  , .resource-detail-text-content-container , .resource-details-links-container , .recommended-procducts-heading-container , .resource-related-content-heading-container    {
    max-width: var(--content-max-width);
    margin: auto;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--site-container-gap);
} 
@media (min-width: 56.25rem) {
    .page-cms .grid-hero-banner-caption-resource-detail-container , .resource-detail-left-container  ,.resource-detail-text-content-bg-grey-container .resource-detail-text-content-container  , .resource-details-links-container , .recommended-procducts-heading-container  , .resource-related-content-heading-container {
        padding: 0 var(--spacing-medium) !important;
    }
}

/* FAQ */
@media (min-width: 56.25rem) {
    .section:not(.barco-dynamic-block-container):has(.default-content-wrapper:first-child > h1) + .barco-cms-page-container {
        padding: var(--spacing-medium) var(--spacing-medium) 0;
    }
    main > .section > div {
        padding: 0;
    }
}

.barco-dynamic-block-container:has(.barco-dynamic-block.margin-0), .barco-cms-page-container.barco-dynamic-block-container .default-content-wrapper, .barco-cms-page-container.barco-dynamic-block-container .barco-dynamic-block-wrapper {
    margin: 0;
}

.barco-cms-page-container.barco-dynamic-block-container .default-content-wrapper {
    flex: 0 0 70%;
}

main .barco-cms-page-container .default-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

/* product news page */
@media (min-width: 56.25rem) {
    .section:not(.barco-dynamic-block-container):has(.default-content-wrapper:first-child > h1) + .barco-cms-page-container {
        padding: var(--spacing-medium) var(--spacing-medium) 0;
    }
}

.cards-container .cards-wrapper {
    display: flex;
    align-self: stretch;
    margin: 0;
    min-height: 715px;
}

.cards-container .cards-wrapper .cards.barco-products-news-col {
    width: 100%;
    background: var(--color-surface);
    border-radius: 8px;
    border: 1px solid var(--color-gray-10);
    box-shadow: var(--shadow-s);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display: flex;
    flex: 1;
    min-height: 715px;
}

.cards-wrapper .cards ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cards-wrapper .cards ul li {
    display: flex;
    flex: 1;
    border: 0;
}
.cards-container .cards-wrapper .cards-card-body {
    display: flex;
    flex-direction: column;
    margin: 0;
    flex: 1 0 0;
}
.cards-card-body > p:first-child {
    margin: 0;
}
.cards > ul > li .cards-card-body img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: transform .18s ease;
    aspect-ratio: auto;
}
.cards-card-body h3 a {
    font: var(--font-serif-h3-regular);
    letter-spacing: var(--letter-spacing-0);
    color: var(--color-text);
    text-decoration: none;
}
.cards-card-body > p:last-child {
    margin: 0;
    padding: 0 var(--spacing-ml) var(--spacing-l);
    font: var(--font-sans-body-regular);
    letter-spacing: var(--letter-spacing-0);
    color: var(--color-text);
}
.product-details__gallery .smv-selectors-box.smv-thumbnails {
  min-height: 80px;
}
.product-details__gallery .smv-loader,
.product-details__gallery .smv-component-loader {
  min-height: 375px;
}
@media (max-width: 27.5rem) {
  .product-details__gallery .smv-loader,
  .product-details__gallery .smv-component-loader {
    min-height: 175px;
  }
}

.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper h1:not(.cms-block-rendered[data-cms-block-identifier="mason-collection"] *),
.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper h2:not(.cms-block-rendered[data-cms-block-identifier="mason-collection"] *) {
  margin-bottom: var(--spacing-small);
  color: var(--color-primary);
  font: var(--font-serif-h1-regular);
  font-size: var(--font-size-xxxl) !important;
  line-height: normal !important;
}

.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper p:not(.cms-block-rendered[data-cms-block-identifier="mason-collection"] *) {
  color: var(--color-gray-150);
  font: var(--font-sans-body-regular);
  font-weight: var(--font-weight-light);
  letter-spacing: -0.02rem;
}


.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper .pagebuilder-column-group .pagebuilder-column-line {
    display: flex;
    gap: var(--spacing-medium);
}

.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper .pagebuilder-column-group .pagebuilder-column-line .pagebuilder-column {
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    width: 50%;
    align-self: stretch;
}

.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper .pagebuilder-column-group .pagebuilder-column-line .pagebuilder-column iframe {
    height: 100%;
    width: 100%;
    min-height: 320px;
}

.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper span:not(.cms-block-rendered[data-cms-block-identifier="mason-collection"] *) {
   color: var(--color-gray-150) !important;
}
.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper a {
   background: var(--color-primary) !important;
   color:var(--color-white) !important;
   -webkit-text-fill-color:var(--color-white) !important;
   border: 2px solid var(--color-primary) !important;
}

.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper h1 , .page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper h2 {
   color:var(--color-primary) !important;
}

.page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper p , .page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper span   , .page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper li{
  color: var(--grey-150) !important;
}
 
.barco-dynamic-block-container .barco-dynamic-block.block .mt-mason .mt-mason__hero {
  align-items: normal !important;
}

.barco-dynamic-block-container .barco-dynamic-block.block .mt-mason {
  padding: 0 !important;
}

@media (max-width: 48rem) {

  .page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper .pagebuilder-column-group .pagebuilder-column-line .pagebuilder-column {
    width: 100% !important;
  }

  .page-plp .barco-plp-additional-details-container .barco-dynamic-block-wrapper .pagebuilder-column-group .pagebuilder-column-line {
    display: grid !important;
  }
  .barco-dynamic-block-container .barco-dynamic-block.block {
    padding: var(--spacing-s) !important
  }

}

.page-plp .product-list-page-container .columns-wrapper .columns.block.columns-1-cols div p , .page-plp .product-list-page-container .columns-wrapper .columns.block.columns-1-cols div li {
   color: #3C3F41;
    font: var(--font-sans-body-regular) !important;
    font-weight: normal;
    letter-spacing: -0.02rem;
    max-width: 100%;
}

.page-plp .product-list-page-container .columns-wrapper .columns.block.columns-1-cols div p strong , .page-plp .product-list-page-container .columns-wrapper .columns.block.columns-1-cols h2 , .page-plp .product-list-page-container .columns-wrapper .columns.block.columns-1-cols h3 , .product-list-page-container .columns-wrapper .columns.block.columns-1-cols h4 {
   color: var(--color-primary);
   font-family: var(--font-family-roboto);
   font-size: var(--font-size-xxxxl);
   font-style: var(--font-style-normal);
   font-weight: var(--font-weight-light);
   line-height: normal;
}

.page-plp .product-list-page-container .columns-wrapper .columns.block.columns-1-cols {
   width: 100%;
   background: transparent;
   padding-top: var(--spacing-medium);
}

@media (max-width: 48rem)  {
    .page-plp .product-list-page-container .columns-wrapper .columns.block.columns-1-cols{
        padding: var(--spacing-small);
        margin-top: var(--spacing-medium);
    }
}

#barco-canada-surcharge-banner {
  border-radius: 1rem;
  margin-bottom: 0.5rem;
}