/* General rules */
#PcShowContent {
  /* overwrite width limit on CMS page */
  width: auto !important;
}

:root {
  /* EMO */
      /* PRIMARY */
      --no-primary-50: #E6F2ED;
      --no-primary-100: #CDE6DA;
      --no-primary-200: #9ACDB5;
      --no-primary-300: #68B491; 
      --no-primary-400: #359B6C;
      --no-primary-500: #038247; /* BRAND */
      --no-primary-600: #026135;
      --no-primary-700: #014123;

      /* SECONDARY */
      --no-secondary-50: #F1F7ED;
      --no-secondary-100: #D9EBCF;
      --no-secondary-200: #BCDBAB;
      --no-secondary-300: #A0CC87; /* BRAND */
      --no-secondary-400: #789965;
      --no-secondary-500: #506643;
      --no-secondary-600: #38472F;
      --no-secondary-600: #283322;

      /* NEUTRAL */
      --no-neutral-0: #ffffff;
      --no-neutral-100: #f6f7f9;
      --no-neutral-200: #f0f2f4;
      --no-neutral-300: #e1e3ea;
      --no-neutral-400: #c4c9d4;
      --no-neutral-500: #a6adbf;
      --no-neutral-600: #6b7894;
      --no-neutral-650: #51616F;
      --no-neutral-700: #404859;
      --no-neutral-800: #2b303b;

  /* SEMANTIC */
      /* SUCCESS */
      --no-semantic-success-300: #e1f7d4;
      --no-semantic-success-400: #c4f0a8;
      --no-semantic-success-500: #a6e87d;
      --no-semantic-success-600: #245d00;
      --no-semantic-success-700: #2a401d;

      /* WARNING */
      --no-semantic-warning-300: #fff6df;
      --no-semantic-warning-400: #ffefc8;
      --no-semantic-warning-500: #ffe49e;
      --no-semantic-warning-600: #ffb700;
      --no-semantic-warning-700: #423004;

      /* ERROR */
      --no-semantic-error-300: #ffeded;
      --no-semantic-error-400: #fdd9d9;
      --no-semantic-error-500: #f7baba;
      --no-semantic-error-600: #b20202;
      --no-semantic-error-700: #660000;

      /* INFO */
      --no-semantic-info-300: #f0f2f4;
      --no-semantic-info-400: #e1e3ea;
      --no-semantic-info-500: #a6adbf;
      --no-semantic-info-600: #6b7894;
      --no-semantic-info-700: #404859;

  /* SUPPORTING */
      /* MINT */
      --no-supporting-mint-300: #DBEDDE;
      --no-supporting-mint-700: #1E3D24;

      /* SAND */
      --no-supporting-sand-300: #F9EBAA;
      --no-supporting-sand-700: #4C4005;

      /* PURPLE */
      --no-supporting-purple-300: #EDE2FD;
      --no-supporting-purple-700: #4507A2;

      /* CERULEAN */
      --no-supporting-cerulean-300: #BFE8FF;
      --no-supporting-cerulean-700: #004166;

      /* ORANGE */
      --no-supporting-orange-300: #FFEBCC;
      --no-supporting-orange-700: #E68A00;

  /* BADGES */
      /* SELECTION */
      --no-badges-selection: #004166;

      /* SUSTAINABLE */
      --no-badges-sustainable: #1E3D24;

      /* ASSEMBLY */
      --no-badges-assembly: #4C4005;

      /* NEW */
      --no-badges-new: #4507A2;

      /* PROMOTIONS */
      --no-badges-promotions: #D8345F;

      /* OUTLET */
      --no-badges-outlet: #E68A00;
}

.no-pill-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  height: 50px;
  border-radius: 99px;
  padding: 0 24px;
  font-size: 16px;
  max-width: 200px;
  font-size: 16px;
}

.no-pill-btn-brand-primary {
  border: 1px solid var(--no-primary-500);
  background: var(--no-primary-500);
  color: var(--no-neutral-0);
}

.no-pill-btn-brand-primary:hover {
  background-color: var(--no-neutral-0);
  border: 1px solid var(--no-primary-500);
  color: var(--no-primary-500);
  transition: 0.5s;
}

.no-pill-btn-supporting-cerulean {
  border: 1px solid var(--no-supporting-purple-300);
  background: var(--no-supporting-cerulean-300);
  color: var(--no-neutral-0);
}

.no-pill-btn-supporting-cerulean:hover {
  background-color: var(--no-neutral-0);
  border: 1px solid var(--no-primary-500);
  color: var(--no-primary-500);
  transition: 0.5s;
}

.no-pill-btn-badges-promotion {
  border: 1px solid var(--no-badges-promotions);
  background-color: var(--no-badges-promotions);
  color: var(--no-neutral-0);
}

.no-pill-btn-badges-promotion:hover {
  background-color: var(--no-neutral-0);
  color: var(--no-badges-promotions);
  transition: 0.5s;
}

.no-pill-btn-neutral-dark {
  border: 1px solid var(--no-neutral-800);
  background-color: var(--no-neutral-800);
  color: var(--no-neutral-0);
}

.no-pill-btn-neutral-dark:hover {
  background-color: var(--no-neutral-0);
  color: var(--no-primary-500);
  transition: 0.5s;
}

.hb-product-card-cta {
  display: flex !important;
  align-self: center;
  justify-content: center;
  align-items: center;
  max-width: 160px;
  width: 100%;
  height: 40px;
  text-decoration: none;
  cursor: pointer;
  margin: 4px 0;
  border-radius: 99px;
  border: 1px solid var(--no-primary-500);
  background: var(--no-primary-500);
  color: var(--no-neutral-0);
}

.hb-product-card-cta:hover,
.hb-product-card-cta:focus {
  background-color: var(--no-neutral-0);
  border: 1px solid var(--no-primary-500);
  color: var(--no-primary-500);
  transition: 0.5s;
}

.hb-product-card-cta a:hover {
  color: var(--no-primary-500);
  transition: 0.5s;
}

.hb-product-card-link,
.hb-product-card-link:hover,
.hb-product-card-link:focus,
.hb-product-card-cta,
.hb-product-card-cta:hover,
.hb-product-card-cta:focus {
  text-decoration: none;
}

.hb-product-card-cta a,
.hb-product-card-cta a:hover,
.hb-product-card-cta a:focus {
  text-decoration: none;
  color: inherit;
}

.product-scroll-btn {
  text-align: center;
  max-width: 145px;
  width: 100%;
  height: 30px;
  text-decoration: none;
  cursor: pointer;
  margin: 16px auto 20px -4px;
  border-radius: 99px;
  padding: 0 14px;
  border: 1px solid var(--no-primary-500);
  background: var(--no-primary-500);
  color: var(--no-neutral-0);
}

.product-scroll-btn:hover {
  background-color: var(--no-neutral-0);
  border: 1px solid var(--no-primary-500);
  color: var(--no-primary-500);
  transition: 0.5s;
}

.radius-small {
  border-radius: 10px;
}

.radius-medium {
  border-radius: 10px;
}

.radius-large {
  border-radius: 20px;
}