/* colors */
.theme-kashi {
  --primary-color: #379b4b;
  --primary-hover: #368930;
  --secondary-color: #f05423;
  --secondary-hover: #f85a28;
  --tertiary-color: #379b4b;
  --accent-color-1: #fff7ec;
  --accent-color-2: #f9e7f3;
  --accent-color-3: #eaf4e2;
  --accent-color-4: #f0f9fd;
  --black: #212529;
  --text-color-kashi: #707470;
  --link-color-kashi: var(--primary-color);
  --link-hover-color-kashi: var(--primary-hover);
}

/* body */
body.theme-kashi main,
body.theme-kashi.stand-alone {
  font-family: var(--kashi-font);
  color: var(--text-color-kashi);
}

body.theme-kashi.stand-alone a:hover {
  color: var(--link-hover-color-kashi);
}

/* headings */
body.theme-kashi main h1,
body.theme-kashi main h2,
body.theme-kashi main h3,
body.theme-kashi main h4,
body.theme-kashi main h5,
body.theme-kashi main h6 {
  font-family: var(--kashi-font);
  color: var(--black); 
  font-weight: bold;
  line-height: 1;
}

body.theme-kashi.stand-alone main h1 em,
body.theme-kashi.stand-alone main h2 em,
body.theme-kashi.stand-alone main h3 em,
body.theme-kashi.stand-alone main h4 em,
body.theme-kashi.stand-alone main h5 em,
body.theme-kashi.stand-alone main h6 em {
  line-height: 1;
}

/* buttons */
.theme-kashi main a:any-link {
  color: var(--link-color-kashi);
}

.theme-kashi main a.button,
.theme-kashi main button {
  font-family: var(--kashi-font);
}

.theme-kashi main a.button.default,
.theme-kashi main button.default {
  color: var(--primary-color);
}

.theme-kashi main a.button.default:hover,
.theme-kashi main button.default:hover {
  color: var(--primary-hover);
}

.theme-kashi main a.button.primary,
.theme-kashi main button.primary,
.theme-kashi main a.button.secondary,
.theme-kashi main button.secondary {
  border: 0;
  border-radius: 0;
  box-shadow: 0.2em 0.2em 1em rgba(0 0 0 / 15%);
  transition: color 0.15s, background-color 0.15s;
}

.theme-kashi main a.button.primary,
.theme-kashi main button.primary {
  background-color: var(--secondary-color);
  color: var(--white);
}

.theme-kashi main a.button.primary:hover,
.theme-kashi main button.primary:hover,
.theme-kashi main a.button.primary:focus,
.theme-kashi main button.primary:focus {
  background-color: var(--secondary-hover);
}

.theme-kashi main a.button.secondary,
.theme-kashi main button.secondary {
  background-color: var(--primary-color);
  color: var(--white);
}

.theme-kashi main a.button.secondary:hover,
.theme-kashi main button.secondary:hover,
.theme-kashi main a.button.secondary:focus,
.theme-kashi main button.secondary:focus {
  background-color: var(--primary-hover);
}

.theme-kashi main .primary-bg-section .button.secondary,
.theme-kashi main .primary-bg-section button.secondary {
  background-color: var(--white);
  color: var(--primary-color);
}

.theme-kashi main .primary-bg-section a.button.secondary:hover,
.theme-kashi main .primary-bg-section button.secondary:hover,
.theme-kashi main .primary-bg-section a.button.secondary:focus,
.theme-kashi main .primary-bg-section button.secondary:focus {
  background-color: var(--light-light-grey);
}

/* section */
.theme-kashi main .section.tertiary-bg-section:after {
  background: linear-gradient(0deg, #eff7fa 0%, #e6f6fd 100%);
}

.theme-kashi.stand-alone main .section.primary-bg-section::after,
.theme-kashi.stand-alone main .section.secondary-bg-section::after,
.theme-kashi.stand-alone main .section.tertiary-bg-section::after,
.theme-kashi.stand-alone main .section.accent-1-bg-section::after,
.theme-kashi.stand-alone main .section.accent-2-bg-section::after,
.theme-kashi.stand-alone main .section.accent-3-bg-section::after,
.theme-kashi.stand-alone main .section.accent-4-bg-section::after {
  max-width: none;
}

.theme-kashi main .section.custom-layout {
  display: flex;
  justify-content: center;
  background-image: url('../../images/bg-products-section-left-mobile.png'), url('../../images/bg-products-section-right-mobile.png');
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  background-size: auto 41%, auto 53%;
  background-color: var(--white);
  margin-top: -5px;
}

@media (width >= 1024px) {
  .theme-kashi.stand-alone .section:not(.full-width) > div {
    max-width: 1300px;
  }

  .theme-kashi main .section.custom-layout {
    background-image: url('../../images/bg-products-section-left.png'), url('../../images/bg-products-section-right.png');
    background-position: top left, bottom right;
    min-height: 657px;
    background-size: auto;
  }
}