/*
1. Prevent padding and border from affecting element width.
2. Allow adding a border to an element by just adding a border-width.
*/

*,
*::before,
*::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
  margin: 0; /* Reset margin for all elements */
}

/* Ensure default styles are uniform across browsers */

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; /* Prevent font size adjustment after iOS orientation changes */
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4; /* Set a readable tab size */
  font-family:
    Roboto,
    'DM Sans',
    ui-sans-serif,
    system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    BlinkMacSystemFont,
    'Segoe UI',
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent; /* Disable tap highlights on iOS */
}

body {
  line-height: inherit;
}

/* Ensure consistent border behavior for <hr> */

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

/* Reset heading and link styles for better control */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

/* Adjust font weight for bolder elements */

b,
strong {
  font-weight: bolder;
}

/* Set monospace fonts and normalize styles for code-related elements */

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

/* Correct alignment for sub and sup elements */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Normalize table styles */

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

/* Reset form element styles */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Remove default list styling */

ol,
ul,
menu {
  list-style: none;
  padding: 0;
}

textarea {
  resize: vertical;
}

/* Set placeholder color */

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

/* Set cursor for buttons */

button,
[role='button'] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

/* Ensure replaced elements like images behave consistently */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

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

/* Hidden elements */

[hidden] {
  display: none;
}

/* Josh's Custom CSS Reset */

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  word-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* Removes the clear button on input type search
   Otherwise this is shown by default when a user starts typing
*/

[type='search']::-webkit-search-decoration,
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-results-button,
[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* xs: hide sm, md, lg and xl */

@media screen and (max-width: 459px) {
  .hide-on--sm {
    display: none !important;
  }
}

/* sm: hide xs, md, lg and xl */

@media screen and (min-width: 460px) and (max-width: 767px) {
  .hide-on--md {
    display: none !important;
  }
}

/* md: hide xs, sm, lg and xl */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hide-on--md {
    display: none !important;
  }
}

/* lg: hide xs, sm, md and xl */

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .hide-on--lg {
    display: none !important;
  }
}

/* xl: hide xs, sm, md and lg */

@media screen and (min-width: 1280px) {
  .hide-on--xl {
    display: none !important;
  }
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skeleton-box {
  display: block;
  height: 1em;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--gray-100);
  margin: 0.5em 0;
}

.skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0.5) 60%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.5s infinite;
    animation-delay: calc(var(--animation-order) * 150ms);
    content: '';
  }

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

:root {
  --layer-1: 10;
  --layer-2: 20;
  --layer-3: 30;
  --layer-4: 40;
  --layer-5: 50;
}

:root {
  /* Sizes */
  --size-0: 0;
  --size-px: 1px;
  --size-0_5: 0.125rem; /* 2px */
  --size-0_75: 0.188rem; /* 3px */
  --size-1: 0.25rem; /* 4px */
  --size-1_5: 0.375rem; /* 6px */
  --size-2: 0.5rem; /* 8px */
  --size-2_5: 0.625rem; /* 10px */
  --size-3: 0.75rem; /* 12px */
  --size-3_5: 0.875rem; /* 14px */
  --size-4: 1rem; /* 16px */
  --size-4_5: 1.125rem; /* 18px */
  --size-5: 1.25rem; /* 20px */
  --size-5_5: 1.375rem; /* 22px */
  --size-6: 1.5rem; /* 24px */
  --size-6_5: 1.625rem; /* 26px */
  --size-7: 1.75rem; /* 28px */
  --size-7_5: 1.875rem; /* 30px */
  --size-8: 2rem; /* 32px */
  --size-9: 2.25rem; /* 36px */
  --size-10: 2.5rem; /* 40px */
  --size-11: 2.75rem; /* 44px */
  --size-12: 3rem; /* 48px */
  --size-14: 3.5rem; /* 56px */
  --size-15: 3.75rem; /* 60px */
  --size-16: 4rem; /* 64px */
  --size-18: 4.5rem; /* 72px */
  --size-20: 5rem; /* 80px */
  --size-22: 5.5rem; /* 88px */
  --size-24: 6rem; /* 96px */
  --size-26: 6.5rem; /* 104px */
  --size-28: 7rem; /* 112px */
  --size-32: 8rem; /* 128px */
  --size-36: 9rem; /* 144px */
  --size-40: 10rem; /* 160px */
  --size-44: 11rem; /* 176px */
  --size-48: 12rem; /* 192px */
  --size-52: 13rem; /* 208px */
  --size-56: 14rem; /* 224px */
  --size-60: 15rem; /* 240px */
  --size-64: 16rem; /* 256px */
  --size-72: 18rem; /* 288px */
  --size-80: 20rem; /* 320px */
  --size-90: 22.5rem; /* 360px */
  --size-96: 24rem; /* 384px */
  --size-7xl: 77.5rem; /*1240px*/

  /* Breakpoints */
  --size-xs: 360px;
  --size-md: 768px;
  --size-lg: 1024px;

  --border-size-xs: 1px;
  --border-size-sm: 2px;
  --border-size-md: 4px;
  --border-size-lg: 8px;
  --border-size-xl: 16px;

  --outline-width-thin: var(--size-px);
  --outline-width-normal: var(--size-0_5);
  --outline-width-thick: var(--size-1);
  --outline-color: var(--gray-950);
  --outline-offset: var(--size-1);

  /* Border radius */
  --radius-none: 0px;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  --animation-duration-fast: 150ms;
  --animation-duration-normal: 200ms;
  --animation-duration-slow: 300ms;
  --animation-duration-slower: 400ms;
}

/*
  Note: These colors and their values will be generated in a theme builder in the future
  Since Gomibo doesn't follow the new color convention of primary-100, primary-200, ..., primary-900,
  color names come from here: https://chir.ag/projects/name-that-color/
*/

:root {
  --black: #111111; /* body text color */
  --white: #ffffff; /* text color on darker backgrounds */
  --base-white: #ffffff;

  /* Greys */
  --mineshaft: #292929; /* footer legal background */
  --boulder: #7d7d7d; /* counts (# search result, #reviews), usp texts */
  --silver-chalice: #aaaaaa; /* form input borders */
  --silver: #cccccc; /* dividers */
  --catskill-white: #edf1f7; /* footer-nav-bg, review-bg, product-item__offer-details-bg, etc */
  --gallery: #eeeeee; /* disabled button background */
  --gallery-muted: #efefef; /* disabled form input borders */
  --wild-sand: #f5f5f5; /* panel background */
  --gray-foam: #edf0f6;

  /* Blues  */
  --orient: #005281; /* price color */

  --deep-cerulean: #0079ac; /* footer link color */
  --cerulean: #009ddf; /* header action bar bg, main menu text color, link color, panel bg color etc... */

  --curious-blue: #1992c5;
  --dodger-blue: #19b6f8; /* link hover color */

  --fountain-blue: #6aaac2; /* like button idle */
  --foam: #e1f5fd; /* active accordion header (mobile) */

  --sky: #0052c0;

  /* Greens */
  --limeade: #5fb500; /* order today, delivered tomorrow, usp check marks */
  --limeade-darkest: #448f03; /* primary button active  */
  --christi: #60c607; /* button gradient start */
  --lima: #7ae51d; /* button gradient start hover */
  --limeade-darken: #4faa00; /* button gradient end hover */

  /* Yellows */
  --buttercup: #f5a623; /* map markers on store locator */
  --star: #fdc43f; /* review stars */

  /* Reds */
  --monza: #de0008; /* basket badge */
  --azalea: #f8cccd;
  --bittersweet: #ff6c6c; /* product-item deals */
  --flamingo: #f26522; /* active filter count (mobile) */
  --dark-orange: #ff8c00;

  --lavender-mist: #f9f5ff; /* heavy use label */
  --royal-purple: #6423a6; /* heavy use label */

  /* primary button idle  */
  --primary-gradient: linear-gradient(var(--christi), var(--limeade-darkest));

  /* primary button hover  */
  --primary-gradient-100: linear-gradient(var(--lima), var(--limeade-darken));

  /* primary button idle  */
  --secondary-gradient: linear-gradient(var(--cerulean), var(--deep-cerulean));

  --secondary-gradient-100: linear-gradient(var(--dodger-blue), var(--curious-blue));

  /* Special deals */
  --black-friday-yellow: #f7911d;
  --cyber-monday-blue: #2cdcfb;
  --cyber-monday-pink: #ff32ff;

  /* colors below should be used for SAAS component */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  --primary-50: #f0faff;
  --primary-100: #e0f3fe;
  --primary-200: #b9e9fe;
  --primary-300: #7cd9fd;
  --primary-400: #36c7fa;
  --primary-500: #0cb0eb;
  --primary-600: #009ddf;
  --primary-700: #0170a3;
  --primary-800: #065f86;
  --primary-900: #0b4e6f;
  --primary-950: #07324a;
  --primary-DEFAULT: #009ddf;

  --secondary-50: #fffee7;
  --secondary-100: #fffec1;
  --secondary-200: #fff886;
  --secondary-300: #ffec41;
  --secondary-400: #ffdf60;
  --secondary-500: #ffcc00;
  --secondary-600: #ffba00;
  --secondary-700: #a66a02;
  --secondary-800: #89530a;
  --secondary-900: #74430f;
  --secondary-950: #442304;
  --secondary: #ffcc00;

  --tertiary-50: #fff1f1;
  --tertiary-100: #ffe1e1;
  --tertiary-200: #ffc7c7;
  --tertiary-300: #ffa0a0;
  --tertiary-400: #ff6c6c;
  --tertiary-500: #f83b3b;
  --tertiary-600: #e51d1d;
  --tertiary-700: #c11414;
  --tertiary-800: #a01414;
  --tertiary-900: #841818;
  --tertiary-950: #480707;
  --tertiary: #ff6c6c;

  --neutral-50: #f7f7f7;
  --neutral-100: #e3e3e3;
  --neutral-200: #c8c8c8;
  --neutral-300: #a4a4a4;
  --neutral-400: #818181;
  --neutral-500: #666666;
  --neutral-600: #515151;
  --neutral-700: #434343;
  --neutral-800: #383838;
  --neutral-900: #313131;
  --neutral-950: #262626;
  --neutral: #666666;

  --positive-50: #effaf4;
  --positive-100: #d7f4e3;
  --positive-200: #b2e8cb;
  --positive-300: #80d5ac;
  --positive-400: #4bbc8a;
  --positive-500: #2fb880;
  --positive-600: #1a8159;
  --positive-700: #15674a;
  --positive-800: #13523b;
  --positive-900: #114332;
  --positive-950: #08261d;
  --positive-DEFAULT: #2fb880;

  --negative-50: #fff2f1;
  --negative-100: #ffe2e0;
  --negative-200: #ffcac6;
  --negative-300: #ffa69f;
  --negative-400: #ff7468;
  --negative-500: #fb4738;
  --negative-600: #ea3829;
  --negative-700: #c41f11;
  --negative-800: #a21d12;
  --negative-900: #861f16;
  --negative-950: #490b06;
  --negative: #ea3829;

  --notice-50: #fff9ed;
  --notice-100: #fef1d6;
  --notice-200: #fddfab;
  --notice-300: #fbc776;
  --notice-400: #f9a43e;
  --notice-500: #f68511;
  --notice-600: #e76e0f;
  --notice-700: #c0530e;
  --notice-800: #984214;
  --notice-900: #7b3813;
  --notice-950: #421a08;
  --notice: #f68511;

  --informative-50: #eff8ff;
  --informative-100: #dbeefe;
  --informative-200: #c0e1fd;
  --informative-300: #95cffb;
  --informative-400: #62b4f8;
  --informative-500: #3892f3;
  --informative-600: #2878e8;
  --informative-700: #2061d5;
  --informative-800: #204fad;
  --informative-900: #204688;
  --informative-950: #182b53;
  --informative: #3892f3;
}

/*
  Typography
*/

:root {
  --font-family-sans: 'Roboto', Arial, sans-serif;

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;

  /* Font styles */
  --font-title-3xl: var(--font-normal) var(--size-15) / 1 var(--font-family-sans);
  --font-title-2xl: var(--font-normal) var(--size-12) / 1 var(--font-family-sans);
  --font-title-xl: var(--font-medium) var(--size-9) / var(--size-10) var(--font-family-sans);
  --font-title-lg: var(--font-medium) var(--size-7_5) / var(--size-9) var(--font-family-sans);
  --font-title-md: var(--font-medium) var(--size-6) / var(--size-8) var(--font-family-sans);
  --font-title-sm: var(--font-medium) var(--size-5) / var(--size-7) var(--font-family-sans);
  --font-subtitle-md: var(--font-medium) var(--size-4) / var(--size-6) var(--font-family-sans);
  --font-subtitle-sm: var(--font-medium) var(--size-3_5) / var(--size-5) var(--font-family-sans);
  --font-body-md: var(--font-normal) var(--size-4) / var(--size-6) var(--font-family-sans);
  --font-body-sm: var(--font-normal) var(--size-3_5) / var(--size-5) var(--font-family-sans);
  --font-caption: var(--font-normal) var(--size-3) / var(--size-3) var(--font-family-sans);
  --font-caption-bold: var(--font-medium) var(--size-3) / var(--size-3) var(--font-family-sans);
}

html,
:host {
  font-family: var(--font-family-sans);
}

/* LEGACY typography classes! do NOT use for store app*/

.text-title-xs {
  font-size: var(--size-4_5);
  line-height: var(--size-5_5);
  font-weight: var(--font-bold);
}

.text-lg {
  font-size: var(--size-4_5);
  line-height: var(--size-7);
}

.text-base {
  font-size: var(--size-4);
  line-height: var(--size-5);
}

.text-sm {
  font-size: var(--size-3_5);
  line-height: var(--size-5);
}

.text-xs {
  font-size: var(--size-3);
  line-height: var(--size-4);
}

.font-normal {
  font-weight: var(--font-normal);
}

.font-medium {
  font-weight: var(--font-medium);
}

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

body .header-modal {
    --header-modal-arrow-color: var(--cerulean);
    --header-modal-header-bg-color: var(--cerulean);
    --header-modal-footer-action-link-color: var(--cerulean);
    --header-modal-footer-action-link-color-hover: var(--orient);
  }

body .header-modal--as-drawer {
    --header-modal-border-radius: 0;
    --header-modal-width: 100%;
    box-shadow: none;
  }

body .modal__overlay {
    --modal-overlay-bg: rgba(0, 0, 0, 0.4);
  }

body .header-popover {
    --account-menu-link-color: var(--black);
    --account-menu-link-color-hover: var(--white);
    --account-menu-link-bg-color: ;
    --account-menu-link-bg-color-hover: var(--cerulean);
  }

body .login-form {
    --login-form-link-color: var(--cerulean);
    --login-form-link-color-hover: var(--orient);
  }

body .submit-success {
    --background-color: var(--cerulean);
  }

body .header-bar {
    --header-bar-background-color: var(--cerulean);
    --header-bar-padding: 0 var(--size-1) 0 var(--size-2);
    --header-bar-logo-padding: var(--size-1) 0 0;
    --header-bar-logo-height: var(--size-8);
  }

@media screen and (min-width: 768px) {
    body .header-bar {
      --header-bar-padding: 0 var(--size-2) 0;
      --header-bar-logo-padding: 7px 0 0;
      --header-bar-logo-height: 39px;
    }
  }

body .navigation {
    --brand-color: var(--cerulean);
    --link-hover-color: var(--deep-cerulean);
  }

body .mobile-bar__menu-icon {
    fill: var(--cerulean);
  }

body .mobile-mega-menu__header {
    background-color: var(--cerulean);
  }

body .mobile-mega-menu__item-label {
    color: var(--cerulean);
    fill: var(--cerulean);
  }

body .locale-selector__popover,body .country-confirmation-modal {
    --background-color: var(--cerulean);
  }

body .hallmark-bar {
    --usp-highlight-color: var(--primary-600);
  }

body .fine-print {
    --fine-print-font-size: var(--size-3);
    --fine-print-line-height: var(--size-3_5);
  }

body .newsletter-section {
    background-color: var(--cerulean);
  }

body .newsletter-section__usp-list-item {
    color: var(--white);
    fill: var(--white);
  }

body .newsletter-section__title {
    color: var(--white);
  }

body .newsletter-sign-up__form .input-text--error {
      color: var(--negative-700);
      font-weight: var(--font-medium);
    }

body .newsletter-section__subscribed {
    color: var(--white);
  }

body .footer-navigation {
    --link-font-size: var(--size-3);
  }

body .footer-navigation__accordion-link {
    color: var(--cerulean);
  }

body .footer-navigation__accordion-link:hover {
      color: var(--orient);
    }

body .notification-modal {
    --notification-modal-header-background-color: var(--cerulean);
    --notification-modal-arrow-color: var(--cerulean);
  }

body .notification {
    --notification-modal-icon-color: var(--secondary-500);
  }

body .shopping-cart__link {
    --shopping-cart-background-color: var(--secondary);
  }

body .shopping-cart__link--empty {
    --shopping-cart-background-color: #00b7e9;
  }

body .star {
    --star-primary-color: var(--cerulean);
    --star-secondary-color: var(--neutral-100);
  }

body .rating {
    --review-score-color: var(--cerulean);
  }

body .accordion__trigger {
    --accordion-background-color: var(--white);
    --accordion-background-color-hover: var(--wild-sand);
    --accordion-background-color-active: var(--wild-sand);
    --accordion-trigger-padding: var(--size-2) var(--size-2_5);
  }

body .accordion__content {
    --accordion-content-padding: var(--size-2_5) var(--size-2_5);
    --accordion-slide-down-padding: 0 var(--size-2_5);
  }

body .alert {
    --bg-informative: var(--informative-100);
    --bg-success: var(--positive-100);
    --bg-danger: var(--negative-100);
    --bg-warning: var(--notice-100);
    --icon-color-informative: var(--informative-500);
    --icon-color-success: var(--positive-500);
    --icon-color-warning: var(--notice-500);
    --icon-color-danger: var(--negative-500);
  }

body .legacy-alert.legacy-alert--informative {
      --background-color: var(--informative-100);
    }

body .legacy-alert.legacy-alert--success {
      --background-color: var(--positive-100);
    }

body .legacy-alert.legacy-alert--warning {
      --background-color: var(--notice-100);
    }

body .legacy-alert.legacy-alert--danger {
      --background-color: var(--azalea);
      --text-color: var(--monza);
    }

body .badge {
    --status-background-color: var(--monza);
    --status-background-color-notice: var(--monza);
    --status-background-color-positive: var(--positive-500);
    --status-color: var(--primary-50);
    --icon-fill-notice: var(--notice-50);
    --icon-fill-positive: var(--positive-50);
  }

body .badge-label[data-focus-visible] {
      outline-offset: var(--size-1);
      outline-color: var(--black);
      outline-style: solid;
    }

body .badge-label--primary {
    color: var(--white);
    background-color: var(--tertiary-600);
  }

body .badge-label--secondary {
    color: var(--tertiary-700);
    background-color: var(--tertiary-50);
  }

body .badge-label--secondary.badge-label--clickable[data-pressed],body .badge-label--secondary.badge-label--clickable[data-hovered] {
        border: var(--size-px) solid var(--tertiary-700);
      }

body .badge-label--highlighted {
    padding: var(--size-1_5) var(--size-3);
    color: var(--black);
    background-color: var(--white);
    box-shadow:
      0px 4px 12px 0px rgba(0, 0, 0, 0.06),
      0px 2px 6px 0px rgba(0, 0, 0, 0.1),
      0px 0px 0px 1px rgba(30, 30, 30, 0.08);
  }

body .badge-label--branded {
    color: var(--primary-950);
    background-color: var(--primary-100);
  }

body .badge-label--branded.badge-label--clickable[data-pressed],body .badge-label--branded.badge-label--clickable[data-hovered] {
        border: var(--size-px) solid var(--primary-950);
      }

body .breadcrumbs__link--active {
    --breadcrumbs-link-active-color: var(--cerulean);
  }

body .breadcrumbs__icon {
    --breadcrumbs-icon-fill: var(--cerulean);
  }

@media (min-width: 1024px) {
    body .breadcrumbs__separator.breadcrumbs__separator::before {
      --breadcrumbs-separator-content: '/';
    }
  }

/*
  Note: These button variants and their assigned colors will be generated in a theme builder in the future
*/

body .button {
    --button-outline: var(--size-px) solid var(--black);
  }

body .button--filled.button--primary {
      --button-background-color: transparent;
      --button-background-image: var(--primary-gradient);
      --button-text-color: var(--white);
    }

body .button--filled.button--primary[data-focus-visible],body .button--filled.button--primary[data-hovered] {
        --button-background-image: var(--primary-gradient-100);
      }

body .button--filled.button--primary[data-pressed] {
        --button-background-image: 'none';
        --button-background-color: var(--limeade-darkest);
      }

body .button--filled.button--secondary {
      --button-background-color: transparent;
      --button-background-image: var(--secondary-gradient);
      --button-text-color: var(--white);
    }

body .button--filled.button--secondary[data-hovered] {
        --button-background-image: var(--secondary-gradient-100);
      }

body .button--filled.button--secondary[data-pressed] {
        --button-background-image: none;
        --button-background-color: var(--deep-cerulean);
        --button-text-color: var(--white);
      }

body .button--filled.button--negative {
      --button-background-color: var(--negative-500);
      --button-text-color: var(--negative-50);
    }

body .button--filled.button--negative[data-hovered] {
        --button-background-color: var(--negative-600);
      }

body .button--filled.button--negative[data-pressed] {
        --button-background-color: var(--negative-700);
      }

body .button--filled.button--disabled {
      --button-background-color: var(--gallery);
      --button-background-image: none;
      --button-text-color: var(--boulder);
    }

body .button--subtle.button--primary {
      --button-background-color: var(--primary-200);
      --button-text-color: var(--primary-950);
    }

body .button--subtle.button--primary[data-hovered] {
        --button-background-color: var(--primary-300);
      }

body .button--subtle.button--primary[data-pressed] {
        --button-background-color: var(--primary-400);
      }

body .button--subtle.button--secondary {
      --button-background-color: var(--secondary-200);
      --button-text-color: var(--secondary-950);
    }

body .button--subtle.button--secondary[data-hovered] {
        --button-background-color: var(--secondary-300);
      }

body .button--subtle.button--secondary[data-pressed] {
        --button-background-color: var(--secondary-400);
      }

body .button--subtle.button--disabled {
      --button-background-color: var(--neutral-200);
      --button-text-color: var(--neutral-500);
    }

body .button--outline {
    --button-background-color: transparent;
    --button-border: var(--size-px) solid var(--primary-500);
  }

body .button--outline.button--primary {
      --button-border-color: var(--primary-500);
      --button-text-color: var(--primary-500);
    }

body .button--outline.button--primary[data-hovered] {
        --button-border-color: var(--primary-950);
        --button-text-color: var(--primary-950);
        --button-background-color: var(--primary-100);
      }

body .button--outline.button--primary[data-pressed] {
        --button-border-color: var(--primary-950);
        --button-text-color: var(--primary-950);
        --button-background-color: var(--primary-200);
      }

body .button--outline.button--secondary {
      --button-border-color: var(--secondary-500);
      --button-text-color: var(--secondary-500);
    }

body .button--outline.button--secondary[data-hovered] {
        --button-border-color: var(--secondary-950);
        --button-text-color: var(--secondary-950);
        --button-background-color: var(--secondary-100);
      }

body .button--outline.button--secondary[data-pressed] {
        --button-border-color: var(--secondary-950);
        --button-text-color: var(--secondary-950);
        --button-background-color: var(--secondary-200);
      }

body .button--outline.button--negative {
      --button-border-color: var(--negative-500);
      --button-text-color: var(--negative-500);
    }

body .button--outline.button--negative[data-hovered] {
        --button-border-color: var(--negative-950);
        --button-text-color: var(--negative-950);
        --button-background-color: var(--negative-100);
      }

body .button--outline.button--negative[data-pressed] {
        --button-border-color: var(--negative-950);
        --button-text-color: var(--negative-950);
        --button-background-color: var(--negative-200);
      }

body .button--outline.button--disabled {
      --button-border-color: var(--neutral-500);
      --button-text-color: var(--neutral-500);
    }

body .button--text.button--primary {
      --button-text-color: var(--primary-500);
    }

body .button--text.button--primary[data-hovered] {
        --button-text-color: var(--primary-950);
        --button-background-color: var(--primary-100);
      }

body .button--text.button--primary[data-pressed] {
        --button-text-color: var(--primary-950);
        --button-background-color: var(--primary-200);
      }

body .button--text.button--negative {
      --button-text-color: var(--negative-500);
    }

body .button--text.button--disabled {
      --button-background-color: var(--neutral-50);
      --button-text-color: var(--neutral-500);
    }

body .button--inline-text {
    padding: 0;
    height: auto;
  }

body .button--inline-text.button--primary {
      --button-text-color: var(--primary-500);
    }

body .button--inline-text.button--primary[data-hovered] {
        --button-text-color: var(--primary-600);
      }

body .button--inline-text.button--primary[data-pressed] {
        --button-text-color: var(--primary-700);
      }

body .button--inline-text.button--disabled {
      --button-background-color: var(--neutral-50);
      --button-text-color: var(--neutral-500);
    }

body .button--small {
    padding: var(--size-2) var(--size-4);
    height: var(--size-10);
  }

body .button--medium {
    padding: var(--size-3) var(--size-6);
    height: var(--size-12);
  }

body .checkbox {
    --icon-fill: var(--primary-500);
    --checkbox-box-border-color: var(--neutral);
    --checkbox-color: var(--neutral-900);
    color: var(--checkbox-color);
  }

body .checkbox:hover {
      --checkbox-color: var(--primary-700);
      --checkbox-box-box-shadow: 0px 0px 0px 3px rgba(1, 112, 163, 0.08);
      --checkbox-box-border-color: var(--primary-700);
    }

body .checkbox .icon {
      stroke: var(--icon-fill);
    }

body .checkbox.checkbox--disabled {
    --checkbox-color: var(--neutral-300);
  }

body .checkbox--disabled .icon {
      --icon-fill: var(--neutral-300);
    }

body .checkbox__box {
    border-radius: var(--size-1);
    border: 1px solid var(--checkbox-box-border-color);
    box-shadow: var(--checkbox-box-box-shadow);
  }

body .checkbox__box--selected {
    --checkbox-box-box-shadow: 0px 0px 0px 3px rgba(1, 112, 163, 0.08);
    --checkbox-box-border-color: var(--primary-700);
  }

body .checkbox__box--indeterminate {
    --checkbox-box-box-shadow: 0px 0px 0px 3px rgba(1, 112, 163, 0.08);
    --checkbox-box-border-color: var(--primary-700);
  }

body .checkbox__box--disabled {
    --checkbox-box-box-shadow: none;
    --checkbox-box-border-color: var(--neutral-300);
  }

body .chip {
    --disabled-border-color: var(--neutral);
    --disabled-color: var(--neutral);
    --enabled-hover-background-color: var(--primary-100);
    --enabled-active-background-color: var(--primary-200);
  }

body .divider__separator {
    --divider-background-color: var(--neutral-100);
  }

body .favorite-button {
    --icon-button-icon-fill: var(--primary);
    --button-fill: var(--boulder);
  }

body .icon-button {
    background-color: var(--white);
    fill: var(--black);
  }

body .icon-button[data-hovered] {
      background-color: var(--neutral-50);
    }

body .icon-button[data-pressed] {
      background-color: var(--neutral-100);
    }

body .icon-button[data-focus-visible] {
      outline-color: var(--black);
    }

body .icon-button--brand {
    fill: var(--primary-700);
  }

body .icon-button--brand[data-hovered] {
      background-color: var(--primary-50);
    }

body .icon-button--brand[data-pressed] {
      background-color: var(--primary-100);
    }

body .icon-button--shadow[data-hovered] {
      background-color: var(--white);
    }

body .icon-button--shadow[data-pressed] {
      background-color: var(--neutral-50);
    }

body .icon-button--dark {
    fill: var(--black);
    background-color: transparent;
  }

body .icon-button--dark[data-hovered],body .icon-button--dark[data-pressed] {
      border-color: var(--neutral-950);
      background-color: transparent;
    }

body .icon-button--light {
    fill: var(--white);
    background-color: transparent;
  }

body .icon-button--light[data-hovered],body .icon-button--light[data-pressed] {
      border-color: var(--white);
      background-color: transparent;
    }

body .icon-button--light[data-focus-visible] {
      outline-color: var(--white);
    }

body .icon-button--disabled {
    background-color: var(--neutral-50);
    fill: var(--neutral-300);
  }

body .icon-button--disabled.icon-button--light {
      background-color: rgba(255, 255, 255, 0.3);
      fill: rgba(255, 255, 255, 0.6);
    }

body .icon-list__item--brand {
    --icon-list-item-icon-fill: var(--cerulean);
  }

body .icon-list__item--positive {
    --icon-list-item-icon-fill: var(--limeade);
  }

body .icon-list__item--neutral {
    --icon-list-item-icon-fill: var(--white);
  }

body .icon-list__item--negative {
    --icon-list-item-icon-fill: var(--monza);
  }

body .icon-list__item-label--brand {
    --icon-list-item-label-color: var(--black);
  }

body .icon-list__item-label--positive {
    --icon-list-item-label-color: var(--black);
  }

body .icon-list__item-label--neutral {
    --icon-list-item-label-color: var(--white);
  }

body .icon-list__item-label--negative {
    --icon-list-item-label-color: var(--black);
  }

body .icon-toggle-button {
    background-color: var(--white);
  }

body .icon-toggle-button[data-hovered] {
      background-color: var(--neutral-50);
    }

body .icon-toggle-button[data-focus-visible] {
      outline-color: var(--black);
    }

body .icon-toggle-button--primary[data-selected] {
      fill: var(--primary-700);
    }

body .icon-toggle-button--secondary[data-selected] {
      fill: var(--tertiary-600);
    }

body .icon-toggle-button--disabled {
    background-color: var(--neutral-50);
    fill: var(--neutral-300);
  }

body .icon-toggle-button--disabled[data-selected] {
      fill: var(--neutral-300);
    }

body .information-trigger {
    fill: var(--neutral-500);
  }

body .information-trigger[data-hovered] {
      fill: var(--neutral-900);
    }

body .information-trigger[data-pressed] {
      fill: var(--black);
    }

body .information-trigger[data-focus-visible] {
      outline-color: var(--black);
    }

body .input-select {
    --label-disabled-color: var(--neutral);
    --error-color: var(--negative);
    --data-invalid-trigger-outline-color: var(--negative);
    --data-invalid-trigger-border-color: var(--negative);
    --trigger-focus-visible-outline-color: var(--primary-DEFAULT);
    --trigger-disabled-border-color: var(--neutral);
    --trigger-disabled-color: var(--neutral);
    --trigger-open-outline-color: var(--primary-DEFAULT);
    --value-data-placeholder-color: var(--neutral);
    --value-disabled-color: var(--neutral);
    --remove-disabled-fill: var(--neutral);
    --icon-disabled-fill: var(--neutral);
    --border-color: var(--neutral-300);
  }

body .input-select__value {
    color: var(--neutral-900);
  }

body .input-select__icon {
    fill: var(--neutral-900);
  }

body .input-text {
    --border-color: var(--cerulean);
    --description-error: var(--monza);
    --icon-success: var(--limeade);
    --icon-danger: var(--monza);
    --input-text-border: var(--size-px) solid var(--silver-chalice);
    --input-text-border-radius: var(--radius-sm);
    --input-text-box-shadow-focus: var(--border-color) 0px 0px 5px;
    --input-text-clear-button-color: var(--boulder);
    --input-text-gap: var(--size-1);
    --input-text-padding: var(--size-2) var(--size-2);
    --input-toggle-button-color: var(--cerulean);
    --input-toggle-button-color-hover: var(--sky);
  }

body .input-text__container--error {
    --border-color: var(--monza);
    --border-color-hover: var(--monza);
    --border-color-focus: var(--monza);
  }

body .legacy-link {
    --link-color: var(--cerulean);
    --link-visited-color: var(--orient);
  }

body .legacy-link--contrast {
    --link-color: var(--black);
  }

body .legacy-link--brand-contrast {
    --link-color: var(--cerulean);
  }

body .legacy-link--informative {
    --link-color: var(--cerulean);
  }

body .limit-notice {
    --fill: var(--neutral);
    --color: var(--black);
  }

body .link {
    outline: none;
  }

body .link:focus-visible {
      outline: var(--size-0_5) solid var(--black);
    }

body .link--default {
    color: var(--black);
    fill: var(--black);
  }

body .link--grey {
    color: var(--neutral-900);
    fill: var(--neutral-900);
  }

body .link--subtle {
    color: var(--neutral-600);
    fill: var(--neutral-600);
  }

body .link--brand {
    color: var(--primary-600);
    fill: var(--primary-600);
  }

body .link--informative {
    color: var(--informative-700);
    fill: var(--informative-700);
  }

body .link--positive {
    color: var(--positive-600);
    fill: var(--positive-600);
  }

body .link--negative {
    color: var(--negative-600);
    fill: var(--negative-600);
  }

body .link--inverse {
    color: var(--white);
    fill: var(--white);
  }

body .link--inverse:focus-visible {
      outline: var(--size-0_5) solid var(--white);
    }

body .list-box {
    background-color: var(--white);
  }

body .list-box-item {
    background-color: var(--white);
    color: var(--neutral-900);
    fill: var(--neutral-900);
  }

body .list-box-item.list-box-item--text {
      color: var(--neutral-400);
    }

body .list-box-item--focus-visible {
    outline: var(--size-0_5) solid var(--black);
  }

body .list-box-item--hovered {
    background: var(--neutral-50);
  }

body .list-box-item--disabled {
    color: var(--neutral-400);
  }

body .locale-selector {
    --popover-search-field-focus-within-border-color: var(--primary-DEFAULT);
    --popover-search-field-focus-within-outline-color: var(--primary-DEFAULT);
    --popover-search-icon-fill: var(--neutral-300);
    --popover-search-input-color: var(--neutral-300);
    --popover-horizontal-border-color: var(--neutral-200);
    --popover-vertical-border-color: var(--neutral-200);
    --popover-list-item-hover-background-color: var(--primary-200);
  }

body .pagination {
    --button-hover-color: var(--primary-950);
    --button-hover-background-color: var(--primary-100);
    --button-active-color: var(--primary-950);
    --button-active-background-color: var(--primary-200);
    --button-disabled-color: var(--neutral-300);
    --button-selected-color: var(--primary-50);
    --button-selected-background-color: var(--primary-500);
    --button-selected-disabled-background-color: var(--neutral-100);
    --ellipsis-disabled-color: var(--neutral-300);
    --nav-button-disabled-fill: var(--neutral-300);
  }

body .price {
    color: var(--black);
  }

body .price.price--rrp {
      color: var(--neutral-500);
    }

body .product-grid-header-bar__result-count {
    --result-text-color: var(--neutral-400);
  }

body .back-orders__close.button[data-hovered] .icon {
        fill: var(--neutral-800);
      }

body .back-orders__close.button .icon {
      fill: var(--neutral-500);
    }

body .back-orders__desktop-trigger .back-orders__desktop-amount-indicator {
      background-color: var(--primary-500);
      color: var(--white);
    }

body .back-orders__desktop-trigger .icon {
      fill: var(--primary-500);
    }

body .back-orders__desktop-trigger[data-hovered] {
      color: var(--black);
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

body .back-orders__desktop-trigger[data-hovered] .back-orders__desktop-amount-indicator {
        background-color: var(--black);
      }

body .back-orders__desktop-trigger[data-hovered] .icon {
        fill: var(--black);
      }

body .back-orders__popover {
    fill: var(--white);
    stroke-width: var(--size-px);
    stroke: rgba(11, 19, 36, 0.2);
    box-shadow: 0px -1px 0px 0px rgba(11, 19, 36, 0.08) inset;
    filter: drop-shadow(0px 2px 4px rgba(11, 19, 36, 0.08))
      drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.08));
  }

body .back-orders__popover__content .divider__separator {
      background-color: var(--gallery-muted);
    }

body .back-orders__drawer {
    height: 80%;
  }

body .back-orders__drawer__phone-rectangle {
    background: var(--neutral-100);
  }

body .back-orders__item__amount {
    color: var(--white);
    background-color: var(--black);
  }

body .back-orders__list-labels {
    background-color: var(--neutral-50);
  }

@media (min-width: 1024px) {

body .back-orders__list-labels {
      background-color: transparent;
      background-color: initial;
  }
    }

body .dense-product-item {
    --dense-product-item-image-background-color: var(--neutral-50);
    --dense-product-item-divider-background-color: var(--neutral-100);
  }

body .grid-product-item__outlet__content .icon {
      fill: var(--cerulean);
    }

@media (min-width: 1024px) {

body .highlighted-grid-product-item {
      box-shadow: 0px 0px 0px var(--size-1_5) var(--neutral-50);
      background-color: var(--neutral-50);
  }
    }

@media (min-width: 1024px) {

body .highlighted-grid-product-item__product-wrapper {
      background-color: var(--white);
      border: var(--size-px) solid var(--silver);
  }
    }

body .highlighted-grid-product-item__highlight-label {
    background-color: var(--white);
    box-shadow:
      0px var(--size-1) var(--size-3) 0px rgba(0, 0, 0, 0.06),
      0px var(--size-0_5) var(--size-1_5) 0px rgba(0, 0, 0, 0.1),
      0px 0px 0px var(--size-px) rgba(30, 30, 30, 0.08);
  }

body .limit-notice {
    --fill: var(--neutral-500);
    --color: var(--black);
  }

body .outlet-information__phone-rectangle {
    background: var(--neutral-100);
  }

@media screen and (min-width: 1024px) {

body .outlet-information__phone-rectangle {
      display: none;
  }
    }

body .outlet-information__close-button .icon {
      fill: var(--neutral-500);
    }

body .outlet-information__close-button[data-hovered] .icon {
        fill: var(--neutral-800);
      }

body .outlet-information__title {
    border-bottom: 1px solid var(--neutral-100);
  }

body .outlet-information__condition__statuses  > div {
      border: 1px solid var(--gallery-muted);
    }

body .outlet-information__condition--NEW .badge-label {
      color: var(--positive-600);
      background-color: var(--positive-50);
    }

body .outlet-information__condition--VERY_GOOD .badge-label {
      color: var(--notice-600);
      background-color: var(--notice-50);
    }

body .outlet-information__condition--GOOD .badge-label {
      color: var(--informative-600);
      background-color: var(--informative-50);
    }

body .outlet-information__condition--HEAVY_USED .badge-label {
      color: var(--royal-purple);
      background-color: var(--lavender-mist);
    }

body .outlet-information__condition--DEFECTIVE .badge-label {
      color: var(--neutral-600);
      background-color: var(--neutral-50);
    }

body .outlets__trigger[data-hovered] .icon {
        fill: var(--primary-600);
      }

body .outlets__trigger[data-pressed] .icon {
        fill: var(--primary-700);
      }

body .outlets__trigger .icon {
      fill: var(--primary-500);
    }

body .outlets__drawer__phone-rectangle {
    background: var(--neutral-100);
  }

body .outlets__close .icon {
      fill: var(--neutral-500);
    }

body .outlets__close[data-hovered] .icon {
        fill: var(--neutral-800);
      }

body .outlets__drawer__offer-list form:not(:last-child) .outlets__drawer__offer-list__item {
        border-bottom: var(--size-px) solid var(--gallery-muted);
      }

body .outlets__drawer__offer-list__title {
    border-bottom: var(--size-px) solid var(--neutral-200);
  }

body .outlets__drawer__offer-list__item__label--NEW .badge-label {
    color: var(--positive-600);
    background-color: var(--positive-50);
  }

body .outlets__drawer__offer-list__item__label--VERY_GOOD .badge-label {
    color: var(--notice-600);
    background-color: var(--notice-50);
  }

body .outlets__drawer__offer-list__item__label--GOOD .badge-label {
    color: var(--informative-600);
    background-color: var(--informative-50);
  }

body .outlets__drawer__offer-list__item__label--HEAVY_USE .badge-label {
    color: var(--royal-purple);
    background-color: var(--lavender-mist);
  }

body .outlets__drawer__offer-list__item__label--DEFECTIVE .badge-label {
    color: var(--neutral-600);
    background-color: var(--neutral-50);
  }

body .price-information__vat-shipping {
    color: var(--neutral-500);
  }

body .price-information__vat-shipping__popover__title {
    color: var(--neutral-500);
  }

body .price-information__vat-shipping__popover__bullets {
    color: var(--neutral-500);
  }

body .price-information__shipping-cost-trigger {
    color: var(--neutral-500);
  }

body .specs-summary {
    --specs-summary-color: var(--neutral);
    --specs-summary-divider-color: var(--neutral-900);
  }

body .progress-indicator {
    --spinner-background-stroke: var(--neutral-100);
    --spinner-fill-stroke: var(--primary-DEFAULT);
    --spinner-fill-neutral-stroke: var(--neutral-950);
    --bar-background-color: var(--neutral-100);
    --bar-fill-background-color: var(--primary-DEFAULT);
    --bar-fill-neutral-background-color: var(--neutral-950);
    --bar-fill-indeterminate-background-color: var(--primary-DEFAULT);
  }

body .quick-menu {
    --item-hover-background-color: var(--primary-200);
  }

body .radio-group {
    --item-hover-label-color: var(--primary-DEFAULT);
    --item-hover-icon-wrapper-icon-fill: var(--primary-DEFAULT);
    --item-active-label-color: var(--primary-700);
    --item-active-icon-wrapper-icon-fill: var(--primary-700);
    --item-disabled-color: var(--neutral-300);
    --item-disabled-icon-wrapper-icon-fill: var(--neutral-300);
    --item-icon-wrapper-icon-selected-fill: var(--primary-DEFAULT);
  }

body .rating__icon {
    --rating-icon-fill: var(--star);
  }

body .rating__review-amount {
    --rating-review-amount-color: var(--neutral);
  }

body .search-input {
    --background-color: var(--neutral-50);
    --background-color-hover: var(--neutral-100);
    --brand-background-color: var(--primary-50);
    --brand-background-color-hover: var(--primary-100);
    --input-placeholder-color: var(--neutral-400);
    --brand-button-background-color-active: var(--primary-300);
    --button-background-color-active: var(--neutral-300);
    --disabled-icon-color: var(--neutral-400);
  }

body .legacy-search-input {
    border-color: var(--cerulean);
  }

body .legacy-search-input__button .icon {
      fill: var(--cerulean);
    }

@media (max-width: 1023px) {
    body .legacy-search-input__input {
      color: var(--cerulean);
    }

      body .legacy-search-input__input::-moz-placeholder {
        color: var(--cerulean);
      }

      body .legacy-search-input__input::placeholder {
        color: var(--cerulean);
      }
  }

@media (min-width: 1024px) {

body .offer-search-input__popover {
      border-color: var(--cerulean);
  }
    }

body .slider {
    --track-bg-background-color: var(--primary-200);
    --track-bg-disabled-background-color: var(--neutral-200);
    --track-fill-background-color: var(--primary-DEFAULT);
    --track-fill-disabled-background-color: var(--neutral-500);
    --thumb-background-color: var(--primary-DEFAULT);
    --thumb-disabled-background-color: var(--neutral-500);
    --thumb-after-background-color: var(--primary-DEFAULT);
    --output-background-color: var(--neutral-600);
  }

body .stock-status__icon--available {
    fill: var(--positive-600);
  }

body .stock-status__text--available {
    color: var(--limeade);
  }

body .stock-status__text--four_days,body .stock-status__text--seven_days,body .stock-status__text--two_weeks,body .stock-status__text--three_weeks,body .stock-status__text--four_weeks,body .stock-status__text--five_weeks,body .stock-status__text--six_weeks,body .stock-status__text--seven_weeks,body .stock-status__text--eight_weeks {
    color: var(--flamingo);
  }

body .stock-status__text--future,body .stock-status__text--preorder {
    color: var(--royal-purple);
  }

body .stock-status__text--difficult,body .stock-status__text--uncertain {
    color: var(--boulder);
  }

body .stock-status__text--unavailable {
    color: var(--negative-600);
  }

body .switch {
    --enabled-selected-background-color: var(--primary-500);
    --enabled-selected-hover-background-color: var(--primary-700);
    --enabled-selected-active-background-color: var(--primary-800);
    --enabled-hover-background-color: var(--primary-200);
    --enabled-active-background-color: var(--primary-400);
    --disabled-border-color: var(--neutral-500);
    --selected-disabled-background-color: var(--neutral-500);
    --toggle-selected-background-color: var(--primary-50);
    --toggle-disabled-background-color: var(--neutral-500);
  }

body .tabs {
    --idle-color: var(--primary-950);
    --hover-background-color: var(--primary-100);
    --active-background-color: var(--primary-200);
    --selected-color: var(--primary-DEFAULT);
    --selected-border-bottom-color: var(--primary-DEFAULT);
    --disabled-label-color: var(--neutral-500);
    --disabled-icon-fill: var(--neutral-500);
  }

body .tile {
    --border-color: var(--neutral-200);
    --hover-background-color: var(--primary-100);
    --hover-border-color: var(--primary-500);
    --active-background-color: var(--primary-200);
    --selected-background-color: var(--primary-500);
    --container-border-color: var(--neutral-200);
    --container-background-color: var(--neutral-200);
  }

body .tooltip {
    --background-color: var(--neutral-600);
  }

body .filter-color__circle-color--black,body .filter-color__circle-color--ink-black {
    background-color: var(--black);
  }

body .filter-color__circle-color--white {
    background-color: var(--white);
    border: 1px solid#7d7d7d;
  }

body .filter-color__circle-color--silver {
    background: conic-gradient(
      from 180deg at 48.5% 50%,
      #bdc4cc -46.16deg,
      #636363 130.63deg,
      #e3e5e9 133.38deg,
      #828282 311.43deg,
      #bdc4cc 313.84deg,
      #636363 490.63deg
    );
  }

body .filter-color__circle-color--gold {
    background: conic-gradient(
      from 180deg at 48.5% 50%,
      #ffea63 -46.16deg,
      #ae9100 130.63deg,
      #ffea63 133.38deg,
      #cbb119 204.46deg,
      #ae9100 311.43deg,
      #ffea63 313.84deg,
      #ae9100 490.63deg
    );
  }

body .filter-color__circle-color--blue {
    background-color: #0077b6;
  }

body .filter-color__circle-color--darkblue {
    background-color: #0a4b70;
  }

body .filter-color__circle-color--lightblue {
    background-color: #85d2ff;
  }

body .filter-color__circle-color--brown {
    background-color: #944b0f;
  }

body .filter-color__circle-color--yellow {
    background-color: #ffd500;
  }

body .filter-color__circle-color--green {
    background-color: #4c956c;
  }

body .filter-color__circle-color--darkgreen {
    background-color: #3a5a40;
  }

body .filter-color__circle-color--lightgreen {
    background-color: #deede2;
  }

body .filter-color__circle-color--grey {
    background-color: #a5a5a5;
  }

body .filter-color__circle-color--lightgrey {
    background-color: #ececec;
  }

body .filter-color__circle-color--orange {
    background-color: #fb6520;
  }

body .filter-color__circle-color--red {
    background-color: #e12f36;
  }

body .filter-color__circle-color--pink {
    background-color: #ff97b7;
  }

body .filter-color__circle-color--beige {
    background-color: #f4dfb5;
  }

body .filter-color__circle-color--copper {
    background-color: #b87333;
  }

body .filter-color__circle-color--purple {
    background-color: #6455a0;
  }

body .filter-color__circle-color--bronze {
    background-color: #e8c44f;
  }

body .filter-color__circle-color--titanium {
    background-color: #797982;
  }

body .filter-color__circle-color--transparent {
    background-color: #d6e8e8;
  }

body .filter-color__circle-color--other {
    background: conic-gradient(
      from 180deg at 48.5% 50%,
      #f22cc7 -46.16deg,
      #157702 130.63deg,
      #60e2bb 133.38deg,
      #eb1316 311.43deg,
      #f22cc7 313.84deg,
      #157702 490.63deg
    );
  }

body {
  --result-count-label-color: var(--neutral-500);

  --border-color: var(--silver);
}

body .product-grid-sorting__label {
    color: var(--neutral-700);
  }

body .offer-list-header__markdown-content {
    color: var(--neutral-900);
  }

body .offer-list-header__show-more {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      var(--white) 29.82%,
      var(--white) 100%
    );
  }

body .navigation-tree__sub-tree li {
      border-color: var(--neutral-100);
      color: var(--neutral-900);
    }

body .navigation-tree__sub-tree li .navigation-tree__link--active {
        border-color: var(--primary-DEFAULT);
        color: var(--black);
      }

body .product-grid-usp-bar__list-item {
    fill: var(--limeade);
  }

body .popover-dialog {
    background-color: var(--base-white);
    border-color: var(--neutral-100);
  }