/*
 * 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 */

/*
 * Maintainer guide for Figma-driven theme updates:
 * 1. Colors
 *    Update `--color-primary`, `--color-secondary`, `--color-accent`, surface/text/status tokens,
 *    then verify the mapped storefront tokens in `COLORS: STOREFRONT MAPPING`.
 * 2. Type scale
 *    Update `--font-family-*`, `--font-size-*`, and `--type-*` semantic typography tokens.
 * 3. Spacing scale
 *    Update the core spacing tokens in `SPACING: SCALE`, then review layout/grid gutters if needed.
 * 4. Radius / shadow
 *    Update `--shape-*`, `--radius-*`, and `--shadow-*` tokens.
 * 5. Interaction states
 *    Update hover/focus/active tokens such as `--color-button-*`, focus colors, and motion tokens.
 */
:root,
.dropin-design {
  /* ===========================================
    COLORS: PRIMITIVES — BARCO BLUE
    Primary = (Barco Blue 100)
    =========================================== */
  --color-blue-135: #003759;
  --color-blue-130: #004B7B;
  --color-blue-120: #053b70;
  --color-blue-110: #064786;
  --color-blue-100: #004976;
  --color-blue-80:  #336D91;
  --color-blue-60:  #6692AD;
  --color-blue-50:  #88accf;
  --color-blue-40:  #99B6C8;
  --color-blue-20:  #C9DBE5;
  --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;

  /* ===========================================
    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:   #c94f45;
  --color-error-200:   #f2d8cf;
  --color-error-800:   #8f001a;
  --color-info-500:    var(--color-blue-80);
  --color-info-200:    #d8f0f8;
  --color-info-800:    #005b96;

  /* ===========================================
    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-110);
  --color-primary-active:   var(--color-blue-120);
  --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-80);
  --color-field-label:            var(--color-text-secondary);
  --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-10) 33.7%);
  --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-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-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-big: 2rem;                  /* 32px */
  --spacing-xl: var(--spacing-big);     /* 32px */
  --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-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", sans-serif;
 


  /* Font sans variables */

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

  /* Subtitles - Italic */
  --font-sans-subtitle-md-italic: var(--font-weight-regular) var(--font-style-italic) var(--font-size-l)/var(--line-height-m) var(--font-family-sans);        /* 400 italic 18px/20px */
  --font-sans-subtitle-lg-italic: var(--font-weight-regular) var(--font-style-italic) var(--font-size-xl)/var(--line-height-l) var(--font-family-sans);       /* 400 italic 20px/24px */
  --font-sans-subtitle-link-italic: var(--font-weight-regular) var(--font-style-italic) var(--font-size-m)/var(--line-height-l) var(--font-family-sans);      /* 400 italic 16px/24px */
  --font-sans-subtitle-label-italic: var(--font-weight-regular) var(--font-style-italic) var(--font-size-m)/var(--line-height-s) var(--font-family-sans);     /* 400 italic 16px/18px */
  --font-sans-subtitle-caption-italic: var(--font-weight-regular) var(--font-style-italic) var(--font-size-xs)/var(--line-height-xs) var(--font-family-sans); /* 400 italic 12px/14px */

  /* 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-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 */

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

  /* ===========================================
    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-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.75rem;

  /* ===========================================
    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(--shape-border-radius-3);
  --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(--shape-border-radius-2);
  --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-130);
  --button-clear-bg:     #F1F1EE;

  /* 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(--type-body-1-default-font);
  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 {
  grid-row: 1;
  height: var(--nav-height);
  background-color: var(--color-surface-header);
  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-300);
}

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

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

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(--type-display-1-font);
  letter-spacing: var(--type-display-1-letter-spacing);
}

h2 {
  font: var(--type-display-2-font);
  letter-spacing: var(--type-display-2-letter-spacing);
}

h3 {
  font: var(--type-display-3-font);
  letter-spacing: var(--type-display-3-letter-spacing);
}

h4 {
  font: var(--type-headline-1-font);
  letter-spacing: var(--type-headline-1-letter-spacing);
}

h5 {
  font: var(--type-headline-2-strong-font);
  letter-spacing: var(--type-headline-2-strong-letter-spacing);
}

h6 {
  font: var(--type-headline-2-default-font);
  letter-spacing: var(--type-headline-2-default-letter-spacing);
}

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

p,
li,
dd,
dt {
  max-width: var(--content-max-readable);
}

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

li + li {
  margin-top: 0.375rem;
}


 
/* -----------------------------
   PRIMARY (filled blue)
   ----------------------------- */
.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--button-brand-color);
  color: var(--color-text-inverse);
  border: var(--shape-border-width-1) solid transparent;
  border-radius: var(--button-radius);
  font: var(--font-sans-body-regular); /* 400 normal 16px/24px */
  letter-spacing: var(--type-body-1-default-letter-spacing);
  cursor: pointer;
  white-space: nowrap;
}

.button-primary--lg {
  height: var(--btn-height-lg);
  line-height: var(--line-height-l);
}

.button-primary--md {
  height: var(--btn-height-md);
  line-height: var(--line-height-l);
}

.button-primary--sm {
  height: var(--btn-height-sm);
  line-height: var(--line-height-s);
}

/* -----------------------------
   OUTLINE (transparent bg, brand border + text)
   ----------------------------- */
.button-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: transparent;
  color: var(--button-brand-color);
  border: var(--shape-border-width-1) solid var(--button-brand-color);
  border-radius: var(--button-radius);
  font: var(--font-sans-body-regular); /* 400 normal 16px/24px */
  letter-spacing: var(--type-body-1-default-letter-spacing);
  cursor: pointer;
  white-space: nowrap;
}

.button-outline--lg {
  height: var(--btn-height-lg);
  line-height: var(--line-height-l);
}

.button-outline--md {
  height: var(--btn-height-md);
  line-height: var(--line-height-l);
}

.button-outline--sm {
  height: var(--btn-height-sm);
  line-height: var(--line-height-s);
}

/* -----------------------------
   CLEAR (light/transparent bg)
   ----------------------------- */
.button-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--button-clear-bg);
  color: var(--color-text);
  border: var(--shape-border-width-1) solid transparent;
  border-radius: var(--button-radius);
  font: var(--font-sans-body-regular); /* 400 normal 16px/24px */
  letter-spacing: var(--type-body-1-default-letter-spacing);
  cursor: pointer;
  white-space: nowrap;
}

.button-clear--lg {
  height: var(--btn-height-lg);
  line-height: var(--line-height-l);
}

.button-clear--md {
  height: var(--btn-height-md);
  line-height: var(--line-height-l);
}

.button-clear--sm {
  height: var(--btn-height-sm);
  line-height: var(--line-height-s);
}

/* ===========================================
   ICON BUTTONS — Primary / Outline / Clear
   Square, icon-only buttons. Width = height per size,
   so they stay perfectly round/square at every breakpoint.
   =========================================== */

.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: var(--shape-border-width-1) solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.button-icon svg,
.button-icon img {
  width: var(--spacing-medium); /* 1.5rem = 24px icon */
  height: var(--spacing-medium);
}

.button-icon--lg {
  width: var(--btn-height-lg);
  height: var(--btn-height-lg);
}

.button-icon--md {
  width: var(--btn-height-md);
  height: var(--btn-height-md);
}

.button-icon--sm {
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
}

.button-icon--sm svg,
.button-icon--sm img {
  width: var(--spacing-small); /* 1rem = 16px icon for the sm size */
  height: var(--spacing-small);
}

/* Icon — Primary (filled blue) */
.button-icon-primary {
  background: var(--button-brand-color);
  color: var(--color-text-inverse);
}

/* Icon — Outline (transparent bg, brand border + text) */
.button-icon-outline {
  background: transparent;
  color: var(--button-brand-color);
  border-color: var(--button-brand-color);
}

/* Icon — Clear (light bg) */
.button-icon-clear {
  background: var(--button-clear-bg);
  color: var(--color-text);
}
 



hr {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 0;
  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-300);
}

code,
pre {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  font-family: var(--type-fixed-font-family);
}

pre {
  overflow: auto;
}

main pre {
  background-color: var(--color-neutral-300);
  padding: 1em;
  border-radius: 0.25em;
  overflow-x: auto;
  white-space: pre;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-medium) 0;
  background-color: var(--color-surface-card);
  border: var(--shape-border-width-1) solid var(--color-neutral-300);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

thead {
  background-color: var(--color-table-header);
}

th,
td {
  padding: 0.875rem 1rem;
  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-300);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--color-text);
  font: var(--type-body-2-strong-font);
  letter-spacing: var(--type-body-2-strong-letter-spacing);
}

td {
  color: var(--color-text-secondary);
}

tbody tr:nth-child(even) {
  background-color: var(--color-table-row-alt);
}

tbody tr:hover {
  background-color: var(--color-section-subtle);
}

tbody tr:last-child td {
  border-bottom: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}

a,
button,
input,
select,
textarea,
summary,
[tabindex]:not([tabindex="-1"]) {
  border-radius: var(--radius-xs);
}

:focus-visible {
  outline: 0.1875rem solid var(--color-focus-ring);
  outline-offset: 0.125rem;
}

/* links */
a:not(.dropin-design a) {
  color: var(--link-color);
  font: var(--type-body-1-strong-font);
  letter-spacing: var(--type-body-1-strong-letter-spacing);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  text-decoration-thickness: 0.125rem;
  overflow-wrap: break-word;
}

header a:not(.dropin-design a),
footer a:not(.dropin-design a),
.dark a:not(.dropin-design a) {
  color: var(--link-on-dark-color);
}

a:not(.dropin-design a):visited {
  color: var(--link-visited-color);
}

a:not(.dropin-design a):hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

a:not(.dropin-design a):focus-visible {
  color: var(--link-focus-color);
  text-decoration: underline;
}

/* buttons */
main a.button:any-link,
button.button {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-height: var(--tap-target-min);
  margin: var(--spacing-small) 0;
  border: var(--shape-border-width-1) solid transparent;
  border-radius: var(--button-radius);
  padding: 0.625rem 1rem;
  font: var(--type-button-2-font);
  letter-spacing: var(--type-button-2-letter-spacing);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2857;
  text-align: center;
  text-decoration: none;
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

main a.button:hover,
main a.button:focus,
button.button:hover,
button.button:focus {
  background-color: var(--button-primary-bg-hover);
  border-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
}

main a.button:active,
button.button:active {
  background-color: var(--button-primary-bg-active);
  border-color: var(--button-primary-bg-active);
  transform: translateY(0.0625rem);
}

main a.button:focus-visible,
button.button:focus-visible,
[role="button"]:focus-visible {
  box-shadow: var(--button-focus-shadow);
}

main a.button.disabled,
button.button:disabled,
button.button:disabled:hover {
  background-color: var(--button-disabled-bg);
  border-color: var(--button-disabled-border);
  color: var(--button-disabled-text);
  cursor: unset;
}

main a.button.secondary,
button.button.secondary {
  background-color: var(--button-secondary-bg);
  border: var(--shape-border-width-1) solid var(--button-secondary-border);
  color: var(--button-secondary-text);
}

main a.button.secondary:hover,
main a.button.secondary:focus,
button.button.secondary:hover,
button.button.secondary:focus {
  background-color: var(--button-secondary-bg-hover);
  border-color: var(--button-secondary-border-hover);
  color: var(--button-secondary-text-hover);
}

main a.button.secondary:active,
button.button.secondary:active {
  background-color: var(--color-primary-light);
  border-color: var(--color-brand-700);
  color: var(--color-brand-700);
}

main a.button.secondary:focus-visible,
button.button.secondary:focus-visible {
  color: var(--color-brand-700);
}

main a.button.tertiary,
button.button.tertiary {
  background-color: var(--button-tertiary-bg);
  border-color: transparent;
  color: var(--button-tertiary-text);
  min-height: auto;
  padding: 0.5rem 0.375rem;
}

main a.button.tertiary:hover,
main a.button.tertiary:focus,
button.button.tertiary:hover,
button.button.tertiary:focus {
  background-color: var(--button-tertiary-bg-hover);
  color: var(--button-tertiary-text-hover);
}

main a.button.tertiary:active,
button.button.tertiary:active {
  color: var(--color-brand-700);
}

main a.button.tertiary:focus-visible,
button.button.tertiary:focus-visible {
  border-radius: var(--shape-border-radius-1);
}

input,
textarea,
select {
  min-height: var(--tap-target-min);
  padding: 0.75rem 1rem;
  border: var(--shape-border-width-1) solid var(--input-border);
  border-radius: var(--input-radius);
  background-color: var(--input-bg);
  color: var(--input-text);
  box-shadow: var(--input-shadow);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

label {
  display: inline-block;
  margin-bottom: var(--spacing-xs);
  color: var(--input-label);
  font: var(--type-body-2-strong-font);
  letter-spacing: var(--type-body-2-strong-letter-spacing);
}

fieldset {
  min-inline-size: 0;
  margin: 0 0 var(--spacing-medium);
  border: var(--shape-border-width-1) solid var(--color-neutral-300);
  border-radius: var(--radius-m);
  padding: var(--spacing-small);
}

legend {
  padding: 0 var(--spacing-xs);
  color: var(--color-text);
  font: var(--type-body-2-strong-font);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

textarea {
  min-height: 7.5rem;
  resize: vertical;
}

select {
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-brand-500) 50%), linear-gradient(135deg, var(--color-brand-500) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) calc(50% - 0.1875rem), calc(100% - 0.75rem) calc(50% - 0.1875rem);
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
  appearance: none;
}

input:hover,
textarea:hover,
select:hover {
  background-color: var(--input-bg-hover);
  border-color: var(--input-border-hover);
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--input-disabled-bg);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--input-border-focus);
  background-color: var(--color-neutral-50);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0.1875rem solid var(--input-focus-ring);
  outline-offset: 0.125rem;
  box-shadow: var(--shadow-focus);
}

main blockquote {
  font-style: italic;
  margin: var(--spacing-big) 0;
  padding: var(--spacing-small) var(--spacing-medium);
  border-left: 0.25rem solid var(--color-accent);
  background-color: var(--color-surface-alt);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  text-indent: 0;
  hanging-punctuation: first;
}

main blockquote p::before {
  content: '\201C';
  line-height: 0;
}

main blockquote p::after {
  content: '\201D';
  line-height: 0;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.card,
.dropin-product-item-card,
main .section > div > .block {
  background-color: var(--card-bg);
  border: var(--shape-border-width-1) solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.card,
.dropin-product-item-card {
  overflow: hidden;
}

.card--muted,
.surface-muted {
  background-color: var(--card-bg-muted);
}

.banner,
.alert,
[role="alert"],
[data-status-banner] {
  margin: var(--spacing-medium) 0;
  border-left: 0.375rem solid var(--color-banner-info-border);
  border-radius: var(--radius-s);
  padding: 1rem 1.25rem;
  background-color: var(--color-banner-info-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.banner--info,
.alert.info,
[data-status-banner="info"] {
  border-left-color: var(--color-banner-info-border);
  background-color: var(--color-banner-info-bg);
}

.banner--success,
.alert.success,
.success-message,
[data-status-banner="success"] {
  border-left-color: var(--color-banner-success-border);
  background-color: var(--color-banner-success-bg);
}

.banner--warning,
.alert.warning,
[data-status-banner="warning"] {
  border-left-color: var(--color-banner-warning-border);
  background-color: var(--color-banner-warning-bg);
}

.banner--error,
.alert.error,
.error-message,
[data-status-banner="error"] {
  border-left-color: var(--color-banner-error-border);
  background-color: var(--color-banner-error-bg);
}

.icon {
  display: inline-block;
  height: 2rem;
  width: 2rem;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: var(--spacing-xbig) 0;
}

.section:empty {
  display: none;
}

main > .section > div {
  max-width: var(--content-max-width);
  margin: auto;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--site-container-gap);
  padding: var(--site-container-padding);
}

main .pagebuilder-content-wrapper,
main .pagebuilder-carousel-wrapper,
main .pagebuilder-content-container,
main .pagebuilder-content.block {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

main .pagebuilder-content-wrapper {
  overflow-x: clip;
}

main .pagebuilder-carousel-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

main .pagebuilder-content-wrapper > *,
main .pagebuilder-content-container > * {
  max-width: 100%;
  min-width: 0;
}

/* TODO: Temporary added this, will remove once header design finalized */
.category-mega-nav > ul > li:nth-child(n + 6) {
  display: none;
}

main > .section:first-of-type {
  margin-top: 0;
}

@media (min-width: 56.25rem) {
  main > .section > div {
    padding: 0;
  }

  main > .section > div section {
    padding: 0 var(--site-container-padding);
  }

  main > .section > div section:first-child {
    padding-right: 0;
  }
}

@media (max-width: 56.1875rem) {
  :root,
  .dropin-design {
    --nav-height: 5.5rem;
    --spacing-large: 3rem;
    --spacing-xlarge: 3.5rem;
    --spacing-xxlarge: 4.5rem;
  }

  h1 {
    font-size: clamp(2rem, 1.7rem + 2vw, 2.75rem);
  }

  h2 {
    font-size: clamp(1.75rem, 1.5rem + 1.4vw, 2.25rem);
  }

  h3 {
    font-size: clamp(1.5rem, 1.35rem + 1vw, 1.875rem);
  }

  main > .section {
    margin: var(--spacing-big) 0;
  }

  main > .section > div {
    padding:0;
  }

  main > .section > div section {
    padding-left: var(--spacing-small); /* or 1rem */
    padding-right: var(--spacing-small);
  }

  main > .section > div section:first-child {
    padding-right: 0;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  table {
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  tbody tr {
    margin-bottom: var(--spacing-small);
    border: var(--shape-border-width-1) solid var(--color-neutral-300);
    border-radius: var(--radius-m);
    overflow: hidden;
    background-color: var(--color-surface-card);
    box-shadow: var(--shadow-xs);
  }

  td {
    display: grid;
    grid-template-columns: minmax(7rem, 40%) 1fr;
    gap: var(--spacing-xs);
    align-items: start;
  }

  td::before {
    content: attr(data-label);
    color: var(--color-text);
    font: var(--type-body-2-strong-font);
    letter-spacing: var(--type-body-2-strong-letter-spacing);
  }
}

@media (max-width: 48rem) {
  :root,
  .dropin-design {
    --spacing-big: 1.5rem;
    --spacing-xbig: 2rem;
    --spacing-large: 2.5rem;
    --tap-target-min: 3rem;
  }

  body {
    overflow-wrap: break-word;
  }

  main > .section > div,
  main .pagebuilder-content-wrapper,
  main .pagebuilder-content-container,
  main .pagebuilder-content.block {
    width: 100%;
    max-width: 100%;
  }

  .category-mega-menu-container {
    display: none !important;
  }

  main a.button:any-link,
  button.button {
    width: 100%;
    justify-content: center;
  }

  main a.button.tertiary,
  button.button.tertiary {
    width: auto;
  }

  input,
  textarea,
  select {
    padding-inline: 0.875rem;
  }

  td {
    grid-template-columns: 1fr;
  }

  td::before {
    margin-bottom: 0.125rem;
  }

  main blockquote {
    padding: var(--spacing-small);
  }

  main > .section > div section {
      padding-left: var(--spacing-s);
      padding-right: var(--spacing-s);
  }
}

/* section metadata - styles - start */
main .section.light,
main .section.highlight {
  background-color: var(--color-section-subtle);
  margin: 0;
  padding: var(--spacing-xbig) 0;
}

main .section.highlight {
  background-color: var(--color-section-emphasis);
}

main .section.light > div,
main .section.highlight > div {
  border-radius: var(--radius-l);
}

main .section[data-padding="default"] {
    padding: var(--spacing-xxsmall) 0;
}

main .section[data-padding="small"] {
    padding: var(--spacing-xsmall) 0;
}

main .section[data-padding="medium"] {
    padding: var(--spacing-small) 0;
}

main .section[data-padding="large"] {
    padding: var(--spacing-medium) 0;
}

main .section[data-padding="big"] {
    padding: var(--spacing-big) 0;
}

main .section[data-padding="xbig"] {
    padding: var(--spacing-xbig) 0;
}

main .section[data-padding="xxbig"] {
    padding: var(--spacing-xxbig) 0;
}

main .section[data-padding="huge"] {
    padding: var(--spacing-huge) 0;
}

main .section[data-padding="xhuge"] {
    padding: var(--spacing-xhuge) 0;
}

main .section[data-padding="xxhuge"] {
    padding: var(--spacing-xxhuge) 0;
}


main .section[data-margin="small"] {
    margin: var(--spacing-xsmall) 0;
}

main .section[data-margin="medium"] {
    margin: var(--spacing-small) 0;
}

main .section[data-margin="large"] {
    margin: var(--spacing-medium) 0;
}

main .section[data-margin="big"] {
    margin: var(--spacing-big) 0;
}

main .section[data-margin="xbig"] {
    margin: var(--spacing-xbig) 0;
}

main .section[data-margin="xxbig"] {
    margin: var(--spacing-xxbig) 0;
}

main .section[data-margin="huge"] {
    margin: var(--spacing-huge) 0;
}

main .section[data-margin="xhuge"] {
    margin: var(--spacing-xhuge) 0;
}

main .section[data-margin="xxhuge"] {
    margin: var(--spacing-xxhuge) 0;
}

/* section metadata - styles - end */

/* Base Design System Tokens */
.dropin-design.dropin-design {
  --background-none: none 0 0% no-repeat padding-box;
}

.dropin-input-date__icon {
  z-index: 2;
}

/* Layout: Columns */
body.columns main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1264px;
  margin: 0 auto;
  padding: var(--spacing-large) var(--spacing-small);
  box-sizing: border-box;
  gap: var(--grid-4-gutters);
}

body.columns main > .section {
  flex: 1;
  flex-basis: 100%;
  max-width: unset;
  margin: unset;
  padding: unset;
}

body.columns main > .section > div {
  max-width: unset;
  padding: unset;
}

body.columns main > .section > div:not(:last-child) {
  margin-bottom: var(--gap, unset);
}

body.columns main > .section:empty {
  display: none;
}

@media (min-width: 37.5rem) {
  body.columns main {
    padding: var(--spacing-large) var(--spacing-big);
  }
}

.dropin-product-item-card {
  border: var(--shape-border-width-1) solid var(--color-neutral-300);
}

@media (min-width: 56.25rem) {
  body.columns main {
    flex-direction: row;
  }

  body.columns main > .section {
    flex: 1;
    flex-basis: var(--column-width, auto);
  }
}

/**
* Reset main element visibility
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
*/
main[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 64rem) {
  .category-mega-menu-container {
    display: none !important;
  }
}

main .section > div > .block {
  border: 0;
}

.subcategories-container.product-list-page-container .product-list-page, .commerce-cart-container .commerce-cart, .commerce-checkout-container .commerce-checkout {
  width: 100%;
}