/*
 * 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-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-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-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-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-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-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-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 */
  
  /* ===========================================
    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);
}

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

li + li:not(.yotpo-smart-topics-item.smart-topic-wrapper) {
  margin-top: 0.375rem;
}
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 .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: var(--color-primary);
  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);
  }
  .page-cms main .pagebuilder-column .pagebuilder-mobile-hidden {
    display: block;
  }
}

@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);
  }
}

.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 p:has(picture) {
  grid-column: 1;
}

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